From 6900088cd32b7b6d9f435ee2fea755cf7af2cad5 Mon Sep 17 00:00:00 2001 From: eyang2008 <114440480+eyang2008@users.noreply.github.com> Date: Fri, 29 Nov 2024 20:51:58 -0800 Subject: [PATCH 1/2] update schedule and sizing --- src/components/Schedule.tsx | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx index 6ed8bf2..3c88d44 100644 --- a/src/components/Schedule.tsx +++ b/src/components/Schedule.tsx @@ -10,23 +10,24 @@ function createData( } const rows = [ - createData('00:00', 'Event'), - createData('00:00', 'Event'), - createData('00:00', 'Event'), - createData('00:00', 'Event'), - createData('00:00', 'Event'), - createData('00:00', 'Event'), - createData('00:00', 'Event'), - createData('00:00', 'Event'), - createData('00:00', 'Event'), - createData('00:00', 'Event'), - createData('00:00', 'Event'), - createData('00:00', 'Event'), + createData('8:00 AM', 'Opening Ceremony'), + createData('8:30 AM', 'Start Hacking'), + createData('9:00 AM', 'Capture the Flag Starts'), + createData('10:30 AM', 'Workshop'), + createData('11:30 AM', 'Lunch (provided by MVHacks)'), + createData('1:00 PM', 'Company Presentation'), + createData('2:00 PM', 'Guess the Image Game'), + createData('3:00 PM', 'Developing Websites With React Workshop'), + createData('4:30 PM', 'Geoguessr Multiplayer Live Game'), + createData('5:30 PM', 'Cup Stacking'), + createData('7:00 PM', 'Submissions'), + createData('7:15 PM', 'Voting and Judging'), + createData('8:00 PM', 'Closing Ceremony'), ]; export default function Faqs() { return ( - <div style= {{padding: '22%'}}> + <div style= {{padding: '15%'}}> <Typography level='h2' sx={{ color: '#ffffff', @@ -40,15 +41,16 @@ export default function Faqs() { </Typography> <Table hoverRow sx={{ + width: {xs: '100%', sm: '90%', md: '80%', lg: '70%', xl: '60%'}, + margin: '0 auto', backgroundColor: '#221a46', color: 'white !important', border: '6px solid #c6add4', borderRadius: '16px', overflow: 'hidden', '& td': { - padding: '12px 16px', - fontSize: '1.1rem', - wordWrap: 'break-word', + padding: { xs: '8px 10px', sm: '12px 16px' }, + fontSize: { xs: '0.8rem', sm: '1.1rem' }, whiteSpace: 'normal', }, '& tr': { @@ -68,6 +70,7 @@ export default function Faqs() { <Typography sx={{ textAlign: "right", + fontWeight: ['Opening Ceremony', 'Workshop', 'Company Presentation', 'Developing Websites With React Workshop', 'Closing Ceremony'].includes(row.event) ? 'bold' : 'normal', }} > {row.event} From 8837f827c57bd3a40e19bd05d383043b5a67a400 Mon Sep 17 00:00:00 2001 From: emilym <emily.markova@gmail.com> Date: Sat, 30 Nov 2024 16:25:14 -0800 Subject: [PATCH 2/2] Fix styling for schedule + add info to faq --- src/components/Faqs.tsx | 407 +++++++++++++++++++----------------- src/components/Schedule.tsx | 188 ++++++++++------- 2 files changed, 323 insertions(+), 272 deletions(-) diff --git a/src/components/Faqs.tsx b/src/components/Faqs.tsx index 0487e8f..9763665 100644 --- a/src/components/Faqs.tsx +++ b/src/components/Faqs.tsx @@ -1,200 +1,217 @@ import React from "react"; -import Accordion from '@mui/joy/Accordion'; -import AccordionDetails from '@mui/joy/AccordionDetails'; -import AccordionGroup from '@mui/joy/AccordionGroup'; -import AccordionSummary from '@mui/joy/AccordionSummary'; -import Typography from '@mui/joy/Typography'; - +import Accordion from "@mui/joy/Accordion"; +import AccordionDetails from "@mui/joy/AccordionDetails"; +import AccordionGroup from "@mui/joy/AccordionGroup"; +import AccordionSummary from "@mui/joy/AccordionSummary"; +import Typography from "@mui/joy/Typography"; + export default function Faqs() { - return ( - <div style={{ padding: '2%'}}> - <Typography level="h2" - sx={{ - color: '#ffffff', - marginBottom: '2%', - marginRight: '0.7%', - marginLeft: '0.7%', - textAlign: "center" - }} + return ( + <div style={{ padding: "2%" }}> + <Typography + level="h2" + sx={{ + color: "#ffffff", + marginBottom: "2%", + marginRight: "0.7%", + marginLeft: "0.7%", + textAlign: "center", + }} + > + FREQUENTLY ASKED QUESTIONS + </Typography> + <AccordionGroup + sx={{ + backgroundColor: "transparent", + color: "white !important", + marginLeft: "10%", + marginRight: "10%", + "& .MuiAccordion-root": { + backgroundColor: "transparent", + }, + "& button:hover": { + backgroundColor: "#221a46 !important", + }, + }} + > + <Accordion> + <AccordionSummary + sx={{ + backgroundColor: "transparent", + color: "white !important", + "& .MuiAccordion-root": { + backgroundColor: "transparent", + }, + "& button:hover": { + backgroundColor: "#221a46 !important", + }, + }} + > + <Typography + textColor="common.white" + sx={{ + fontWeight: "normal", + }} > - FREQUENTLY ASKED QUESTIONS + What is a hackathon? </Typography> - <AccordionGroup - sx={{ - backgroundColor: 'transparent', - color: 'white !important', - marginLeft: "10%", - marginRight: "10%", - '& .MuiAccordion-root': { - backgroundColor: 'transparent', - }, - '& button:hover': { - backgroundColor: '#221a46 !important', - }, - }} + </AccordionSummary> + <AccordionDetails sx={{ color: "#c6add4" }}> + A hackathon is a competitive educational event in which students + come together to develop an idea for a project into a real product. + MVHacks will provide hackers with educational resources, including + seminars and mentors, and an environment that will enable their + success. + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary> + <Typography + textColor="common.white" + sx={{ + fontWeight: "normal", + }} > - <Accordion> - <AccordionSummary - sx={{ - backgroundColor: 'transparent', - color: 'white !important', - '& .MuiAccordion-root': { - backgroundColor: 'transparent', - }, - '& button:hover': { - backgroundColor: '#221a46 !important', - }, - }} - > - <Typography - textColor = "common.white" - sx={{ - fontWeight: "normal" - }} - > - FAQ 1 - </Typography> - </AccordionSummary> - <AccordionDetails sx={{ color: '#c6add4' }}> - Answer 1 - </AccordionDetails> - </Accordion> - <Accordion> - <AccordionSummary> - <Typography - textColor = "common.white" - sx={{ - fontWeight: "normal" - }} - > - FAQ 2 - </Typography> - </AccordionSummary> - <AccordionDetails sx={{ color: '#c6add4' }}> - Answer 2 - </AccordionDetails> - </Accordion> - <Accordion> - <AccordionSummary> - <Typography - textColor = "common.white" - sx={{ - fontWeight: "normal" - }} - > - FAQ 3 - </Typography> - </AccordionSummary> - <AccordionDetails sx={{ color: '#c6add4' }}> - Answer 3 - </AccordionDetails> - </Accordion> - <Accordion> - <AccordionSummary> - <Typography - textColor = "common.white" - sx={{ - fontWeight: "normal" - }} - > - FAQ 4 - </Typography> - </AccordionSummary> - <AccordionDetails sx={{ color: '#c6add4' }}> - Answer 4 - </AccordionDetails> - </Accordion> - <Accordion> - <AccordionSummary> - <Typography - textColor = "common.white" - sx={{ - fontWeight: "normal" - }} - > - FAQ 5 - </Typography> - </AccordionSummary> - <AccordionDetails sx={{ color: '#c6add4' }}> - Answer 5 - </AccordionDetails> - </Accordion> - <Accordion> - <AccordionSummary> - <Typography - textColor = "common.white" - sx={{ - fontWeight: "normal" - }} - > - FAQ 6 - </Typography> - </AccordionSummary> - <AccordionDetails sx={{ color: '#c6add4' }}> - Answer 6 - </AccordionDetails> - </Accordion> - <Accordion> - <AccordionSummary> - <Typography - textColor = "common.white" - sx={{ - fontWeight: "normal" - }} - > - FAQ 7 - </Typography> - </AccordionSummary> - <AccordionDetails sx={{ color: '#c6add4' }}> - Answer 7 - </AccordionDetails> - </Accordion> - <Accordion> - <AccordionSummary> - <Typography - textColor = "common.white" - sx={{ - fontWeight: "normal" - }} - > - FAQ 8 - </Typography> - </AccordionSummary> - <AccordionDetails sx={{ color: '#c6add4' }}> - Answer 8 - </AccordionDetails> - </Accordion> - <Accordion> - <AccordionSummary> - <Typography - textColor = "common.white" - sx={{ - fontWeight: "normal" - }} - > - FAQ 9 - </Typography> - </AccordionSummary> - <AccordionDetails sx={{ color: '#c6add4' }}> - Answer 9 - </AccordionDetails> - </Accordion> - <Accordion> - <AccordionSummary> - <Typography - textColor = "common.white" - sx={{ - fontWeight: "normal" - }} - > - FAQ 10 - </Typography> - </AccordionSummary> - <AccordionDetails sx={{ color: '#c6add4' }}> - Answer 10 - </AccordionDetails> - </Accordion> - </AccordionGroup> - </div> - ); -} \ No newline at end of file + How much does it cost? + </Typography> + </AccordionSummary> + <AccordionDetails sx={{ color: "#c6add4" }}> + It is completely free! All food, swag, and prizes are provided at no + charge. + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary> + <Typography + textColor="common.white" + sx={{ + fontWeight: "normal", + }} + > + What about food? + </Typography> + </AccordionSummary> + <AccordionDetails sx={{ color: "#c6add4" }}> + MVHacks will provide a free lunch to all participants! + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary> + <Typography + textColor="common.white" + sx={{ + fontWeight: "normal", + }} + > + When / Where is this taking place? + </Typography> + </AccordionSummary> + <AccordionDetails sx={{ color: "#c6add4" }}> + The date and location have not been finalized yet. Feel free to sign + up to be alerted when we have more information! + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary> + <Typography + textColor="common.white" + sx={{ + fontWeight: "normal", + }} + > + How long will this hackathon be? + </Typography> + </AccordionSummary> + <AccordionDetails sx={{ color: "#c6add4" }}> + 12 hours (one-day event)! + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary> + <Typography + textColor="common.white" + sx={{ + fontWeight: "normal", + }} + > + Do I need programming experience? + </Typography> + </AccordionSummary> + <AccordionDetails sx={{ color: "#c6add4" }}> + No - this is a fantastic learning opportunity! Hackers can expect to + be able to attend educational workshops run by industry + professionals in addition to experienced adult mentors to help them + learn and succeed. + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary> + <Typography + textColor="common.white" + sx={{ + fontWeight: "normal", + }} + > + Who can attend? + </Typography> + </AccordionSummary> + <AccordionDetails sx={{ color: "#c6add4" }}> + All high school students are eligible to attend MVHacks as hackers. + Interested in attending but not a high school student? Consider + signing up to be a mentor. + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary> + <Typography + textColor="common.white" + sx={{ + fontWeight: "normal", + }} + > + What do I need? + </Typography> + </AccordionSummary> + <AccordionDetails sx={{ color: "#c6add4" }}> + For the event, all you need is your school ID, laptop, charger, and + a desire to hack! + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary> + <Typography + textColor="common.white" + sx={{ + fontWeight: "normal", + }} + > + Do I need a team? + </Typography> + </AccordionSummary> + <AccordionDetails sx={{ color: "#c6add4" }}> + Teams of up to 4 are allowed. You may work as an individual, but we + recommend collaborating. There will be a team mixer at start of the + hackathon. + </AccordionDetails> + </Accordion> + <Accordion> + <AccordionSummary> + <Typography + textColor="common.white" + sx={{ + fontWeight: "normal", + }} + > + What are the rules? + </Typography> + </AccordionSummary> + <AccordionDetails sx={{ color: "#c6add4" }}> + Be nice, respectful, and have fun! Hackers are expected to behave + appropriately and safely at all times, and abide by the MLH Code of + Conduct. + </AccordionDetails> + </Accordion> + </AccordionGroup> + </div> + ); +} diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx index 3c88d44..ca94c1d 100644 --- a/src/components/Schedule.tsx +++ b/src/components/Schedule.tsx @@ -1,85 +1,119 @@ import React from "react"; -import Table from '@mui/joy/Table'; -import Typography from '@mui/joy/Typography'; +import Table from "@mui/joy/Table"; +import Typography from "@mui/joy/Typography"; -function createData( - time: string, - event: string, -) { - return { event, time}; +function createData(time: string, event: string) { + return { event, time }; } - + const rows = [ - createData('8:00 AM', 'Opening Ceremony'), - createData('8:30 AM', 'Start Hacking'), - createData('9:00 AM', 'Capture the Flag Starts'), - createData('10:30 AM', 'Workshop'), - createData('11:30 AM', 'Lunch (provided by MVHacks)'), - createData('1:00 PM', 'Company Presentation'), - createData('2:00 PM', 'Guess the Image Game'), - createData('3:00 PM', 'Developing Websites With React Workshop'), - createData('4:30 PM', 'Geoguessr Multiplayer Live Game'), - createData('5:30 PM', 'Cup Stacking'), - createData('7:00 PM', 'Submissions'), - createData('7:15 PM', 'Voting and Judging'), - createData('8:00 PM', 'Closing Ceremony'), + createData("8:00 AM", "Opening Ceremony"), + createData("8:30 AM", "Start Hacking"), + createData("9:00 AM", "Capture the Flag Starts"), + createData("10:30 AM", "Workshop"), + createData("11:30 AM", "Lunch (provided by MVHacks)"), + createData("1:00 PM", "Company Presentation"), + createData("2:00 PM", "Guess the Image Game"), + createData("3:00 PM", "Developing Websites With React Workshop"), + createData("4:30 PM", "Geoguessr Multiplayer Live Game"), + createData("5:30 PM", "Cup Stacking"), + createData("7:00 PM", "Submissions"), + createData("7:15 PM", "Voting and Judging"), + createData("8:00 PM", "Closing Ceremony"), ]; export default function Faqs() { - return ( - <div style= {{padding: '15%'}}> - <Typography level='h2' - sx={{ - color: '#ffffff', - marginBottom: '2%', - marginRight: '0.7%', - marginLeft: '0.7%', - textAlign: "center" - }} - > - EVENT SCHEDULE - </Typography> - <Table hoverRow - sx={{ - width: {xs: '100%', sm: '90%', md: '80%', lg: '70%', xl: '60%'}, - margin: '0 auto', - backgroundColor: '#221a46', - color: 'white !important', - border: '6px solid #c6add4', - borderRadius: '16px', - overflow: 'hidden', - '& td': { - padding: { xs: '8px 10px', sm: '12px 16px' }, - fontSize: { xs: '0.8rem', sm: '1.1rem' }, - whiteSpace: 'normal', - }, - '& tr': { - transition: 'background-color 0.3s ease, box-shadow 0.3s ease', - }, - '& tr:hover': { - backgroundColor: 'rgba(158, 138, 169, 0.6) !important', - boxShadow: '0 0 12px rgba(198, 173, 212, 0.6)', - }, - }} + return ( + <div style={{ padding: "15%" }}> + <Typography + level="h2" + sx={{ + color: "#ffffff", + marginBottom: "2%", + marginRight: "0.7%", + marginLeft: "0.7%", + textAlign: "center", + }} + > + EVENT SCHEDULE + </Typography> + <Table + hoverRow + sx={{ + width: { xs: "100%", sm: "90%", md: "80%", lg: "70%", xl: "60%" }, + margin: "0 auto", + backgroundColor: "#221a46", + color: "white !important", + border: "6px solid #c6add4", + borderRadius: "16px", + overflow: "hidden", + "& td, & th": { + padding: { xs: "8px 10px", sm: "12px 16px" }, + fontSize: { xs: "0.9rem", sm: "1.1rem" }, + whiteSpace: "normal", + }, + "& th": { + backgroundColor: "#221a46", + }, + "& tr": { + transition: "background-color 0.3s ease, box-shadow 0.3s ease", + }, + ".data:hover": { + backgroundColor: "rgba(158, 138, 169, 0.6) !important", + boxShadow: "0 0 12px rgba(198, 173, 212, 0.6)", + }, + }} + > + <thead> + <tr> + <th + style={{ width: "30%", textAlign: "center", fontWeight: "bold" }} > - <tbody> - {rows.map((row) => ( - <tr key={row.time}> - <td>{row.time}</td> - <td> - <Typography - sx={{ - textAlign: "right", - fontWeight: ['Opening Ceremony', 'Workshop', 'Company Presentation', 'Developing Websites With React Workshop', 'Closing Ceremony'].includes(row.event) ? 'bold' : 'normal', - }} - > - {row.event} - </Typography> - </td> - </tr> - ))} - </tbody> - </Table> - </div> - ); -} \ No newline at end of file + <Typography level="h3" sx={{ color: "#ffffff" }}> + Time + </Typography> + </th> + <th style={{ textAlign: "center" }}> + <Typography level="h3" sx={{ color: "#ffffff" }}> + Event + </Typography> + </th> + </tr> + </thead> + <tbody> + {rows.map((row) => ( + <tr className="data" key={row.time}> + <td> + <Typography + sx={{ + textAlign: "center", + }} + > + {row.time} + </Typography> + </td> + <td> + <Typography + sx={{ + textAlign: "center", + fontWeight: [ + "Opening Ceremony", + "Workshop", + "Company Presentation", + "Developing Websites With React Workshop", + "Closing Ceremony", + ].includes(row.event) + ? "bold" + : "normal", + }} + > + {row.event} + </Typography> + </td> + </tr> + ))} + </tbody> + </Table> + </div> + ); +}