Hmt 117 frontend implementation email to all participants (#182)

Co-authored-by: Anthony <[email protected]> Co-authored-by: Burton Jong <[email protected]>
Code-the-Change-YYC · Feb 11, 2025 · 4d20234 · 4d20234
1 parent 893d8e7
commit 4d20234
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 29 deletions.
diff --git a/src/app/participant/team-selection/CreateTeamPage.tsx b/src/app/participant/team-selection/CreateTeamPage.tsx
@@ -85,11 +85,11 @@ const CreateTeamPage = () => {
                     <li>
                       After forming a team, assign <b>ONE</b> member to{" "}
                       <b>&quot;Register New Team&quot;</b> using your Team Name.
-                      They will receive a unique <b>6-digit Team ID</b>{" "}
+                      They will receive a unique <b>4-digit Team ID</b>{" "}
                       following registration.
                     </li>
                     <li className={CREATE_TEAM_STEPS_STYLES}>
-                      Next, provide this <b>6-digit Team ID</b> to all team
+                      Next, provide this <b>4-digit Team ID</b> to all team
                       members.
                     </li>
                     <li className={CREATE_TEAM_STEPS_STYLES}>

diff --git a/src/components/Dashboard/EmailAllParticipants.tsx b/src/components/Dashboard/EmailAllParticipants.tsx
@@ -0,0 +1,83 @@
+import { useEffect } from "react";
+
+type Props = { closeModal: () => void };
+
+export default function EmailAllParticipants({ closeModal }: Props) {
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      const modal = document.querySelector(".modal-container");
+      if (modal && !modal.contains(e.target as Node)) {
+        closeModal();
+      }
+    };
+
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [closeModal]);
+  return (
+    <div className="flex size-full items-center justify-center">
+      <div className="modal-container max-w-2xl rounded-3xl bg-light-grey shadow-2xl">
+        <div className="flex items-center justify-between rounded-t-3xl bg-awesomer-purple p-6">
+          <h2 className="text-lg font-semibold text-white">
+            Email All Participants
+          </h2>
+          <button
+            onClick={closeModal}
+            className="text-2xl text-white hover:text-gray-300"
+          >
+            &times;
+          </button>
+        </div>
+        <form className="flex flex-col justify-center gap-6 p-6">
+          <div className="flex flex-row justify-between">
+            <div>
+              <label className="text-md font-medium text-black">From:</label>
+              <input
+                type="text"
+                value="Code The Change"
+                readOnly
+                className="rounded-md bg-gray-100 p-2 text-gray-500"
+              />
+            </div>
+            <div>
+              <label className="text-md font-medium text-black">To:</label>
+              <input
+                type="text"
+                value="All Participants"
+                readOnly
+                className="rounded-md bg-gray-100 p-2 text-gray-500"
+              />
+            </div>
+          </div>
+          <div className="flex items-center justify-center gap-4">
+            <label className="text-md relative stroke-white font-bold text-black">
+              Subject:
+            </label>
+            <input
+              type="text"
+              placeholder="Enter subject here"
+              className="w-3/4 rounded-md p-2 focus:ring-1 focus:ring-awesome-purple"
+            />
+          </div>
+          <div className="shadow-t-xl flex h-1/2 flex-col rounded-2xl bg-white shadow-lg shadow-awesomer-purple">
+            <textarea
+              rows={6}
+              placeholder="Enter your message here"
+              className="rounded-2xl p-2 focus:ring-1 focus:ring-awesome-purple"
+            />
+          </div>
+          <div className="mt-8 flex items-center justify-center font-extrabold">
+            <button
+              type="submit"
+              className="w-32 rounded-3xl bg-awesomer-purple p-2 text-white shadow-lg ring-1 ring-white transition-transform duration-200 ease-in-out hover:-translate-y-1 hover:bg-awesomer-purple/90"
+            >
+              SEND
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Dashboard/TopNavBar.tsx b/src/components/Dashboard/TopNavBar.tsx
@@ -1,22 +1,35 @@
-import { GoBell } from "react-icons/go";
-import { IoIosSearch } from "react-icons/io";
-import { IoMailOutline } from "react-icons/io5";
-import { PiUserCircleFill } from "react-icons/pi";
+"use client";
+
+import { useState } from "react";
 
 import AdminNavTitle from "@/components/Dashboard/AdminNavTitle";
 
+import EmailAllParticipants from "./EmailAllParticipants";
+
 export default function TopNavBar() {
+  const [isModalOpen, setIsModalOpen] = useState(false); // State to toggle the modal
+
+  const toggleModal = () => {
+    setIsModalOpen(!isModalOpen); // Toggle modal visibility
+  };
   return (
     <>
       <div className=" flex w-full justify-between bg-white p-4 px-8 text-4xl font-semibold">
         <AdminNavTitle />
         <div className="flex flex-row items-center gap-4">
-          <IoIosSearch />
-          <GoBell />
-          <IoMailOutline />
-          <PiUserCircleFill size={64} />
+          <button
+            onClick={toggleModal}
+            className="rounded-lg p-2 text-lg shadow-lg ring-2 ring-awesome-purple transition-transform duration-200 ease-in-out hover:-translate-y-2 hover:bg-awesome-purple hover:ring-awesomer-purple"
+          >
+            Announce To All Participants
+          </button>
         </div>
       </div>
+      {isModalOpen && (
+        <div className="fixed inset-0 z-[1000] flex size-full  bg-light-grey/40">
+          <EmailAllParticipants closeModal={toggleModal} />
+        </div>
+      )}
     </>
   );
 }
diff --git a/src/components/LandingPage/ThanksSponsors.tsx b/src/components/LandingPage/ThanksSponsors.tsx
@@ -9,7 +9,7 @@ const rightSponsorSvgSmall = "/svgs/judgingCriteria/rightSponsorSvgSmall.svg";
 
 export default async function ThankSponsors() {
   const IMAGE_CLASS =
-    "relative size-12 min-w-12 overflow-hidden rounded-full duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:transition-transform sm:size-28 sm:min-w-28";
+    "relative duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:transition-transform ";
 
   const sponsors = await fetchContent("hackathonSponsor");
   const sortedSponsors = sponsors.sort(
@@ -19,7 +19,7 @@ export default async function ThankSponsors() {
   return (
     <div className="relative flex flex-col items-center justify-center overflow-hidden pb-12 pt-10">
       <div className="flex h-48 w-full justify-center">
-        <div className="absolute -left-12 top-24 z-20  size-44 sm:hidden">
+        <div className="absolute -left-12 top-24 z-20 size-44 sm:hidden">
           <Image
             src={leftSponsorSvgSmall}
             alt="squiggly lines"
@@ -64,27 +64,50 @@ export default async function ThankSponsors() {
 
       <div className="flex w-full flex-row justify-around px-8 pt-10">
         {sortedSponsors.map((sponsor, index) => (
-          <div className="flex flex-row  gap-2 sm:gap-3" key={index}>
+          <div className="flex flex-row gap-2 sm:gap-3" key={index}>
             <div className="group flex flex-col items-center gap-3">
-              <div className={IMAGE_CLASS}>
+              <div
+                className={IMAGE_CLASS}
+                style={{
+                  maxWidth: "300px",
+                  width: "95%",
+                  height: "100%",
+                  padding: "5px",
+                  borderRadius: "20px",
+                  overflow: "hidden",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
                 <a
                   href={sponsor.fields.sponsorPage}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  <Image
-                    src={
-                      sponsor.fields.sponsorImg.fields.file?.url
-                        ?.toString()
-                        .replace("//", "https://") ?? ""
-                    }
-                    alt="Sponsor Image"
-                    style={{ objectFit: "contain" }}
-                    fill
-                  />
+                  <div
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                      borderRadius: "inherit",
+                    }}
+                  >
+                    <Image
+                      src={
+                        sponsor.fields.sponsorImg.fields.file?.url
+                          ?.toString()
+                          .replace("//", "https://") ?? ""
+                      }
+                      alt="Sponsor Image"
+                      layout="intrinsic"
+                      objectFit="contain"
+                      width={150}
+                      height={150}
+                    />
+                  </div>
                 </a>
               </div>
-              <p className="inset-0 text-center opacity-0 transition-all duration-300 group-hover:opacity-100">
+              <p className="text-center opacity-0 transition-all duration-300 group-hover:opacity-100">
                 {sponsor.fields.sponsorName}
               </p>
             </div>

diff --git a/src/components/LoginForm/PersonalFormFields.tsx b/src/components/LoginForm/PersonalFormFields.tsx
@@ -97,6 +97,18 @@ export default function PersonalFormFields({ user }: { user: AuthUser }) {
   if (isError) {
     return <div>Error, please try again later.</div>;
   }
+  if (data?.teamId && data?.completedRegistration) {
+    if (data?.role === UserType.Admin) {
+      router.push("/admin");
+      return null;
+    } else if (data?.role === UserType.Judge) {
+      router.push("/judging");
+      return null;
+    } else {
+      router.push("/participant/profile");
+      return null;
+    }
+  }
   if (data?.teamId) {
     router.push(`/register/team/${data.teamId}`);
     return null;

diff --git a/src/components/UserProfile/TeamProfile.tsx b/src/components/UserProfile/TeamProfile.tsx
@@ -89,10 +89,10 @@ const TeamProfile = () => {
                   <li>
                     3. After forming a team , assign <strong>ONE</strong> member
                     to “Register New Team” using your Team Name. They will
-                    receive a unique 6-digit Team ID following registration.
+                    receive a unique 4-digit Team ID following registration.
                   </li>
                   <li>
-                    4. Next, provide this 6-digit <strong>Team ID</strong> to
+                    4. Next, provide this 4-digit <strong>Team ID</strong> to
                     all team members.
                   </li>
                   <li>

diff --git a/src/components/teamRegistration/JoinTeamInstructions.tsx b/src/components/teamRegistration/JoinTeamInstructions.tsx
@@ -21,12 +21,12 @@ export default function JoinTeamInstructions() {
         <span className="font-bold"> ONE </span>
         member to <span className="font-bold"> “Register New Team” </span>
         using your Team Name. They will receive a unique
-        <span className="font-bold"> 6-digit Team ID </span>
+        <span className="font-bold"> 4-digit Team ID </span>
         following registration.
       </li>
       <li>
         Next, provide this
-        <span className="font-bold"> 6-digit Team ID </span>
+        <span className="font-bold"> 4-digit Team ID </span>
         to all team members.
       </li>
       <li>