Skip to content

Commit

Permalink
Merge pull request #17 from utmgdsc/darkmode
Browse files Browse the repository at this point in the history
  • Loading branch information
logonoff authored Apr 11, 2023
2 parents e359fdb + 34b5a41 commit cbb4117
Show file tree
Hide file tree
Showing 7 changed files with 224 additions and 213 deletions.
8 changes: 8 additions & 0 deletions backend/routes/accounts.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ router.get('/:id', roleVerify(['admin']), async (req, res) => {
// res.send(account);
// });

// change theme prop of an account
router.post('/modifyTheme', async (req, res) => {
let account = await Account.findOne({ utorid: req.headers['utorid'] });
account.theme = req.body.theme;
await account.save();
res.send(account);
});

// change the access prop of an account
router.post('/modifyAccess/:id', roleVerify(['admin']), async (req, res) => {
let account = await Account.findOne({ utorid: req.params.id });
Expand Down
20 changes: 15 additions & 5 deletions frontend/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ import { NotFound } from "./pages/NotFound";

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import { useEffect, useState } from "react";
import { useEffect, useState, useMemo } from "react";
import { UserContext } from "./contexts/UserContext";
import { ErrorBoundary } from "./components";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { CssBaseline, ThemeProvider, useMediaQuery, createTheme } from "@mui/material";

import { GoogleTheme } from "./theme/theme";
import { GoogleTheme, THEME } from "./theme/theme";

function App() {
let [userInfo, setUserInfo] = useState({});
Expand All @@ -38,9 +38,19 @@ function App() {

console.log(userInfo);

return (
const systemTheme = useMediaQuery('(prefers-color-scheme: dark)');

const theme = useMemo(
() =>
createTheme(GoogleTheme({
mode: userInfo["theme"] === THEME.DEFAULT ? (systemTheme ? THEME.DARK : THEME.LIGHT) : userInfo["theme"],
})),
[systemTheme, userInfo],
);

return !userInfo ? null : (
<UserContext.Provider value={userInfo}>
<ThemeProvider theme={GoogleTheme}>
<ThemeProvider theme={theme}>
<ErrorBoundary>
<CssBaseline enableColorScheme />
<Router>
Expand Down
22 changes: 11 additions & 11 deletions frontend/src/pages/Calendar/index.jsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import React from "react";
import {
Button,
TextField,
Box
useTheme
} from "@mui/material";
import { SubPage } from "../../layouts/SubPage";
import SearchIcon from '@mui/icons-material/Search';
import { useParams, useNavigate } from 'react-router-dom'
import { ActiveRequestCard } from "../../components";
import { THEME } from "../../theme/theme";

export const Calendar = () => {
let { id } = useParams();
const navigate = useNavigate();
let theme = useTheme();

return (
<SubPage name="Hacklab Calendar">
<iframe
src="https://calendar.google.com/calendar/embed?src=hacklabbooking%40gmail.com&ctz=America%2FToronto"
style={{width: "100%", height: "50em", border: "0"}}
title="Hacklab Calendar"
src="https://calendar.google.com/calendar/embed?src=hacklabbooking%40gmail.com&ctz=America%2FToronto"
style={{
width: "100%",
height: "75vh",
border: "0",
filter: theme.palette.mode === THEME.DARK ? "invert(1)hue-rotate(180deg)" : null
}}
title="Hacklab Calendar"
></iframe>
</SubPage>
);
Expand Down
32 changes: 26 additions & 6 deletions frontend/src/pages/CreateBooking/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ import {
Tooltip,
Select,
IconButton,
Divider
Divider,
useTheme
} from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers-pro";
import { AdapterDayjs } from "@mui/x-date-pickers-pro/AdapterDayjs";
Expand Down Expand Up @@ -104,6 +105,7 @@ export const CreateBooking = () => {
});
}, []);

const theme = useTheme();
const [details, setDetails] = useState("");
const [detailError, setDetailError] = useState(false);
const [dateError, setDateError] = useState(false);
Expand Down Expand Up @@ -346,10 +348,9 @@ export const CreateBooking = () => {
color="gray"
onClick={() => {
setDate(dayjs());
// setScheduleDates([]);
}}
sx={{
textTransform: "none",
textTransform: "none"
}}
>
Today
Expand All @@ -360,7 +361,6 @@ export const CreateBooking = () => {
<IconButton
onClick={() => {
setDate(calendarDate.subtract(7, "day"));
// setScheduleDates([]);
}}
disabled={calendarDate.subtract(7, "day").isBefore(dayjs(), "day")}
>
Expand All @@ -371,7 +371,6 @@ export const CreateBooking = () => {
<IconButton
onClick={() => {
setDate(calendarDate.add(7, "day"));
// setScheduleDates([]);
}}
>
<ArrowForwardIcon />
Expand Down Expand Up @@ -424,7 +423,7 @@ export const CreateBooking = () => {
startDate={getMonday(calendarDate)}
onChange={handleScheduleDate}
selectionScheme="linear"
renderDateLabel={(date) => {
renderDateLabel={date => {
return (
<Box
sx={{
Expand All @@ -444,6 +443,27 @@ export const CreateBooking = () => {
</Box>
);
}}
renderTimeLabel={time => {
return (
<Typography
component="p"
variant="subtitle2"
color="gray"
sx={{ textAlign: "right", marginRight: "0.5em" }}
size="small"
>
{time.toLocaleTimeString("en-US", {
hour: "numeric",
minute: "numeric",
hour12: true,

}).replace(":00", "").replace(" ", "").toLowerCase()}
</Typography>
);
}}
unselectedColor={ theme.palette.action.hover }
selectedColor={ theme.palette.action.active }
hoveredColor={ theme.palette.action.disabled }
/>
</Box>
{dateError && (
Expand Down
104 changes: 40 additions & 64 deletions frontend/src/pages/Group/Group.jsx
Original file line number Diff line number Diff line change
@@ -1,54 +1,24 @@
import React, {useEffect} from "react";
import {
Typography,
Box,
Button,
Card,
CardContent,
CardActions,
Box,
Tooltip,
CardContent,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
useMediaQuery,
useTheme,
TextField,
Typography,
useMediaQuery,
useTheme
} from "@mui/material";
import { SubPage } from "../../layouts/SubPage";
import React, { useContext, useEffect } from "react";
import { useNavigate, useParams } from 'react-router-dom';
import { InitialsAvatar } from "../../components";
import { Routes, Route, useParams, useNavigate } from 'react-router-dom';

// let people = [
// {
// name: "Hatsune Miku",
// email: "[email protected]",
// utorid: "hatsunem",
// admin: true,
// },
// {
// name: "Kagamine Rin",
// email: "[email protected]",
// utorid: "kagaminr",
// admin: false,
// },
// {
// name: "Kagamine Len",
// email: "[email protected]",
// utorid: "kagaminl",
// admin: false,
// }
// ]
// const group = {
// people: people,
// name: "Google Developers Student Club",
// faculty_representative: {
// name: "Yowane Haku",
// email: "[email protected]",
// utorid: "yowanh"
// }
// }
import { UserContext } from "../../contexts/UserContext";
import { SubPage } from "../../layouts/SubPage";

export const Group = () => {
const [open, setOpen] = React.useState(false);
Expand All @@ -60,6 +30,7 @@ export const Group = () => {
const [group, setGroup] = React.useState({});
const [inviteUtorid, setInviteUtorid] = React.useState('');
const navigate = useNavigate();
const userInfo = useContext(UserContext);

const getGroups = () => {
fetch(process.env.REACT_APP_API_URL + '/groups/search/byID/' + groupID, {
Expand Down Expand Up @@ -201,7 +172,7 @@ export const Group = () => {
}}
>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={() => {handleClose(); addPerson(inviteUtorid); setInviteUtorid('')}} variant="contained">Add</Button>
<Button onClick={() => { handleClose(); addPerson(inviteUtorid); setInviteUtorid('') }} variant="contained">Add</Button>
</DialogActions>
</Dialog>
</Box>
Expand All @@ -221,34 +192,39 @@ export const Group = () => {
<InitialsAvatar name={person.name} />
</Box>
<Box>
<Typography variant="h5">{person.name} <Typography sx={{color: "grey", display: "inline"}}>({person.utorid})</Typography></Typography>
<Typography variant="h5">{person.name} <Typography sx={{ color: "grey", display: "inline" }}>({person.utorid})</Typography></Typography>
{person.admin ? <Typography color="success">Group manager</Typography> : null}
<Typography variant="body1">{person.email}</Typography>
</Box>
</CardContent>
<CardActions>
{
person.admin ? null : (
<Button
onClick={() => {
makeAdmin(person.utorid);
}}
>
Make Admin
</Button>
)
}

<Button
color="error"
onClick={() => {
removePerson(person.utorid);
}}
>
Remove Student
</Button>

</CardActions>
{person.admin && userInfo.utorid === person.utorid ? null : (

<CardActions>
{
person.admin ? null : (
<Button
onClick={() => {
makeAdmin(person.utorid);
}}
>
Make Admin
</Button>
)
}

<Button
color="error"
onClick={() => {
removePerson(person.utorid);
if (userInfo.utorid === person.utorid) {
navigate('/group', { replace: true });
}
}}
>
Remove Student
</Button>
</CardActions>
)}
</Card>
))
}
Expand Down
39 changes: 19 additions & 20 deletions frontend/src/pages/Settings/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,6 @@ import {
Radio,
RadioGroup,
FormControlLabel,
FormControl,
FormLabel,
Divider,
Stack,
TextField,
MenuItem,
InputLabel,
Select,
Input,
Chip,
Avatar,
Grid,
Dialog,
DialogActions,
} from "@mui/material";
import { SubPage } from "../../layouts/SubPage";
import { InitialsAvatar } from "../../components";
Expand Down Expand Up @@ -84,13 +70,26 @@ export const Settings = () => {
row
aria-labelledby="appearance-radio-label"
name="appearance-radio"
// onChange={(e) => setTheme(e.target.value)}
value={THEME.LIGHT}
disabled
onChange={(e) =>
fetch(process.env.REACT_APP_API_URL + "/accounts/modifyTheme", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
theme: e.target.value,
}),
})
.then(() => {
// reload the page
window.location.reload();
})
}
value={userInfo["theme"] ?? null}
>
<FormControlLabel value={THEME.DEFAULT} control={<Radio />} label="System Default" disabled />
<FormControlLabel value={THEME.LIGHT} control={<Radio />} label="Light" disabled />
<FormControlLabel value={THEME.DARK} control={<Radio />} label="Dark" disabled />
<FormControlLabel value={THEME.DEFAULT} control={<Radio />} label="System Default" />
<FormControlLabel value={THEME.LIGHT} control={<Radio />} label="Light" />
<FormControlLabel value={THEME.DARK} control={<Radio />} label="Dark" />
</RadioGroup>
</CardActions>
</Card>
Expand Down
Loading

0 comments on commit cbb4117

Please sign in to comment.