Feature 2233/theme cherry picks

web-ui/.prettierignore

@@ -0,0 +1 @@
+_variables.css

web-ui/src/App.css

@@ -1,13 +1,24 @@
-:root {
-  --oci-light-blue: #76c8d4;
-  --oci-dark-blue: #2c519e;
-  --oci-orange: #f8b576;
-  --nav-width: 150px;
+@import 'styles/variables.css';
+
+.App {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  a,
+  a:visited {
+    color: var(--checkins-palette-primary-link);
+  }
+
+  a:hover {
+    color: var(--checkins-palette-primary-link-hover);
+  }
 }
 
 @media (min-width: 600px) {
   .App {
-    padding-left: 150px;
+    margin-top: 65px;
+    padding-left: var(--nav-width);
   }
 }
 
@@ -22,12 +33,12 @@
 }
 
 .App-header {
-  min-height: 100vh;
+  align-items: center;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   font-size: calc(10px + 2vmin);
+  justify-content: center;
+  min-height: 100vh;
 }
 
 textarea {

web-ui/src/App.jsx

@@ -10,66 +10,90 @@ import { AppContextProvider } from './context/AppContext';
 import SnackBarWithContext from './components/snackbar/SnackBarWithContext';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { DarkMode, LightMode } from '@mui/icons-material';
+
+import {
+  useColorScheme,
+  experimental_extendTheme as extendTheme,
+  Experimental_CssVarsProvider as CssVarsProvider
+} from '@mui/material/styles';
 
 import './App.css';
 
-const customHistory = createBrowserHistory();
+function getUserColorScheme() {
+  if (window?.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark';
+  } else if (window?.matchMedia('(prefers-color-scheme: light)').matches) {
+    return 'light';
+  } else {
+    return 'light';
+  }
+}
+function SchemeToggle() {
+  const { mode, setMode } = useColorScheme();
+  return (
+    <div
+      className="Menu-modeToggle"
+      onClick={() => {
+        setMode(mode === 'light' ? 'dark' : 'light');
+      }}
+      title={`Select ${mode === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {mode === 'light' ? <DarkMode /> : <LightMode />}
+    </div>
+  );
+}
 
-const theme = createTheme({
-  palette: {
-    primary: {
-      light: '#6085d9',
-      main: '#2559a7',
-      dark: '#003177',
-      contrastText: '#fff'
-    },
-    secondary: {
-      light: '#ffe8a2',
-      main: '#feb672',
-      dark: '#c88645',
-      contrastText: '#000'
+const theme = extendTheme({
+  cssVarPrefix: 'checkins',
+  colorSchemes: {
+    light: {
+      palette: {
+        secondary: {
+          main: '#76c8d4'
+        }
+      }
     },
-    background: {
-      default: '#F5F5F6',
-      paper: '#fff'
+    dark: {
+      palette: {
+        secondary: {
+          main: '#76c8d4'
+        }
+      }
     }
   },
   components: {
     MuiCssBaseline: {
       styleOverrides: {
+        secondary: {
+          main: '#f8b576'
+        },
         body: {
           fontSize: '0.875rem',
           lineHeight: 1.43,
           letterSpacing: '0.01071rem'
         }
       }
-    },
-    MuiTextField: {
-      defaultProps: {
-        variant: 'standard'
-      }
     }
   }
 });
 
+const customHistory = createBrowserHistory();
+
+getUserColorScheme();
+
 function App() {
   return (
-    <ThemeProvider theme={theme}>
+    <CssVarsProvider theme={theme}>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         <Router history={customHistory}>
           <AppContextProvider>
             <ErrorBoundary FallbackComponent={ErrorFallback}>
               <div>
-                <Menu />
-                <div
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'center'
-                  }}
-                  className="App"
-                >
+                <Menu>
+                  <SchemeToggle />
+                </Menu>
+                <div className="App">
                   <Routes />
                 </div>
               </div>
@@ -78,7 +102,7 @@ function App() {
           </AppContextProvider>
         </Router>
       </LocalizationProvider>
-    </ThemeProvider>
+    </CssVarsProvider>
   );
 }
 

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

@@ -15,12 +15,12 @@
   position: absolute;
   min-width: 400px;
   max-width: 600px;
-  background-color: #fff;
+  background-color: var(--checkins-palette-background-default);
   top: 50%;
   left: 50%;
   padding: 0.5rem;
   transform: translate(-50%, -50%);
-  border: 2px solid #fff;
+  border: 2px solid var(--checkins-palette-background-default);
 }
 
 .role-modal h2 {
@@ -88,7 +88,7 @@
   max-height: 40rem;
   min-height: 40rem;
   margin: 1rem;
-  overflow: scroll;
+  overflow-y: scroll;
 }
 
 .role-header-buttons {

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

@@ -296,7 +296,7 @@ const Roles = () => {
                 />
               )}
             />
-            <Button color="primary" onClick={() => addToRole(selectedMember)}>
+            <Button color="secondary" onClick={() => addToRole(selectedMember)}>
               Save
             </Button>
           </div>
@@ -311,9 +311,7 @@ const Roles = () => {
                       <ListSubheader style={{ padding: 0 }}>
                         <div className="role-header">
                           <div className="role-header-title">
-                            <Typography variant="h4" color="black">
-                              {roleObj.role}
-                            </Typography>
+                            <Typography variant="h4">{roleObj.role}</Typography>
                             <Typography
                               variant="subtitle1"
                               style={{

web-ui/src/components/admin/roles/__snapshots__/Roles.test.jsx.snap

@@ -187,7 +187,7 @@ exports[`renders correctly 1`] = `
                       class="role-header-title"
                     >
                       <h4
-                        class="MuiTypography-root MuiTypography-h4 css-1pbf2mx-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h4 css-5lbw0b-MuiTypography-root"
                       >
                         ADMIN
                       </h4>
@@ -281,7 +281,7 @@ exports[`renders correctly 1`] = `
                       class="role-header-title"
                     >
                       <h4
-                        class="MuiTypography-root MuiTypography-h4 css-1pbf2mx-MuiTypography-root"
+                        class="MuiTypography-root MuiTypography-h4 css-5lbw0b-MuiTypography-root"
                       >
                         PDL
                       </h4>

web-ui/src/components/admin/users/__snapshots__/Users.test.jsx.snap

@@ -75,7 +75,7 @@ exports[`renders correctly 1`] = `
             >
               <a
                 href="/profile/9876"
-                style="color: black; text-decoration: none;"
+                style="text-decoration: none;"
               >
                 <div
                   class="MuiCardHeader-root AdminMemberCard-header css-185gdzj-MuiCardHeader-root"
@@ -130,7 +130,7 @@ exports[`renders correctly 1`] = `
 
                     <a
                       href="/profile/8765"
-                      style="text-decoration: none; color: rgba(0, 0, 0, 0.6);"
+                      style="text-decoration: none;"
                     />
                     <br />
                   </p>

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

@@ -4,13 +4,13 @@ body {
   font-family: 'Raleway', sans-serif;
   background-color: #f0e2db;
   font-size: 20px;
-  transition: 1s;
+  transition: var(--transition-timing-long);
 }
 
 body.open {
   animation: bg-change 1s 1;
   background-color: #72c8d5;
-  transition: 1s;
+  transition: var(--transition-timing-long);
 }
 @keyframes bg-change {
   0% {
@@ -31,7 +31,7 @@ body.open {
   min-width: 450px;
 }
 .anniversaries-card span {
-  color: #2559a7;
+  color: var(--checkins-palette-primary-light);
   font-weight: bold;
 }
 .anniversary-gift {
@@ -42,7 +42,7 @@ body.open {
   height: 100px;
   transform-origin: 0% 0%;
   transform: translate(-50%, -50%);
-  transition: 1s;
+  transition: var(--transition-timing-long);
   /*   animation: box 0.5s infinite; */
 }
 .box {
@@ -82,7 +82,7 @@ body.open {
     #2559a7 56%,
     #2559a7 100%
   );
-  transition: 1s;
+  transition: var(--transition-timing-long);
 }
 .anniversary-gift-top.boxOpen {
   animation: box-open 1s;
@@ -144,10 +144,10 @@ body.open {
     #2559a7 100%
   );
   border-radius: 0 0 5px 5px;
-  transition: 1s;
+  transition: var(--transition-timing-long);
 }
 .anniversary-gift-box.boxDown {
-  animation: box-down 1s;
+  animation: box-down var(--transition-timing-long);
   opacity: 0;
 }
 @keyframes box-down {

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

@@ -50,7 +50,7 @@ const Anniversaries = ({ anniversaries }) => {
     return (
       <Card className={'anniversaries-card'} key={index}>
         <Link
-          style={{ color: 'black', textDecoration: 'none' }}
+          style={{ color: 'inherit', textDecoration: 'none' }}
           to={`/profile/${anniv.userId}`}
         >
           <CardHeader

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

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

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

@@ -51,7 +51,7 @@ const Birthdays = ({ birthdays, xPos = 0.75 }) => {
       return (
         <Card className={'birthdays-card'} key={index}>
           <Link
-            style={{ color: 'black', textDecoration: 'none' }}
+            style={{ color: 'inherit', textDecoration: 'none' }}
             to={`/profile/${bday.userId}`}
           >
             <CardHeader