added dark mode to mobile about page

the-collab-lab · Apr 7, 2024 · f55036a · f55036a
1 parent 31b5f35
commit f55036a
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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' }} />