From 31b5f35dafcd9f32f2fb5668859138f5c7268aa9 Mon Sep 17 00:00:00 2001
From: MiliMade <milimadeemail@gmail.com>
Date: Sat, 6 Apr 2024 21:52:04 -0400
Subject: [PATCH 1/2] Added changes to enable darkmode for about page

---
 src/components/AboutAmanda.jsx     | 39 +++++++++++++++++++++++++++---
 src/components/AboutApp.jsx        | 15 ++++++++++--
 src/components/AboutDevelopers.jsx | 10 ++++++--
 src/components/AboutGrace.jsx      | 39 +++++++++++++++++++++++++++---
 src/components/AboutLeon.jsx       | 39 +++++++++++++++++++++++++++---
 src/components/AboutMili.jsx       | 29 +++++++++++++++++++---
 src/components/AboutTcl.jsx        |  9 ++++++-
 src/views/About.jsx                | 11 +++++++--
 8 files changed, 172 insertions(+), 19 deletions(-)

diff --git a/src/components/AboutAmanda.jsx b/src/components/AboutAmanda.jsx
index 526b42a..cda38f5 100644
--- a/src/components/AboutAmanda.jsx
+++ b/src/components/AboutAmanda.jsx
@@ -16,12 +16,19 @@ export function AboutAmanda() {
 		<Grid item xs={12} sm={6} md={6} lg={3} sx={{ width: { xs: '100%' } }}>
 			<Card
 				sx={{
-					border: '1.5px solid #003780',
+					border: (theme) => {
+						return theme.palette.mode === 'dark'
+							? '1px solid #f8f9fa'
+							: '1px solid #003780';
+					},
 					borderRadius: '20px',
 					padding: '1.5rem',
 					display: 'flex',
 					flexDirection: 'column',
 					alignItems: 'center',
+					backgroundColor: (theme) => {
+						return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+					},
 				}}
 			>
 				<Avatar
@@ -29,7 +36,17 @@ export function AboutAmanda() {
 						width: 80,
 						height: 80,
 						marginBottom: 2,
-						bgcolor: '#003780',
+						backgroundColor: (theme) => {
+							return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+						},
+						border: (theme) => {
+							return theme.palette.mode === 'dark'
+								? '1.5px solid #f8f9fa'
+								: '1.5px solid #003780';
+						},
+						color: (theme) => {
+							return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+						},
 					}}
 				>
 					AG
@@ -46,7 +63,13 @@ export function AboutAmanda() {
 						variant="h5"
 						component="div"
 						textAlign="center"
-						sx={{ fontWeight: 'bold', marginBottom: 2 }}
+						sx={{
+							fontWeight: 'bold',
+							marginBottom: 2,
+							color: (theme) => {
+								return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+							},
+						}}
 					>
 						Amanda Guan
 					</Typography>
@@ -59,6 +82,11 @@ export function AboutAmanda() {
 									'&:hover': { backgroundColor: '#0058cd' },
 									width: 48,
 									height: 48,
+									border: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '1.5px solid #f8f9fa'
+											: '1.5px solid #003780';
+									},
 								}}
 							>
 								<LinkedInIcon />
@@ -72,6 +100,11 @@ export function AboutAmanda() {
 									'&:hover': { backgroundColor: '#0058cd' },
 									width: 48,
 									height: 48,
+									border: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '1.5px solid #f8f9fa'
+											: '1.5px solid #003780';
+									},
 								}}
 							>
 								<GitHubIcon />
diff --git a/src/components/AboutApp.jsx b/src/components/AboutApp.jsx
index 8b8db43..952771d 100644
--- a/src/components/AboutApp.jsx
+++ b/src/components/AboutApp.jsx
@@ -28,7 +28,9 @@ export function AboutApp() {
 								textAlign: 'center',
 								fontFamily: 'Newsreader',
 								fontWeight: 400,
-								color: '#003780',
+								color: (theme) => {
+									return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+								},
 							}}
 						>
 							About This App
