feat: removed dark theme and theme switching (#190)

src/App.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useState } from 'react'
+import { ReactElement } from 'react'
 import { BrowserRouter as Router } from 'react-router-dom'
 import './App.css'
 
@@ -8,58 +8,35 @@ import { SnackbarProvider } from 'notistack'
 
 import BaseRouter from './routes/routes'
 import Dashboard from './layout/Dashboard'
-import { lightTheme, darkTheme } from './theme'
+import { theme } from './theme'
 import { Provider as StampsProvider } from './providers/Stamps'
 import { Provider as PlatformProvider } from './providers/Platform'
 import { Provider as BeeProvider } from './providers/Bee'
 import { Provider as SettingsProvider } from './providers/Settings'
 
-const App = (): ReactElement => {
+const App = (): ReactElement => (
-  const [themeMode, toggleThemeMode] = useState('light')
+  <div className="App">
-
+    <ThemeProvider theme={theme}>
-  useEffect(() => {
+      <SettingsProvider>
-    const theme = localStorage.getItem('theme')
+        <BeeProvider>
-
+          <StampsProvider>
-    if (theme) {
+            <PlatformProvider>
-      toggleThemeMode(String(localStorage.getItem('theme')))
+              <SnackbarProvider>
-    } else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
+                <Router>
-      toggleThemeMode('dark')
+                  <>
-    }
+                    <CssBaseline />
-
+                    <Dashboard>
-    window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
+                      <BaseRouter />
-      toggleThemeMode(e?.matches ? 'dark' : 'light')
+                    </Dashboard>
-    })
+                  </>
-
+                </Router>
-    return () =>
+              </SnackbarProvider>
-      window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
+            </PlatformProvider>
-        toggleThemeMode(e?.matches ? 'dark' : 'light')
+          </StampsProvider>
-      })
+        </BeeProvider>
-  }, [])
+      </SettingsProvider>
-
+    </ThemeProvider>
-  return (
+  </div>
-    <div className="App">
+)
-      <ThemeProvider theme={themeMode === 'light' ? lightTheme : darkTheme}>
-        <SettingsProvider>
-          <BeeProvider>
-            <StampsProvider>
-              <PlatformProvider>
-                <SnackbarProvider>
-                  <Router>
-                    <>
-                      <CssBaseline />
-                      <Dashboard>
-                        <BaseRouter />
-                      </Dashboard>
-                    </>
-                  </Router>
-                </SnackbarProvider>
-              </PlatformProvider>
-            </StampsProvider>
-          </BeeProvider>
-        </SettingsProvider>
-      </ThemeProvider>
-    </div>
-  )
-}
 
 export default App

src/components/NavBar.tsx

@@ -1,55 +0,0 @@
-import { useState, ReactElement } from 'react'
-
-import { createStyles, makeStyles } from '@material-ui/core/styles'
-import { Toolbar, IconButton } from '@material-ui/core/'
-
-import { Sun, Moon } from 'react-feather'
-
-const drawerWidth = 240
-
-const useStyles = makeStyles(() =>
-  createStyles({
-    appBar: {
-      width: `calc(100% - ${drawerWidth}px)`,
-      marginLeft: drawerWidth,
-    },
-  }),
-)
-interface Props {
-  themeMode: string
-}
-
-export default function SideBar(props: Props): ReactElement {
-  const [darkMode, toggleDarkMode] = useState(false)
-
-  const switchTheme = () => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light')
-    } else {
-      localStorage.setItem('theme', darkMode ? 'dark' : 'light')
-    }
-
-    toggleDarkMode(!darkMode)
-    window.location.reload()
-  }
-
-  const classes = useStyles()
-
-  return (
-    <div>
-      <div style={{ display: 'fixed' }} className={classes.appBar}>
-        <Toolbar style={{ display: 'flex' }}>
-          <div style={{ width: '100%' }}>
-            <div style={{ float: 'right' }}>
-              <IconButton style={{ marginRight: '10px' }} aria-label="dark-mode" onClick={() => switchTheme()}>
-                {props.themeMode === 'dark' ? <Moon /> : <Sun />}
-              </IconButton>
-            </div>
-          </div>
-        </Toolbar>
-      </div>
-    </div>
-  )
-}

