diff --git a/src/app/pages/Designathons/Designathon24/components/Schedule/Schedule.module.scss b/src/app/pages/Designathons/Designathon24/components/Schedule/Schedule.module.scss index 31da0a63..9cbd03c6 100644 --- a/src/app/pages/Designathons/Designathon24/components/Schedule/Schedule.module.scss +++ b/src/app/pages/Designathons/Designathon24/components/Schedule/Schedule.module.scss @@ -166,6 +166,7 @@ background-color: #ffdce4; font-size: 1.5rem; color: var(--des24-peach); + cursor: pointer; } .friday { @@ -188,3 +189,41 @@ color: #ffdce4; } } + +.zoomButton { + font-size: 1.25rem; + padding: 12px 24px; + border-radius: 999px; + border: 0; + background-color: var(--des24-hot-pink); + color: var(--des24-cream); + transition: 150ms; + width: fit-content; + margin-top: 40px; + position: relative; + + & > p { + white-space: nowrap; + font-weight: bold; + } + + &.beforeDate { + cursor: initial; + background-color: transparent; + border: 2px dotted var(--des24-cream); + } + + &.afterDate { + background-color: var(--des24-hot-pink); + cursor: pointer; + + &:hover { + color: var(--des24-cream); + opacity: 80%; + } + + & > p { + cursor: pointer; + } + } +} diff --git a/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx b/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx index bb9925a7..0b4b594c 100644 --- a/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx +++ b/src/app/pages/Designathons/Designathon24/components/Schedule/index.jsx @@ -1,4 +1,5 @@ -import React, { useState } from "react"; +import React, { useEffect, useState, useMemo, useCallback } from "react"; + import { Section } from "app/Symbols"; import clsx from "clsx"; import cn from "./Schedule.module.scss"; @@ -63,12 +64,16 @@ const FridaySchedule = () => {

Join us for True to You's Opening Ceremony!

-

Led by co-directors Jasmine Wu, Jay Sotelo, and Elise Alinsug.

+ +
@@ -111,9 +116,10 @@ const FridaySchedule = () => { functionalities, and workflow, empowering you to create stunning designs with ease!

-

Hosted by Commit the Change

+ +
9:00 PM | Venue Closes
@@ -144,11 +150,12 @@ const FridaySchedule = () => { his authentic creative self, and got to where he is today.

-

Hosted by Naheel Jawaid (Product Designer @ Google)

+ + ); @@ -224,9 +231,10 @@ const SaturdaySchedule = () => { for the first time, this workshop will empower you on your Design-a-thon journey!

-

Hosted by Wenting Zhu

+ +
@@ -348,11 +356,12 @@ const SaturdaySchedule = () => { animations, to help you get hands on with your designs and bring them to the next level.

-

Hosted by Video Game Design Club (VGDC)

+ +
@@ -400,12 +409,13 @@ const SaturdaySchedule = () => { differences by looking at case studies of real world examples.

-

Hosted by Gresshaa Mehta (Senior Product Designer @ Microsoft)

+ +
9:00 PM | Venue Closes
@@ -531,6 +541,8 @@ const SundaySchedule = () => { 3 teams!

+ +
@@ -566,12 +578,16 @@ const SundaySchedule = () => { The final Closing Ceremony of True to You! Final winners will be announced, alongside in-person awards!

-

Led by Design at UCI's Design-a-thon Directors, Jay Sotelo, Jasmine Wu, & Elise Alinsug

+ +
6:00 PM | Design-a-thon Ends
@@ -640,6 +656,53 @@ const DateToggle = ({ handleSelect, defaultDay }) => { ); }; +const ZoomButton = ({ date, eventType }) => { + const [isUpcoming, setIsUpcoming] = useState(date > new Date()); + + const handleClick = useCallback(() => { + if (!isUpcoming) { + window.open( + eventType === "ceremony" + ? "https://uci.zoom.us/j/92344530635" + : "https://uci.zoom.us/j/94772751120", + "_blank", + ); + } + }, [eventType, isUpcoming]); + + useEffect(() => { + const interval = setInterval(() => { + setIsUpcoming(date > new Date()); + }, 1000); + + return () => clearInterval(interval); + }, [date]); + + const buttonClassName = useMemo(() => { + return clsx(cn.zoomButton, isUpcoming ? cn.beforeDate : cn.afterDate); + }, [isUpcoming]); + + const buttonText = useMemo(() => { + return isUpcoming ? "Zoom Link Posted Soon" : "Join Zoom"; + }, [isUpcoming]); + + const ariaLabel = useMemo(() => { + return isUpcoming + ? "Zoom link will be posted soon" + : "Join Zoom meeting in a new tab"; + }, [isUpcoming]); + + return ( + + ); +}; + function Schedule() { const defaultDay = calculateDefaultDay(); const [selectedDay, setSelectedDay] = useState(defaultDay);