@@ -93,6 +95,11 @@ export function AboutApp() {
 								display: 'flex',
 								alignItems: 'center',
 								width: 'fit-content',
+								border: (theme) => {
+									return theme.palette.mode === 'dark'
+										? '1px solid #f8f9fa'
+										: '1px solid #003780';
+								},
 							}}
 						>
 							<GitHubIcon sx={{ mr: 1, fontSize: '2.5rem' }} />
@@ -107,7 +114,11 @@ export function AboutApp() {
 					mt: 2,
 					display: { xs: 'flex', sm: 'none' },
 					flexDirection: 'column',
-					border: '1px solid #003780',
+					border: (theme) => {
+						return theme.palette.mode === 'dark'
+							? '1px solid #f8f9fa'
+							: '1px solid #003780';
+					},
 					borderRadius: '10px',
 					width: '95vw',
 					padding: '10px',
diff --git a/src/components/AboutDevelopers.jsx b/src/components/AboutDevelopers.jsx
index 7c283f5..78b0aa8 100644
--- a/src/components/AboutDevelopers.jsx
+++ b/src/components/AboutDevelopers.jsx
@@ -51,7 +51,9 @@ export function AboutDevelopers() {
 						mb: 4,
 						fontWeight: 400,
 						fontFamily: 'Newsreader',
-						color: '#003780',
+						color: (theme) => {
+							return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+						},
 					}}
 				>
 					The Developers
@@ -82,7 +84,11 @@ export function AboutDevelopers() {
 						alignItems: 'center',
 						overflow: 'hidden',
 						borderRadius: '16px',
-						border: '1px solid #003780',
+						border: (theme) => {
+							return theme.palette.mode === 'dark'
+								? '1px solid #f8f9fa'
+								: '1px solid #003780';
+						},
 						boxShadow: 3,
 						p: 2,
 						position: 'relative',
diff --git a/src/components/AboutGrace.jsx b/src/components/AboutGrace.jsx
index 91cdb33..f9b842e 100644
--- a/src/components/AboutGrace.jsx
+++ b/src/components/AboutGrace.jsx
@@ -16,12 +16,19 @@ export function AboutGrace() {
 		<Grid item xs={12} sm={6} md={6} lg={3} sx={{ width: { xs: '100%' } }}>
 			<Card
 				sx={{
-					border: '1.5px solid #003780',
+					border: (theme) => {
+						return theme.palette.mode === 'dark'
+							? '1px solid #f8f9fa'
+							: '1px solid #003780';
+					},
 					borderRadius: '20px',
 					padding: '1.5rem',
 					display: 'flex',
 					flexDirection: 'column',
 					alignItems: 'center',
+					backgroundColor: (theme) => {
+						return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+					},
 				}}
 			>
 				<Avatar
@@ -29,7 +36,17 @@ export function AboutGrace() {
 						width: 80,
 						height: 80,
 						marginBottom: 2,
-						bgcolor: '#003780',
+						backgroundColor: (theme) => {
+							return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+						},
+						border: (theme) => {
+							return theme.palette.mode === 'dark'
+								? '1.5px solid #f8f9fa'
+								: '1.5px solid #003780';
+						},
+						color: (theme) => {
+							return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+						},
 					}}
 				>
 					GL
@@ -46,7 +63,13 @@ export function AboutGrace() {
 						variant="h5"
 						component="div"
 						textAlign="center"
-						sx={{ fontWeight: 'bold', marginBottom: 2 }}
+						sx={{
+							fontWeight: 'bold',
+							marginBottom: 2,
+							color: (theme) => {
+								return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+							},
+						}}
 					>
 						Grace Lee
 					</Typography>
@@ -59,6 +82,11 @@ export function AboutGrace() {
 									'&:hover': { backgroundColor: '#0058cd' },
 									width: 48,
 									height: 48,
+									border: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '1.5px solid #f8f9fa'
+											: '1.5px solid #003780';
+									},
 								}}
 							>
 								<LinkedInIcon />
@@ -72,6 +100,11 @@ export function AboutGrace() {
 									'&:hover': { backgroundColor: '#0058cd' },
 									width: 48,
 									height: 48,
+									border: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '1.5px solid #f8f9fa'
+											: '1.5px solid #003780';
+									},
 								}}
 							>
 								<GitHubIcon />