src/components/SideBar.tsx

@@ -81,7 +81,6 @@ const useStyles = makeStyles((theme: Theme) =>
 )
 
 interface Props {
-  themeMode: string
   isOk: boolean
 }
 
@@ -104,7 +103,7 @@ export default function SideBar(props: Props): ReactElement {
             <img
               alt="swarm"
               className={classes.logo}
-              src={props.themeMode === 'light' ? SwarmLogoOrange : SwarmLogoOrange}
+              src={SwarmLogoOrange}
               style={{ maxHeight: '30px', alignItems: 'center' }}
             />
           </Link>

src/layout/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext, ReactElement } from 'react'
+import { useContext, ReactElement } from 'react'
 import ErrorBoundary from '../components/ErrorBoundary'
 import AlertVersion from '../components/AlertVersion'
 import { Container, CircularProgress } from '@material-ui/core'
@@ -6,7 +6,6 @@ import { Container, CircularProgress } from '@material-ui/core'
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 
 import SideBar from '../components/SideBar'
-import NavBar from '../components/NavBar'
 
 import { Context } from '../providers/Bee'
 
@@ -29,33 +28,11 @@ interface Props {
 const Dashboard = (props: Props): ReactElement => {
   const classes = useStyles()
 
-  const [themeMode, toggleThemeMode] = useState('light')
-
   const { isLoading, status } = useContext(Context)
 
-  useEffect(() => {
-    const theme = localStorage.getItem('theme')
-
-    if (theme) {
-      toggleThemeMode(String(localStorage.getItem('theme')))
-    } else if (window?.matchMedia('(prefers-color-scheme: dark)')?.matches) {
-      toggleThemeMode('dark')
-    }
-
-    window?.matchMedia('(prefers-color-scheme: dark)')?.addEventListener('change', e => {
-      toggleThemeMode(e?.matches ? 'dark' : 'light')
-    })
-
-    return () =>
-      window?.matchMedia('(prefers-color-scheme: dark)')?.removeEventListener('change', e => {
-        toggleThemeMode(e?.matches ? 'dark' : 'light')
-      })
-  }, [])
-
   return (
     <div>
-      <SideBar themeMode={themeMode} isOk={status.all} />
+      <SideBar isOk={status.all} />
-      <NavBar themeMode={themeMode} />
       <ErrorBoundary>
         <main className={classes.content}>
           <AlertVersion />

src/theme.tsx

@@ -55,7 +55,7 @@ const propsOverrides = {
   },
 }
 
-export const lightTheme = createMuiTheme({
+export const theme = createMuiTheme({
   palette: {
     type: 'light',
     background: {
@@ -75,28 +75,5 @@ export const lightTheme = createMuiTheme({
   },
 })
 
-export const darkTheme = createMuiTheme({
+theme.overrides = componentsOverrides(theme)
-  palette: {
+theme.props = propsOverrides
-    type: 'dark',
-    background: {
-      default: '#0d1117',
-      paper: '#161b22',
-    },
-    primary: {
-      light: orange.A200,
-      main: '#dd7700',
-      dark: orange[800],
-    },
-    secondary: {
-      main: '#1f2937',
-    },
-  },
-  typography: {
-    fontFamily: ['Work Sans', 'Montserrat', 'Nunito', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'].join(','),
-  },
-})
-
-darkTheme.overrides = componentsOverrides(darkTheme)
-darkTheme.props = propsOverrides
-lightTheme.overrides = componentsOverrides(lightTheme)
-lightTheme.props = propsOverrides