Skip to content

Commit a0deb66

Browse files
zalexa19zalexa19
committed
added dark mode support to the theme
1 parent 4960b60 commit a0deb66

File tree

17 files changed

+231
-170
lines changed

17 files changed

+231
-170
lines changed

‎client/src/features/dashboard/DashboardPage.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,15 @@ const DashboardPage = () => {
3737
}
3838

3939
if (isError && error instanceof Error) {
40-
<Box width="50%" margin="auto" marginTop="2rem">
41-
return <ErrorBox errorMessage={error.message} />;
42-
</Box>;
43-
return <ErrorBox errorMessage={error.message} />;
40+
return (
41+
<Box width="50%" margin="auto" marginTop="2rem">
42+
<ErrorBox errorMessage={error.message} />;
43+
</Box>
44+
);
4445
}
4546

4647
return (
47-
<Container fixed>
48+
<Container fixed sx={{ bgcolor: 'background.default', minHeight: '100vh' }}>
4849
<Box my={3} display="flex" alignItems="start" justifyContent="start" p={2}>
4950
<Stack direction="row" spacing={3}>
5051
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="nl">
@@ -56,7 +57,7 @@ const DashboardPage = () => {
5657
</Button>
5758
</Stack>
5859
</Box>
59-
{data && <DashboardPieChart chartData={data}></DashboardPieChart>}
60+
{data && <DashboardPieChart chartData={data} />}
6061
</Container>
6162
);
6263
};

‎client/src/features/search/SearchPage.tsx‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,42 @@ const SearchPage = () => {
2626
}, []);
2727

2828
return (
29-
<div className="App">
30-
<div className="search-bar-container">
31-
<Box sx={{ display: 'flex' }}>
32-
<img src={HYFLogo} alt="HYF logo" className="hyf-logo-img" />
33-
</Box>
29+
<Box
30+
sx={{
31+
minHeight: '100vh',
32+
bgcolor: 'background.default',
33+
color: '#333',
34+
}}
35+
>
36+
<Box
37+
sx={{
38+
paddingTop: '20vh',
39+
minWidth: '200px',
40+
width: '40%',
41+
margin: 'auto',
42+
display: 'flex',
43+
flexDirection: 'column',
44+
alignItems: 'center',
45+
}}
46+
>
47+
<Box
48+
component="img"
49+
src={HYFLogo}
50+
alt="HYF logo"
51+
sx={{
52+
height: '70px',
53+
padding: '10px',
54+
marginBottom: '50px',
55+
}}
56+
/>
3457
<SearchBar onTextChange={handleTextChange} />
3558
{isError && error instanceof Error ? (
3659
<ErrorBox errorMessage={error.message} />
3760
) : (
3861
searchString && <SearchResultsList isLoading={isLoading} data={data || []} />
3962
)}
40-
</div>
41-
</div>
63+
</Box>
64+
</Box>
4265
);
4366
};
4467

