diff --git a/client/src/components/menu.scss b/client/src/components/menu.scss index 70dbd5b..a7076b2 100644 --- a/client/src/components/menu.scss +++ b/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) { diff --git a/client/src/scss/settings.scss b/client/src/scss/settings.scss index fed103a..f17833d 100755 --- a/client/src/scss/settings.scss +++ b/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; +} diff --git a/client/src/views/account.tsx b/client/src/views/account.tsx index 26c0312..335d615 100644 --- a/client/src/views/account.tsx +++ b/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 = () => ( -
- - - +type State = { + useDarkMode: boolean; +} +export default class Account extends Base<{}, State> { + state: State = { + useDarkMode: !!localStorage.useDarkMode, + }; -
-

Current User

-
{getJson()}
-
+ render() { + const {useDarkMode} = this.state; -
-

Learn More

-
Follow K8dash on GitHub
-
or at DockerHub
-
+ return ( +
+ + + -
-

Special Thanks

-
Icons made by Dave Gandy
-
from www.flaticon.com
-
licensed by CC 3.0 BY
-
-
-); +
+

Current User

+ + +
{getJson()}
+
+ + + this.setDarkMode(x)} + uncheckedIcon={false} + checkedIcon={false} + width={20} + height={10} + /> + +
+ +
+

Learn More

+
Follow K8dash on GitHub
+
or at DockerHub
+
+ +
+

Special Thanks

+
Icons made by Dave Gandy
+
from www.flaticon.com
+
licensed by CC 3.0 BY
+
+
+ ); + } + + 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();