diff --git a/src/components/AboutLeon.jsx b/src/components/AboutLeon.jsx
index fc19fa3..3a68b65 100644
--- a/src/components/AboutLeon.jsx
+++ b/src/components/AboutLeon.jsx
@@ -16,12 +16,19 @@ export function AboutLeon() {
 		<Grid item xs={12} sm={6} md={6} lg={3} sx={{ width: { xs: '100%' } }}>
 			<Card
 				sx={{
-					border: '1.5px solid #003780',
+					border: (theme) => {
+						return theme.palette.mode === 'dark'
+							? '1px solid #f8f9fa'
+							: '1px solid #003780';
+					},
 					borderRadius: '20px',
 					padding: '1.5rem',
 					display: 'flex',
 					flexDirection: 'column',
 					alignItems: 'center',
+					backgroundColor: (theme) => {
+						return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+					},
 				}}
 			>
 				<Avatar
@@ -29,7 +36,17 @@ export function AboutLeon() {
 						width: 80,
 						height: 80,
 						marginBottom: 2,
-						bgcolor: '#003780',
+						backgroundColor: (theme) => {
+							return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+						},
+						border: (theme) => {
+							return theme.palette.mode === 'dark'
+								? '1.5px solid #f8f9fa'
+								: '1.5px solid #003780';
+						},
+						color: (theme) => {
+							return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+						},
 					}}
 				>
 					LC
@@ -46,7 +63,13 @@ export function AboutLeon() {
 						variant="h5"
 						component="div"
 						textAlign="center"
-						sx={{ fontWeight: 'bold', marginBottom: 2 }}
+						sx={{
+							fontWeight: 'bold',
+							marginBottom: 2,
+							color: (theme) => {
+								return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+							},
+						}}
 					>
 						Leon Chung
 					</Typography>
@@ -59,6 +82,11 @@ export function AboutLeon() {
 									'&:hover': { backgroundColor: '#0058cd' },
 									width: 48,
 									height: 48,
+									border: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '1.5px solid #f8f9fa'
+											: '1.5px solid #003780';
+									},
 								}}
 							>
 								<LinkedInIcon />
@@ -72,6 +100,11 @@ export function AboutLeon() {
 									'&:hover': { backgroundColor: '#0058cd' },
 									width: 48,
 									height: 48,
+									border: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '1.5px solid #f8f9fa'
+											: '1.5px solid #003780';
+									},
 								}}
 							>
 								<GitHubIcon />
diff --git a/src/components/AboutMili.jsx b/src/components/AboutMili.jsx
index d6c5a3e..f2f46ef 100644
--- a/src/components/AboutMili.jsx
+++ b/src/components/AboutMili.jsx
@@ -16,12 +16,19 @@ export function AboutMili() {
 		<Grid item xs={12} sm={6} md={6} lg={3} sx={{ width: { xs: '100%' } }}>
 			<Card
 				sx={{
-					border: '1.5px solid #003780',
+					border: (theme) => {
+						return theme.palette.mode === 'dark'
+							? '1px solid #f8f9fa'
+							: '1px solid #003780';
+					},
 					borderRadius: '20px',
 					padding: '1.5rem',
 					display: 'flex',
 					flexDirection: 'column',
 					alignItems: 'center',
+					backgroundColor: (theme) => {
+						return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+					},
 				}}
 			>
 				<Avatar
@@ -29,7 +36,17 @@ export function AboutMili() {
 						width: 80,
 						height: 80,
 						marginBottom: 2,
-						bgcolor: '#003780',
+						backgroundColor: (theme) => {
+							return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+						},
+						border: (theme) => {
+							return theme.palette.mode === 'dark'
+								? '1.5px solid #f8f9fa'
+								: '1.5px solid #003780';
+						},
+						color: (theme) => {
+							return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+						},
 					}}
 				>
 					ML
