Skip to content

Commit fd07349

Browse files
zalexa19zalexa19
authored
#239 - dark mode (#295)
* upgraded to react 19 * upgraded MUI * added dark mode support to the theme
1 parent 4b73a21 commit fd07349

File tree

20 files changed

+1350
-6061
lines changed

20 files changed

+1350
-6061
lines changed

‎client/package-lock.json‎

Lines changed: 1107 additions & 5873 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
"format": "prettier --write ./**/**/*.{tsx,css,ts,md} --config ./.prettierrc"
1515
},
1616
"dependencies": {
17-
"@emotion/react": "^11.11.4",
18-
"@emotion/styled": "^11.11.5",
19-
"@mui/icons-material": "^5.15.8",
20-
"@mui/lab": "^5.0.0-alpha.170",
21-
"@mui/material": "^5.15.19",
17+
"@emotion/react": "^11.14.0",
18+
"@emotion/styled": "^11.14.1",
19+
"@mui/icons-material": "^7.3.7",
20+
"@mui/lab": "^7.0.1-beta.21",
21+
"@mui/material": "^7.3.7",
2222
"@mui/x-charts": "^7.6.1",
2323
"@mui/x-date-pickers": "^7.6.1",
2424
"@react-oauth/google": "^0.12.1",
@@ -27,8 +27,8 @@
2727
"axios": "^1.6.7",
2828
"dayjs": "^1.11.11",
2929
"prettier": "^3.3.2",
30-
"react": "^18.2.0",
31-
"react-dom": "^18.2.0",
30+
"react": "19.2.4",
31+
"react-dom": "19.2.4",
3232
"react-icons": "^5.0.1",
3333
"react-markdown": "^10.1.0",
3434
"react-router-dom": "^6.22.0",
@@ -39,8 +39,8 @@
3939
"@eslint/js": "^9.30.1",
4040
"@tanstack/eslint-plugin-query": "^5.91.4",
4141
"@types/node": "^20.19.9",
42-
"@types/react": "^18.2.43",
43-
"@types/react-dom": "^18.2.17",
42+
"@types/react": "^19.2.10",
43+
"@types/react-dom": "^19.2.3",
4444
"@vitejs/plugin-react": "^4.6.0",
4545
"eslint": "^9.30.1",
4646
"eslint-plugin-react-hooks": "^5.2.0",
@@ -49,5 +49,6 @@
4949
"typescript": "~5.8.3",
5050
"typescript-eslint": "^8.35.1",
5151
"vite": "^7.0.4"
52-
}
52+
},
53+
"overrides": {}
5354
}

‎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/dashboard/components/DashboardPieChart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const DashboardPieChart = ({ chartData }: DashboardPieChartProps) => {
3636
<PieChart
3737
series={[
3838
{
39-
arcLabel: (item) => `${item.percent}%`,
39+
arcLabel: (item) => `${(item as unknown as ChartData).percent}%`,
4040
arcLabelMinAngle: 45,
4141
data: pie as MakeOptional<PieValueType, 'id'>[],
4242
},

‎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}

0 commit comments

Comments
 (0)