refactored theme, theme context, theme contect provider to affect css…

… base line and 3rd party packages on over view page. This includes nivo pie chart, responsive bar graph, and classes within Risk/style.
cisagov · Mar 4, 2024 · 645956d · 645956d
1 parent 7ae5f30
commit 645956d
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 48 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -7,7 +7,11 @@ import {
   useLocation
 } from 'react-router-dom';
 import { API, Auth } from 'aws-amplify';
-import { AuthContextProvider, CFThemeProvider, SearchProvider } from 'context';
+import {
+  AuthContextProvider,
+  CFThemeContextProvider,
+  SearchProvider
+} from 'context';
 import {
   MatomoProvider,
   createInstance,
@@ -86,7 +90,7 @@ const LinkTracker = () => {
 const App: React.FC = () => (
   <MatomoProvider value={instance}>
     <Router>
-      <CFThemeProvider>
+      <CFThemeContextProvider>
         <AuthContextProvider>
           <Authenticator.Provider>
             <SearchProvider>
@@ -213,7 +217,7 @@ const App: React.FC = () => (
             </SearchProvider>
           </Authenticator.Provider>
         </AuthContextProvider>
-      </CFThemeProvider>
+      </CFThemeContextProvider>
     </Router>
   </MatomoProvider>
 );

diff --git a/frontend/src/context/Theme.tsx b/frontend/src/context/Theme.tsx
@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   createTheme,
   ThemeProvider,
   Theme,
   StyledEngineProvider
 } from '@mui/material/styles';
-
+import CssBaseline from '@mui/material/CssBaseline';
+import { PaletteMode } from '@mui/material';
 declare module '@mui/material/styles' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface DefaultTheme extends Theme {}
@@ -43,55 +44,130 @@ export const CFThemeContext = React.createContext<CFThemeContextType>({
 });
 
 export function CFThemeContextProvider({ children }: CFThemeProviderProps) {
-  const [mode, setMode] = React.useState<'light' | 'dark'>('light');
+  const [mode, setMode] = useState<PaletteMode>('light');
 
   const switchDarkMode = () => {
     setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
   };
 
   useEffect(() => {
-    const mediaQuery = window.matchMedia(
+    console.log(window.matchMedia('(prefers-color-scheme: dark)').matches);
+    const prefersDarkMode = window.matchMedia(
       '(prefers-color-scheme: dark)'
     ).matches;
-    if (mediaQuery) {
-      setMode('dark');
-    } else {
-      setMode('light');
-    }
+    setMode(prefersDarkMode ? 'dark' : 'light');
+    console.log('prefersDarkMode', prefersDarkMode);
   }, []);
 
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary: {
-            main: '#07648D'
-          },
-          secondary: {
-            main: '#28A0CB'
-          },
-          background: {
-            default: '#EFF1F5'
-          }
-        },
-        breakpoints: {
-          values: {
-            xs: 0,
-            sm: 600,
-            md: 960,
-            lg: 1330,
-            xl: 1920
+  console.log('mode', mode);
+
+  const getDesignTokens = (mode: PaletteMode) => ({
+    palette: {
+      mode,
+      ...(mode === 'light'
+        ? {
+            primary: {
+              main: '#07648D'
+            },
+            secondary: {
+              main: '#28A0CB'
+            },
+            background: {
+              default: '#EFF1F5'
+            },
+            text: {
+              primary: '#000'
+            }
           }
+        : {
+            primary: {
+              main: '#07648D'
+            },
+            secondary: {
+              main: '#28A0CB'
+            },
+            background: {
+              default: '#1E1E1E'
+            },
+            text: {
+              primary: '#fff'
+            }
+          }),
+      breakpoints: {
+        values: {
+          xs: 0,
+          sm: 600,
+          md: 960,
+          lg: 1330,
+          xl: 1920
         }
-      }),
-    [mode]
-  );
+      }
+    }
+  });
+
+  const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
+  //     primary: {
+  //       main: '#07648D'
+  //     },
+  //     secondary: {
+  //       main: '#28A0CB'
+  //     },
+  //     background: {
+  //       default: '#EFF1F5'
+  //     },
+  //     text: {
+  //       primary: mode === 'light' ? '#000' : '#fff'
+  //     }
+  //   },
+  //   breakpoints: {
+  //     values: {
+  //       xs: 0,
+  //       sm: 600,
+  //       md: 960,
+  //       lg: 1330,
+  //       xl: 1920
+  //     }
+  //   }
+  // });
+
+  // const theme = useMemo(
+  //   () =>
+  //     createTheme({
+  //       palette: {
+  //         mode,
+  //         primary: {
+  //           main: '#07648D'
+  //         },
+  //         secondary: {
+  //           main: '#28A0CB'
+  //         },
+  //         background: {
+  //           default: '#EFF1F5'
+  //         },
+  //         text: {
+  //           primary: mode === 'light' ? '#000' : '#fff'
+  //         }
+  //       },
+  //       breakpoints: {
+  //         values: {
+  //           xs: 0,
+  //           sm: 600,
+  //           md: 960,
+  //           lg: 1330,
+  //           xl: 1920
+  //         }
+  //       }
+  //     }),
+  //   [mode]
+  // );
 
   return (
     <StyledEngineProvider injectFirst>
       <CFThemeContext.Provider value={{ switchDarkMode }}>
-        <ThemeProvider theme={theme}>{children}</ThemeProvider>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          {children}
+        </ThemeProvider>
       </CFThemeContext.Provider>
     </StyledEngineProvider>
   );

diff --git a/frontend/src/pages/Risk/TopVulnerableDomains.tsx b/frontend/src/pages/Risk/TopVulnerableDomains.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ResponsiveBar } from '@nivo/bar';
-import { Chip } from '@mui/material';
+import { Chip, useTheme } from '@mui/material';
 import { Point, VulnSeverities } from './Risk';
 import { useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
@@ -31,6 +31,7 @@ const TopVulnerableDomains = (props: { data: Point[] }) => {
   const [labels, setLabels] = useState(sevLabels);
   const keys = sevLabels;
   const pageStart = (current - 1) * resultsPerPage;
+  const theme = useTheme();
   // Separate count by severity
   const domainToSevMap: any = {};
   for (const point of data) {
@@ -145,6 +146,7 @@ const TopVulnerableDomains = (props: { data: Point[] }) => {
               }}
               theme={{
                 fontSize: 12,
+                textColor: theme.palette.mode === 'dark' ? 'white' : 'black',
                 axis: {
                   legend: {
                     text: {

diff --git a/frontend/src/pages/Risk/TopVulnerablePorts.tsx b/frontend/src/pages/Risk/TopVulnerablePorts.tsx
@@ -4,12 +4,13 @@ import { Point } from './Risk';
 import { useHistory } from 'react-router-dom';
 import { getSingleColor } from './utils';
 import * as RiskStyles from './style';
-import { Paper } from '@mui/material';
+import { Paper, useTheme } from '@mui/material';
 const TopVulnerablePorts = (props: { data: Point[] }) => {
   const history = useHistory();
   const { data } = props;
   const { cardRoot, cardSmall, header, chartSmall } = RiskStyles.classesRisk;
   const dataVal = data.map((e) => ({ ...e, [['Port'][0]]: e.value })) as any;
+  const theme = useTheme();
   return (
     <Paper elevation={0} className={cardRoot}>
       <div className={cardSmall}>
@@ -25,6 +26,7 @@ const TopVulnerablePorts = (props: { data: Point[] }) => {
             margin={{ top: 30, right: 40, bottom: 75, left: 100 }}
             theme={{
               fontSize: 12,
+              textColor: theme.palette.mode === 'dark' ? 'white' : 'black',
               axis: {
                 legend: {
                   text: {

diff --git a/frontend/src/pages/Risk/VulnerabilityPieChart.tsx b/frontend/src/pages/Risk/VulnerabilityPieChart.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { ResponsivePie } from '@nivo/pie';
-import { Paper } from '@mui/material';
+import { Paper, useTheme } from '@mui/material';
 import { Point } from './Risk';
 import * as RiskStyles from './style';
 
@@ -14,6 +14,8 @@ const VulnerabilityPieChart = (props: {
   const history = useHistory();
   const { title, data, colors, type } = props;
   const { cardRoot, cardSmall, header, chartSmall } = RiskStyles.classesRisk;
+
+  const theme = useTheme();
   return (
     <Paper elevation={0} className={cardRoot}>
       <div className={cardSmall}>
@@ -26,7 +28,16 @@ const VulnerabilityPieChart = (props: {
             innerRadius={0.5}
             padAngle={0.7}
             arcLabelsSkipAngle={10}
+            arcLabelsTextColor={
+              theme.palette.mode === 'dark' ? 'white' : 'black'
+            }
             arcLinkLabelsSkipAngle={10}
+            arcLinkLabelsColor={
+              theme.palette.mode === 'dark' ? 'white' : 'black'
+            }
+            arcLinkLabelsTextColor={
+              theme.palette.mode === 'dark' ? 'white' : 'black'
+            }
             colors={colors}
             margin={{
               left: 30,

diff --git a/frontend/src/pages/Risk/style.ts b/frontend/src/pages/Risk/style.ts
@@ -37,6 +37,7 @@ export const RiskRoot = styled('div')(({ theme }) => ({
     boxSizing: 'border-box',
     marginBottom: '1rem',
     border: '2px solid #DCDEE0',
+    borderColor: theme.palette.mode === 'dark' ? '#3D4551' : '#DCDEE0',
     boxShadow: 'none',
     '& em': {
       fontStyle: 'normal',
@@ -94,7 +95,7 @@ export const RiskRoot = styled('div')(({ theme }) => ({
   },
   [`& .${classesRisk.header}`]: {
     height: '60px',
-    backgroundColor: '#F8F9FA',
+    backgroundColor: theme.palette.mode === 'dark' ? 'black' : '#F8F9FA',
     top: 0,
     width: '100%',
     color: '#07648D',
@@ -104,9 +105,9 @@ export const RiskRoot = styled('div')(({ theme }) => ({
   },
   [`& .${classesRisk.footer}`]: {
     height: '60px',
-    backgroundColor: '#F8F9FA',
+    backgroundColor: theme.palette.mode === 'dark' ? 'black' : '#F8F9FA',
     width: '100%',
-    color: '#3D4551',
+    color: theme.palette.mode === 'dark' ? 'white' : 'black',
     paddingLeft: 255,
     display: 'flex',
     alignItems: 'center',
@@ -199,7 +200,7 @@ export const RiskRoot = styled('div')(({ theme }) => ({
     display: 'flex',
     flex: 1,
     justifyContent: 'flex-start',
-    color: '#3D4551'
+    color: theme.palette.mode === 'dark' ? 'white' : 'black'
   },
   [`& .${classesRisk.miniCardCenter}`]: {
     display: 'flex',

diff --git a/frontend/src/test-utils/test-utils.tsx b/frontend/src/test-utils/test-utils.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { render, RenderOptions } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { AuthContext, AuthContextType } from '../context/AuthContext';
-import { CFThemeProvider } from 'context';
+import { CFThemeContextProvider } from 'context';
 import { authCtx } from './authCtx';
 
 interface CustomRenderOptions extends RenderOptions {
@@ -15,7 +15,7 @@ const customRender = (ui: any, options: CustomRenderOptions = {}) => {
 
   // Provide any context that the components may be expecting
   const Wrapper: React.FC<React.PropsWithChildren<{}>> = ({ children }) => (
-    <CFThemeProvider>
+    <CFThemeContextProvider>
       <MemoryRouter initialEntries={initialHistory}>
         <AuthContext.Provider
           value={{
@@ -26,7 +26,7 @@ const customRender = (ui: any, options: CustomRenderOptions = {}) => {
           {children}
         </AuthContext.Provider>
       </MemoryRouter>
-    </CFThemeProvider>
+    </CFThemeContextProvider>
   );
   return render(ui, { wrapper: Wrapper, ...rest });
 };