omshub · awpala · Aug 15, 2024 · Aug 21, 2023 · Aug 22, 2023 · Aug 23, 2023
diff --git a/context/ColorContext.tsx b/context/ColorContext.tsx
@@ -0,0 +1,27 @@
+import { TContextProviderProps } from '@context/types';
+import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from '@mui/material/styles';
+import { getDesignTokens } from '@src/theme';
+
+const { palette: lightPalette } = getDesignTokens('light');
+const { palette: darkPalette } = getDesignTokens('dark');
+export const theme = extendTheme({
+  cssVarPrefix:'omshub',
+  colorSchemes:{
+    light:{
+      palette: lightPalette
+    },
+    dark:{
+      palette: darkPalette
+    }
+  }
+})
+
+export const ColorProvider = ({ children }: TContextProviderProps) => {
+
+
+  return (
+      <CssVarsProvider theme={theme} defaultMode="system" disableTransitionOnChange> 
+        {children}
+      </CssVarsProvider>
+  );
+};
diff --git a/next.config.js b/next.config.js
@@ -12,10 +12,11 @@ module.exports = {
     appId: process.env.APP_ID,
     measurementId: process.env.MEASUREMENT_ID,
   },
-  transpilePackages: ['@mui/system', '@mui/material', '@mui/icons-material'],
+transpilePackages: ['@mui/system', '@mui/material', '@mui/icons-material'],
   modularizeImports: {
-    '@mui/material/?(((\\w*)?/?)*)': {
-      transform: '@mui/material/{{ matches.[1] }}/{{member}}',
+    '@mui/material/!(styles)/?*': {
+      transform: '@mui/material/{{path}}/{{member}}',
+      skipDefaultConversion: true,
     },
     '@mui/icons-material/?(((\\w*)?/?)*)': {
       transform: '@mui/icons-material/{{ matches.[1] }}/{{member}}',

diff --git a/package.json b/package.json
@@ -33,9 +33,10 @@
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
     "@mui/icons-material": "^5.11.11",
-    "@mui/material": "^5.14.2",
+    "@mui/material": "^5.14.5",
     "@mui/x-data-grid": "^6.6.0",
     "@toast-ui/react-editor": "^3.2.2",
     "firebase": "^9.15.0",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,20 +1,25 @@
 import { AlertBar } from '@components/AlertBar';
 import { AlertContextProvider } from '@context/AlertContext';
 import { AuthContextProvider } from '@context/AuthContext';
+import { ColorProvider } from '@context/ColorContext';
 import { MenuContextProvider } from '@context/MenuContext';
 import { CacheProvider, EmotionCache } from '@emotion/react';
 import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider } from '@mui/material/styles';
 import { NavBar } from '@src/components/NavBar';
 import createEmotionCache from '@src/createEmotionCache';
-import theme from '@src/theme';
+import type { NextPage } from 'next';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
+import type { ReactElement, ReactNode } from 'react';
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode
+}
 interface MyAppProps extends AppProps {
+  Component: NextPageWithLayout
   emotionCache?: EmotionCache;
   fallback: object;
 }
@@ -23,26 +28,29 @@
   Component,
   emotionCache = clientSideEmotionCache,
   pageProps,
-}: MyAppProps) => (
+}: MyAppProps) => { 
+
+
+  return (
   <CacheProvider value={emotionCache}>
+    <ColorProvider>
     <AlertContextProvider>
       <AuthContextProvider>
         <Head>
           <meta name='viewport' content='initial-scale=1, width=device-width' />
           <title>OMSHub</title>
         </Head>
-        <ThemeProvider theme={theme}>
           <CssBaseline />
           <MenuContextProvider>
             <NavBar />
             <AlertBar />
           </MenuContextProvider>
-          <Component {...pageProps} />
-        </ThemeProvider>
+          {<Component {...pageProps} />}
         {/* <Copyright /> */}
       </AuthContextProvider>
     </AlertContextProvider>
+    </ColorProvider>
   </CacheProvider>
-);
+)};
 
 export default MyApp;
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,11 +1,13 @@
-import * as React from 'react';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
 import createEmotionServer from '@emotion/server/create-instance';