@@ -46,7 +63,13 @@ export function AboutMili() {
 						variant="h5"
 						component="div"
 						textAlign="center"
-						sx={{ fontWeight: 'bold', marginBottom: 2 }}
+						sx={{
+							fontWeight: 'bold',
+							marginBottom: 2,
+							color: (theme) => {
+								return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+							},
+						}}
 					>
 						Mili Made
 					</Typography>
diff --git a/src/components/AboutTcl.jsx b/src/components/AboutTcl.jsx
index 054c36e..241ada7 100644
--- a/src/components/AboutTcl.jsx
+++ b/src/components/AboutTcl.jsx
@@ -28,7 +28,9 @@ export function AboutTcl() {
 								textAlign: 'center',
 								fontFamily: 'Newsreader',
 								fontWeight: 400,
-								color: '#003780',
+								color: (theme) => {
+									return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+								},
 							}}
 						>
 							Our Project & The Collab Lab
@@ -80,6 +82,11 @@ export function AboutTcl() {
 								'&:hover': { backgroundColor: '#0058cd' },
 								color: 'white',
 								mt: 2,
+								border: (theme) => {
+									return theme.palette.mode === 'dark'
+										? '1px solid #f8f9fa'
+										: '1px solid #003780';
+								},
 							}}
 						>
 							<WebAssetIcon sx={{ mr: 1, fontSize: '2.5rem' }} />
diff --git a/src/views/About.jsx b/src/views/About.jsx
index 81763f5..98fef13 100644
--- a/src/views/About.jsx
+++ b/src/views/About.jsx
@@ -42,8 +42,15 @@ export function About() {
 						justifyContent: 'center',
 						alignItems: 'center',
 						overflow: 'hidden',
-						borderRadius: '16px',
-						border: '2px solid #003780',
+						borderRadius: 2,
+						border: (theme) => {
+							return theme.palette.mode === 'dark'
+								? '1.5px solid #f8f9fa'
+								: '1.5px solid #003780';
+						},
+						backgroundColor: (theme) => {
+							return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+						},
 						boxShadow: 3,
 						p: 2,
 						position: 'relative',

From f55036a35cf13d28fa554e59a66c9ab6e545ab79 Mon Sep 17 00:00:00 2001
From: MiliMade <milimadeemail@gmail.com>
Date: Sat, 6 Apr 2024 22:21:51 -0400
Subject: [PATCH 2/2] added dark mode to mobile about page

---
 src/components/AboutApp.jsx        |  8 +++++++
 src/components/AboutDevelopers.jsx | 37 ++++++++++++++++++++++++++----
 src/components/AboutMili.jsx       | 10 ++++++++
 src/components/AboutTcl.jsx        | 14 ++++++++++-
 4 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/src/components/AboutApp.jsx b/src/components/AboutApp.jsx
index 952771d..6ecf1af 100644
--- a/src/components/AboutApp.jsx
+++ b/src/components/AboutApp.jsx
@@ -122,6 +122,9 @@ export function AboutApp() {
 					borderRadius: '10px',
 					width: '95vw',
 					padding: '10px',
+					backgroundColor: (theme) => {
+						return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+					},
 				}}
 			>
 				<Container maxWidth="sm">
@@ -196,6 +199,11 @@ export function AboutApp() {
 							display: 'flex',
 							alignItems: 'center',
 							width: 'fit-content',
+							border: (theme) => {
+								return theme.palette.mode === 'dark'
+									? '1px solid #f8f9fa'
+									: '1px solid #003780';
+							},
 						}}
 					>
 						<GitHubIcon sx={{ mr: 1, fontSize: '2.5rem' }} />
