From 435256beded091e1298ec14c764d6185b18116e6 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Fri, 22 May 2020 10:52:15 +0300
Subject: [PATCH] Experimental: add dark mode.

It's been ready for a while, though we haven't bothered enabling it because the
calendar view is less than great, though I think it makes sense to enable it
now as experimental and improve it as we go.

Fixes #128.
---
 src/App.tsx            | 27 +++++++++++++++------------
 src/Settings/index.tsx | 26 +++++++++++++++++++++++---
 src/store/reducers.ts  |  2 ++
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4c1d5c2..654ea03 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,18 +40,6 @@ import { credentialsSelector } from './login';
 
 import { History } from 'history';
 
-const muiTheme = createMuiTheme({
-  palette: {
-    primary: amber,
-    secondary: {
-      light: lightBlue.A200,
-      main: lightBlue.A400,
-      dark: lightBlue.A700,
-      contrastText: '#fff',
-    },
-  },
-});
-
 export const routeResolver = new RouteResolver({
   home: '',
   pim: {
@@ -179,6 +167,7 @@ class App extends React.PureComponent {
     credentials: store.CredentialsData;
     entries: store.EntriesData;
     fetchCount: number;
+    darkMode: boolean;
     errors: ImmutableList<Error>;
   };
 
@@ -197,6 +186,19 @@ class App extends React.PureComponent {
     const errors = this.props.errors;
     const fetching = this.props.fetchCount > 0;
 
+    const muiTheme = createMuiTheme({
+      palette: {
+        type: this.props.darkMode ? 'dark' : undefined,
+        primary: amber,
+        secondary: {
+          light: lightBlue.A200,
+          main: lightBlue.A400,
+          dark: lightBlue.A700,
+          contrastText: '#fff',
+        },
+      },
+    });
+
     const styles = {
       main: {
         backgroundColor: muiTheme.palette.background.default,
@@ -283,6 +285,7 @@ const mapStateToProps = (state: store.StoreState) => {
     credentials: credentialsSelector(state),
     entries: state.cache.entries,
     fetchCount: state.fetchCount,
+    darkMode: !!state.settings.darkMode,
     errors: state.errors,
   };
 };
diff --git a/src/Settings/index.tsx b/src/Settings/index.tsx
index af38472..c33a779 100644
--- a/src/Settings/index.tsx
+++ b/src/Settings/index.tsx
@@ -2,14 +2,17 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import Switch from '@material-ui/core/Switch';
 import InputLabel from '@material-ui/core/InputLabel';
 
-import { store, StoreState } from '../store';
+import { StoreState } from '../store';
 import { setSettings } from '../store/actions';
 
 import Container from '../widgets/Container';
@@ -36,13 +39,16 @@ function SecurityFingerprint() {
 }
 
 export default React.memo(function Settings() {
+  const dispatch = useDispatch();
   const settings = useSelector((state: StoreState) => state.settings);
 
+  const darkMode = !!settings.darkMode;
+
   function handleChange(event: React.ChangeEvent<any>) {
     const name = event.target.name;
     const value = event.target.value;
 
-    store.dispatch(setSettings({ ...settings, [name]: value }));
+    dispatch(setSettings({ ...settings, [name]: value }));
   }
 
   return (
@@ -65,6 +71,20 @@ export default React.memo(function Settings() {
             <MenuItem value="en-us">English (United States)</MenuItem>
           </Select>
         </FormControl>
+        <h1>Experimental</h1>
+        <h2>Dark mode</h2>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Switch
+                color="primary"
+                checked={darkMode}
+                onChange={() => dispatch(setSettings({ ...settings, darkMode: !darkMode }))}
+              />
+            }
+            label="Dark mode"
+          />
+        </FormGroup>
       </Container>
     </>
   );
diff --git a/src/store/reducers.ts b/src/store/reducers.ts
index 3915146..295ad99 100644
--- a/src/store/reducers.ts
+++ b/src/store/reducers.ts
@@ -272,6 +272,7 @@ export const errorsReducer = handleActions(
 // FIXME Move all the below (potentially the fetchCount ones too) to their own file
 export interface SettingsType {
   locale: string;
+  darkMode?: boolean;
   taskSettings: {
     filterBy: string | null;
     sortBy: string;
@@ -286,6 +287,7 @@ export const settingsReducer = handleActions(
   },
   {
     locale: 'en-gb',
+    darkMode: false,
     taskSettings: {
       filterBy: null,
       sortBy: 'smart',