diff --git a/apps/dashboard/components/hacker-portal/confirmed-placeholder.tsx b/apps/dashboard/components/hacker-portal/confirmed-placeholder.tsx index 426d9dc3..721b6854 100644 --- a/apps/dashboard/components/hacker-portal/confirmed-placeholder.tsx +++ b/apps/dashboard/components/hacker-portal/confirmed-placeholder.tsx @@ -6,40 +6,36 @@ import { useEffect, useState } from 'react'; import styled from 'styled-components'; import { getEnv } from '@hibiscus/env'; import { Button } from '@hibiscus/ui-kit-2023'; +import HackSCGuy from '../svg/hacksc-guy'; export const ConfirmedPlaceholder = () => { - const [discordToken, setDiscordToken] = useState(null); + // const [discordToken, setDiscordToken] = useState(null); const { user } = useHibiscusUser(); const discordInvite = getEnv().Hibiscus.Discord.InviteUrl; - useEffect(() => { - const fetchData = async () => { - if (user != null) { - try { - const token = await axios.get(`/api/discord/${user.id}`); - setDiscordToken(token.data.token); - } catch { - setDiscordToken('ERROR'); - } - } - }; + // useEffect(() => { + // const fetchData = async () => { + // if (user != null) { + // try { + // const token = await axios.get(`/api/discord/${user.id}`); + // setDiscordToken(token.data.token); + // } catch { + // setDiscordToken('ERROR'); + // } + // } + // }; - fetchData(); - }, [user]); + // fetchData(); + // }, [user]); return ( - Airplane postcard illustration -

You have confirmed your spot for HackSC X!

-

We look forward to seeing you ๐ŸŒบ

+ + You have confirmed your spot for SoCal Tech Week! + We look forward to seeing you ๐ŸŒบ
-

+ {/* If you haven't already, please complete and sign the{' '} { HackSC waiver {' '} as soon as possible! -

-
-

- If you haven't already, join our official HackSC X Discord server - at{' '} + +
*/} + + If you haven't already, join our official SoCal Tech Week Discord + server at{' '} { > discord.gg/{discordInvite} {' '} - and verify your account by following the provided instructions! -

-

+ + {/*

Your Discord verification token is{' '} {discordToken ? discordToken : '...Loading...'} -

+ */}
-

Review the Hacker Welcome Packet below!

+ Review the Hacker Welcome Packet below! - + ); @@ -94,3 +89,53 @@ export const ConfirmedPlaceholder = () => { export default ConfirmedPlaceholder; const Container = styled.div``; + +const Heading = styled.h1` + font-family: Inter; + font-size: 40px; + font-weight: 500; + letter-spacing: -0.05em; + text-align: left; + color: #ff6347; + margin: 0 0 1rem 0; +`; + +const TextBody = styled.p` + font-family: Inter; + font-size: 25px; + font-weight: 400; + line-height: 30.26px; + color: #ffb1a3; +`; + +const RedButton = styled.button` + padding: 12px 40px 12px 40px; + border-radius: 8px; + border: 1px solid black; + + width: fit-content; + height: 45px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + background: #ffb1a3; + //fonts + font-family: Inter; + font-style: normal; + font-weight: 500; + font-size: 13px; + line-height: 36px; + text-align: center; + color: black; + :hover { + background: #ffded9; + box-shadow: 0px 0px 5px rgba(239, 118, 118, 0.5); + cursor: pointer; + transition: 0.1s; + } + :active { + background: #ffb1a3; + } +`; diff --git a/apps/dashboard/components/hacker-portal/congrats-message.tsx b/apps/dashboard/components/hacker-portal/congrats-message.tsx index 4e821ba4..15c045da 100644 --- a/apps/dashboard/components/hacker-portal/congrats-message.tsx +++ b/apps/dashboard/components/hacker-portal/congrats-message.tsx @@ -2,33 +2,37 @@ import Image from 'next/image'; import { H3, Text, Link } from '@hibiscus/ui'; import { GlowSpan } from '@hibiscus/ui-kit-2023'; import { Colors2023 } from '@hibiscus/styles'; +import HackSCGuy from '../svg/hacksc-guy'; +import styled from 'styled-components'; +import { Colors } from '@hacksc/sctw-ui-kit'; export const CongratsMessage = () => { return ( -
- Heart character -

Congratulations on being accepted to HackSC X!

- +
+ + Congratulations on being accepted to SoCal Tech Week! + We are so excited to welcome you to our event this year, and hope that you will be able to attend. Itโ€™s going to be an amazing weekend with plenty of workshops, speakers, games, and of course, project building! - - + + Please complete this RSVP form{' '} - + within 4 days of your acceptance notification - {' '} - to secure your spot at HackSC X. By submitting, you are committing to - attending the event. If you do not submit this form by the posted - deadline, your spot will be given to another hacker. - - + {' '} + to secure your spot at SoCal Tech Week. By submitting, you are + committing to attending the event. If you do not submit this form by the + posted deadline, your spot will be given to another hacker. + + We kindly remind you that no-shows after RSVPing mean that you are taking someone elseโ€™s opportunity to attend this event. If you are no longer able to attend the event after RSVPing, please email{' '} @@ -37,18 +41,30 @@ export const CongratsMessage = () => { passHref underline anchortagpropsoverride={{ - style: { color: Colors2023.BLUE.STANDARD }, + style: { color: '#ff6347' }, }} > team@hacksc.com {' '} at least 12 hours prior to the start of the event. - - + + HackSC is committed to providing participants with the best experience possible. If thereโ€™s anything we can do to improve your time at our event, please let us know! - +
); }; + +const Heading3 = styled(H3)` + color: #ff6347; +`; + +const TextBody = styled.p` + font-family: Inter; + font-size: 25px; + font-weight: 400; + line-height: 30.26px; + color: #ffb1a3; +`; diff --git a/apps/dashboard/components/hacker-portal/declined-placeholder.tsx b/apps/dashboard/components/hacker-portal/declined-placeholder.tsx index dc226050..8bd7b142 100644 --- a/apps/dashboard/components/hacker-portal/declined-placeholder.tsx +++ b/apps/dashboard/components/hacker-portal/declined-placeholder.tsx @@ -1,27 +1,23 @@ import { H1, H3, Link } from '@hibiscus/ui'; import Image from 'next/image'; import styled from 'styled-components'; +import HackSCGuy from '../svg/hacksc-guy'; export const DeclinedPlaceholder = () => { return ( - Airplane postcard illustration -

You have declined your spot for HackSC X

-

+ + You have declined your spot for SoCal Tech Week + Bummer ๐Ÿ˜ž Welp, there{"'"}s always another chance to build something cool ๐Ÿ˜„ Make sure to stay up to date with HackSC through our{' '} social media {' '} for other upcoming events! -

+
-

We look forward to seeing you again ๐ŸŒบ

+ We look forward to seeing you again ๐ŸŒบ ); }; @@ -29,3 +25,21 @@ export const DeclinedPlaceholder = () => { export default DeclinedPlaceholder; const Container = styled.div``; + +const Heading = styled.h1` + font-family: Inter; + font-size: 40px; + font-weight: 500; + letter-spacing: -0.05em; + text-align: left; + color: #ff6347; + margin: 0 0 1rem 0; +`; + +const TextBody = styled.p` + font-family: Inter; + font-size: 25px; + font-weight: 400; + line-height: 30.26px; + color: #ffb1a3; +`; diff --git a/apps/dashboard/components/hacker-portal/hacker-portal.tsx b/apps/dashboard/components/hacker-portal/hacker-portal.tsx index bac15ae5..9acce77b 100644 --- a/apps/dashboard/components/hacker-portal/hacker-portal.tsx +++ b/apps/dashboard/components/hacker-portal/hacker-portal.tsx @@ -239,7 +239,50 @@ export function HackerPortal({ isEventOpen, appsOpen }: HackerPortalProps) { // // ); - const { user } = useHibiscusUser(); + const [modalOpen, setModalOpen] = useState(false); + const { user, updateUser } = useHibiscusUser(); + const closeModal = () => setModalOpen(false); + const [choice, setChoice] = useState(null); + const { supabase: hbc } = useHibiscusSupabase(); + const client = hbc.getClient(); + + const DeclineSpotContent = () => ( + +
+

Are you sure?

+ + Once submitted, you confirm that you will not be able to join SoCal + Tech Week. This action is irreversible. + +
+
+ { + e.stopPropagation(); + setModalOpen(false); + await client + .from('user_profiles') + .update({ attendance_confirmed: false }) + .eq('user_id', user.id); + updateUser({ attendanceConfirmed: false }); + }} + > + CONFIRM + +
+ + ); if (user === null) { return ( @@ -280,17 +323,76 @@ export function HackerPortal({ isEventOpen, appsOpen }: HackerPortalProps) { ); } - return ( - - - - Your application has been submitted! Our team is currently reviewing - applications and will be sending out the acceptances in phases after - the application period closes. - - - - ); + if (user.applicationStatus == ApplicationStatus.IN_REVIEW) { + return ( + + + + + Your application has been submitted! Our team is currently reviewing + applications and will be sending out the acceptances in phases after + the application period closes. + + + + ); + } + + if ( + user.applicationStatus == ApplicationStatus.ADMITTED && + user.attendanceConfirmed == null + ) { + return ( + + + +
+ { + setChoice('DECLINE'); + setModalOpen(true); + }} + > + DECLINE YOUR SPOT + + { + setChoice('ACCEPT'); + setModalOpen(true); + }} + > + CONFIRM YOUR SPOT + +
+ + + + {choice === 'ACCEPT' && } + {choice === 'DECLINE' && } + + + ); + } + + if (user.attendanceConfirmed === true) { + return ( + + + + + + ); + } + + if (user.attendanceConfirmed === false) { + return ( + + + + + + ); + } } export default HackerPortal; @@ -361,7 +463,39 @@ const RedButton = styled.button` transition: 0.1s; } :active { - background: #ff6347; + background: #ffb1a3; + } +`; + +const GreenButton = styled.button` + padding: 12px 40px 12px 40px; + border-radius: 8px; + border: 1px solid black; + + width: fit-content; + height: 45px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + background: #ddfc75; + //fonts + font-family: Inter; + font-style: normal; + font-weight: 500; + font-size: 13px; + line-height: 36px; + text-align: center; + color: black; + :hover { + background: #e5fdc7; + box-shadow: 0px 0px 5px rgba(239, 118, 118, 0.5); + cursor: pointer; + transition: 0.1s; + } + :active { + background: #ddfc75; } `; diff --git a/apps/dashboard/components/rsvp-form/rsvp-form.tsx b/apps/dashboard/components/rsvp-form/rsvp-form.tsx index 2b8139af..245ec783 100644 --- a/apps/dashboard/components/rsvp-form/rsvp-form.tsx +++ b/apps/dashboard/components/rsvp-form/rsvp-form.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; -import { H2, Text } from '@hibiscus/ui'; +import { H2, H3, Text } from '@hibiscus/ui'; import { GrayBox } from '../gray-box/gray-box'; import { Button, Checkbox, DatePicker } from '@hibiscus/ui-kit-2023'; import { useFormik } from 'formik'; @@ -21,33 +21,33 @@ interface Props { } function RSVPForm({ closeModal }: Props) { - const [discordToken, setDiscordToken] = useState(null); + // const [discordToken, setDiscordToken] = useState(null); const { user, updateUser } = useHibiscusUser(); const { supabase } = useHibiscusSupabase(); const discordInvite = getEnv().Hibiscus.Discord.InviteUrl; - useEffect(() => { - const fetchData = async () => { - if (user != null) { - try { - const token = await axios.get(`/api/discord/${user.id}`); - setDiscordToken(token.data.token); - } catch { - setDiscordToken('ERROR'); - } - } - }; + // useEffect(() => { + // const fetchData = async () => { + // if (user != null) { + // try { + // const token = await axios.get(`/api/discord/${user.id}`); + // setDiscordToken(token.data.token); + // } catch { + // setDiscordToken('ERROR'); + // } + // } + // }; - fetchData(); - }, [user]); + // fetchData(); + // }, [user]); const formik = useFormik({ initialValues: { dob: '', acknowledgementInPerson: false, acknowledgementDiscord: false, - acknowledgementWaiver: false, + // acknowledgementWaiver: false, acknowledgementPacket: false, }, @@ -68,9 +68,9 @@ function RSVPForm({ closeModal }: Props) { .isTrue('This field is required') .required('This field is required'), - acknowledgementWaiver: Yup.boolean() - .isTrue('This field is required') - .required('This field is required'), + // acknowledgementWaiver: Yup.boolean() + // .isTrue('This field is required') + // .required('This field is required'), acknowledgementPacket: Yup.boolean() .isTrue('This field is required') @@ -92,7 +92,7 @@ function RSVPForm({ closeModal }: Props) { throw error; } updateUser({ attendanceConfirmed: true }); - toast.success('Confirmation received! Welcome to HackSC X ๐ŸŒบ', { + toast.success('Confirmation received! Welcome to SoCal Tech Week ๐ŸŒบ', { icon: '๐ŸŽ‰', }); formikHelpers.setSubmitting(false); @@ -110,17 +110,17 @@ function RSVPForm({ closeModal }: Props) { {discordInvite ? ( <> -

Please confirm some details

+ Please confirm some details - { formik.setFieldValue('acknowledgementInPerson', newVal); }} label={ - - By RSVPing, I confirm that I will be attending HackSC X - in-person. Below are the opening and closing ceremony times: + + By RSVPing, I confirm that I will be attending SoCal Tech + Week in-person. Below are the opening and closing ceremony + times: * - + } /> {formik.touched.acknowledgementInPerson && @@ -156,25 +158,30 @@ function RSVPForm({ closeModal }: Props) {
- + Opening Ceremony: - Sat, Nov 4 @ 1:00pm - MG Studio - - + + Sat, Nov 9 @ 12:00pm - RTCC Trojan Grand Ballroom + + + Closing Ceremony: - Sun, Nov 5 @ 4:00pm - MG Studio - + + Sun, Nov 10 @ 4:30pm - RTCC Trojan Grand Ballroom + +
{ formik.setFieldValue('acknowledgementDiscord', newVal); }} label={ - + I confirm that I have joined the official Discord server for - HackSC X at{' '} + SoCal Tech Week at{' '} discord.gg/{discordInvite} - {' '} - and verified my account + * - + } /> - + {/* Your Discord verification token is{' '} {discordToken ? discordToken : '...Loading...'} - + */} {formik.touched.acknowledgementDiscord && ( {formik.errors.acknowledgementDiscord} )} - + {/* { formik.setFieldValue('acknowledgementWaiver', newVal); }} label={ - + I confirm that I have completed and signed the{' '} * - + } /> {formik.touched.acknowledgementWaiver && ( {formik.errors.acknowledgementWaiver} )} - + */} { formik.setFieldValue('acknowledgementPacket', newVal); }} label={ - + I confirm that I have read the{' '} * - + } /> @@ -258,8 +266,7 @@ function RSVPForm({ closeModal }: Props) { )} - + ) : ( -

Loading...

+ Loading... )} @@ -289,6 +296,11 @@ const OwnGrayBox = styled(GrayBox)` align-items: center; gap: 20px; padding: 30px; + background: white; + border-color: #ffb1a3; + + // -ms-overflow-style: none; + // scrollbar-width: none; `; const QuestionWrap = styled.div` @@ -297,3 +309,54 @@ const QuestionWrap = styled.div` align-items: center; gap: 10px; `; + +const Heading3 = styled(H3)` + color: #ff6347; +`; + +const TextBody = styled.p` + font-family: Inter; + font-size: 16px; + font-weight: 400; + text-align: center; + color: #ff6347; + margin: 0; +`; + +const RedButton = styled.button` + padding: 12px 40px 12px 40px; + border-radius: 8px; + border: 1px solid black; + + width: fit-content; + height: 45px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 10px; + background: #ffb1a3; + //fonts + font-family: Inter; + font-style: normal; + font-weight: 500; + font-size: 13px; + line-height: 36px; + text-align: center; + color: black; + :hover { + background: #ffded9; + box-shadow: 0px 0px 5px rgba(239, 118, 118, 0.5); + cursor: pointer; + transition: 0.1s; + } + :active { + background: #ffb1a3; + } +`; + +const DatePickerOwn = styled(DatePicker)` + color: #ff6347; + background: white; + border-color: #ff6347; +`; diff --git a/apps/dashboard/tsconfig.json b/apps/dashboard/tsconfig.json index 64d2f921..c03f05f4 100644 --- a/apps/dashboard/tsconfig.json +++ b/apps/dashboard/tsconfig.json @@ -11,10 +11,7 @@ "resolveJsonModule": true, "isolatedModules": true, "incremental": true, - "types": ["jest", "node"], - "paths": { - "@/*": ["./*"] - } + "types": ["jest", "node"] }, "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"], "exclude": [ diff --git a/libs/ui-kit-2023/src/lib/checkbox/checkbox.tsx b/libs/ui-kit-2023/src/lib/checkbox/checkbox.tsx index 64f307d9..0f922369 100644 --- a/libs/ui-kit-2023/src/lib/checkbox/checkbox.tsx +++ b/libs/ui-kit-2023/src/lib/checkbox/checkbox.tsx @@ -25,6 +25,21 @@ export function Checkbox({ } onInput(ref.current.checked); } + if (color === 'red') { + return ( + + {label} + + + + ); + } if (color === 'yellow') { return ( @@ -54,6 +69,90 @@ export function Checkbox({ ); } + +const StyledRedCheckbox = styled.label` + color: white; + display: block; + position: relative; + padding-left: 35px; + margin-bottom: 12px; + cursor: pointer; + font-size: 22px; + font-family: 'Inter'; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; + } + .checkmark { + position: absolute; + top: 0; + left: 0; + height: 25px; + width: 25px; + background-color: white; + border: 1px solid #ff6347; + border-radius: 5px; + } + + :hover input ~ .checkmark { + /* background-color: #ccc; */ + filter: drop-shadow(0px 0px 15px #ffded9); + } + input:checked ~ .checkmark { + background-color: #ffded9; + } + + .checkmark:after { + content: ''; + position: absolute; + display: none; + } + input:checked ~ .checkmark:after { + display: block; + } + + .checkmark:after { + left: 9px; + top: 5px; + width: 5px; + height: 10px; + border: solid #ae8c1d; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } + + input:disabled ~ .checkmark { + background-color: #7a7a7a; + } + + input:disabled ~ .checkmark:after { + left: 9px; + top: 5px; + width: 5px; + height: 10px; + border: solid #585858; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } + + :hover input:disabled ~ .checkmark { + /* background-color: #ccc; */ + filter: none; + cursor: not-allowed; + } +`; + const StyledYellowCheckbox = styled.label` color: white; display: block;