Wrapping up dark mode

client/src/components/menu.scss

@@ -62,6 +62,12 @@ a.menu_itemSelected, a.menu_itemSelected:visited {
 .menu_itemApply {
     display: flex;
     justify-content: center;
+
+    button.menu_item {
+        svg {
+            fill: $color-dark;
+        }
+    }
 }
 
 .menu_subMenu a:nth-child(1) {

client/src/scss/settings.scss

@@ -22,7 +22,8 @@ $color-icon-active: var(--color-icon-active);
 $color-icon-inactive: var(--color-icon-inactive);
 $color-box-shadow: var(--color-box-shadow);
 
-$box-shadow: 0 0 4px 0 $color-box-shadow;
+$box-shadow-size: var(--box-shadow-size);
+$box-shadow: 0 0 $box-shadow-size 0 $color-box-shadow;
 $animation-length: .25s;
 
 $font: sans-serif;
@@ -36,7 +37,7 @@ $media-xsmall: 700px;
 $media-small: 812px;
 $media-medium: 1200px;
 
-#root {
+body {
     --color-lightest: #F0F0F0;
     --color-light: #AAA;
     --color-dark: #888098;
@@ -49,9 +50,11 @@ $media-medium: 1200px;
     --color-icon: #{$color-accent};
     --color-icon-active: #{$color-accent};
     --color-icon-inactive: #{$color-dark};
+
+    --box-shadow-size: 4px;
 }
 
-#root.dark-mode {
+body.dark-mode {
     --color-lightest: #3d3d3d;
     --color-light: #9c9c9c;
     --color-dark: #a8a8a8;
@@ -64,6 +67,6 @@ $media-medium: 1200px;
     --color-icon: #{$color-dark};
     --color-icon-active: #{$color-accent};
     --color-icon-inactive: #{$color-lightest};
-}
 
-// TODO: fix "Apply" button
+    --box-shadow-size: 1px;
+}

client/src/views/account.tsx

@@ -1,42 +1,94 @@
 import React from 'react';
+import Switch from 'react-switch';
+import Base from '../components/base';
 import Button from '../components/button';
+import Field from '../components/field';
 import ItemHeader from '../components/itemHeader';
 import {getUserInfo, logout} from '../services/auth';
 import LogoutSvg from '../art/logoutSvg';
 
-const Account = () => (
-    <div id='content'>
-        <ItemHeader title={['Account', 'Token']} ready={true}>
-            <Button title='Logout' className='button_headerAction' onClick={logout}>
-                <LogoutSvg />
-                <span className='button_label'>Logout</span>
-            </Button>
-        </ItemHeader>
+type State = {
+    useDarkMode: boolean;
+}
 
+export default class Account extends Base<{}, State> {
+    state: State = {
+        useDarkMode: !!localStorage.useDarkMode,
+    };
 
-        <div className='contentPanel'>
-            <h3>Current User</h3>
-            <pre>{getJson()}</pre>
-        </div>
+    render() {
+        const {useDarkMode} = this.state;
 
-        <div className='contentPanel'>
-            <h3>Learn More</h3>
-            <div>Follow K8dash on <a href='https://github.com/herbrandson/k8dash'>GitHub</a></div>
-            <div>or at <a href='https://hub.docker.com/r/herbrandson/k8dash'>DockerHub</a></div>
-        </div>
+        return (
+            <div id='content'>
+                <ItemHeader title={['Account', 'Token']} ready={true}>
+                    <Button title='Logout' className='button_headerAction' onClick={logout}>
+                        <LogoutSvg />
+                        <span className='button_label'>Logout</span>
+                    </Button>
+                </ItemHeader>
 
-        <div className='contentPanel'>
-            <h3>Special Thanks</h3>
-            <div>Icons made by <a href='https://www.flaticon.com/authors/dave-gandy' title='Dave Gandy'>Dave Gandy</a></div>
-            <div>from <a href='https://www.flaticon.com/' title='Flaticon'>www.flaticon.com</a></div>
-            <div>licensed by <a href='http://creativecommons.org/licenses/by/3.0/' title='Creative Commons BY 3.0'>CC 3.0 BY</a></div>
-        </div>
-    </div>
-);
+                <div className='contentPanel'>
+                    <h3>Current User</h3>
+
+                    <Field name='Token'>
+                        <pre>{getJson()}</pre>
+                    </Field>
+
+                    <Field name='Use Dark Mode'>
+                        <Switch
+                            checked={useDarkMode}
+                            onChange={x => this.setDarkMode(x)}
+                            uncheckedIcon={false}
+                            checkedIcon={false}
+                            width={20}
+                            height={10}
+                        />
+                    </Field>
+                </div>
+
+                <div className='contentPanel'>
+                    <h3>Learn More</h3>
+                    <div>Follow K8dash on <a href='https://github.com/indeedeng/k8dash'>GitHub</a></div>
+                    <div>or at <a href='https://hub.docker.com/r/herbrandson/k8dash'>DockerHub</a></div>
+                </div>
+
+                <div className='contentPanel'>
+                    <h3>Special Thanks</h3>
+                    <div>Icons made by <a href='https://www.flaticon.com/authors/dave-gandy' title='Dave Gandy'>Dave Gandy</a></div>
+                    <div>from <a href='https://www.flaticon.com/' title='Flaticon'>www.flaticon.com</a></div>
+                    <div>licensed by <a href='http://creativecommons.org/licenses/by/3.0/' title='Creative Commons BY 3.0'>CC 3.0 BY</a></div>
+                </div>
+            </div>
+        );
+    }
+
+    setDarkMode(useDarkMode: boolean) {
+        if (useDarkMode) {
+            localStorage.useDarkMode = "true"
+        } else {
+            delete localStorage.useDarkMode;
+        }
+
+        setDarkModeClass();
+        this.setState({useDarkMode});
+    }
+}
 
 function getJson() {
     const user = getUserInfo();
     return JSON.stringify(user, null, 4);
 }
 
-export default Account;
+function setDarkModeClass() {
+    const root = document.body;
+    if (!root) return;
+
+    if (localStorage.useDarkMode) {
+        root.classList.add('dark-mode');
+    } else {
+        root.classList.remove('dark-mode');
+    }
+}
+
+setDarkModeClass();