diff --git a/src/components/AboutDevelopers.jsx b/src/components/AboutDevelopers.jsx
index 78b0aa8..51148ad 100644
--- a/src/components/AboutDevelopers.jsx
+++ b/src/components/AboutDevelopers.jsx
@@ -83,12 +83,15 @@ export function AboutDevelopers() {
 						justifyContent: 'center',
 						alignItems: 'center',
 						overflow: 'hidden',
-						borderRadius: '16px',
 						border: (theme) => {
 							return theme.palette.mode === 'dark'
 								? '1px solid #f8f9fa'
 								: '1px solid #003780';
 						},
+						backgroundColor: (theme) => {
+							return theme.palette.mode === 'dark' ? '#003780af' : '#f8f9fa';
+						},
+						borderRadius: '16px',
 						boxShadow: 3,
 						p: 2,
 						position: 'relative',
@@ -111,7 +114,9 @@ export function AboutDevelopers() {
 								mb: 4,
 								fontWeight: 400,
 								fontFamily: 'Newsreader',
-								color: '#003780',
+								color: (theme) => {
+									return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+								},
 							}}
 						>
 							The Developers
@@ -122,12 +127,27 @@ export function AboutDevelopers() {
 						steps={numOfItems}
 						position="static"
 						activeStep={activeIndex}
-						sx={{ color: '#003780', width: '80%' }}
+						sx={{
+							color: (theme) => {
+								return theme.palette.mode === 'dark' ? '#f8f9fa' : '#003780';
+							},
+							width: '80%',
+							backgroundColor: (theme) => {
+								return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+							},
+						}}
 						nextButton={
 							<Button
 								size="large"
 								onClick={handleNext}
-								sx={{ color: '#003780', fontSize: '1.5rem' }}
+								sx={{
+									color: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '#f8f9fa'
+											: '#003780';
+									},
+									fontSize: '1.5rem',
+								}}
 							>
 								Next
 								{theme.direction === 'rtl' ? (
@@ -141,7 +161,14 @@ export function AboutDevelopers() {
 							<Button
 								size="large"
 								onClick={handlePrev}
-								sx={{ color: '#003780', fontSize: '1.5rem' }}
+								sx={{
+									color: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '#f8f9fa'
+											: '#003780';
+									},
+									fontSize: '1.5rem',
+								}}
 							>
 								{theme.direction === 'rtl' ? (
 									<KeyboardArrowRight />
diff --git a/src/components/AboutMili.jsx b/src/components/AboutMili.jsx
index f2f46ef..b54493e 100644
--- a/src/components/AboutMili.jsx
+++ b/src/components/AboutMili.jsx
@@ -82,6 +82,11 @@ export function AboutMili() {
 									'&:hover': { backgroundColor: '#0058cd' },
 									width: 48,
 									height: 48,
+									border: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '1.5px solid #f8f9fa'
+											: '1.5px solid #003780';
+									},
 								}}
 							>
 								<LinkedInIcon />
@@ -95,6 +100,11 @@ export function AboutMili() {
 									'&:hover': { backgroundColor: '#0058cd' },
 									width: 48,
 									height: 48,
+									border: (theme) => {
+										return theme.palette.mode === 'dark'
+											? '1.5px solid #f8f9fa'
+											: '1.5px solid #003780';
+									},
 								}}
 							>
 								<GitHubIcon />
diff --git a/src/components/AboutTcl.jsx b/src/components/AboutTcl.jsx
index 241ada7..f65a533 100644
--- a/src/components/AboutTcl.jsx
+++ b/src/components/AboutTcl.jsx
@@ -101,7 +101,14 @@ export function AboutTcl() {
 					mt: 2,
 					display: { xs: 'flex', sm: 'none' },
 					flexDirection: 'column',
-					border: '1px solid #003780',
+					border: (theme) => {
+						return theme.palette.mode === 'dark'
+							? '1.5px solid #f8f9fa'
+							: '1.5px solid #003780';
+					},
+					backgroundColor: (theme) => {
+						return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
+					},
 					borderRadius: '10px',
 					width: '95vw',
 					padding: '10px',
@@ -167,6 +174,11 @@ export function AboutTcl() {
 							backgroundColor: '#003780',
 							'&:hover': { backgroundColor: '#0058cd' },
 							color: 'white',
+							border: (theme) => {
+								return theme.palette.mode === 'dark'
+									? '1px solid #f8f9fa'
+									: '1px solid #003780';
+							},
 						}}
 					>
 						<WebAssetIcon sx={{ mr: 1, fontSize: '2.5rem' }} />