-import theme from '@src/theme';
+import { getInitColorSchemeScript, useTheme } from '@mui/material/styles';
 import createEmotionCache from '@src/createEmotionCache';
+import Document, { Head, Html, Main, NextScript } from 'next/document';
+import React from 'react';
 
-export default class MyDocument extends Document {
-  render() {
+
+export default function MyDocument(props:any){
+
+  const theme = useTheme()
     return (
       <Html lang='en'>
         <Head>
@@ -17,20 +19,20 @@ export default class MyDocument extends Document {
             href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
           />
           {/* Inject MUI styles first to match with the prepend: true configuration. */}
-          {(this.props as any).emotionStyleTags}
+          {(props as any).emotionStyleTags}
         </Head>
         <body>
+          {getInitColorSchemeScript()}
           <Main />
           <NextScript />
         </body>
       </Html>
     );
-  }
 }
 
 // `getInitialProps` belongs to `_document` (instead of `_app`),
 // it's compatible with static-site generation (SSG).
-MyDocument.getInitialProps = async (ctx) => {
+MyDocument.getInitialProps = async (ctx:any) => {
   // Resolution order
   //
   // On the server:
@@ -63,7 +65,7 @@ MyDocument.getInitialProps = async (ctx) => {
   ctx.renderPage = () =>
     originalRenderPage({
       enhanceApp: (App: any) =>
-        function EnhanceApp(props) {
+        function EnhanceApp(props:any) {
           return <App emotionCache={cache} {...props} />;
         },
     });
@@ -83,6 +85,9 @@ MyDocument.getInitialProps = async (ctx) => {
 
   return {
     ...initialProps,
-    emotionStyleTags,
+    styles: [
+      ...React.Children.toArray(initialProps.styles),
+      ...emotionStyleTags,
+    ],
   };
 };
diff --git a/pages/course/[courseid].tsx b/pages/course/[courseid].tsx
@@ -211,7 +211,7 @@ const CourseId: NextPage<CoursePageProps> = ({
           alignItems: 'center',
         }}
       >
-        <Typography variant='h4' color='text.secondary' gutterBottom>
+        <Typography variant='h4' color='inherit' gutterBottom>
           {courseData?.name}
         </Typography>
         {courseData && courseData?.url && (
@@ -224,7 +224,7 @@ const CourseId: NextPage<CoursePageProps> = ({
               }}
             >
               <LinkIcon />
-              <Typography variant='subtitle1' color='text.secondary'>
+              <Typography variant='subtitle1' color='inherit'>
                 {'Course Website'}
               </Typography>
             </Box>
@@ -242,16 +242,15 @@ const CourseId: NextPage<CoursePageProps> = ({
               justifyContent='center'
             >
               <Grid item xs={12} lg={4}>
-                <Card variant='outlined' sx={{ padding: '5 30' }}>
+                <Card variant='outlined' sx={{ padding: '5 30', color: 'inherit' }}>
                   <CardContent>
                     <Typography
                       sx={{ fontSize: 14 }}
-                      color='text.secondary'
                       gutterBottom
                     >
                       {`Average Workload`}
                     </Typography>
-                    <Typography variant='h5'>
+                    <Typography variant='h5' sx={{color: 'inherit'}}>
                       {roundNumber(Number(courseData?.avgWorkload), 1) +
                         ' hrs/wk'}
                     </Typography>
@@ -270,8 +269,11 @@ const CourseId: NextPage<CoursePageProps> = ({
                 >
                   <CardContent>
                     <Typography
-                      sx={{ fontSize: 14 }}
-                      color='text.secondary'
+                      sx={{ fontSize: 14,
+                        color: mapRatingToColorInverted(
+                          Number(courseData?.avgDifficulty),
+                        ),
+                       }}
                       gutterBottom
                     >
                       {`Average Difficulty`}
@@ -303,8 +305,7 @@ const CourseId: NextPage<CoursePageProps> = ({
                 >
                   <CardContent>
                     <Typography
-                      sx={{ fontSize: 14 }}
-                      color='text.secondary'
+                      sx={{ fontSize: 14, color: mapRatingToColor(Number(courseData.avgOverall)) }}
                       gutterBottom
                     >
                       {`Average Overall`}
@@ -395,7 +396,7 @@ const CourseId: NextPage<CoursePageProps> = ({
               <>
                 <Typography
                   variant='h3'
-                  color='text.secondary'
+                  color='inherit'
                   style={{ textAlign: 'center' }}
                   gutterBottom
                 >
@@ -440,7 +441,7 @@ const CourseId: NextPage<CoursePageProps> = ({
         autoHideDuration={6000}
         onClose={handleClose}
         action={
-          <Button color='secondary' size='small' onClick={handleClose}>
+          <Button color='inherit' size='small' onClick={handleClose}>
             Close
           </Button>
         }

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -40,7 +40,7 @@ const Home: NextPage<HomePageProps> = ({ allCourseData }) => {
       minWidth: isDesktop ? 50 : 300,
       renderCell: (params: GridRenderCellParams) => (
         <Tooltip title={`View review page for ${params.row.courseId}`}>
-          <Link href='/course/[courseid]' as={`/course/${params.row.courseId}`}>
+          <Link color='secondary' href='/course/[courseid]' as={`/course/${params.row.courseId}`}>
             {params.row.name}
           </Link>
         </Tooltip>
@@ -118,17 +118,20 @@ const Home: NextPage<HomePageProps> = ({ allCourseData }) => {
               rows={courses}
               columns={columns}
               loading={!allCourseData}
-              components={{ Toolbar: GridToolbar }}
+              slots={{ toolbar : GridToolbar }}
               sx={{ borderRadius: '25px', padding: '20px 10px' }}
               columnVisibilityModel={{
                 isDeprecated: false,
                 aliases: false,
               }}
-              componentsProps={{
+              slotProps={{
                 toolbar: {
                   printOptions: { disableToolbarButton: true },
+                  disableDensitySelector: true,
                   showQuickFilter: true,
-                  quickFilterProps: { debounceMs: 500 },
+                  sx:{
+
+                  }
                 },
               }}
               initialState={{

diff --git a/src/components/FormEditor.tsx b/src/components/FormEditor.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material/styles';
 import '@toast-ui/editor/dist/toastui-editor.css';
 import { Editor } from '@toast-ui/react-editor';
 import DOMPurify from 'isomorphic-dompurify';
@@ -13,32 +14,32 @@ export default function FormEditor({
   onChange: any;
 }) {
   const editorRef = useRef<Editor>(null);
-
+  const theme = useTheme();
   function handleChange() {
     const dirty = editorRef?.current
       ? editorRef?.current.getInstance().getMarkdown()
       : '';
     const clean = DOMPurify.sanitize(dirty, { FORBID_TAGS: ['img'] });
     onChange(clean);
   }
-
   return (
-    <Editor
-      height='auto'
-      initialValue={initialValue}
-      onChange={handleChange}
-      initialEditType='wysiwyg'
-      previewStyle='vertical'
-      ref={editorRef}
-      useCommandShortcut={true}
-      toolbarItems={[
-        ['heading', 'bold', 'italic', 'strike'],
-        ['hr', 'quote'],
-        ['ul', 'ol', 'task', 'indent', 'outdent'],
-        ['table', 'link'],
-        ['code', 'codeblock'],
-      ]}
-      customHTMLSanitizer={DOMPurify.sanitize}
-    />
+      <Editor
+        height='auto'
+        initialValue={initialValue}
+        onChange={handleChange}
+        initialEditType='wysiwyg'
+        previewStyle='vertical'
+        ref={editorRef}
+        theme={`${theme.palette.mode}`}
+        useCommandShortcut={true}
+        toolbarItems={[
+          ['heading', 'bold', 'italic', 'strike'],
+          ['hr', 'quote'],
+          ['ul', 'ol', 'task', 'indent', 'outdent'],
+          ['table', 'link'],
+          ['code', 'codeblock'],
+        ]}
+        customHTMLSanitizer={DOMPurify.sanitize}
+      />
   );
 }