Fixed dark/light mode issues

Author: mkimberlin

web-ui/src/App.css

@@ -7,11 +7,11 @@
 
   a,
   a:visited {
-    color: var(--checkins-palette-primary-link);
+    color: var(--mui-palette-primary-link);
   }
 
   a:hover {
-    color: var(--checkins-palette-primary-link-hover);
+    color: var(--mui-palette-primary-link-hover);
   }
 }
 

web-ui/src/App.jsx

@@ -14,8 +14,8 @@ import { DarkMode, LightMode } from '@mui/icons-material';
 
 import {
   useColorScheme,
-  experimental_extendTheme as extendTheme,
-  Experimental_CssVarsProvider as CssVarsProvider
+  createTheme,
+  ThemeProvider
 } from '@mui/material/styles';
 
 import './App.css';
@@ -44,8 +44,10 @@ function SchemeToggle() {
   );
 }
 
-const theme = extendTheme({
-  cssVarPrefix: 'checkins',
+const theme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data',
+  },
   colorSchemes: {
     light: {
       palette: {
@@ -90,7 +92,7 @@ getUserColorScheme();
 
 function App() {
   return (
-    <CssVarsProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         <Router history={customHistory}>
           <AppContextProvider>
@@ -108,7 +110,7 @@ function App() {
           </AppContextProvider>
         </Router>
       </LocalizationProvider>
-    </CssVarsProvider>
+    </ThemeProvider>
   );
 }
 

web-ui/src/components/admin/roles/Roles.css

@@ -15,12 +15,12 @@
   position: absolute;
   min-width: 400px;
   max-width: 600px;
-  background-color: var(--checkins-palette-background-default);
+  background-color: var(--mui-palette-background-default);
   top: 50%;
   left: 50%;
   padding: 0.5rem;
   transform: translate(-50%, -50%);
-  border: 2px solid var(--checkins-palette-background-default);
+  border: 2px solid var(--mui-palette-background-default);
 }
 
 .role-modal h2 {

web-ui/src/components/celebrations/Anniversaries.css

@@ -31,7 +31,7 @@ body.open {
   min-width: 450px;
 }
 .anniversaries-card span {
-  color: var(--checkins-palette-primary-light);
+  color: var(--mui-palette-primary-light);
   font-weight: bold;
 }
 .anniversary-gift {

web-ui/src/components/celebrations/Birthdays.css

@@ -16,7 +16,7 @@ body {
   min-width: 450px;
 }
 .birthdays-card span {
-  color: var(--checkins-palette-primary-light);
+  color: var(--mui-palette-primary-light);
   font-weight: bold;
 }
 .birthdays-container {

web-ui/src/components/certifications/EarnedCertificationsTable.css

@@ -21,7 +21,7 @@
   td,
   th {
     padding: 0.5rem;
-    color: var(--checkins-palette-text-primary);
+    color: var(--mui-palette-text-primary);
   }
 
   th {
@@ -34,12 +34,12 @@
   }
 
   tr:nth-child(even) {
-    background-color: var(--checkins-palette-background-default);
-    background-image: var(--checkins-palette-alternate-row-overlay);
+    background-color: var(--mui-palette-background-default);
+    background-image: var(--mui-palette-alternate-row-overlay);
   }
 
   tr:nth-child(odd) {
-    background-color: var(--checkins-palette-background-default);
+    background-color: var(--mui-palette-background-default);
   }
 
   .actions-th {

web-ui/src/components/checkin/CheckinHistory.jsx

@@ -94,8 +94,8 @@ const CheckinsHistory = () => {
               fontSize: '1.2em',
               fill:
                 index <= 0
-                  ? 'var(--checkins-palette-action-disabled)'
-                  : 'var(--checkins-palette-action)'
+                  ? 'var(--mui-palette-action-disabled)'
+                  : 'var(--mui-palette-action)'
             }}
           />
         </IconButton>
@@ -120,8 +120,8 @@ const CheckinsHistory = () => {
               fontSize: '1.2em',
               fill:
                 index <= 0
-                  ? 'var(--checkins-palette-action-disabled)'
-                  : 'var(--checkins-palette-action)'
+                  ? 'var(--mui-palette-action-disabled)'
+                  : 'var(--mui-palette-action)'
             }}
           />
         </IconButton>

web-ui/src/components/checkin/__snapshots__/CheckinHistory.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`CheckinHistory > renders correctly 1`] = `
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium arrow disabled css-1umw9bq-MuiSvgIcon-root"
         data-testid="ArrowBackIcon"
         focusable="false"
-        style="font-size: 1.2em; fill: var(--checkins-palette-action-disabled);"
+        style="font-size: 1.2em; fill: var(--mui-palette-action-disabled);"
         viewBox="0 0 24 24"
       >
         <path
@@ -77,7 +77,7 @@ exports[`CheckinHistory > renders correctly 1`] = `
         class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium arrow enabled css-1umw9bq-MuiSvgIcon-root"
         data-testid="ArrowForwardIcon"
         focusable="false"
-        style="font-size: 1.2em; fill: var(--checkins-palette-action-disabled);"
+        style="font-size: 1.2em; fill: var(--mui-palette-action-disabled);"
         viewBox="0 0 24 24"
       >
         <path

web-ui/src/components/edit_skills/EditSkills.css

@@ -2,7 +2,7 @@
   position: absolute;
   min-width: 400px;
   max-width: 600px;
-  background-color: var(--checkins-palette-background-default);
+  background-color: var(--mui-palette-background-default);
   top: 50%;
   left: 50%;
   padding: 0.5rem;
@@ -40,7 +40,7 @@
   position: absolute;
   min-width: 400px;
   max-width: 600px;
-  background-color: var(--checkins-palette-background-default);
+  background-color: var(--mui-palette-background-default);
   top: 50%;
   left: 50%;
   padding: 0.5rem;

web-ui/src/components/expand-more/ExpandMore.jsx

@@ -9,12 +9,24 @@ const ExpandMore = styled(props => {
       {props.children ? props.children : <ExpandMoreIcon />}
     </IconButton>
   );
-})(({ theme, expand }) => ({
-  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+})(({
+  theme
+}) => ({
+  transform: 'rotate(180deg)',
   marginLeft: 'auto',
   transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest
-  })
+  }),
+  variants: [{
+    props: (
+      {
+        expand
+      }
+    ) => !expand,
+    style: {
+      transform: 'rotate(0deg)'
+    }
+  }]
 }));
 
 export default ExpandMore;