Foun 840 (#1218)

* theme overhaul for trelliscope * theme overhaul for trelliscope * put test file back * additional theme work and documentation * removed commented out code * additional theme work * FOUN-840: additional style tweaks * removed test file changes --------- Co-authored-by: Brandon McArthur <[email protected]> Co-authored-by: Brandon McArthur <[email protected]>
trelliscope · Jun 12, 2024 · ce16c69 · ce16c69
1 parent 56ed791
commit ce16c69
Show file tree

Hide file tree

Showing 80 changed files with 1,353 additions and 1,022 deletions.
diff --git a/_examples/gapminder_testing/config.jsonp b/_examples/gapminder_testing/config.jsonp
@@ -2,4 +2,4 @@ __loadAppConfig__5ae49320({
   "name": "Trelliscope App",
   "datatype": "jsonp",
   "id": "5ae49320",
-})
+});
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,8 +3,6 @@ import { useDispatch } from 'react-redux';
 import { Box } from '@mui/material';
 import { SnackbarProvider } from 'notistack';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import blue from '@mui/material/colors/blue';
-import lightBlue from '@mui/material/colors/lightBlue';
 import { setAppID, setFullscreen, setSinglePageApp, setOptions, setPaths, setAppData } from './slices/appSlice';
 import { windowResize, setAppDims } from './slices/uiSlice';
 import DataProvider from './components/DataProvider';
@@ -17,6 +15,7 @@ import ErrorWrapper from './components/ErrorWrapper';
 
 import './assets/styles/main.css';
 import ErrorSnack from './components/ErrorSnack';
