From dbf9b90d03e33f05187a9c06155da16b90fbe100 Mon Sep 17 00:00:00 2001
From: noeljtoms <noeljtoms3@gmail.com>
Date: Sun, 1 Oct 2023 18:19:45 -0400
Subject: [PATCH 1/4] Updated Mobile Look and changed components to MUI

---
 components/Home/AboutUsSection.tsx | 108 ++++++++++++++++++-----------
 1 file changed, 69 insertions(+), 39 deletions(-)

diff --git a/components/Home/AboutUsSection.tsx b/components/Home/AboutUsSection.tsx
index 82adc66..af98ab8 100644
--- a/components/Home/AboutUsSection.tsx
+++ b/components/Home/AboutUsSection.tsx
@@ -1,52 +1,82 @@
 import { FC } from 'react';
 
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+
 import Image from 'next/image';
 import Deerfield from 'public/deerfield.png'; // image from https://www.soundsolutions.ca/projects/featured-exterior-cladding-projects/deerfield-hall-univeristy-of-toronto-mississauga-campus
 import Experience from 'public/experience.png';
 
+const theme = createTheme({
+  typography: {
+    fontFamily: ['Segoe UI'].join(','),
+  },
+});
+
 const AboutUsSection: FC = () => (
-  <div
-    id="about"
-    className="about-us-section flex flex-col items-center lg:items-stretch lg:flex-row gap-8"
-  >
-    <div className="header-img w-full lg:w-1/3 lg:min-h-full hidden lg:block">
-      <Image
-        src={Deerfield}
-        alt="Deerfield Hall"
-        className="min-h-full rounded-lg overflow-hidden"
-        draggable="false"
-      />
-    </div>
-    <div className="w-4/5 mt-10 lg:mt-0 lg:w-2/3 flex flex-col justify-between xl:justify-center">
-      <span>
-        <p className="inline-block h-1/3 mr-5 text-2xl">ABOUT US</p>
-        <hr className="inline-block h-1 w-56 bg-purple-600" />
-      </span>
-      <div className="flex items-center my-5 lg:my-0">
-        <div className="w-1/2">
-          <p className="text-2xl md:text-4xl mt-3 mb-3 lg:text-6xl font-bold">FOR THE STUDENTS</p>
-          <p className="lg:hidden text-lg text-purple-700 font-semibold">Academic Society</p>
+  <ThemeProvider theme={theme}>
+    <Container
+      maxWidth={false}
+      disableGutters
+      id="about"
+      className="about-us-section flex flex-col items-center lg:items-stretch lg:flex-row gap-8"
+    >
+      <div className="header-img w-full lg:w-1/3 lg:min-h-full  hidden lg:block">
+        <Image
+          src={Deerfield}
+          alt="Deerfield Hall"
+          className="min-h-full rounded-lg overflow-hidden"
+          draggable="false"
+        />
+      </div>
+
+      <div className="mt-10 md:w-4/5 lg:mt-0 lg:w-2/3 flex flex-col justify-between xl:justify-center text-center md:text-left">
+        <div>
+          <Typography
+            sx={{ fontSize: { lg: 23.5, xs: 35 } }}
+            className="md:inline-block h-1/3 lg:mr-5 lg:text-center flex-col"
+          >
+            ABOUT US
+          </Typography>
+          <hr className="inline-block h-1 w-56 bg-purple-600" />
         </div>
-        <div className="w-1/4 md:w-1/6 m-auto">
-          <Image src={Experience} alt="Experience" draggable="false" />
+
+        <div className="flex items-center my-5 lg:my-0">
+          <div className="w-1/2">
+            <p className="hidden md:block md:text-4xl mt-3 mb-3 lg:text-6xl font-bold">
+              FOR THE STUDENTS
+            </p>
+            <p className="hidden md:block lg:hidden text-lg text-purple-700 font-semibold">
+              Academic Society
+            </p>
+          </div>
+          <div className="md:block w-1/4 md:w-1/6 m-auto hidden">
+            <Image src={Experience} alt="Experience" draggable="false" />
+          </div>
         </div>
-      </div>
-      <p className="hidden lg:inline-block text-lg text-purple-700 font-semibold xl:pb-5">
-        Academic Society
-      </p>
-      <div className="flex">
-        <p className="text-med lg:text-justify">
-          Hello students and welcome! UTM Mathematical and Computational Sciences Society (MCSS) is
-          the official academic society for the Mathematics and Computational Sciences Department.
-          The purpose of the club is to officially represent the students, promote and achieve the
-          common interests of the students, encourage academic, social, and career related support
-          for the students, maintain open lines of communication between the students and the
-          department's faculty and staff, as well as maintain communication between the students
-          themselves, and encourage faculty and student interaction outside of the formal lecture,
-          tutorial, and lab settings.
+        <p className="hidden lg:inline-block text-lg text-purple-700 font-semibold  xl:pb-5">
+          Academic Society
         </p>
+        <div className="flex">
+          <Typography
+            sx={{ paddingX: { xs: 2, sm: 0, md: 0, lg: 0 } }}
+            paragraph
+            className="text-med font-normal text-left lg:text-justify"
+          >
+            Hello students and welcome! UTM Mathematical and Computational Sciences Society (MCSS)
+            is the official academic society for the Mathematics and Computational Sciences
+            Department. The purpose of the club is to officially represent the students, promote and
+            achieve the common interests of the students, encourage academic, social, and career
+            related support for the students, maintain open lines of communication between the
+            students and the department's faculty and staff, as well as maintain communication
+            between the students themselves, and encourage faculty and student interaction outside
+            of the formal lecture, tutorial, and lab settings.
+          </Typography>
+        </div>
       </div>
-    </div>
-  </div>
+    </Container>
+  </ThemeProvider>
 );
 export default AboutUsSection;

