Fix theme change bugs and update colour palette

Seneca-CDOT · Nov 19, 2022 · 009225d · 009225d
1 parent 82a0fda
commit 009225d
Show file tree

Hide file tree

Showing 13 changed files with 103 additions and 74 deletions.
diff --git a/src/web/app/public/colorThemes/dark-default.png b/src/web/app/public/colorThemes/dark-default.png
diff --git a/src/web/app/public/colorThemes/dark-dim.png b/src/web/app/public/colorThemes/dark-dim.png
diff --git a/src/web/app/public/colorThemes/light-contrast.png b/src/web/app/public/colorThemes/light-contrast.png
diff --git a/src/web/app/public/colorThemes/light-default.png b/src/web/app/public/colorThemes/light-default.png
diff --git a/src/web/app/public/colorThemes/light-high-contrast.png b/src/web/app/public/colorThemes/light-high-contrast.png
diff --git a/src/web/app/src/components/ThemeProvider.tsx b/src/web/app/src/components/ThemeProvider.tsx
@@ -4,7 +4,7 @@ import { lightTheme } from '../theme';
 
 type ThemeContextType = {
   theme: Theme;
-  preferredTheme: String | undefined;
+  preferredTheme: String;
   changeTheme: (themeId: String) => void;
 };
 

diff --git a/src/web/app/src/components/ThemeSelector.tsx b/src/web/app/src/components/ThemeSelector.tsx
@@ -4,23 +4,22 @@ import {
   IconButton,
   Popover,
   Typography,
-  Button,
   Paper,
   Tooltip,
   Zoom,
   Divider,
   MenuList,
   MenuItem,
   ListItemText,
-  Radio,
 } from '@material-ui/core';
-import ColorLensIcon from '@mui/icons-material/ColorLens';
+import { List, ListSubheader } from '@mui/material';
+import PaletteIcon from '@mui/icons-material/Palette';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { useTheme } from './ThemeProvider';
 
 const lightDefaultLogoUrl = '/colorThemes/light-default.png';
 const darkDefaultLogoUrl = '/colorThemes/dark-default.png';
