Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

theme changing works now #17

Merged
merged 6 commits into from
Apr 11, 2023
Merged

theme changing works now #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3c0ddaf
theme changing works now
logonoff Apr 10, 2023
24b9e43
fix cardactions
logonoff Apr 10, 2023
2194d7e
calendar invert on dark mode
logonoff Apr 10, 2023
d5d75e2
groups: prevent removal of self
logonoff Apr 10, 2023
2f07b04
groups: allow removal of self iff not admin
logonoff Apr 10, 2023
34b5a41
booking: dark mode schedule selector
logonoff Apr 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions backend/routes/accounts.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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