From 0865359a8eff0e78ff2ad69190d163b4cd30536c Mon Sep 17 00:00:00 2001
From: noeljtoms <noeljtoms3@gmail.com>
Date: Sun, 1 Oct 2023 18:42:16 -0400
Subject: [PATCH 2/4] Updated Linting

---
 .vscode/settings.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f2fc7ea..1756547 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -36,6 +36,7 @@
     "**/.git": true,
     "**/.DS_Store": true
   },
+  "files.eol": "\n",
   "search.exclude": {
     "node_modules": true,
     "build/**": true

From 795aa9c17e61da0915f6709574f413427b6ebad4 Mon Sep 17 00:00:00 2001
From: noeljtoms <noeljtoms3@gmail.com>
Date: Sun, 1 Oct 2023 18:56:07 -0400
Subject: [PATCH 3/4] Updated Mobile Look and changed components to MUI

---
 components/Home/AboutUsSection.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/Home/AboutUsSection.tsx b/components/Home/AboutUsSection.tsx
index af98ab8..247952e 100644
--- a/components/Home/AboutUsSection.tsx
+++ b/components/Home/AboutUsSection.tsx
@@ -1,7 +1,6 @@
 import { FC } from 'react';
 
 import Container from '@mui/material/Container';
-import Grid from '@mui/material/Grid';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 

From 5fad7d17f64fa77e64a13fc8350ee80e3ee69981 Mon Sep 17 00:00:00 2001
From: noeljtoms <noeljtoms3@gmail.com>
Date: Sun, 17 Dec 2023 20:09:07 -0500
Subject: [PATCH 4/4] fixed eslint issue

---
 components/Home/AboutUsSection.tsx | 124 +++++++++++++++++++++--------
 pages/_app.tsx                     |   2 +-
 style/theme.ts                     |   8 +-
 3 files changed, 98 insertions(+), 36 deletions(-)

diff --git a/components/Home/AboutUsSection.tsx b/components/Home/AboutUsSection.tsx
index 247952e..9ae10b2 100644
--- a/components/Home/AboutUsSection.tsx
+++ b/components/Home/AboutUsSection.tsx
@@ -1,68 +1,124 @@
 import { FC } from 'react';
 
+import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Divider from '@mui/material/Divider';
+import { ThemeProvider } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
 import Image from 'next/image';
 import Deerfield from 'public/deerfield.png'; // image from https://www.soundsolutions.ca/projects/featured-exterior-cladding-projects/deerfield-hall-univeristy-of-toronto-mississauga-campus
 import Experience from 'public/experience.png';
 
-const theme = createTheme({
-  typography: {
-    fontFamily: ['Segoe UI'].join(','),
-  },
-});
+import { aboutSectionTheme } from '../../style/theme';
 
 const AboutUsSection: FC = () => (
-  <ThemeProvider theme={theme}>
+  <ThemeProvider theme={aboutSectionTheme}>
     <Container
       maxWidth={false}
       disableGutters
       id="about"
-      className="about-us-section flex flex-col items-center lg:items-stretch lg:flex-row gap-8"
+      sx={{
+        display: 'flex',
+        flexDirection: { lg: 'row' },
+        alignItems: { md: 'center', lg: 'stretch' },
+        gap: '2rem',
+      }}
     >
-      <div className="header-img w-full lg:w-1/3 lg:min-h-full  hidden lg:block">
+      <Box
+        sx={{
+          width: { lg: 1 / 3, md: 'full' },
+          minHeight: { lg: 'full' },
+          display: { xs: 'none', lg: 'block' },
+        }}
+      >
         <Image
           src={Deerfield}
           alt="Deerfield Hall"
           className="min-h-full rounded-lg overflow-hidden"
           draggable="false"
         />
-      </div>
+      </Box>
 
-      <div className="mt-10 md:w-4/5 lg:mt-0 lg:w-2/3 flex flex-col justify-between xl:justify-center text-center md:text-left">
-        <div>
+      <Box
+        sx={{
+          marginTop: 0,
+          width: { md: 4 / 5, lg: 2 / 3 },
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: { lg: 'space-between', xl: 'center' },
+          textAlign: { md: 'left' },
+        }}
+      >
+        <Box sx={{ textAlign: { xs: 'center', sm: 'left' } }}>
           <Typography
-            sx={{ fontSize: { lg: 23.5, xs: 35 } }}
-            className="md:inline-block h-1/3 lg:mr-5 lg:text-center flex-col"
+            sx={{
+              fontSize: { lg: 23.5, xs: 35 },
+              display: { md: 'inline-block' },
+              flexDirection: 'column',
+              height: { md: '1/3' },
+              marginRight: { lg: 2 },
+              textAlign: { lg: 'center' },
+            }}
           >
             ABOUT US
           </Typography>
-          <hr className="inline-block h-1 w-56 bg-purple-600" />
-        </div>
+          <Divider
+            sx={{
+              display: 'inline-block',
+              height: '0.25rem',
+              width: '14rem',
+              backgroundColor: '#805ad5',
+            }}
+          />
+        </Box>
 
-        <div className="flex items-center my-5 lg:my-0">
-          <div className="w-1/2">
-            <p className="hidden md:block md:text-4xl mt-3 mb-3 lg:text-6xl font-bold">
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            marginY: { xs: 5, lg: 0 },
+          }}
+        >
+          <Box sx={{ width: 1 / 2 }}>
+            <Typography
+              sx={{
+                display: { xs: 'none', md: 'block' },
+                fontSize: { md: '2.25rem', lg: '3.75rem' },
+                lineHeight: { md: '2.5rem', lg: '1' },
+                marginTop: '0.75rem',
+                marginBottom: '0.75rem',
+                fontWeight: 'bold',
+              }}
+            >
               FOR THE STUDENTS
