THEMES

diced · Apr 5, 2021 · 819fd1a · 819fd1a
1 parent b5d64b0
commit 819fd1a
Show file tree

Hide file tree

Showing 13 changed files with 156 additions and 40 deletions.
diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import Typography from '@material-ui/core/Typography';
-import Card from '@material-ui/core/Card';
+import Paper from '@material-ui/core/Paper';
 import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';
 import Dialog from '@material-ui/core/Dialog';
@@ -12,12 +12,15 @@ import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
 import Snackbar from '@material-ui/core/Snackbar';
 import Grid from '@material-ui/core/Grid';
+import Select from '@material-ui/core/Select';
+import MenuItem from '@material-ui/core/MenuItem';
 import Alert from '@material-ui/lab/Alert';
 import { makeStyles } from '@material-ui/core';
-import { UPDATE_USER } from '../reducer';
+import { SET_THEME, UPDATE_USER } from '../reducer';
 import { store } from '../store';
 import { useDispatch } from 'react-redux';
 import { Config } from '../lib/Config';
+import { useRouter } from 'next/router';
 
 const useStyles = makeStyles({
   margin: {
@@ -37,7 +40,12 @@ const useStyles = makeStyles({
 export default function ManageUser({ config }: { config: Config }) {
   const classes = useStyles();
   const dispatch = useDispatch();
+  const router = useRouter();
+
   const state = store.getState();
+  const [theme, setTheme] = useState(
+    state.theme === '' ? 'dark-dark' : state.theme
+  );
   const [alertOpen, setAlertOpen] = useState(false);
   const [mfaDialogOpen, setMfaDialogOpen] = useState(false);
   const [qrcode, setQRCode] = useState(null);
@@ -66,6 +74,12 @@ export default function ManageUser({ config }: { config: Config }) {
     }
   };
 
+  const handleUpdateTheme = evt => {
+    setTheme(evt.target.value);
+    dispatch({ type: SET_THEME, payload: evt.target.value });
+    router.replace('/user/manage');
+  };
+
   const disableMFA = async () => {
     await fetch('/api/mfa/disable');
     const d = await (await fetch('/api/user')).json();
@@ -157,11 +171,21 @@ export default function ManageUser({ config }: { config: Config }) {
           </Button>
         </DialogActions>
       </Dialog>
-      <Card>
+      <Paper>
         <CardContent>
           <Typography color='textSecondary' variant='h4' gutterBottom>
             Manage
           </Typography>
+          <Select
+            id='select-theme-zipline'
+            value={theme}
+            onChange={handleUpdateTheme}
+            className={classes.field}
+          >
+            <MenuItem value={'dark-dark'}>Very Dark</MenuItem>
+            <MenuItem value={'blue-dark'}>Dark Blue</MenuItem>
+            <MenuItem value={'light'}>Light</MenuItem>
+          </Select>
           <TextField
             label='Username'
             className={classes.field}
@@ -186,6 +210,13 @@ export default function ManageUser({ config }: { config: Config }) {
           />
         </CardContent>
         <CardActions>
+          <Button
+            className={classes.button}
+            color='primary'
+            onClick={handleUpdateTheme}
+          >
+            settheme
+          </Button>
           <Button
             className={classes.button}
             color='primary'
@@ -203,7 +234,7 @@ export default function ManageUser({ config }: { config: Config }) {
             </Button>
           ) : null}
         </CardActions>
-      </Card>
+      </Paper>
     </React.Fragment>
   );
 }
diff --git a/src/components/UI.tsx b/src/components/UI.tsx
@@ -58,13 +58,13 @@ const useStyles = makeStyles(theme => ({
   },
   appBar: {
     display: 'flex',
-    backgroundColor: theme.palette.type === 'dark' ? '#000' : '#fff',
-    color: theme.palette.type !== 'dark' ? '#000' : '#fff',
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    ...theme.overrides.MuiAppBar.root,
     [theme.breakpoints.up('sm')]: {
       width: 'calc(100%)',
       marginLeft: drawerWidth
-    },
-    borderBottom: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0'
+    }
   },
   menuButton: {
     marginRight: theme.spacing(2),
@@ -188,7 +188,9 @@ export default function UI({ children }) {
                 color='inherit'
                 className={classes.rightButton}
               >
-                <Avatar src={`https://www.gravatar.com/avatar/${emailHash}.jpg`}>
+                <Avatar
+                  src={`https://www.gravatar.com/avatar/${emailHash}.jpg`}
+                >
                   {state.user.username[0].toUpperCase()}
                 </Avatar>
               </Button>
@@ -222,9 +224,7 @@ export default function UI({ children }) {
             onClose={() => setAnchorEl(null)}
           >
             <NoFocusMenuItem>
-              <Typography variant='h6'>
-                {state.user.username}
-              </Typography>
+              <Typography variant='h6'>{state.user.username}</Typography>
             </NoFocusMenuItem>
             <Divider />
             <Link href='/user/manage'>

diff --git a/src/components/ZiplineTheming.tsx b/src/components/ZiplineTheming.tsx
@@ -1,12 +1,21 @@
 import React from 'react';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';
-import dark from '../lib/themes/dark';
+import darkdark from '../lib/themes/darkdark';
+import bluedark from '../lib/themes/bluedark';
 import light from '../lib/themes/light';
+import { useState } from 'react';
 
 export default function ZiplineTheming({ Component, pageProps, theme }) {
+  const thm = {
+    'dark-dark': darkdark,
+    light: light,
+    'blue-dark': bluedark,
+    '': darkdark
+  };
+
   return (
-    <ThemeProvider theme={theme == 'light' ? light : dark}>
+    <ThemeProvider theme={thm[theme]}>
       <CssBaseline />
       <Component {...pageProps} />
     </ThemeProvider>

diff --git a/src/lib/controllers/ImagesController.ts b/src/lib/controllers/ImagesController.ts
@@ -113,7 +113,7 @@ export class ImagesController {
       if (!f.length) return array;
       return [f].concat(chunk(array.slice(size, array.length), size));
     }
-    const chunks = chunk(images, 20);
+    const chunks = chunk(images, 26);
     return reply.send(chunks);
   }
 }
diff --git a/src/lib/themes/bluedark.ts b/src/lib/themes/bluedark.ts
@@ -0,0 +1,49 @@
+import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+
+const blueDarkTheme = createMuiTheme({
+  palette: {
+    type: 'dark',
+    primary: {
+      main: '#fff'
+    },
+    secondary: {
+      main: '#4a5bb0'
+    },
+    background: {
+      default: '#0b1524',
+      paper: '#0a1930'
+    }
+  },
+  overrides: {
+    MuiListItem: {
+      root: {
+        '&$selected': {
+          backgroundColor: '#182f52'
+        }
+      }
+    },
+    MuiAppBar: {
+      root: {
+        borderBottom: '#1f1f1f',
+        backgroundColor: '#162946'
+      }
+    },
+    MuiPaper: {
+      outlined: {
+        borderColor: '#ffffff'
+      }
+    },
+    MuiCard: {
+      root: {
+        backgroundColor: '#182f52'
+      }
+    },
+    MuiButton: {
+      root: {
+        margin: '1320000'
+      }
+    }
+  }
+});
+
+export default blueDarkTheme;
diff --git a/src/lib/themes/dark.ts → src/lib/themes/darkdark.ts b/src/lib/themes/dark.ts → src/lib/themes/darkdark.ts
@@ -1,6 +1,6 @@
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
 
-const darkTheme = createMuiTheme({
+const darkdarkTheme = createMuiTheme({
   palette: {
     type: 'dark',
     primary: {
@@ -22,6 +22,12 @@ const darkTheme = createMuiTheme({
         }
       }
     },
+    MuiAppBar: {
+      root: {
+        borderBottom: '#1f1f1f',
+        backgroundColor: '#000000'
+      }
+    },
     MuiCard: {
       root: {
         backgroundColor: '#080808'
@@ -35,4 +41,4 @@ const darkTheme = createMuiTheme({
   }
 });
 
-export default darkTheme;
+export default darkdarkTheme;
diff --git a/src/lib/themes/light.ts b/src/lib/themes/light.ts
@@ -22,6 +22,11 @@ const lightTheme = createMuiTheme({
         }
       }
     },
+    MuiAppBar: {
+      root: {
+        borderBottom: '#1f1f1f'
+      }
+    },
     MuiCard: {
       root: {
         backgroundColor: '#fff'

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -4,7 +4,7 @@ import Typography from '@material-ui/core/Typography';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Grid from '@material-ui/core/Grid';
 import { ThemeProvider } from '@material-ui/core/styles';
-import dark from '../lib/themes/dark';
+import dark from '../lib/themes/darkdark';
 
 export default function NotFound() {
   useEffect(() => {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
 import { Provider } from 'react-redux';
@@ -8,15 +8,11 @@ import ZiplineTheming from '../components/ZiplineTheming';
 import UIPlaceholder from '../components/UIPlaceholder';
 
 function App({ Component, pageProps }) {
-  const [theme, setTheme] = useState<'dark' | 'light'>('dark');
+  const state = store.getState();
+
   useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side');
     if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);
-
-    (async () => {
-      const d = await (await fetch('/api/theme')).json();
-      if (!d.error) setTheme(d.theme);
-    })();
   }, []);
   return (
     <React.Fragment>
@@ -33,7 +29,7 @@ function App({ Component, pageProps }) {
           <ZiplineTheming
             Component={Component}
             pageProps={pageProps}
-            theme={theme}
+            theme={state.theme}
           />
         </PersistGate>
       </Provider>
@@ -46,4 +42,4 @@ App.propTypes = {
   pageProps: PropTypes.object.isRequired
 };
 
-export default App;
+export default App;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@material-ui/core/styles';
-import theme from '../lib/themes/dark';
+import theme from '../lib/themes/darkdark';
 import { Config, Configuration } from '../lib/Config';
 
 export interface DocumentProps {

diff --git a/src/pages/dash.tsx b/src/pages/dash.tsx
@@ -20,7 +20,6 @@ const useStyles = makeStyles(theme => ({
     margin: '5px'
   },
   padding: {
-    border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0',
     padding: '10px'
   },
   backdrop: {
@@ -34,7 +33,11 @@ export default function Dashboard({ config }) {
   const router = useRouter();
   const state = store.getState();
   const [loading, setLoading] = React.useState(true);
-  const [stats, setStats] = React.useState<{ totalViews: number, averageViews: number, images: number }>(null);
+  const [stats, setStats] = React.useState<{
+    totalViews: number;
+    averageViews: number;
+    images: number;
+  }>(null);
   const [recentImages, setRecentImages] = React.useState([]);
 
   if (typeof window === 'undefined') return <UIPlaceholder />;
@@ -64,7 +67,9 @@ export default function Dashboard({ config }) {
               Welcome back, {state.user.username}
             </Typography>
             <Typography color='textSecondary'>
-              You have <b>{stats.images}</b> images, with <b>{stats.totalViews}</b> ({Math.round(stats.averageViews)}) collectively.
+              You have <b>{stats.images}</b> images, with{' '}
+              <b>{stats.totalViews}</b> ({Math.round(stats.averageViews)})
+              collectively.
             </Typography>
             <Typography variant='h5'>Recent Images</Typography>
             <Grid container spacing={2}>
@@ -76,7 +81,11 @@ export default function Dashboard({ config }) {
                         <CardMedia
                           component='img'
                           height='140'
-                          image={createURL(window.location.href, config ? config.uploader.route : '/u', d.file)}
+                          image={createURL(
+                            window.location.href,
+                            config ? config.uploader.route : '/u',
+                            d.file
+                          )}
                         />
                       </CardActionArea>
                     </Card>
@@ -95,4 +104,4 @@ export default function Dashboard({ config }) {
 export async function getStaticProps() {
   const config = Configuration.readConfig();
   return { props: { config: config } };
-}
+}