From d13cddc6368845771fa588f2864d71d397c2dfce Mon Sep 17 00:00:00 2001
From: Andrew Plummer <plummer.andrew@gmail.com>
Date: Thu, 13 Jun 2024 10:57:09 +0900
Subject: [PATCH] tweaks to theming

---
 services/api/src/models/definitions/user.json |  15 --
 .../{logo-inverted.svg => logo-dark.svg}      |   0
 .../src/assets/{logo.svg => logo-light.svg}   |   0
 services/web/src/components/Footer.js         |  11 +-
 services/web/src/components/Logo.js           |  12 ++
 services/web/src/components/LogoTitle.js      |  12 +-
 services/web/src/components/ThemedImage.js    |   6 -
 services/web/src/index.html                   |   2 +-
 services/web/src/layouts/Dashboard.js         |   6 +-
 services/web/src/layouts/Portal.js            |   7 +-
 .../web/src/screens/Settings/Appearance.js    | 150 +++++-------------
 services/web/src/stores/session.js            |   7 -
 services/web/src/stores/theme.js              |  67 ++++----
 13 files changed, 90 insertions(+), 205 deletions(-)
 rename services/web/src/assets/{logo-inverted.svg => logo-dark.svg} (100%)
 rename services/web/src/assets/{logo.svg => logo-light.svg} (100%)
 create mode 100644 services/web/src/components/Logo.js
 delete mode 100644 services/web/src/components/ThemedImage.js

diff --git a/services/api/src/models/definitions/user.json b/services/api/src/models/definitions/user.json
index 1aead21ce..abbb02436 100644
--- a/services/api/src/models/definitions/user.json
+++ b/services/api/src/models/definitions/user.json
@@ -52,14 +52,6 @@
         }
       }
     ],
-    "theme": {
-      "type": "String",
-      "enum": [
-        "dark",
-        "light",
-        "system"
-      ]
-    },
     "isTester": {
       "type": "Boolean",
       "default": false
@@ -165,13 +157,6 @@
       ]
     }
   },