-const lightContrastLogoUrl = '/colorThemes/light-contrast.png';
+const lightContrastLogoUrl = '/colorThemes/light-high-contrast.png';
 const darkDimLogoUrl = '/colorThemes/dark-dim.png';
 const themes = [
   { title: 'Light Default', id: 'light-default', image: lightDefaultLogoUrl },
@@ -30,13 +29,30 @@ const themes = [
 ];
 
 const useStyles = makeStyles((theme) => ({
-  changeThemeMenu: {
+  menuSubheader: {
+    color: theme.palette.text.primary,
+    backgroundColor: 'transparent',
+  },
+  popoverPaper: {
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.paper,
+  },
+  themeSelectButton: {
+    '&:hover': {
+      color: theme.palette.action.active,
+    },
+  },
+  themeSelectorButton: {
     color: theme.palette.primary.main,
     '&:hover': {
       backgroundColor: 'transparent',
       color: theme.palette.text.primary,
     },
   },
+  selected: {
+    color: 'black',
+    backgroundColor: '#A9A9A9 !important',
+  },
 }));
 
 const ButtonTooltip = withStyles({
@@ -67,52 +83,60 @@ const ThemeSelector = () => {
   const id = open ? 'simple-popover' : undefined;
 
   return (
-    <ButtonTooltip title="Change Colour Theme" arrow placement="top" TransitionComponent={Zoom}>
-      <IconButton>
-        <Button id="test" aria-describedby={id} onClick={handleClick}>
-          <ColorLensIcon fontSize="large" className={classes.changeThemeMenu} />
-        </Button>
+    <div>
+      <ButtonTooltip
+        title="Change Colour Theme"
+        arrow
+        placement="top"
+        TransitionComponent={Zoom}
+        onClick={handleClick}
+      >
+        <IconButton className={classes.themeSelectorButton}>
+          <PaletteIcon fontSize="large" />
+        </IconButton>
+      </ButtonTooltip>
 
-        <Popover
-          id={id}
-          open={open}
-          anchorEl={anchorEl}
-          onClose={handleClose}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'left',
-          }}
-          PaperProps={{
-            style: { width: '200px' },
-          }}
-        >
-          <Paper>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        PaperProps={{
+          style: { width: '240px' },
+        }}
+      >
+        <Paper className={classes.popoverPaper}>
+          <List>
+            <ListSubheader className={classes.menuSubheader}>
+              <Typography variant="h6" gutterBottom>
+                Change Colour Theme
+              </Typography>
+            </ListSubheader>
+            <Divider />
             <MenuList>
-              <MenuItem>
-                <Typography variant="h6">Change Colour Theme</Typography>
-              </MenuItem>
-              <Divider />
-              <MenuList>
-                {themes.map((theme) => {
-                  return (
-                    <MenuItem key={theme.id}>
-                      <ListItemText>{theme.title}</ListItemText>
-                      <img src={theme.image} alt={theme.title} />
-                      <Radio
-                        key={theme.id}
-                        value={theme.title}
-                        checked={preferredTheme === theme.id}
-                        onClick={() => handleChange(theme.id)}
-                      />
-                    </MenuItem>
-                  );
-                })}
-              </MenuList>
+              {themes.map((theme) => {
+                return (
+                  <MenuItem
+                    key={theme.id}
+                    onClick={() => handleChange(theme.id)}
+                    selected={preferredTheme === theme.id}
+                    className={classes.themeSelectButton}
+                    classes={{ selected: classes.selected }}
+                  >
+                    <ListItemText>{theme.title}</ListItemText>
+                    <img src={theme.image} className="palette-preview" alt={theme.title} />
+                  </MenuItem>
+                );
+              })}
             </MenuList>
-          </Paper>
-        </Popover>
-      </IconButton>
-    </ButtonTooltip>
+          </List>
+        </Paper>
+      </Popover>
+    </div>
   );
 };
 

diff --git a/src/web/app/src/hooks/use-preferred-theme.ts b/src/web/app/src/hooks/use-preferred-theme.ts
@@ -6,7 +6,7 @@ import { useLocalStorage } from 'react-use';
  * loads of the app, and initial logic to get the browser's preferred colour.
  */
 export default function usePreferredTheme() {
-  const [preferredTheme, setPreferredTheme] = useLocalStorage<String | undefined>(
+  const [preferredTheme, setPreferredTheme] = useLocalStorage<String>(
     'preference:theme',
     'light-default'
   );

diff --git a/src/web/app/src/pages/_app.tsx b/src/web/app/src/pages/_app.tsx
@@ -30,6 +30,7 @@ const App = ({ Component, pageProps }: AppProps) => {
       theme = darkDimTheme;
       break;
     default:
+      setPreferredTheme('light-default');
       theme = lightTheme;
       break;
   }
@@ -59,6 +60,7 @@ const App = ({ Component, pageProps }: AppProps) => {
         break;
       default:
         console.warn('no theme is selected');
+        themeId = 'light-default';
         break;
     }
     setPreferredTheme(themeId);

diff --git a/src/web/app/src/pages/index.tsx b/src/web/app/src/pages/index.tsx
@@ -3,20 +3,23 @@ import SEO from '../components/SEO';
 import Banner from '../components/Banner';
 import Posts from '../components/Posts';
 import NavBar from '../components/NavBar';
+import { StyledEngineProvider } from '@mui/material';
 
 const Home = () => {
   const [bannerVisible, setBannerVisibility] = useState(true);
   return (
     <>
-      <SEO pageTitle="Telescope" />
-      <Banner
-        onVisibilityChange={(visible) => setBannerVisibility(visible)}
-        bannerVisible={bannerVisible}
-      />
-      <main className="main">
-        <NavBar disabled={bannerVisible} />
-        <Posts />
-      </main>
+      <StyledEngineProvider injectFirst>
+        <SEO pageTitle="Telescope" />
+        <Banner
+          onVisibilityChange={(visible) => setBannerVisibility(visible)}
+          bannerVisible={bannerVisible}
+        />
+        <main className="main">
+          <NavBar disabled={bannerVisible} />
+          <Posts />
+        </main>
+      </StyledEngineProvider>
     </>
   );
 };

diff --git a/src/web/app/src/styles/Home.module.css b/src/web/app/src/styles/Home.module.css
@@ -114,10 +114,6 @@
   height: 1em;
 }
 
-#simple-popover {
-  width: 460px;
-}
-
 @media (max-width: 600px) {
   .grid {
     width: 100%;

diff --git a/src/web/app/src/styles/telescope-post-content.css b/src/web/app/src/styles/telescope-post-content.css
@@ -208,6 +208,10 @@
   height: 100%;
 }
 
+.palette-preview {
+  border: 1px solid dimgray;
+}
+
 @keyframes scaleFadeIn {
   from {
     opacity: 0;

diff --git a/src/web/app/src/theme/index.ts b/src/web/app/src/theme/index.ts
@@ -50,35 +50,35 @@ export const lightHighContrastTheme: Theme = createTheme({
   palette: {
     type: 'light',
     primary: {
-      main: '#000E54',
-      light: '#128FDB',
-      dark: '#CECDC8',
+      main: '#050133',
+      light: '#1364D8',
+      dark: '#B7B7B6',
     },
     secondary: {
-      main: '#6BCCFC',
+      main: '#30A5FC',
     },
     error: {
-      main: '#F70315',
-      light: '#4d4d4d',
+      main: '#C4051C',
+      light: '#195E02',
     },
     background: {
       default: '#FFFFFF',
       paper: '#D1D1D1',
     },
     text: {
       primary: '#000000',
-      secondary: '#000E54',
+      secondary: '#050133',
     },
     action: {
-      active: '#0F59B2',
-      selected: '#E003CB',
+      active: '#03407C',
+      selected: '#9B0494',
     },
     border: {
       main: 'rgba(240,246,252,0.5)',
     },
     info: {
-      main: '#000E54',
-      light: '#074787 ',
+      main: '#050133',
+      light: '#01333F ',
     },
   },
 });