From 43657a8cb02dde2a43b44ef72bb5abc1c4e3dc41 Mon Sep 17 00:00:00 2001 From: dicedtomatoreal Date: Mon, 2 Nov 2020 15:24:12 -0800 Subject: [PATCH] light theme, if you want to kill your eyes. --- package.json | 2 +- src/components/UI.tsx | 49 ++++++++++++++++++++++--------- src/components/ZiplineTheming.tsx | 15 ++++++++++ src/controllers/RootController.ts | 5 ++++ src/lib/Config.ts | 1 + src/lib/themes/light.ts | 38 ++++++++++++++++++++++++ src/pages/_app.tsx | 26 +++++++++------- src/pages/_document.tsx | 8 +++-- src/pages/dash.tsx | 2 +- src/pages/dash/images.tsx | 24 +++++++-------- src/pages/dash/statistics.tsx | 4 +-- src/pages/dash/upload.tsx | 2 +- src/pages/dash/urls.tsx | 2 +- src/pages/dash/users.tsx | 4 +-- src/reducer.ts | 1 + 15 files changed, 135 insertions(+), 48 deletions(-) create mode 100644 src/components/ZiplineTheming.tsx create mode 100644 src/lib/themes/light.ts diff --git a/package.json b/package.json index 2d22222a..98e69ffb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "zipline-next", - "version": "2.1.2", + "version": "2.2.0", "private": true, "dependencies": { "@dicedtomato/colors": "^1.0.3", diff --git a/src/components/UI.tsx b/src/components/UI.tsx index 9237abe8..4b973134 100644 --- a/src/components/UI.tsx +++ b/src/components/UI.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect } from 'react'; import Link from 'next/link'; import AppBar from '@material-ui/core/AppBar'; +import Box from '@material-ui/core/Box'; import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import Drawer from '@material-ui/core/Drawer'; @@ -31,11 +32,13 @@ import FileCopyIcon from '@material-ui/icons/FileCopy'; import ExitToAppIcon from '@material-ui/icons/ExitToApp'; import PublishIcon from '@material-ui/icons/Publish'; import RotateLeftIcon from '@material-ui/icons/RotateLeft'; +import Divider from '@material-ui/core/Divider'; import copy from 'copy-to-clipboard'; import { LOGOUT, UPDATE_USER } from '../reducer'; -import { makeStyles, useTheme } from '@material-ui/core/styles'; +import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles'; import { useRouter } from 'next/router'; import { useDispatch } from 'react-redux'; +import { store } from '../store'; const drawerWidth = 240; @@ -53,13 +56,13 @@ const useStyles = makeStyles(theme => ({ }, appBar: { display: 'flex', - backgroundColor: '#000', - color: '#fff', + backgroundColor: theme.palette.type === 'dark' ? '#000' : '#fff', + color: theme.palette.type !== 'dark' ? '#000' : '#fff', [theme.breakpoints.up('sm')]: { width: 'calc(100%)', marginLeft: drawerWidth }, - borderBottom: '1px solid #1f1f1f' + borderBottom: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0' }, menuButton: { marginRight: theme.spacing(2), @@ -84,9 +87,18 @@ const useStyles = makeStyles(theme => ({ } })); +const NoFocusMenuItem = withStyles(theme => ({ + root: { + '&:hover': { + backgroundColor: theme.palette.type === 'dark' ? '#000' : '#f7f7f7' + } + } +}))(MenuItem); + export default function UI({ children }) { const classes = useStyles(); const theme = useTheme(); + const state = store.getState(); const router = useRouter(); const dispatch = useDispatch(); const [mobileOpen, setMobileOpen] = useState(false); @@ -161,16 +173,19 @@ export default function UI({ children }) { Zipline - setAnchorEl(event.currentTarget)} - color='inherit' - className={classes.rightButton} - > - - + + setAnchorEl(event.currentTarget)} + color='inherit' + className={classes.rightButton} + > + + + + setAnchorEl(null)} > + + + {state.user.username} + + + setAnchorEl(null)}> diff --git a/src/components/ZiplineTheming.tsx b/src/components/ZiplineTheming.tsx new file mode 100644 index 00000000..d06a8cb2 --- /dev/null +++ b/src/components/ZiplineTheming.tsx @@ -0,0 +1,15 @@ +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 light from '../lib/themes/light'; + +export default function ZiplineTheming({ Component, pageProps, theme }) { + console.log(theme); + return ( + + + + + ); +} diff --git a/src/controllers/RootController.ts b/src/controllers/RootController.ts index 01b1843d..d620e038 100644 --- a/src/controllers/RootController.ts +++ b/src/controllers/RootController.ts @@ -42,6 +42,11 @@ export class RootController { return first; } + @GET('/theme') + async getTheme() { + return { theme: config.core.theme || 'dark' }; + } + @GET('/users') async allUsers(req: FastifyRequest, reply: FastifyReply) { if (!req.cookies.zipline) throw new Error('Not logged in.'); diff --git a/src/lib/Config.ts b/src/lib/Config.ts index 871a702c..9d87dacd 100644 --- a/src/lib/Config.ts +++ b/src/lib/Config.ts @@ -46,6 +46,7 @@ export interface ConfigCore { secure?: boolean; blacklisted_ips?: string[]; ratelimiter?: ConfigCoreRateLimiter; + theme?: 'dark' | 'light'; } export interface ConfigWebhooks { diff --git a/src/lib/themes/light.ts b/src/lib/themes/light.ts new file mode 100644 index 00000000..8bc355c5 --- /dev/null +++ b/src/lib/themes/light.ts @@ -0,0 +1,38 @@ +import createMuiTheme from '@material-ui/core/styles/createMuiTheme'; + +const lightTheme = createMuiTheme({ + palette: { + type: 'light', + primary: { + main: '#000000' + }, + secondary: { + main: '#4a5bb0' + }, + background: { + default: '#fff', + paper: '#f7f7f7' + } + }, + overrides: { + MuiListItem: { + root: { + '&$selected': { + backgroundColor: '#e0e0e0' + } + } + }, + MuiCard: { + root: { + backgroundColor: '#fff' + } + }, + MuiButton: { + root: { + margin: '132' + } + } + } +}); + +export default lightTheme; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 870ed107..c1ef9a59 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,21 +1,26 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import Head from 'next/head'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import { ThemeProvider } from '@material-ui/core/styles'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import { store, persistor } from '../store'; -import theme from '../lib/themes/dark'; +import ZiplineTheming from '../components/ZiplineTheming'; + function MyApp({ Component, pageProps }) { + const [theme, setTheme] = useState<'dark' | 'light'>('dark'); 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 ( - + + Zipline - loading} persistor={persistor}> - - + Loading...} persistor={persistor}> + - + ); } @@ -39,4 +43,4 @@ MyApp.propTypes = { pageProps: PropTypes.object.isRequired }; -export default MyApp; +export default MyApp; \ No newline at end of file diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 50e77fcd..3efcfe79 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ import React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; @@ -33,7 +34,7 @@ export default class MyDocument extends Document { ) : null} -
+
@@ -43,17 +44,18 @@ export default class MyDocument extends Document { MyDocument.getInitialProps = async ctx => { const sheets = new ServerStyleSheets(); + const config = Configuration.readConfig(); const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage({ - enhanceApp: App => props => sheets.collect() + enhanceApp: App => props => sheets.collect() }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, - config: Configuration.readConfig(), + config, styles: [ ...React.Children.toArray(initialProps.styles), sheets.getStyleElement() diff --git a/src/pages/dash.tsx b/src/pages/dash.tsx index e32bda1a..c1808169 100644 --- a/src/pages/dash.tsx +++ b/src/pages/dash.tsx @@ -19,7 +19,7 @@ const useStyles = makeStyles(theme => ({ margin: '5px' }, padding: { - border: '1px solid #1f1f1f', + border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0', padding: '10px' }, backdrop: { diff --git a/src/pages/dash/images.tsx b/src/pages/dash/images.tsx index 26bc06bc..87ec95a5 100644 --- a/src/pages/dash/images.tsx +++ b/src/pages/dash/images.tsx @@ -24,7 +24,7 @@ const useStyles = makeStyles(theme => ({ margin: '5px' }, padding: { - border: '1px solid #1f1f1f', + border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0', padding: '10px' }, backdrop: { @@ -136,18 +136,18 @@ export default function Images({ config }) { ) : ( - - - - + + + - )} + + )} ) : null} ({ margin: '5px' }, padding: { - border: '1px solid #1f1f1f', + border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0', padding: '10px' }, backdrop: { @@ -28,7 +28,7 @@ const useStyles = makeStyles(theme => ({ color: '#fff' }, tableBorder: { - borderColor: '#121212' + borderColor: theme.palette.type === 'dark' ? '#1f1f1f' : '#e0e0e0' } })); diff --git a/src/pages/dash/upload.tsx b/src/pages/dash/upload.tsx index 77d865ca..eac55fbc 100644 --- a/src/pages/dash/upload.tsx +++ b/src/pages/dash/upload.tsx @@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({ margin: '5px' }, padding: { - border: '1px solid #1f1f1f', + border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0', padding: '10px' }, backdrop: { diff --git a/src/pages/dash/urls.tsx b/src/pages/dash/urls.tsx index 86d7ecd1..de0732c7 100644 --- a/src/pages/dash/urls.tsx +++ b/src/pages/dash/urls.tsx @@ -32,7 +32,7 @@ const useStyles = makeStyles(theme => ({ margin: '5px' }, padding: { - border: '1px solid #1f1f1f', + border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0', padding: '10px' }, backdrop: { diff --git a/src/pages/dash/users.tsx b/src/pages/dash/users.tsx index b16823d5..55d6bffe 100644 --- a/src/pages/dash/users.tsx +++ b/src/pages/dash/users.tsx @@ -30,7 +30,7 @@ const useStyles = makeStyles(theme => ({ margin: '5px' }, padding: { - border: '1px solid #1f1f1f', + border: theme.palette.type === 'dark' ? '1px solid #1f1f1f' : '1px solid #e0e0e0', padding: '10px' }, field: { @@ -219,7 +219,7 @@ export default function Users() { } title={`${u.username} (${u.id})`} subheader={`${u.administrator ? 'Administrator' : 'User' - }`} + }`} /> diff --git a/src/reducer.ts b/src/reducer.ts index d7eb3f72..b72b10e4 100644 --- a/src/reducer.ts +++ b/src/reducer.ts @@ -6,6 +6,7 @@ export const LOGOUT = 'LOGOUT'; export const UPDATE_USER = 'UPDATE_USER'; export const STOP_LOADING = 'STOP_LOADING'; export const START_LOADING = 'START_LOADING'; +export const SET_THEME = 'SET_THEME'; export interface State { loggedIn: boolean;