Skip to content

Commit 4d20234

Browse files
fisayoadabsanthonyych4nburtonjong
authored
Hmt 117 frontend implementation email to all participants (#182)
Co-authored-by: Anthony <[email protected]> Co-authored-by: Burton Jong <[email protected]>
1 parent 893d8e7 commit 4d20234

File tree

7 files changed

+160
-29
lines changed

7 files changed

+160
-29
lines changed

‎src/app/participant/team-selection/CreateTeamPage.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,11 @@ const CreateTeamPage = () => {
8585
<li>
8686
After forming a team, assign <b>ONE</b> member to{" "}
8787
<b>&quot;Register New Team&quot;</b> using your Team Name.
88-
They will receive a unique <b>6-digit Team ID</b>{" "}
88+
They will receive a unique <b>4-digit Team ID</b>{" "}
8989
following registration.
9090
</li>
9191
<li className={CREATE_TEAM_STEPS_STYLES}>
92-
Next, provide this <b>6-digit Team ID</b> to all team
92+
Next, provide this <b>4-digit Team ID</b> to all team
9393
members.
9494
</li>
9595
<li className={CREATE_TEAM_STEPS_STYLES}>

‎src/components/Dashboard/EmailAllParticipants.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { useEffect } from "react";
2+
3+
type Props = { closeModal: () => void };
4+
5+
export default function EmailAllParticipants({ closeModal }: Props) {
6+
useEffect(() => {
7+
const handleOutsideClick = (e: MouseEvent) => {
8+
const modal = document.querySelector(".modal-container");
9+
if (modal && !modal.contains(e.target as Node)) {
10+
closeModal();
11+
}
12+
};
13+
14+
document.addEventListener("mousedown", handleOutsideClick);
15+
return () => {
16+
document.removeEventListener("mousedown", handleOutsideClick);
17+
};
18+
}, [closeModal]);
19+
return (
20+
<div className="flex size-full items-center justify-center">
21+
<div className="modal-container max-w-2xl rounded-3xl bg-light-grey shadow-2xl">
22+
<div className="flex items-center justify-between rounded-t-3xl bg-awesomer-purple p-6">
23+
<h2 className="text-lg font-semibold text-white">
24+
Email All Participants
25+
</h2>
26+
<button
27+
onClick={closeModal}
28+
className="text-2xl text-white hover:text-gray-300"
29+
>
30+
&times;
31+
</button>
32+
</div>
33+
<form className="flex flex-col justify-center gap-6 p-6">
34+
<div className="flex flex-row justify-between">
35+
<div>
36+
<label className="text-md font-medium text-black">From:</label>
37+
<input
38+
type="text"
39+
value="Code The Change"
40+
readOnly
41+
className="rounded-md bg-gray-100 p-2 text-gray-500"
42+
/>
43+
</div>
44+
<div>
45+
<label className="text-md font-medium text-black">To:</label>
46+
<input
47+
type="text"
48+
value="All Participants"
49+
readOnly
50+
className="rounded-md bg-gray-100 p-2 text-gray-500"
51+
/>
52+
</div>
53+
</div>
54+
<div className="flex items-center justify-center gap-4">
55+
<label className="text-md relative stroke-white font-bold text-black">
56+
Subject:
57+
</label>
58+
<input
59+
type="text"
60+
placeholder="Enter subject here"
61+
className="w-3/4 rounded-md p-2 focus:ring-1 focus:ring-awesome-purple"
62+
/>
63+
</div>
64+
<div className="shadow-t-xl flex h-1/2 flex-col rounded-2xl bg-white shadow-lg shadow-awesomer-purple">
65+
<textarea
66+
rows={6}
67+
placeholder="Enter your message here"
68+
className="rounded-2xl p-2 focus:ring-1 focus:ring-awesome-purple"
69+
/>
70+
</div>
71+
<div className="mt-8 flex items-center justify-center font-extrabold">
72+
<button
73+
type="submit"
74+
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"
75+
>
76+
SEND
77+
</button>
78+
</div>
79+
</form>
80+
</div>
81+
</div>
82+
);
83+
}

‎src/components/Dashboard/TopNavBar.tsx

+21-8
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,35 @@
1-
import { GoBell } from "react-icons/go";
2-
import { IoIosSearch } from "react-icons/io";
3-
import { IoMailOutline } from "react-icons/io5";
4-
import { PiUserCircleFill } from "react-icons/pi";
1+
"use client";
2+
3+
import { useState } from "react";
54

65
import AdminNavTitle from "@/components/Dashboard/AdminNavTitle";
76

7+
import EmailAllParticipants from "./EmailAllParticipants";
8+
89
export default function TopNavBar() {
10+
const [isModalOpen, setIsModalOpen] = useState(false); // State to toggle the modal
11+
12+
const toggleModal = () => {
13+
setIsModalOpen(!isModalOpen); // Toggle modal visibility
14+
};
915
return (
1016
<>
1117
<div className=" flex w-full justify-between bg-white p-4 px-8 text-4xl font-semibold">
1218
<AdminNavTitle />
1319
<div className="flex flex-row items-center gap-4">
14-
<IoIosSearch />
15-
<GoBell />
16-
<IoMailOutline />
17-
<PiUserCircleFill size={64} />
20+
<button
21+
onClick={toggleModal}
22+
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"
23+
>
24+
Announce To All Participants
25+
</button>
1826
</div>
1927
</div>
28+
{isModalOpen && (
29+
<div className="fixed inset-0 z-[1000] flex size-full bg-light-grey/40">
30+
<EmailAllParticipants closeModal={toggleModal} />
31+
</div>
32+
)}
2033
</>
2134
);
2235
}

‎src/components/LandingPage/ThanksSponsors.tsx

+38-15
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const rightSponsorSvgSmall = "/svgs/judgingCriteria/rightSponsorSvgSmall.svg";
99

1010
export default async function ThankSponsors() {
1111
const IMAGE_CLASS =
12-
"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";
12+
"relative duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:transition-transform ";
1313

1414
const sponsors = await fetchContent("hackathonSponsor");
1515
const sortedSponsors = sponsors.sort(
@@ -19,7 +19,7 @@ export default async function ThankSponsors() {
1919
return (
2020
<div className="relative flex flex-col items-center justify-center overflow-hidden pb-12 pt-10">
2121
<div className="flex h-48 w-full justify-center">
22-
<div className="absolute -left-12 top-24 z-20 size-44 sm:hidden">
22+
<div className="absolute -left-12 top-24 z-20 size-44 sm:hidden">
2323
<Image
2424
src={leftSponsorSvgSmall}
2525
alt="squiggly lines"
@@ -64,27 +64,50 @@ export default async function ThankSponsors() {
6464

6565
<div className="flex w-full flex-row justify-around px-8 pt-10">
6666
{sortedSponsors.map((sponsor, index) => (
67-
<div className="flex flex-row gap-2 sm:gap-3" key={index}>
67+
<div className="flex flex-row gap-2 sm:gap-3" key={index}>
6868
<div className="group flex flex-col items-center gap-3">
69-
<div className={IMAGE_CLASS}>
69+
<div
70+
className={IMAGE_CLASS}
71+
style={{
72+
maxWidth: "300px",
73+
width: "95%",
74+
height: "100%",
75+
padding: "5px",
76+
borderRadius: "20px",
77+
overflow: "hidden",
78+
display: "flex",
79+
justifyContent: "center",
80+
alignItems: "center",
81+
}}
82+
>
7083
<a
7184
href={sponsor.fields.sponsorPage}
7285
target="_blank"
7386
rel="noopener noreferrer"
7487
>
75-
<Image
76-
src={
77-
sponsor.fields.sponsorImg.fields.file?.url
78-
?.toString()
79-
.replace("//", "https://") ?? ""
80-
}
81-
alt="Sponsor Image"
82-
style={{ objectFit: "contain" }}
83-
fill
84-
/>
88+
<div
89+
style={{
90+
width: "100%",
91+
height: "100%",
92+
borderRadius: "inherit",
93+
}}
94+
>
95+
<Image
96+
src={
97+
sponsor.fields.sponsorImg.fields.file?.url
98+
?.toString()
99+
.replace("//", "https://") ?? ""
100+
}
101+
alt="Sponsor Image"
102+
layout="intrinsic"
103+
objectFit="contain"
104+
width={150}
105+
height={150}
106+
/>
107+
</div>
85108
</a>
86109
</div>
87-
<p className="inset-0 text-center opacity-0 transition-all duration-300 group-hover:opacity-100">
110+
<p className="text-center opacity-0 transition-all duration-300 group-hover:opacity-100">
88111
{sponsor.fields.sponsorName}
89112
</p>
90113
</div>

‎src/components/LoginForm/PersonalFormFields.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,18 @@ export default function PersonalFormFields({ user }: { user: AuthUser }) {
9797
if (isError) {
9898
return <div>Error, please try again later.</div>;
9999
}
100+
if (data?.teamId && data?.completedRegistration) {
101+
if (data?.role === UserType.Admin) {
102+
router.push("/admin");
103+
return null;
104+
} else if (data?.role === UserType.Judge) {
105+
router.push("/judging");
106+
return null;
107+
} else {
108+
router.push("/participant/profile");
109+
return null;
110+
}
111+
}
100112
if (data?.teamId) {
101113
router.push(`/register/team/${data.teamId}`);
102114
return null;

‎src/components/UserProfile/TeamProfile.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,10 @@ const TeamProfile = () => {
8989
<li>
9090
3. After forming a team , assign <strong>ONE</strong> member
9191
to “Register New Team” using your Team Name. They will
92-
receive a unique 6-digit Team ID following registration.
92+
receive a unique 4-digit Team ID following registration.
9393
</li>
9494
<li>
95-
4. Next, provide this 6-digit <strong>Team ID</strong> to
95+
4. Next, provide this 4-digit <strong>Team ID</strong> to
9696
all team members.
9797
</li>
9898
<li>

‎src/components/teamRegistration/JoinTeamInstructions.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ export default function JoinTeamInstructions() {
2121
<span className="font-bold"> ONE </span>
2222
member to <span className="font-bold"> “Register New Team” </span>
2323
using your Team Name. They will receive a unique
24-
<span className="font-bold"> 6-digit Team ID </span>
24+
<span className="font-bold"> 4-digit Team ID </span>
2525
following registration.
2626
</li>
2727
<li>
2828
Next, provide this
29-
<span className="font-bold"> 6-digit Team ID </span>
29+
<span className="font-bold"> 4-digit Team ID </span>
3030
to all team members.
3131
</li>
3232
<li>

0 commit comments

Comments
 (0)