-  "onDelete": {
-    "errorOnReferenced": {
-      "except": [
-        "AuditEntry"
-      ]
-    }
-  },
   "search": {
     "fields": [
       "firstName",
diff --git a/services/web/src/assets/logo-inverted.svg b/services/web/src/assets/logo-dark.svg
similarity index 100%
rename from services/web/src/assets/logo-inverted.svg
rename to services/web/src/assets/logo-dark.svg
diff --git a/services/web/src/assets/logo.svg b/services/web/src/assets/logo-light.svg
similarity index 100%
rename from services/web/src/assets/logo.svg
rename to services/web/src/assets/logo-light.svg
diff --git a/services/web/src/components/Footer.js b/services/web/src/components/Footer.js
index e02c0ba94..8ef285969 100644
--- a/services/web/src/components/Footer.js
+++ b/services/web/src/components/Footer.js
@@ -1,10 +1,8 @@
 import React from 'react';
 
-import logo from 'assets/logo.svg';
-import darkLogo from 'assets/logo-inverted.svg';
+import Logo from 'components/Logo';
 
 import Layout from './Layout';
-import ThemedImage from './ThemedImage';
 
 export default class Footer extends React.Component {
   render() {
@@ -12,12 +10,7 @@ export default class Footer extends React.Component {
       <footer>
         <Layout horizontal center right>
           <span style={{ marginRight: '10px' }}>Built with</span>
-          <ThemedImage
-            width="112"
-            height="24"
-            darkSrc={darkLogo}
-            ligthSrc={logo}
-          />
+          <Logo width="112" height="24" />
         </Layout>
       </footer>
     );
diff --git a/services/web/src/components/Logo.js b/services/web/src/components/Logo.js
new file mode 100644
index 000000000..da5944bd5
--- /dev/null
+++ b/services/web/src/components/Logo.js
@@ -0,0 +1,12 @@
+import { useTheme } from 'stores/theme';
+
+import logoLight from 'assets/logo-light.svg';
+import logoDark from 'assets/logo-dark.svg';
+
+import { APP_NAME } from 'utils/env';
+
+export default function Logo(props) {
+  const { currentTheme } = useTheme();
+  const src = currentTheme === 'dark' ? logoDark : logoLight;
+  return <img src={src} alt={APP_NAME} {...props} />;
+}
diff --git a/services/web/src/components/LogoTitle.js b/services/web/src/components/LogoTitle.js
index 8a8df2530..fc0782f65 100644
--- a/services/web/src/components/LogoTitle.js
+++ b/services/web/src/components/LogoTitle.js
@@ -2,21 +2,13 @@ import React from 'react';
 import { Header } from 'semantic';
 import { Link } from 'react-router-dom';
 
-import Logo from 'assets/logo.svg';
-import DarkLogo from 'assets/logo-inverted.svg';
-
-import ThemedImage from './ThemedImage';
+import Logo from 'components/Logo';
 
 export default ({ title }) => {
   return (
     <React.Fragment>
       <Link to="/">
-        <ThemedImage
-          ligthSrc={Logo}
-          darkSrc={DarkLogo}
-          alt="Logo"
-          style={{ height: '75px', margin: 'auto', display: 'block' }}
-        />
+        <Logo style={{ height: '75px', margin: 'auto', display: 'block' }} />
       </Link>
       <Header as="h3" textAlign="center" style={{ textTransform: 'uppercase' }}>
         {title}
diff --git a/services/web/src/components/ThemedImage.js b/services/web/src/components/ThemedImage.js
deleted file mode 100644
index 789e1c859..000000000
--- a/services/web/src/components/ThemedImage.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { useTheme } from 'stores';
-
-export default function ThemedImage({ darkSrc, ligthSrc, ...props }) {
-  const { renderedTheme } = useTheme();
-  return <img src={renderedTheme === 'dark' ? darkSrc : ligthSrc} {...props} />;
-}
diff --git a/services/web/src/index.html b/services/web/src/index.html
index 1f7bc64df..5c5cb91e8 100644
--- a/services/web/src/index.html
+++ b/services/web/src/index.html
@@ -10,7 +10,7 @@
     <%= require('utils/analytics/head.html') %>
     <!-- env:conf -->
   </head>
-  <body class="nocturnal-theme">
+  <body>
     <div id="root"></div>
     <%= require('utils/analytics/body.html') %>
   </body>
diff --git a/services/web/src/layouts/Dashboard.js b/services/web/src/layouts/Dashboard.js
index c8aaf3fda..8425a59ec 100644
--- a/services/web/src/layouts/Dashboard.js
+++ b/services/web/src/layouts/Dashboard.js
@@ -4,15 +4,13 @@ import { Icon, Container } from 'semantic';
 
 import { withSession } from 'stores';
 
+import Logo from 'components/Logo';
 import Footer from 'components/Footer';
 import Layout from 'components/Layout';
 import Protected from 'components/Protected';
-import ThemedImage from 'components/ThemedImage';
 import Organization from 'modals/OrganizationSelector';
 
 import ConnectionError from 'components/ConnectionError';
-import logo from 'assets/logo.svg';
-import darkLogo from 'assets/logo-inverted.svg';
 import favicon from 'assets/favicon.svg';
 
 import { userCanSwitchOrganizations } from 'utils/permissions';
@@ -29,7 +27,7 @@ export default class DashboardLayout extends React.Component {
         <Sidebar.Menu>
           <Layout style={{ height: '100%' }}>
             <NavLink style={{ margin: '5px 25px 20px 25px' }} to="/">
-              <ThemedImage width="100%" ligthSrc={logo} darkSrc={darkLogo} />
+              <Logo width="100%" />
             </NavLink>
             <Layout vertical spread>
               {userCanSwitchOrganizations(user) && (
diff --git a/services/web/src/layouts/Portal.js b/services/web/src/layouts/Portal.js
index ac3b188d9..b6337ca78 100644
--- a/services/web/src/layouts/Portal.js
+++ b/services/web/src/layouts/Portal.js
@@ -4,13 +4,10 @@ import { Button, Icon, Menu } from 'semantic';
 
 import bem from 'helpers/bem';
 
+import Logo from 'components/Logo';
 import Layout from 'components/Layout';
-import ThemedImage from 'components/ThemedImage';
 import ConnectionError from 'components/ConnectionError';
 
-import darkLogo from 'assets/logo-inverted.svg';
-import logo from 'assets/logo.svg';
-
 import './portal.less';
 
 @bem
@@ -26,7 +23,7 @@ export default class PortalLayout extends React.Component {
             spread>
             <Layout.Group>
               <NavLink className="logo" to="/">
-                <ThemedImage height="40" ligthSrc={logo} darkSrc={darkLogo} />
+                <Logo height="40" />
               </NavLink>
               <Menu className={this.getElementClass('menu-bottom')} secondary>
                 <Menu.Item as={NavLink} to="/docs/getting-started">
diff --git a/services/web/src/screens/Settings/Appearance.js b/services/web/src/screens/Settings/Appearance.js
index 550b691b8..3bbe925bb 100644
--- a/services/web/src/screens/Settings/Appearance.js
+++ b/services/web/src/screens/Settings/Appearance.js
@@ -1,122 +1,50 @@
 import React from 'react';
-import { Segment, Form, Button, Divider, Header } from 'semantic';
-
-import { withTheme } from 'stores';
+import { Segment, Form, Divider, Header } from 'semantic';
 
 import screen from 'helpers/screen';
+import { useTheme } from 'stores/theme';
 
-import ErrorMessage from 'components/ErrorMessage';
 import Layout from 'components/Layout';
 
-import { request } from 'utils/api';
-import { APP_NAME } from 'utils/env';
-
 import Menu from './Menu';
 
-@screen
-@withTheme
-export default class Account extends React.Component {
-  state = {
-    theme: this.context.theme,
-  };
-
-  async save() {
-    try {
-      this.setState({
-        loading: true,
-        error: null,
-      });
-      await request({
-        method: 'PATCH',
-        path: `/1/users/me`,
-        body: {
-          theme: this.state.theme,
-        },
-      });
-      this.context.setTheme(this.state.theme, true);
-      this.setState({
-        error: false,
-        loading: false,
-      });
-    } catch (error) {
-      this.setState({
-        error,
-        loading: false,
-      });
-    }
-  }
-
-  setTheme(theme) {
-    this.setState({ theme });
-    this.context.setTheme(theme);
-  }
-
-  render() {
-    const { error, loading, theme } = this.state;
-
-    return (
-      <React.Fragment>
-        <Menu />
+function Appearance() {
+  const { theme, setTheme } = useTheme();
+  return (
+    <React.Fragment>
+      <Menu />
+      <Divider hidden />
+      <Segment>
+        <Header as="h5">Choose the theme for this device</Header>
         <Divider hidden />
-        <ErrorMessage error={error} />
-        <Form onSubmit={() => this.save()}>
-          <Segment>
-            <p>
-              Choose how {APP_NAME} looks to you. Select a light or dark mode,
-              or sync with your system and automatically switch between light
-              and dark mode.
-            </p>
-            <Header as="h5">
-              <Form.Checkbox
-                checked={theme === 'system'}
-                onChange={(e, { checked }) =>
-                  this.setTheme(checked ? 'system' : undefined)
-                }
-                label="Sync With System"
-              />
-            </Header>
+        <Layout vertical>
+          <Form.Radio
+            checked={theme === 'light'}
+            label="Light Mode"
+            onClick={() => {
+              setTheme('light');
+            }}
+          />
+          <Form.Radio
+            checked={theme === 'dark'}
+            label="Dark Mode"
+            onClick={() => {
+              setTheme('dark');
+            }}
+          />
+          <Form.Radio
+            checked={theme === 'system'}
+            label="Sync with System"
+            onClick={() => {
+              setTheme('system');
+            }}
+          />
+        </Layout>
 
-            <p style={{ marginLeft: '1.92em', marginTop: '-0.8em' }}>
-              Sync with OS setting Automatically switch between light and dark
-              themes when your system does.
-            </p>
-
-            <Divider hidden />
-
-            <div className="diurnal-theme" style={{ paddingBottom: '1em' }}>
-              <Layout horizontal baseline>
-                <Form.Radio
-                  disabled={theme === 'system'}
-                  checked={theme === 'light'}
-                  label="Light Mode"
-                  onClick={() => this.setTheme('light')}
-                />
-              </Layout>
-            </div>
-
-            <div className="nocturnal-theme">
-              <Layout horizontal baseline>
-                <Form.Radio
-                  disabled={theme === 'system'}
-                  checked={theme === 'dark'}
-                  label="Dark Mode"
-                  onClick={() => this.setTheme('dark')}
-                />
-              </Layout>
-            </div>
-
-            <Divider hidden />
-          </Segment>
-          <div>
-            <Button
-              primary
-              content="Save"
-              loading={loading}
-              disabled={loading}
-            />
-          </div>
-        </Form>
-      </React.Fragment>
-    );
-  }
+        <Divider hidden />
+      </Segment>
+    </React.Fragment>
+  );
 }
+
+export default screen(Appearance);
diff --git a/services/web/src/stores/session.js b/services/web/src/stores/session.js
index 9bf72cb90..e2754ba24 100644
--- a/services/web/src/stores/session.js
+++ b/services/web/src/stores/session.js
@@ -9,11 +9,8 @@ import { captureError } from 'utils/sentry';
 import { wrapContext } from 'utils/hoc';
 import { localStorage } from 'utils/storage';
 
-import { withTheme } from './theme';
-
 const SessionContext = React.createContext();
 
-@withTheme
 @withRouter
 export class SessionProvider extends React.PureComponent {
   constructor(props) {
@@ -68,10 +65,6 @@ export class SessionProvider extends React.PureComponent {
         });
         const organization = await this.loadOrganization();
 
-        if (user.theme) {
-          this.context.setTheme(user.theme, true);
-        }
-
         // Uncomment this line if you want to set up
         // User-Id tracking. https://bit.ly/2DKQYEN.
         // setUserId(user.id);
diff --git a/services/web/src/stores/theme.js b/services/web/src/stores/theme.js
index 9ff3179c4..d8ceaaa25 100644
--- a/services/web/src/stores/theme.js
+++ b/services/web/src/stores/theme.js
@@ -5,12 +5,8 @@ import { localStorage } from 'utils/storage';
 
 const ThemeContext = React.createContext();
 
-function getDefaultTheme() {
-  const theme = localStorage.getItem('theme');
-  if (['dark', 'light', 'system'].includes(theme)) {
-    return theme;
-  }
-  return 'light';
+function getStoredTheme() {
+  return localStorage.getItem('theme') || 'light';
 }
 
 function getSystemTheme() {
@@ -18,27 +14,19 @@ function getSystemTheme() {
   return prefersDarkScheme.matches ? 'dark' : 'light';
 }
 
-function getRenderedTheme() {
-  const theme = getDefaultTheme();
-  if (theme === 'system') {
-    return getSystemTheme();
-  }
-  return theme;
-}
-
 export class ThemeProvider extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      theme: getDefaultTheme(),
-      renderedTheme: getRenderedTheme(),
+      theme: getStoredTheme(),
+      systemTheme: getSystemTheme(),
     };
+    this.apply();
   }
 
   componentDidMount() {
     this.mediaMonitor = window.matchMedia('(prefers-color-scheme: dark)');
     this.mediaMonitor.addEventListener('change', this.updateSystemTheme);
-    this.bootstrap();
   }
 
   componentWillUnmount() {
@@ -47,29 +35,33 @@ export class ThemeProvider extends React.PureComponent {
     }
   }
 
-  bootstrap() {
-    this.setTheme(this.state.theme);
-  }
+  updateSystemTheme = () => {
+    this.setState(
+      {
+        systemTheme: getSystemTheme(),
+      },
+      this.apply
+    );
+  };
 
-  updateSystemTheme = ({ matches }) => {
-    if (this.state.theme === 'system') {
-      this.setTheme(matches ? 'dark' : 'light');
-    }
+  setTheme = (theme) => {
+    this.setState(
+      {
+        theme,
+      },
+      this.apply
+    );
+    localStorage.setItem('theme', theme);
   };
 
-  setTheme = (theme, store) => {
-    const newTheme = theme === 'system' ? getSystemTheme() : theme;
-    if (newTheme == 'dark') {
-      document.body.classList.add('nocturnal-theme');
-    } else {
-      document.body.classList.remove('nocturnal-theme');
-    }
-    this.setState({
-      renderedTheme: newTheme,
-    });
-    if (store) {
-      localStorage.setItem('theme', theme);
-    }
+  apply = () => {
+    const currentTheme = this.getCurrentTheme();
+    document.body.classList.toggle('nocturnal-theme', currentTheme === 'dark');
+  };
+
+  getCurrentTheme = () => {
+    const { theme } = this.state;
+    return theme === 'system' ? getSystemTheme() : theme;
   };
 
   render() {
@@ -78,6 +70,7 @@ export class ThemeProvider extends React.PureComponent {
         value={{
           ...this.state,
           setTheme: this.setTheme,
+          currentTheme: this.getCurrentTheme(),
         }}>
         {this.props.children}
       </ThemeContext.Provider>