Merge pull request #161 from SpaceyaTech/fix/minor-ui

fix: UI inconsistencies

.gitignore

@@ -24,6 +24,7 @@ dist-ssr
 *.sw?
 
 package-lock.json
+pnpm-lock.yaml
 
 yarn.lock
 

package.json

@@ -35,6 +35,7 @@
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.2",
     "react-hook-form": "^7.48.2",
+    "react-hot-toast": "^2.4.1",
     "react-lazy-load-image-component": "^1.6.0",
     "react-photo-album": "^2.3.0",
     "react-router-dom": "^6.11.2",

src/APP/components/Footer.jsx

@@ -1,6 +1,10 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+/* eslint-disable implicit-arrow-linebreak */
+/* eslint-disable no-confusing-arrow */
 import React from "react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link } from "react-router-dom";
+import Terms from "../../assets/documentation/terms-and-conditions.pdf";
 import {
   linkedin,
   twitter,
@@ -67,7 +71,7 @@ function Footer() {
       links: [
         { href: "https://x.com/SpaceYaTech", name: "Contact Us" },
         {
-          href: "/src/assets/documentation/terms-and-conditions.pdf",
+          href: Terms,
           name: "Terms and Conditions",
         },
       ],
@@ -135,6 +139,8 @@ function Footer() {
                     <li key={crypto.randomUUID()}>
                       <a
                         href={link.href}
+                        target="_blank"
+                        rel="noopener noreferrer"
                         className="hover:underline text-white"
                       >
                         {link.name}
@@ -149,72 +155,6 @@ function Footer() {
               </ul>
             </div>
           ))}
-          {/* <div className="flex-3 flex gap-6 justify-between">
-            <div className="flex flex-col gap-8">
-              <h2 className="text-[#00FFC3] font-bold sm:text-xl text-base leading-9">
-                Company
-              </h2>
-
-              <ul className="flex flex-col gap-5 list-none text-sm font-light">
-                <li>
-                  <Link to="/about-us">About Us</Link>
-                </li>
-                <li>
-                  <Link to="/community">Community</Link>
-                </li>
-                <li>
-                  <Link to="/products">Products</Link>
-                </li>
-                <li>
-                  <Link to="/shop">Shop</Link>
-                </li>
-              </ul>
-            </div>
-
-            <div className="flex flex-col gap-8">
-              <h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
-                Resources
-              </h2>
-
-              <ul className="flex flex-col gap-5 list-none text-sm font-light">
-
-                <li>Jobs</li>
-                <li>
-
-                  Events
-
-                </li>
-                <li>
-                  <a
-                    href="http://mentorlst.com"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Mentorship
-                  </a>
-                </li>
-
-                <li>
-                  <a href="/gallery" className="hover:underline text-white">
-                    Gallery
-                  </a>
-                </li>
-              </ul>
-            </div>
-
-            <div className="flex flex-col gap-8">
-              <h2 className="text-[#00FFC3] font-bold sm:text-xl text-lg leading-9">
-                Quick Links
-              </h2>
-
-              <ul className="flex flex-col gap-5 list-none text-sm font-light">
-                <li>Contact Us</li>
-                <li>Donate</li>
-                <li>Privacy Policy</li>
-                <li>Terms of Use</li>
-              </ul>
-            </div>
-          </div> */}
 
           {/* Newsletter */}
           <div className="flex-2">

src/APP/pages/aboutUs/sections/PartnerCTA.jsx

@@ -1,3 +1,5 @@
+import Report from "../../../../assets/documentation/spaceyatech-internship-program.pdf";
+
 function PartnerCTA() {
   return (
     <section className="pt-16 pb-10 mx-auto w-full max-w-screen-2xl">
@@ -6,7 +8,7 @@ function PartnerCTA() {
           <h3 className="font-semibold text-md sm:text-xl">Our Reports</h3>
           <p>
             <a
-              href="/src/assets/documentation/spaceyatech-internship-program.pdf"
+              href={Report}
               target="_blank"
               rel="noopener noreferrer"
               className="text-primary text-sm sm:text-base"

src/APP/pages/community/sections/JoinSYTForm.jsx

@@ -1,10 +1,10 @@
 import axios from "axios";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
+import toast from "react-hot-toast";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 
 import { sytLogoGreen } from "../../../../assets/images/icons";
-
 function JoinSYTForm({ closeModal }) {
   const [loading, setLoading] = useState(false);
   const [err, setErr] = useState("");
@@ -30,10 +30,12 @@ function JoinSYTForm({ closeModal }) {
       });
 
       setLoading(false);
+      toast.success("Welcome to SpaceYaTech Community!");
       closeModal();
     } catch (error) {
       setErr(error.response.data.detail);
       setLoading(true);
+      toast.error("Please try again!");
     }
   };
 

src/APP/pages/events/sections/EventsSection.jsx

@@ -59,7 +59,7 @@ function EventsSection() {
       {/* search events */}
       <form
         onSubmit={handleSubmit}
-        className="flex items-center border w-7/12 mb-3 rounded-xl bg-white overflow-clip"
+        className="flex items-center border sm:w-7/12 mb-3 rounded-xl bg-white overflow-clip"
       >
         <img src={search} alt="search" className="py-3 pl-6" />
         <input
@@ -88,7 +88,7 @@ function EventsSection() {
         <div className="w-full flex items-center flex-col">
           <div className="flex items-center justify-between mb-6 gap-12">
             {isSuccess && (
-              <div className="flex items-center justify-center space-x-4 w-3/4">
+              <div className="flex items-center justify-center space-x-4 w-full sm:w-3/4 mx-auto overflow-auto">
                 {uniqueCategory.map((category) => (
                   <button
                     key={category}

src/APP/pages/gallery/data.js

@@ -1,4 +1,4 @@
-import { hasWindow } from "yet-another-react-lightbox";
+// import { hasWindow } from "yet-another-react-lightbox";
 
 const breakpoints = [1080, 640, 384, 256, 128, 96, 64, 48];
 const unsplashLink = (id, width, height) =>
@@ -39,7 +39,7 @@ const photos = [
   {
     id: "ABLVV87POpzD2JQecFa8tI0LOUFNCMWfTXP_QyuF4zVqa24xyv5oLDtBggT_9YgWHjpxI8rHH7_QPmSsJltnm02sYEx7um1kP83CjdBIJQ9UoFDxyO39mRvAuryqhIPp9hgxYWFm4Op4xhFsNGIRquJAcO33",
     alt: "image",
-    width: 1440,
+    width: 1640,
     height: 1220,
     date: "15/04/2023",
     event: "DevOps Nairobi",
@@ -56,7 +56,7 @@ const photos = [
   {
     id: "ABLVV86M02jcJePIcBgC1UE1iuagaYIYK4zJR5fSuY0aW2k40f01iXjT3mT9YkqFje5YO_7dTSNJ3nFJiIU_XQ1GpS4QgR0jX1nlb4rssJSDFTmUpDgj0mEt9CGnok9_U4hR4P2gSzg5E1mo4kRAqxDzi7ac",
     alt: "image",
-    width: 1203,
+    width: 480,
     height: 260,
     date: "15/04/2023",
     event: "DevOps Nairobi",
@@ -104,7 +104,7 @@ const photos = [
   {
     id: "ABLVV86tqYk_1GD2kbTRSKzJuqPCth0Z-DoCp9c-3RurvHq4dKznep4x8IjFWoe_r2S5CALLkeQaQAhs6XtUARQR5Nf9KOz-QIwGBEIR6RD0UhousBvkK8rMnEurn9lEuFtK1zGB_kLDvSGUrX9f23H2sofG",
     alt: "image",
-    width: 1603,
+    width: 1403,
     height: 780,
     date: "15/04/2023",
     event: "DevOps Nairobi",
@@ -128,35 +128,36 @@ const photos = [
   {
     id: "ABLVV86sf8HrLwsLczItEES_GaOtE90RQKLH1HE2LmDW73Z1cfGRU8KITOVR1xfBdLtDc-wFc4C1My5-K_YVX1pXN4txOlPctMF9D3vAkK1MwBNbCdSKdwDvLNNBCDOBeiRvvKCE6-sTWVJyNKuvX3hkyyJs",
     alt: "image",
-    width: 1303,
+    width: 1003,
     height: 652,
     date: "15/04/2023",
     event: "DevOps Nairobi",
   },
   {
     id: "ABLVV85T37FaDQSvXN_A2bzscnLDsT-TPW3_YfUNOGehQug_0uAOWsBFhSh-WWnAZGRD14dGgMaWYWegNUrDoJTU2c4Qff1H0a5uswRr34OzeadOJXzkhhTouSimkGzZjppa-8MDJiAfJ76XBAOaBi9qp8Dq",
     alt: "image",
-    width: 1303,
+    width: 1003,
     height: 560,
     date: "15/04/2023",
     event: "DevOps Nairobi",
   },
   {
-    id: "ABLVV84p033km8rrlP5TTcwereWv7q53kbQQU4xUoXSCUHVGl4d_Ha71KkRJ_2vxHfSsSIOevEXnnqEnSZrHdvkV7xfQ7SMJlTJYp-t6r3AT81FUkkqfqJIJun1UKp2f1GXk-_-CyAeg7sUsstc_xYo0KOZE",
+    id: "ABLVV87y7F035CPvfDNfl0yMD4gpSa0RSJgBs8XZVu7n2TDa7NcUjJxD50r99ZBt8bHkroPuoULdpForWhVn38HwP2UIlN_bwapty-7PJ_OfRxWFq9B4z5ZMRfPMf4rzM3IhgJugsLHq_HTzyUOrBxbV63B3",
     alt: "image",
-    width: 1303,
-    height: 350,
+    width: 1640,
+    height: 780,
     date: "15/04/2023",
     event: "DevOps Nairobi",
   },
   {
-    id: "ABLVV87y7F035CPvfDNfl0yMD4gpSa0RSJgBs8XZVu7n2TDa7NcUjJxD50r99ZBt8bHkroPuoULdpForWhVn38HwP2UIlN_bwapty-7PJ_OfRxWFq9B4z5ZMRfPMf4rzM3IhgJugsLHq_HTzyUOrBxbV63B3",
+    id: "ABLVV84p033km8rrlP5TTcwereWv7q53kbQQU4xUoXSCUHVGl4d_Ha71KkRJ_2vxHfSsSIOevEXnnqEnSZrHdvkV7xfQ7SMJlTJYp-t6r3AT81FUkkqfqJIJun1UKp2f1GXk-_-CyAeg7sUsstc_xYo0KOZE",
     alt: "image",
-    width: 1640,
-    height: 780,
+    width: 703,
+    height: 350,
     date: "15/04/2023",
     event: "DevOps Nairobi",
   },
+
   {
     id: "ABLVV850WT8FXDmnhCmp6YXWodWld3P5pXh4BaDzMMOfTNH3yKOee7UsIudu71yacBXrmw_uwliPZEh6crNm7LyKdRD3-0ssLrXHSGukUS_igD2i2Ml2fEXHFW1XHiL4cxLm1LLFistqjX41fVQaEAdkFt5F",
     alt: "image",
@@ -208,8 +209,8 @@ const photos = [
   {
     id: "ABLVV84HMZUMWYDFM7Vmuo1FTXv4HoeD6WNxnjHm8LvmvG6w088Nk7aWY6IAttvQivX0aHy5WAP4Ef20e-P4ee_DF5cfVnkSFK5IQosflgtz17ETndmqPepClX3uiMDBrIqSV0r-vVBIcmAfFjtg-y9xgs59",
     alt: "image",
-    width: 1480,
-    height: 869,
+    width: 1003,
+    height: 840,
     date: "15/04/2023",
     event: "DevOps Nairobi",
   },

src/APP/pages/landingPage/sections/OurEvents.jsx

@@ -73,7 +73,8 @@ function OurEvents() {
         )}
 
         {isSuccess && (
-          <div className="py-4 flex flex-row md:flex-col gap-4 md:pr-8 overflow-x-scroll md:overflow-y-scroll h-full md:py-2 w-full md:w-1/2 scrollbar">
+          // <div className="py-4 flex flex-row md:flex-col gap-4 md:pr-8 overflow-x-scroll md:overflow-y-scroll h-full md:py-2 w-full md:w-1/2 scrollbar">
+          <div className="w-full flex flex-row md:flex-col overflow-x-auto gap-4">
             {topEvents?.count === 0 ? (
               <p className="">No events found!</p>
             ) : (
@@ -98,7 +99,7 @@ function UpcomingEventCard({ event }) {
   return (
     <Link
       to={`/events/${event.id}`}
-      className="bg-white border flex items-center flex-col md:flex-row justify-start w-full rounded-xl p-4 gap-4"
+      className="bg-white border flex items-center flex-col md:flex-row justify-start rounded-xl p-4 gap-4 min-w-[320px] w-full"
     >
       <div className="border bg-white p-1 rounded-lg w-full md:w-fit">
         <div className="flex-center flex-col bg-green-light text-green-dark aspect-video md:size-[120px] rounded-[4px] font-bold">

src/APP/pages/products2/sections/Teams.jsx

@@ -9,7 +9,6 @@ import DeveloperCard from "./DeveloperCard";
 
 import { LazyLoadImage } from "react-lazy-load-image-component";
 
-
 function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
@@ -39,7 +38,6 @@ function Teams() {
 
           <LazyLoadImage
             effect="blur"
-
             src={upleftGreen}
             alt="upleft"
             className="h-6 w-6 md:h-10 md:w-10 object-contain"

src/main.jsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { Toaster } from "react-hot-toast";
 import { RouterProvider } from "react-router-dom";
 import "./index.css";
 import { ErrorBoundary } from "./APP";
@@ -21,6 +22,7 @@ const queryClient = new QueryClient({
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <ErrorBoundary>
+      <Toaster position="top-right" reverseOrder={false} />
       <AuthContextProvider>
         <QueryClientProvider client={queryClient}>
           <SearchBlogProvider>