ADD email notification toggles and fix a few buttons

AnubisLMS · Aug 26, 2022 · af023f7 · af023f7
1 parent 729c5a2
commit af023f7
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 7 deletions.
diff --git a/web/src/components/core/Assignment/AssignmentCard.jsx b/web/src/components/core/Assignment/AssignmentCard.jsx
@@ -224,7 +224,7 @@ export default function AssignmentCard({assignment, editableFields, updateField,
           </Button>
           <Button
             size={'small'}
-            style={{backgroundColor: yellow[500]}}
+            color={'secondary'}
             variant={'contained'}
             className={classes.button}
             onClick={() => setWarningOpen(true)}

diff --git a/web/src/components/core/Course/CourseCard.jsx b/web/src/components/core/Course/CourseCard.jsx
@@ -113,7 +113,7 @@ export default function CourseCard({course, _disabled, editableFields, updateFie
               <Button
                 size={'small'}
                 startIcon={<EditIcon/>}
-                style={{backgroundColor: yellow[500]}}
+                color={'secondary'}
                 variant={'contained'}
                 className={classes.button}
                 component={Link}
@@ -124,7 +124,7 @@ export default function CourseCard({course, _disabled, editableFields, updateFie
               <Button
                 size={'small'}
                 startIcon={<EditIcon/>}
-                style={{backgroundColor: yellow[500]}}
+                color={'secondary'}
                 variant={'contained'}
                 className={classes.button}
                 component={Link}
@@ -136,7 +136,7 @@ export default function CourseCard({course, _disabled, editableFields, updateFie
                 <Button
                   size={'small'}
                   startIcon={<EditIcon/>}
-                  style={{backgroundColor: yellow[500]}}
+                  color={'secondary'}
                   variant={'contained'}
                   className={classes.button}
                   component={Link}

diff --git a/web/src/components/shared/Navigation/Ad/Ad.jsx b/web/src/components/shared/Navigation/Ad/Ad.jsx
@@ -27,7 +27,7 @@ const Ad = () => {
         <Typography className={classes.adTitle}>
           Interested in Contributing?
         </Typography>
-        <Button className={classes.githubButton}>
+        <Button className={classes.githubButton} variant={'contained'}>
           {'We\'re on Github'}
         </Button>
       </CardActionArea>

diff --git a/web/src/components/shared/Navigation/Ad/Ad.styles.jsx b/web/src/components/shared/Navigation/Ad/Ad.styles.jsx
@@ -42,7 +42,6 @@ export const useStyles = makeStyles((theme) => ({
   githubButton: {
     width: '100%',
     marginTop: theme.spacing(2),
-    backgroundColor: theme.palette.primary.main,
     borderRadius: '2px',
   },
 }));
diff --git a/web/src/pages/core/public/Profile/Profile.jsx b/web/src/pages/core/public/Profile/Profile.jsx
@@ -6,6 +6,8 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import GitHub from '@mui/icons-material/GitHub';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 
 import {useStyles} from './Profile.styles';
 import standardStatusHandler from '../../../../utils/standardStatusHandler';
@@ -34,6 +36,15 @@ const Profile = () => {
     setUserGroup(user.is_superuser ? 'superuser' : user.is_admin ? 'admin' : 'student');
   }, [user]);
 
+  const handleToggle = (key) => {
+    axios.get(`/api/public/profile/toggle-email-notifications/${key}`).then((response) => {
+      const data = standardStatusHandler(response, enqueueSnackbar);
+      if (data?.user) {
+        setUser(data.user);
+      }
+    }).catch(standardErrorHandler(enqueueSnackbar));
+  };
+
   if (!user) {
     return null;
   }
@@ -82,13 +93,35 @@ const Profile = () => {
           <Button
             startIcon={<GitHub/>}
             className={classes.saveButton}
+            variant={'contained'}
             component="a"
             href="/api/public/github/login"
           >
             Link Account with Github
           </Button>
         </Box>
       </Box>
+      {[
+        {key: 'deadline_email_enabled', title: 'Deadline Notifications'},
+        {key: 'release_email_enabled', title: 'Release Notifications '},
+      ].map((({key, title}) => (
+        <Box className={classes.fieldsContainer} key={key}>
+          <Box className={classes.githubContainer}>
+            <Typography className={classes.githubText}>
+              {title}
+            </Typography>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={user[key]}
+                  onChange={() => handleToggle(key)}
+                  name={title}
+                />
+              }
+            />
+          </Box>
+        </Box>
+      )))}
     </StandardLayout>
   );
 };

diff --git a/web/src/pages/core/public/Profile/Profile.styles.jsx b/web/src/pages/core/public/Profile/Profile.styles.jsx
@@ -16,9 +16,10 @@ export const useStyles = makeStyles((theme) => ({
   },
   githubText: {
     fontSize: '16px',
+    minWidth: '200px',
   },
   saveButton: {
-    backgroundColor: theme.palette.primary.main,
+    // backgroundColor: theme.palette.primary.main,
     borderRadius: theme.spacing(.5),
   },
   bioContainer: {

diff --git a/web/src/theme/Theme.jsx b/web/src/theme/Theme.jsx
@@ -22,6 +22,12 @@ let theme = createTheme({
     primary: {
       main: '#5686F5',
     },
+    secondary: {
+      main: 'rgb(255, 152, 0)',
+    },
+    error: {
+      main: 'rgb(244, 67, 54)',
+    },
     dark: {
       black: '#0d1117',
       blue: {