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>
+  );
+}