‎client/src/features/search/components/SearchBar.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,17 +38,22 @@ const SearchBar = ({ onTextChange }: SearchBarProps) => {
3838
<Box sx={{ display: 'flex', width: 1 }}>
3939
<TextField
4040
variant="outlined"
41+
sx={{
42+
backgroundColor: 'background.dark',
43+
}}
4144
placeholder="Search trainee..."
4245
fullWidth
4346
autoFocus
4447
autoComplete="off"
4548
onChange={(e) => handleChange(e.target.value)}
46-
InputProps={{
47-
startAdornment: (
48-
<InputAdornment position="start">
49-
<SearchIcon />
50-
</InputAdornment>
51-
),
49+
slotProps={{
50+
input: {
51+
startAdornment: (
52+
<InputAdornment position="start">
53+
<SearchIcon />
54+
</InputAdornment>
55+
),
56+
},
5257
}}
5358
/>
5459
</Box>

‎client/src/features/search/components/SearchResultsList.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,15 @@ const SearchResultsList = ({ isLoading, data }: SearchResultsListProps) => {
4242
to={trainee.profilePath}
4343
style={{
4444
textDecoration: 'none',
45-
color: 'inherit',
4645
width: '100%',
4746
}}
4847
>
49-
<ListItemButton key={trainee.id}>
48+
<ListItemButton
49+
key={trainee.id}
50+
sx={{
51+
color: 'text.primary',
52+
}}
53+
>
5054
<ListItemIcon>
5155
<Avatar src={trainee.thumbnail ?? ''} sx={{ width: 32, height: 32 }} variant="rounded"></Avatar>
5256
</ListItemIcon>

‎client/src/features/trainee-profile/contact/ContactInfo.tsx‎

Lines changed: 86 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -48,20 +48,22 @@ const ContactInfo = () => {
4848
label="Email"
4949
type="email"
5050
value={editedFields.email || ''}
51-
InputProps={{
52-
readOnly: isEditing ? false : true,
53-
endAdornment: (
54-
<InputAdornment position="start">
55-
{!isEditing && editedFields.email && (
56-
<Link href={'mailto:' + editedFields.email}>
57-
<LinkIcon sx={{ color: 'action.active' }} />
58-
</Link>
59-
)}
60-
</InputAdornment>
61-
),
62-
}}
63-
InputLabelProps={{
64-
shrink: true,
51+
slotProps={{
52+
input: {
53+
readOnly: isEditing ? false : true,
54+
endAdornment: (
55+
<InputAdornment position="start">
56+
{!isEditing && editedFields.email && (
57+
<Link href={'mailto:' + editedFields.email}>
58+
<LinkIcon sx={{ color: 'action.active' }} />
59+
</Link>
60+
)}
61+
</InputAdornment>
62+
),
63+
},
64+
inputLabel: {
65+
shrink: true,
66+
},
6567
}}
6668
variant={isEditing ? 'outlined' : 'standard'}
6769
onChange={handleTextChange}
@@ -94,20 +96,22 @@ const ContactInfo = () => {
9496
type="text"
9597
placeholder="Format: UXXXXXXXXXX"
9698
value={editedFields.slackId || ''}
97-
InputProps={{
98-
readOnly: isEditing ? false : true,
99-
endAdornment: (
100-
<InputAdornment position="start">
101-
{!isEditing && editedFields.slackId && (
102-
<Link href={`slack://user?team=T0EJTUQ87&id=${editedFields.slackId}`}>
103-
<LinkIcon sx={{ color: 'action.active' }} />
104-
</Link>
105-
)}
106-
</InputAdornment>
107-
),
108-
}}
109-
InputLabelProps={{
110-
shrink: true,
99+
slotProps={{
100+
input: {
101+
readOnly: isEditing ? false : true,
102+
endAdornment: (
103+
<InputAdornment position="start">
104+
{!isEditing && editedFields.slackId && (
105+
<Link href={`slack://user?team=T0EJTUQ87&id=${editedFields.slackId}`}>
106+
<LinkIcon sx={{ color: 'action.active' }} />
107+
</Link>
108+
)}
109+
</InputAdornment>
110+
),
111+
},
112+
inputLabel: {
113+
shrink: true,
114+
},
111115
}}
112116
variant={isEditing ? 'outlined' : 'standard'}
113117
onChange={handleTextChange}
@@ -139,11 +143,13 @@ const ContactInfo = () => {
139143
label="Phone"
140144
type="tel"
141145
value={editedFields.phone || ''}
142-
InputProps={{
143-
readOnly: isEditing ? false : true,
144-
}}
145-
InputLabelProps={{
146-
shrink: true,
146+
slotProps={{
147+
input: {
148+
readOnly: isEditing ? false : true,
149+
},
150+
inputLabel: {
151+
shrink: true,
152+
},
147153
}}
148154
variant={isEditing ? 'outlined' : 'standard'}
149155
onChange={handleTextChange}
@@ -173,20 +179,22 @@ const ContactInfo = () => {
173179
label="Github Handle"
174180
type="text"
175181
value={editedFields.githubHandle || ''}
176-
InputProps={{
177-
readOnly: isEditing ? false : true,
178-
endAdornment: (
179-
<InputAdornment position="start">
180-
{!isEditing && editedFields.githubHandle && (
181-
<Link href={'https://github.com/' + editedFields.githubHandle} target="_blank">
182-
<LinkIcon sx={{ color: 'action.active' }} />
183-
</Link>
184-
)}
185-
</InputAdornment>
186-
),
187-
}}
188-
InputLabelProps={{
189-
shrink: true,
182+
slotProps={{
183+
input: {
184+
readOnly: isEditing ? false : true,
185+
endAdornment: (
186+
<InputAdornment position="start">
187+
{!isEditing && editedFields.githubHandle && (
188+
<Link href={'https://github.com/' + editedFields.githubHandle} target="_blank">
189+
<LinkIcon sx={{ color: 'action.active' }} />
190+
</Link>
191+
)}
192+
</InputAdornment>
193+
),
194+
},
195+
inputLabel: {
196+
shrink: true,
197+
},
190198
}}
191199
variant={isEditing ? 'outlined' : 'standard'}
192200
onChange={handleTextChange}
@@ -219,28 +227,30 @@ const ContactInfo = () => {
219227
label="Linkedin"
220228
type="url"
221229
value={editedFields.linkedin || ''}
222-
InputProps={{
223-
readOnly: isEditing ? false : true,
224-
endAdornment: (
225-
<InputAdornment position="start">
226-
{!isEditing && editedFields.linkedin && (
227-
<Link href={editedFields.linkedin} target="_blank">
228-
<LinkIcon sx={{ color: 'action.active' }} />
229-
</Link>
230-
)}
231-
</InputAdornment>
232-
),
233-
}}
234-
InputLabelProps={{
235-
shrink: true,
230+
slotProps={{
231+
input: {
232+
readOnly: isEditing ? false : true,
233+
endAdornment: (
234+
<InputAdornment position="start">
235+
{!isEditing && editedFields.linkedin && (
236+
<Link href={editedFields.linkedin} target="_blank">
237+
<LinkIcon sx={{ color: 'action.active' }} />
238+
</Link>
239+
)}
240+
</InputAdornment>
241+
),
242+
},
243+
inputLabel: {
244+
shrink: true,
245+
},
236246
}}
237247
variant={isEditing ? 'outlined' : 'standard'}
238248
onChange={handleTextChange}
239249
/>
240250
</FormControl>
241251
</Box>
242252

243-
<Typography variant="h6" color="black" padding="5px" width="100%">
253+
<Typography variant="h6" padding="5px" width="100%">
244254
Emergency contact
245255
</Typography>
246256

@@ -268,11 +278,13 @@ const ContactInfo = () => {
268278
label="Emergency Contact"
269279
type="text"
270280
value={editedFields.emergencyContactName || ''}
271-
InputProps={{
272-
readOnly: isEditing ? false : true,
273-
}}
274-
InputLabelProps={{
275-
shrink: true,
281+
slotProps={{
282+
input: {
283+
readOnly: isEditing ? false : true,
284+
},
285+
inputLabel: {
286+
shrink: true,
287+
},
276288
}}
277289
variant={isEditing ? 'outlined' : 'standard'}
278290
onChange={handleTextChange}
@@ -304,11 +316,13 @@ const ContactInfo = () => {
304316
label="Emergency Contact Phone Number"
305317
type="tel"
306318
value={editedFields.emergencyContactPhoneNum || ''}
307-
InputProps={{
308-
readOnly: isEditing ? false : true,
309-
}}
310-
InputLabelProps={{
311-
shrink: true,
319+
slotProps={{
320+
input: {
321+
readOnly: isEditing ? false : true,
322+
},
323+
inputLabel: {
324+
shrink: true,
325+
},
312326
}}
313327
variant={isEditing ? 'outlined' : 'standard'}
314328
onChange={handleTextChange}

‎client/src/features/trainee-profile/education/EducationInfo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ const EducationInfo = () => {
185185
</FormControl>
186186
</div>
187187
<div style={{ width: '100%' }}>
188-
<Typography variant="h6" color="black" padding="16px">
188+
<Typography variant="h6" padding="16px">
189189
Mentors
190190
</Typography>
191191

‎client/src/features/trainee-profile/education/strikes/StrikesComponent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export const StrikesComponent = () => {
106106
/>
107107
<div style={{ width: '50%' }}>
108108
<Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between">
109-
<Typography variant="h6" color="black" padding="16px">
109+
<Typography variant="h6" padding="16px">
110110
Strikes ({strikes?.length || 0})
111111
</Typography>
112112
<Stack direction="row" spacing={2}>

‎client/src/features/trainee-profile/education/strikes/StrikesList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const StrikesList: React.FC<StrikesListProps> = ({ strikes, onClickEdit,
6666
alignItems="flex-start"
6767
disablePadding
6868
sx={{
69-
bgcolor: index % 2 === 0 ? '#f8f9fa' : 'background.paper',
69+
bgcolor: index % 2 === 0 ? 'background.paperAlt' : 'background.paper',
7070
}}
7171
>
7272
<ListItemAvatar

‎client/src/features/trainee-profile/education/tests/TestsComponent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export const TestsComponent = () => {
106106
/>
107107
<div style={{ width: '50%' }}>
108108
<Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between">
109-
<Typography variant="h6" color="black" padding="16px">
109+
<Typography variant="h6" padding="16px">
110110
Tests ({tests?.length || 0})
111111
</Typography>
112112
<Stack direction="row" spacing={2}>

‎client/src/features/trainee-profile/employment/EmploymentInfo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ export const EmploymentInfo = () => {
178178
<div style={{ width: '100%' }}>
179179
{/* Employment history */}
180180
<Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between">
181-
<Typography variant="h6" color="black" padding="16px">
181+
<Typography variant="h6" padding="16px">
182182
Employment history ({editedFields?.employmentHistory.length || 0})
183183
</Typography>
184184
</Box>

0 commit comments

Comments
 (0)