-            </p>
-            <p className="hidden md:block lg:hidden text-lg text-purple-700 font-semibold">
-              Academic Society
-            </p>
-          </div>
-          <div className="md:block w-1/4 md:w-1/6 m-auto hidden">
+            </Typography>
+          </Box>
+          <Box className="md:block w-1/4 md:w-1/6 m-auto hidden">
             <Image src={Experience} alt="Experience" draggable="false" />
-          </div>
-        </div>
-        <p className="hidden lg:inline-block text-lg text-purple-700 font-semibold  xl:pb-5">
+          </Box>
+        </Box>
+        <Typography
+          sx={{
+            display: { xs: 'none', md: 'block', lg: 'inline-block' },
+            fontWeight: 600,
+            paddingBottom: { xl: '1.25rem' },
+            fontSize: '1.125rem',
+            lineHeight: '1.75rem',
+            color: '#7E22CE',
+          }}
+        >
           Academic Society
-        </p>
-        <div className="flex">
+        </Typography>
+        <Box sx={{ display: 'flex' }}>
           <Typography
-            sx={{ paddingX: { xs: 2, sm: 0, md: 0, lg: 0 } }}
+            sx={{
+              paddingX: { xs: 2, sm: 0, md: 0, lg: 0 },
+              fontWeight: 400,
+              fontSize: '1rem',
+              textAlign: 'left',
+            }}
             paragraph
-            className="text-med font-normal text-left lg:text-justify"
           >
             Hello students and welcome! UTM Mathematical and Computational Sciences Society (MCSS)
             is the official academic society for the Mathematics and Computational Sciences
@@ -73,8 +129,8 @@ const AboutUsSection: FC = () => (
             between the students themselves, and encourage faculty and student interaction outside
             of the formal lecture, tutorial, and lab settings.
           </Typography>
-        </div>
-      </div>
+        </Box>
+      </Box>
     </Container>
   </ThemeProvider>
 );
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7944513..edbd15a 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,7 +9,7 @@ import { store } from '@store/store';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { AppProps } from 'next/app';
 import Script from 'next/script';
-import theme from 'style/theme';
+import { theme } from 'style/theme';
 
 import { APIProvider } from '../contexts/useAPI';
 
diff --git a/style/theme.ts b/style/theme.ts
index d627c40..18a4a45 100644
--- a/style/theme.ts
+++ b/style/theme.ts
@@ -2,6 +2,12 @@ import { createTheme } from '@mui/material/styles';
 
 import COLORS from 'style/colors';
 
+const aboutSectionTheme = createTheme({
+  typography: {
+    fontFamily: ['Segoe UI'].join(','),
+  },
+});
+
 const base = createTheme({
   palette: {
     primary: {
@@ -164,4 +170,4 @@ const theme = createTheme(base, {
   },
 });
 
-export default theme;
+export { theme, aboutSectionTheme };