Skip to content

Commit

Permalink
Merge pull request #92 from the-collab-lab/km-darkmode-about-page
Browse files Browse the repository at this point in the history 
Added changes to enable darkmode for about page
  • Loading branch information
@MiliMade
MiliMade authored Apr 7, 2024
2 parents a99ecc0 + f55036a commit a46ac1a
Show file tree
Hide file tree
Showing 8 changed files with 234 additions and 24 deletions.
39 changes: 36 additions & 3 deletions src/components/AboutAmanda.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,37 @@ 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
sx={{
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
Expand All @@ -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>
Expand All @@ -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 />
Expand All @@ -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 />
Expand Down
23 changes: 21 additions & 2 deletions src/components/AboutApp.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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' }} />
Expand All @@ -107,10 +114,17 @@ 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',
backgroundColor: (theme) => {
return theme.palette.mode === 'dark' ? '#003780' : '#f8f9fa';
},
}}
>
<Container maxWidth="sm">
Expand Down Expand Up @@ -185,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' }} />
Expand Down
45 changes: 39 additions & 6 deletions src/components/AboutDevelopers.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -81,8 +83,15 @@ export function AboutDevelopers() {
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
border: (theme) => {
return theme.palette.mode === 'dark'
? '1px solid #f8f9fa'
: '1px solid #003780';
},
backgroundColor: (theme) => {
return theme.palette.mode === 'dark' ? '#003780af' : '#f8f9fa';
},
borderRadius: '16px',
border: '1px solid #003780',
boxShadow: 3,
p: 2,
position: 'relative',
Expand All @@ -105,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
Expand All @@ -116,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' ? (
Expand All @@ -135,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 />
Expand Down
39 changes: 36 additions & 3 deletions src/components/AboutGrace.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,37 @@ 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
sx={{
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
Expand All @@ -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>
Expand All @@ -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 />
Expand All @@ -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 />
Expand Down
39 changes: 36 additions & 3 deletions src/components/AboutLeon.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,37 @@ 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
sx={{
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
Expand All @@ -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>
Expand All @@ -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 />
Expand All @@ -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 />
Expand Down
Loading

0 comments on commit a46ac1a

Please sign in to comment.