fix(dark mode): fix dark mode in form editor and other areas

omshub · Oct 10, 2023 · 7265616 · 7265616
1 parent 5f70cc1
commit 7265616
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 23 deletions.
diff --git a/pages/course/[courseid].tsx b/pages/course/[courseid].tsx
@@ -27,6 +27,7 @@ import {
   ToggleButton,
   ToggleButtonGroup,
   Typography,
+  useTheme,
 } from '@mui/material';
 import Link from '@src/Link';
 import {
@@ -82,6 +83,8 @@ const CourseId: NextPage<CoursePageProps> = ({
     ({ user } = authContext);
   }
 
+  const theme = useTheme();
+
   const [activeSemesters, setActiveSemesters] = useState<TActiveSemesters>(
     defaultSemesterToggles,
   );
@@ -386,7 +389,7 @@ const CourseId: NextPage<CoursePageProps> = ({
                   <Grid container rowSpacing={5} sx={{ mt: 1 }}>
                     {mapPayloadToArray(courseReviews, REVIEW_ID, DESC).map(
                       (value: Review) => (
-                        <Grid sx={{ width: `100%` }} key={value.reviewId} item>
+                        <Grid sx={{  width: `100%` }} key={value.reviewId} item>
                           <ReviewCard {...value}></ReviewCard>
                         </Grid>
                       ),
@@ -414,13 +417,25 @@ const CourseId: NextPage<CoursePageProps> = ({
         onClose={handleReviewModalClose}
         maxWidth='md'
         closeAfterTransition
+        PaperProps={{sx:{backgroundImage: 'none'}}}
       >
         <ReviewForm {...{ courseData, handleReviewModalClose }} />
       </Dialog>
       <SpeedDial
         ariaLabel='Review Dial'
         sx={{ position: 'fixed', bottom: 40, right: 40 }}
         icon={<SpeedDialIcon />}
+        FabProps={{
+          sx :{
+            border: `1px solid ${theme.palette.secondary.contrastText}`,
+            backgroundColor: `${theme.palette.secondary.main}`,
+            color: `${theme.palette.secondary.contrastText}`,
+            "&:hover":{
+              backgroundColor:`${theme.palette.secondary.contrastText}`,
+              color:`${theme.palette.secondary.main}`
+            }
+          }
+        }}
       >
         {actions
           .flatMap((action) => {
@@ -431,9 +446,19 @@ const CourseId: NextPage<CoursePageProps> = ({
           })
           .map((action) => (
             <SpeedDialAction
+              sx={{
+                border: `1px solid ${theme.palette.secondary.contrastText}`,
+                backgroundColor: `${theme.palette.secondary.main}`,
+                color: `${theme.palette.secondary.contrastText}`,
+                "&:hover":{
+                  backgroundColor:`${theme.palette.secondary.contrastText}`,
+                  color:`${theme.palette.secondary.contrastText}`
+                }
+              }}
               key={action.name}
               icon={action.icon}
               tooltipTitle={action.name}
+              arrow
               onClick={action.clickAction}
             />
           ))}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,7 +2,7 @@ import backend from '@backend/index';
 import { courseFields } from '@globals/constants';
 import { Course } from '@globals/types';
 import { mapDynamicCoursesDataToCourses } from '@globals/utilities';
-import { Tooltip, useMediaQuery, Box, Container, Grid, Typography } from '@mui/material';
+import { Tooltip, useMediaQuery, Box, Container, Grid, Typography, useTheme } from '@mui/material';
 
 import {
   DataGrid,
@@ -26,6 +26,9 @@ const Home: NextPage<HomePageProps> = ({ allCourseData }) => {
     allCourseData,
     courseFields.NAME,
   );
+
+  const theme = useTheme();
+
   const courses = coursesArray.map((data, i) => ({ ...data, id: i }));
 
   const columns: GridColDef[] = [
@@ -35,8 +38,8 @@ const Home: NextPage<HomePageProps> = ({ allCourseData }) => {
       flex: isDesktop ? 1 : 0,
       minWidth: isDesktop ? 50 : 200,
       renderCell: (params: GridRenderCellParams) => (
-        <Tooltip title={`View review page for ${params.row.courseId}`}>
-          <Link color='secondary' href='/course/[courseid]' as={`/course/${params.row.courseId}`}>
+        <Tooltip arrow title={`View review page for ${params.row.courseId}`}>
+          <Link color={`${theme.palette.mode == 'dark' ? 'secondary.contrastText' : 'secondary.main'}`} href='/course/[courseid]' as={`/course/${params.row.courseId}`}>
             {params.row.name}
           </Link>
         </Tooltip>
@@ -134,7 +137,9 @@ const Home: NextPage<HomePageProps> = ({ allCourseData }) => {
                   disableDensitySelector: true,
                   showQuickFilter: true,
                   sx:{
-
+                    '& .MuiButton-root':{
+                      color: `${theme.palette.mode == 'dark' ? 'secondary.contrastText' : 'secondary.main'}`,
+                    }
                   }
                 },
               }}

diff --git a/src/components/ClassCard.tsx b/src/components/ClassCard.tsx
@@ -33,7 +33,7 @@ const ClassCard = ({ ...props }: ClassCardProps) => {
   const router = useRouter();
 
   return (
-    <Card sx={{ width: 350, boxShadow: `0 5px 15px 0 ${grey[300]}` }}>
+    <Card sx={{ width: 350, boxShadow: `0 5px 0px 0 ${grey[200]}` }}>
       <CardActionArea
         onClick={() => {
           router.push({

diff --git a/src/components/FormEditor.tsx b/src/components/FormEditor.tsx
@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import '@toast-ui/editor/dist/toastui-editor.css';
 import { Editor } from '@toast-ui/react-editor';
@@ -23,6 +24,51 @@ export default function FormEditor({
     onChange(clean);
   }
   return (
+    <Box sx={{
+    "& .toastui-editor-dark":{
+      borderColor: "#494c56",
+      "& .ProseMirror":{
+        color:`${theme.palette.secondary.contrastText}`
+      },
+      "& .toastui-editor-contents p":{
+        color: `${theme.palette.secondary.contrastText}`
+      },
+      "& .toastui-editor-md-splitter":{
+        backgroundColor: `${theme.palette.secondary.light}`
+      },
+      "& .toastui-editor-main":{
+        backgroundColor:`${theme.palette.secondary.main}`
+      },
+      "& .toastui-editor-defaultUI-toolbar":{
+        backgroundColor:`${theme.palette.secondary.light}`,
+        borderColor: '#494c56',
+        "& button":{
+          borderColor:"#232428",
+          "&:not(:disabled):hover":{
+            backgroundColor: "#36383f",
+            borderColor: "#36383f"
+          }
+        }
+      },
+      "& .toastui-editor-ww-container":{
+        backgroundColor:`${theme.palette.secondary.main}`
+      },
+      "& .toastui-editor-mode-switch":{
+        borderTop: '1px solid #393b42',
+        backgroundColor:`${theme.palette.secondary.light}`,
+        "& .tab-item":{
+          backgroundColor: `${theme.palette.secondary.light}`,
+          border: 'none',
+          borderTopColor: '#393b42',
+          "&.active":{
+            borderTopColor: `${theme.palette.secondary.main}`,
+            backgroundColor: `${theme.palette.secondary.main}`,
+          }
+        }
+      }
+    }
+    }}
+    >
       <Editor
         height='auto'
         initialValue={initialValue}
@@ -41,5 +87,6 @@ export default function FormEditor({
         ]}
         customHTMLSanitizer={DOMPurify.sanitize}
       />
+      </Box>
   );
 }
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -46,16 +46,18 @@ export const NavBar = ({ ...props }: NavBarProps) => {
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar
-        color='secondary'
+        color={theme.palette.mode == 'dark' ? 'primary' : 'secondary'}
         position='static'
         elevation={0}
         {...props}
       >
         <Toolbar color='inherit'>
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+          <Tooltip arrow title={"Home"}>
+
             <Link
               variant='button'
-              color='inherit'
+              color='secondary.contrastText'
               href='/'
               sx={{
                 display: { xs: 'none', md: 'flex' },
@@ -73,11 +75,15 @@ export const NavBar = ({ ...props }: NavBarProps) => {
                 OMSHub
               </Typography>
             </Link>
+            </Tooltip>
+
           </Box>
+
           <Box sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
             {Object.keys(navigationMenuItems).map(
               (name: string, index: number) => (
                 <Tooltip
+                  arrow
                   key={index}
                   title={`${navigationMenuItems[name][`tooltip`]}`}
                 >
@@ -96,6 +102,7 @@ export const NavBar = ({ ...props }: NavBarProps) => {
                 </Tooltip>
               ),
             )}
+            <Tooltip arrow title={`${theme.palette.mode} mode`}>
             <IconButton
               sx={{ 
                 p: 0,
@@ -105,14 +112,15 @@ export const NavBar = ({ ...props }: NavBarProps) => {
               onClick={()=>setMode(mode == 'light' ? 'dark' : 'light')}
               color="inherit"
             >
-            <Tooltip disableInteractive disableFocusListener disableTouchListener title={`${theme.palette.mode} mode`}>
               {theme.palette.mode === 'dark' ? (
                 <Brightness7Icon />
               ) : (
                 <Brightness4Icon />
-              )}
-              </Tooltip>
+              )} 
             </IconButton>
+            </Tooltip>
+            <Tooltip arrow title={`Website's Github`}>
+
             <Link
               variant='button'
               color='inherit'
@@ -122,10 +130,10 @@ export const NavBar = ({ ...props }: NavBarProps) => {
                 mx: 1.5,
               }}
             >
-              <Tooltip title={`Website's Github`}>
                 <GitHubIcon />
-              </Tooltip>
             </Link>
+            </Tooltip>
+
           </Box>
           <MobileMenu {...navigationMenuItems} />
           {/* User Profile Side */}

diff --git a/src/components/ProfileMenu.tsx b/src/components/ProfileMenu.tsx
@@ -31,7 +31,7 @@ const ProfileMenu = (profileMenuItems: MenuLinksProps) => {
   return (
     <>
       <Container sx={{color:'inherit'}}>
-        <Tooltip title='Profile Menu'>
+        <Tooltip arrow title='Profile Menu'>
           <Avatar
             aria-controls={menuId}
             onClick={handleProfileMenuOpen}

diff --git a/src/components/ReviewCard.tsx b/src/components/ReviewCard.tsx
@@ -118,10 +118,18 @@ const ReviewCard = ({
   return (
     <div ref={clipboardRef!}>
       <Card
+        color='inherit'
         sx={{
+          backgroundImage: "none",
           p: 1,
-          borderRadius: '10px',
-          boxShadow: `0 5px 15px 0 ${grey[400]}`,
+          borderRadius: '15px',
+          boxShadow: `0 5px 10px 0 ${grey[500]}`,
+          "& a":{
+            color:"#6495ED",
+            "&:visited":{
+              color:"#8a2be2"
+            }
+          }
         }}
       >
         <CardContent>
@@ -235,7 +243,7 @@ const ReviewCard = ({
           <Grid textAlign='right'>
             {/* Not User View */}
             {!isFirefox && (
-              <Tooltip title='Screenshot Review'>
+              <Tooltip arrow title='Screenshot Review'>
                 <IconButton onClick={handleCopyToClipboard}>
                   <PhotoCameraIcon />
                 </IconButton>
@@ -255,7 +263,7 @@ const ReviewCard = ({
             {/* User Review View */}
             {isUserReviewsView ? (
               <>
-                <Tooltip title='Delete Review'>
+                <Tooltip arrow title='Delete Review'>
                   <IconButton onClick={handleDeleteDialogOpen}>
                     <DeleteIcon />
                   </IconButton>

diff --git a/src/components/ReviewForm.tsx b/src/components/ReviewForm.tsx
@@ -197,9 +197,10 @@ const ReviewForm = ({
 
   return (
     <Grid
+      color='inherit'
       container
       rowSpacing={4}
-      sx={{ px: 5, py: 10 }}
+      sx={{ px: 5, py: 10, backgroundImage: 'none' }}
       justifyContent='center'
     >
       <Typography variant='h6'>{`Add Review for ${courseData.courseId}: ${courseData.name}`}</Typography>

diff --git a/src/theme.ts b/src/theme.ts
@@ -1,6 +1,6 @@
 import { PaletteMode } from '@mui/material';
 import { red } from '@mui/material/colors';
-import { navyBlue, techGold } from '@src/colorPalette';
+import { navyBlue } from '@src/colorPalette';
 
 
 
@@ -17,6 +17,7 @@ export const getDesignTokens = (mode: PaletteMode ) => ({
       },
       secondary: {
         main: navyBlue,
+        contrastText: '#FFF'
       },
       error: {
         main: red.A400,
@@ -29,11 +30,13 @@ export const getDesignTokens = (mode: PaletteMode ) => ({
     //Dark
     {
         primary: {
-          main: '#FFF',
-          contrastText: '#000',
+          main: '#000',
+          contrastText: '#FFF',
         },
         secondary: {
-          main: techGold,
+          main: '#121212',
+          light: '#232428',
+          contrastText: "#FFF"
         },
         error: {
           main: red.A400,