From bbdead77d53e54103dffff061e5959fc0ae2906e Mon Sep 17 00:00:00 2001
From: Evelyn Yang <evelynyang@Evelyns-MBP.attlocal.net>
Date: Sat, 11 Jan 2025 20:56:06 -0800
Subject: [PATCH] adjust event schedule and faqs width and title and
 description text for smaller screens

---
 package-lock.json           |  1 +
 src/components/Faqs.tsx     |  4 ++--
 src/components/Schedule.tsx | 14 +++++++++++---
 src/components/Title.tsx    | 25 ++++++++++++++++++++-----
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 15480d6..08dd40d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14945,6 +14945,7 @@
       "version": "2.8.5",
       "resolved": "https://registry.npmjs.org/react-multi-carousel/-/react-multi-carousel-2.8.5.tgz",
       "integrity": "sha512-C5DAvJkfzR2JK9YixZ3oyF9x6R4LW6nzTpIXrl9Oujxi4uqP9SzVVCjl+JLM3tSdqdjAx/oWZK3dTVBSR73Q+w==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
diff --git a/src/components/Faqs.tsx b/src/components/Faqs.tsx
index 9763665..ecc0d2b 100644
--- a/src/components/Faqs.tsx
+++ b/src/components/Faqs.tsx
@@ -24,8 +24,8 @@ export default function Faqs() {
         sx={{
           backgroundColor: "transparent",
           color: "white !important",
-          marginLeft: "10%",
-          marginRight: "10%",
+          marginLeft: { xs: "3%", sm: "10%", md: "10%" },
+          marginRight: { xs: "3%", sm: "10%", md: "10%" },      
           "& .MuiAccordion-root": {
             backgroundColor: "transparent",
           },
diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
index 256258e..60d1895 100644
--- a/src/components/Schedule.tsx
+++ b/src/components/Schedule.tsx
@@ -22,9 +22,16 @@ const rows = [
   createData("8:00 PM", "Closing Ceremony"),
 ];
 
-export default function Faqs() {
+export default function Schedule() {
   return (
-    <div style={{ paddingLeft: "15%", paddingRight: "15%", paddingTop: "8%", paddingBottom: "5%"}}>
+    <div
+      style={{
+        paddingLeft: "5%",
+        paddingRight: "5%",
+        paddingTop: "8%",
+        paddingBottom: "5%",
+      }}
+    >
       <Typography
         level="h2"
         sx={{
@@ -40,7 +47,8 @@ export default function Faqs() {
       <Table
         hoverRow
         sx={{
-          width: { xs: "100%", sm: "90%", md: "80%", lg: "70%", xl: "60%" },
+          width: "100%",
+          maxWidth: { xs: "100%", sm: "80%", md: "60%", lg: "50%" },
           margin: "0 auto",
           backgroundColor: "#221a46",
           color: "white !important",
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
index fbc0b76..9342663 100644
--- a/src/components/Title.tsx
+++ b/src/components/Title.tsx
@@ -14,7 +14,7 @@ export default function Title() {
         <Typography
           level="h1"
           textColor="common.white"
-          sx={{ fontWeight: "bold", fontSize: { xs: "14vw", sm: "10vw", md: "9vw", lg: "7vw" }, marginLeft: "10%", lineHeight: "80%", marginTop: "1%"}}
+          sx={{ fontWeight: "bold", fontSize: { xs: "12vw", sm: "10vw", md: "9vw", lg: "7vw" }, marginLeft: "10%", lineHeight: "80%", marginTop: "1%"}}
         >
           MV HACKS
           <br />
@@ -26,7 +26,12 @@ export default function Title() {
         <Typography
           level="h3"
           textColor="common.white"
-          sx={{ fontWeight: "normal", marginLeft: "10%" }}
+          sx={{ 
+            fontWeight: "normal", 
+            marginLeft: "10%", 
+            fontSize: {xs: "6vw", sm: "4vw", md: "3vw", lg: "1.65vw"},
+            marginBottom: "1%", 
+          }}
         >
           THE HACKATHON FOR{" "}
           <Box
@@ -43,16 +48,26 @@ export default function Title() {
             <Typography
               level="h3"
               textColor="common.white"
-              sx={{ fontWeight: "normal" }}
+              sx={{ fontWeight: "normal", fontSize: {xs: "6vw", sm: "4vw", md: "3vw", lg: "1.65vw"}  }}
             >
               EVERYONE
             </Typography>
           </Box>
         </Typography>
-        <Typography level="body-lg" variant="plain" textColor="common.white" sx={{maxWidth: "500px", marginLeft: "10%", marginBottom:"20px"}}>
+        <Typography 
+          level="body-lg" 
+          variant="plain" 
+          textColor="common.white" 
+          sx={{maxWidth: "500px", marginLeft: "10%", marginRight: "10%", marginBottom:"20px", fontSize: {xs: "4vw", sm: "4vw", md: "3vw", lg: "1.25vw"} }}
+        >
           Each year, high school hackers from across the Bay Area come together at MVHacks to create cool projects, learn from experts, and participate in 12 hours of hacking! Hackers of all skill levels are welcome to compete, individually or as a group. 
           The date and time of this event are not finalized yet, but will be in Spring 2025 in the Bay Area.
-          <Typography level="title-lg" variant="plain" sx={{color: "rgb(150,122,162)"}}>*You can now sign up to be alerted when more details about MVHacks 8.0 are released by clicking the alert me button.</Typography>{' '}
+          <Typography 
+            level="title-lg" 
+            variant="plain" 
+            sx={{color: "rgb(150,122,162)", fontSize: {xs: "4vw", sm: "4vw", md: "3vw", lg: "1.25vw"}}}
+          >
+            *You can now sign up to be alerted when more details about MVHacks 8.0 are released by clicking the alert me button.</Typography>{' '}
         </Typography>
       </div>
       <Button