theme: #97 refactor theme and add dark mode switcher

Author: payamnj

django_email_learning/static/logo-h.png

@@ -89,7 +89,7 @@ function Course() {
         >
             <Grid size={{xs: 12, md: 9}} py={2} pl={2}>
                 <Box p={2} sx={{ border: '1px solid', borderColor: 'grey.300', borderRadius: 1, minHeight: 300 }}>
-                    <Button variant="outlined" startIcon={<DescriptionIcon />} sx={{ marginBottom: 2 }} onClick={() => {
+                    <Button variant="contained" startIcon={<DescriptionIcon />} sx={{ marginBottom: 2 }} onClick={() => {
                         setDialogContent(<LessonForm
                             header="New Lesson"
                             initialContent={lessonCache}
@@ -98,7 +98,7 @@ function Course() {
                             successCallback={resetDialog}
                             courseId={course_id} />);
                         setDialogOpen(true);}}>Add a Lesson</Button>
-                    <Button variant="outlined" startIcon={<BallotIcon />} sx={{ marginBottom: 2, marginLeft: 1 }} onClick={() => {
+                    <Button variant="contained" startIcon={<BallotIcon />} sx={{ marginBottom: 2, marginLeft: 1 }} onClick={() => {
                         setDialogContent(<QuizForm
                             cancelCallback={() => setDialogOpen(false)}
                             successCallback={resetDialog}

django_service/static/src/assets/logo-h-dark.png

@@ -1,7 +1,7 @@
-import { TableContainer, Table, TableHead, TableRow, TableBody, TableCell, Paper, Typography } from '@mui/material';
+import { IconButton, TableContainer, Table, TableHead, TableRow, TableBody, TableCell, Paper, Typography } from '@mui/material';
 import { useState, useEffect } from 'react';
 import { getCookie } from '../../src/utils.js';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 const ContentTable = ({ courseId, eventHandler, loaded = false }) => {
     const [contentList, setContentList] = useState([]);
@@ -80,7 +80,9 @@ const ContentTable = ({ courseId, eventHandler, loaded = false }) => {
                         <TableCell>{formatPeriod(content.waiting_period)}</TableCell>
                         <TableCell>{content.type}</TableCell>
                         <TableCell align='right'>
-                            <DeleteOutlineIcon sx={{ cursor: 'pointer', color: 'secondary.main' }} onClick={() => deleteContent(content.id)} />
+                            <IconButton aria-label="delete" onClick={() => deleteContent(content.id)}>
+                                <DeleteIcon />
+                            </IconButton>
                         </TableCell>
                     </TableRow>
                 ))}

django_service/static/src/assets/logo-h-light.png

@@ -149,10 +149,10 @@ function LessonForm({ header, initialTitle, initialContent, onContentChange, can
         </Select>
         </Tooltip>
         <Box mt={2} textAlign="right">
-        <Button variant="outlined" sx={{ mr: 1, boxShadow: 'none' }} onClick={cancel}>
+        <Button variant="outlined" sx={{ mr: 1 }} onClick={cancel}>
             Cancel
         </Button>
-        <Button type="submit" variant="contained" color="primary" sx={{ boxShadow: 'none' }} onClick={() => {if(!lessonId) { addLesson(); } else { updateLesson(); }}}>
+        <Button type="submit" variant="contained" onClick={() => {if(!lessonId) { addLesson(); } else { updateLesson(); }}}>
             Save Lesson
         </Button>
         </Box>

django_service/static/src/assets/logo-v-dark.png

@@ -65,7 +65,7 @@ const QuestionForm = ({question, index, deleteCallback}) => {
                     <Button variant="outlined" color="primary" sx={{ fontSize: '0.75rem', mt: 1 }} onClick={() => setAddingOption(true)} >
                         <RuleIcon /><Typography variant="button" sx={{ ml: 1, fontSize: '0.75rem' }}>Add Option</Typography>
                     </Button>
-                    <Button variant="outlined" color="secondary" onClick={deleteCallback} sx={{ ml: 1, mt: 1, fontSize: '0.75rem' }}>
+                    <Button variant="outlined" onClick={deleteCallback} sx={{ ml: 1, mt: 1, fontSize: '0.75rem' }}>
                         Delete
                     </Button>
                 </Grid>
@@ -85,7 +85,7 @@ const QuestionForm = ({question, index, deleteCallback}) => {
                         />
                     </Grid>
                     <Grid size={{ xs: 3 }} sx={{ textAlign: 'left' }} alignItems={"center"}>
-                        <Button variant="outlined" color="primary" sx={{ mt: 1, mr: 1 }} onClick={() => {
+                        <Button variant="outlined" sx={{ mt: 1, mr: 1 }} onClick={() => {
                             if (optionInputRef.current) {
                                 console.log(optionInputRef.current);
                                 addToOptions(optionInputRef.current.value);

django_service/static/src/assets/logo-v-light.png

@@ -85,12 +85,12 @@ const QuizForm = ({cancelCallback, successCallback, courseId, quizId }) => {
                             }}/>
                         </Grid>
                         <Grid size={{ xs: 12, md: 4 }} sx={{ textAlign: 'right' }}>
-                            <Button variant="outlined" color="primary" onClick={() => {
+                            <Button variant="outlined" onClick={() => {
                                 addToQuestions();
                             }}>
                                 Add Question
                             </Button>
-                            <Button variant="outlined" sx={{ ml: 1 }} color="secondary" onClick={() => { setShowQuestionField(false); setNewQuestion(""); }}>
+                            <Button variant="outlined" sx={{ ml: 1 }} onClick={() => { setShowQuestionField(false); setNewQuestion(""); }}>
                                 Cancel
                             </Button>
                         </Grid>