+import { theme } from './palette';
 
 declare global {
   interface Window {
@@ -73,27 +72,6 @@ const App: React.FC<AppProps> = ({ client, config, id, singlePageApp, options, f
   const dispatch = useDispatch();
   const { data: configObj } = useConfig();
 
-  const themeV1 = createTheme({
-    palette: {
-      primary: {
-        light: configObj?.theme?.light || '#4dabf5',
-        main: configObj?.theme?.primary || blue.A200,
-        dark: configObj?.theme?.dark || '#2e60b1',
-      }, // '#4285f4', // lightBlue500,
-      // background: {
-      //   default: '#151C24',
-      //   paper: '#151C24',
-      // },
-      secondary: { light: lightBlue[200], main: lightBlue[700] },
-    },
-    typography: {
-      fontFamily: '"Poppins", sans-serif',
-      fontWeightLight: 200,
-      fontWeightRegular: 300,
-      fontWeightMedium: 400,
-    },
-  });
-
   useEffect(() => {
     dispatch(setAppID(id));
     if (typeof config === 'string') {
@@ -130,9 +108,17 @@ const App: React.FC<AppProps> = ({ client, config, id, singlePageApp, options, f
   return (
     <ErrorWrapper>
       <DataProvider client={client}>
-        <ThemeProvider theme={themeV1}>
+        <ThemeProvider theme={createTheme(configObj?.theme ? configObj.theme : theme)}>
           <SnackbarProvider>
-            <Box sx={{ display: 'flex', height: 'inherit' }}>
+            <Box
+              sx={{
+                display: 'flex',
+                height: 'inherit',
+                backgroundColor: configObj?.theme
+                  ? configObj.theme.palette?.secondary.main
+                  : theme?.palette?.secondary?.main || 'initial',
+              }}
+            >
               <ErrorWrapper>
                 <Header />
               </ErrorWrapper>

diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
@@ -9,10 +9,6 @@ body {
   overflow: hidden;
 }
 
-.trelliscope-app-container {
-  background: white;
-}
-
 .trelliscope-app {
   font-family: 'Poppins', sans-serif;
   font-weight: 300;
@@ -48,11 +44,9 @@ body {
 .trelliscope-app h5,
 .trelliscope-app h6 {
   font-weight: 500;
-  color: black;
 }
 
 .trelliscope-app strong {
-  color: black;
   font-weight: 500;
 }
 
@@ -68,10 +62,6 @@ body {
   font-size: 20px;
 }
 
-.trelliscope-app a {
-  color: #ff5252;
-}
-
 .trelliscope-fullscreen {
   position: fixed !important;
   top: 0 !important;

diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss
@@ -4,56 +4,8 @@
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 :root {
-  // color
-  --white: #fff;
-  --white-100: #fdfdfd;
-  --white-200: #f6f6f6;
-  --white-300: #eee;
-  --white-400: #eaedf0;
-  --white-500: #ebebeb;
-  --white-600: #e0e0e0;
-  --black: #000;
-  --black-100: #000000cc;
-  --black-200: #000000de;
-  --black-300: #00000038;
-  --black-400: #00000066;
-  --black-500: #0000001e;
-  --gray: #ddd;
-  --gray-100: #ccc;
-  --gray-200: #c1c1c1;
-  --gray-300: #c0c0c0;
-  --gray-400: #bbb;
-  --gray-500: #aaa;
-  --gray-600: #9ba3af;
-  --gray-700: #999;
-  --gray-800: #939393;
-  --gray-900: #888;
-  --gray-1000: #848484;
-  --gray-1100: #777;
-  --gray-1200: #f6f6f666;
-  --gray-1300: #666;
-  --gray-1400: #444;
-  --red: #ff8e6a;
-  --red-100: #ff5252;
-  --red-200: #ff4308;
-  --blue: #90caf9;
-  --blue-100: #458af9e6;
-  --blue-200: #448aff;
-  --blue-300: #458af966;
-  --orange: #ffd27f;
-  --orange-100: #ffc04c;
-  --orange-200: #ffaa0a;
-  --green: #81c784;
-
   // border
   --border: 1px solid;
-  --border-1: 1px solid var(--white);
-  --border-2: 1px solid var(--white-400);
-  --border-3: 1px solid var(--white-600);
-  --border-4: 1px solid var(--gray);
-  --border-5: 1px solid var(--gray-100);
-  --border-6: 1px solid var(--gray-200);
-  --border-7: 1px solid var(--gray-300);
   --border-8: 10px;
 
   // size
@@ -169,10 +121,6 @@
   --sideButton-transition: color 0.2s, background-color 0.2s;
   --sideButtons-spacer-transition: height 0.2s;
 
-  // shadow
-  --sidebarFilter-variable-box-shadow: var(--black-500) 0px 1px 6px, var(--black-500) 0px 1px 4px;
-  --sidebarSort-variable-box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
-
   // padding
   --sideButtons-container-padding-top: var(--header-container-height);
   --padding-px: 2px;

diff --git a/src/components/AddViewModal/AddViewModal.tsx b/src/components/AddViewModal/AddViewModal.tsx
@@ -14,6 +14,7 @@ import {
 } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import { useSelector } from 'react-redux';
+import { useTheme } from '@mui/material/styles';
 import styles from './AddViewModal.module.scss';
 import { useGetAllLocalViews, useStoredInputValue } from '../../inputUtils';
 import { selectFilterState } from '../../slices/filterSlice';
@@ -46,6 +47,7 @@ const AddViewModal: React.FC<AddViewModalProps> = ({ isOpen, handleViewToggle, s
   const sorts = useSelector(selectSort);
   const labels = useSelector(selectLabels);
   const layout = useSelector(selectLayout);
+  const theme = useTheme();
 
   const { setStoredValue } = useStoredInputValue('trelliscope_views', viewForm?.name);
 
@@ -107,11 +109,39 @@ const AddViewModal: React.FC<AddViewModalProps> = ({ isOpen, handleViewToggle, s
 
   return (
     <div className={styles.addViewModal}>
-      <Dialog data-testid="views-modal" fullWidth open={isOpen} onClose={handleViewToggle}>
+      <Dialog
+        PaperProps={{ sx: { backgroundColor: theme.palette.secondary.main } }}
+        data-testid="views-modal"
+        fullWidth
+        open={isOpen}
+        onClose={handleViewToggle}
+      >
         <DialogTitle>Add a new view</DialogTitle>
         <DialogContent>
-          <DialogContentText>Enter a description and save this view locally.</DialogContentText>
+          <DialogContentText sx={{ color: theme.palette.primary.contrastText }}>
+            Enter a description and save this view locally.
+          </DialogContentText>
           <TextField
+            sx={{
+              // change outline color to use theme and text color contrast text
+              '& .MuiOutlinedInput-root': {
+                '& fieldset': {
+                  borderColor: theme.palette.primary.contrastText,
+                },
+                '&:hover fieldset': {
+                  borderColor: theme.palette.text.primary,
+                },
+                '&.Mui-focused fieldset': {
+                  borderColor: theme.palette.primary.main,
+                },
+              },
+              '& .MuiInputLabel-outlined': {
+                color: theme.palette.primary.contrastText,
+                '&.Mui-focused': {
+                  color: theme.palette.primary.main,
+                },
+              },
+            }}
             id="name"
             data-testid="view-name-input"
             autoFocus
@@ -126,6 +156,26 @@ const AddViewModal: React.FC<AddViewModalProps> = ({ isOpen, handleViewToggle, s
             onChange={handleFormChange}
           />
           <TextField
+            sx={{
+              // change outline color to use theme and text color contrast text
+              '& .MuiOutlinedInput-root': {
+                '& fieldset': {
+                  borderColor: theme.palette.primary.contrastText,
+                },
+                '&:hover fieldset': {
+                  borderColor: theme.palette.text.primary,
+                },
+                '&.Mui-focused fieldset': {
+                  borderColor: theme.palette.primary.main,
+                },
+              },
+              '& .MuiInputLabel-outlined': {
+                color: theme.palette.primary.contrastText,
+                '&.Mui-focused': {
+                  color: theme.palette.primary.main,
+                },
+              },
+            }}
             id="description"
             data-testid="view-description-input"
             autoFocus

diff --git a/src/components/CatHistogram/CatHistogram.module.scss b/src/components/CatHistogram/CatHistogram.module.scss
@@ -3,7 +3,6 @@
 
   &BarWrapper {
     position: relative;
-    color: var(--gray-1300);
     font-size: 14px;
     margin-bottom: 1px;
     border: none;
@@ -12,35 +11,19 @@
     width: 100%;
 
     &:hover {
-      background: var(--white-200);
-
       .catHistogramBarValue {
         opacity: 1;
       }
     }
-
-    &__active {
-      color: var(--black);
-
-      .catHistogramBar {
-        background: var(--orange-200);
-      }
-    }
   }
 
   &Bar {
     position: absolute;
     top: 0;
     left: 0;
-    background: var(--gray-300);
     display: flex;
     align-items: center;
 
-    &:hover {
-      background: var(--orange-100);
-      color: var(--black);
-    }
-
     &Label {
       padding-left: var(--margin-3);
       line-height: 14px;
@@ -50,7 +33,6 @@
 
     &Value {
       position: absolute;
-      color: var(--gray-1400);
       right: var(--margin-3);
       top: 5px;
       line-height: 15px;
@@ -61,7 +43,6 @@
 
     &Indicator {
       position: absolute;
-      background: #448aff;
       width: 3px;
       height: 24px;
       top: 0;

diff --git a/src/components/CatHistogram/CatHistogramBar.tsx b/src/components/CatHistogram/CatHistogramBar.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
+import { useTheme, lighten, darken } from '@mui/material/styles';
+import { Box } from '@mui/material';
 import { getLabelFromFactor } from '../../utils';
 
 import styles from './CatHistogram.module.scss';
@@ -28,36 +30,49 @@ const CatHistogramBar: React.FC<CatHistogramBarProps> = ({
   metaLevels,
   metaType,
 }) => {
+  const theme = useTheme();
   const handleClick = () => {
     if (label === MISSING_TEXT && metaType === META_TYPE_FACTOR) {
       return onClick(-Infinity as unknown as string);
     }
     return onClick(label);
   };
 
+  const styleObj = {
+    ...style,
+    color: active ? theme.palette.text.primary : theme.palette.primary.contrastText,
+    '&:hover': {
+      background: lighten(theme.palette.secondary.light, 0.5),
+    },
+  };
+
   return (
-    <div
-      className={classNames(styles.catHistogramBarWrapper, {
-        [styles.catHistogramBarWrapper__active]: active,
-      })}
-      style={style}
-      role="presentation"
-      onClick={handleClick}
-    >
-      <div className={styles.catHistogramBar} style={{ width, height }}>
+    <Box className={styles.catHistogramBarWrapper} sx={styleObj} role="presentation" onClick={handleClick}>
+      <Box
+        className={styles.catHistogramBar}
+        sx={{
+          width,
+          height,
+          background: active ? theme.palette.secondary.contrastText : darken(theme.palette.secondary.dark, 0.15),
+          '&:hover': {
+            background: lighten(theme.palette.secondary.contrastText, 0.25),
+            color: theme.palette.text.primary,
+          },
+        }}
+      >
         <div className={styles.catHistogramBarLabel}>
           {label === MISSING_TEXT
             ? MISSING_TEXT
             : !metaLevels
-            ? label
-            : getLabelFromFactor(label as unknown as number, metaLevels)}
+              ? label
+              : getLabelFromFactor(label as unknown as number, metaLevels)}
         </div>
+      </Box>
+      <div style={{ color: theme.palette.text.primary }} className={styles.catHistogramBarValue}>
+        {value}
       </div>
-      <div className={styles.catHistogramBarValue}>{value}</div>
-      {active && (
-        <div className={styles.catHistogramBarIndicator} />
-      )}
-    </div>
+      {active && <div style={{ background: theme.palette.primary.main }} className={styles.catHistogramBarIndicator} />}
+    </Box>
   );
 };