Merge pull request #1136 from yieldprotocol/feat/dark-mode-enhancement

enhancing dark mode settings
yieldprotocol · Mar 15, 2023 · c97cf65 · c97cf65
2 parents ad9afa5 + 02aa8e4
commit c97cf65
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app-v2",
-  "version": "2.5.10",
+  "version": "2.5.11",
   "private": true,
   "dependencies": {
     "@ethersproject/providers": "^5.6.8",

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -3,6 +3,7 @@ import { Box,  Layer, ResponsiveContext, Tip, Text } from 'grommet';
 
 import { FiEye } from 'react-icons/fi';
 import { useAccountModal } from '@rainbow-me/rainbowkit';
+
 import { abbreviateHash, clearCachedItems } from '../utils/appUtils';
 import BackButton from './buttons/BackButton';
 import GeneralButton from './buttons/GeneralButton';
@@ -48,7 +49,6 @@ const Sidebar = ({ settingsOpen, setSettingsOpen }: any) => {
         width={mobile ? undefined : '400px'}
         background="lightBackground"
         elevation="xlarge"
-        justify="between"
         style={{ overflow: 'auto' }}
       >
         <Box flex={false}>
@@ -124,13 +124,13 @@ const Sidebar = ({ settingsOpen, setSettingsOpen }: any) => {
           {!mobile && (
             <Box background="gradient-transparent" flex={false}>
               <Box pad="medium" background="gradient-transparent">
-                  <NetworkSetting />
+                <NetworkSetting />
               </Box>
             </Box>
           )}
         </Box>
 
-        <Box pad="medium" gap="medium" flex={false} style={{ overflow: 'auto' }}>
+        <Box pad={{ top: 'xsmall', horizontal: 'medium' }} gap="medium" flex={false} style={{ overflow: 'auto' }}>
           <ThemeSetting />
           <ApprovalSetting />
           <UnwrapSetting />

diff --git a/src/components/settings/ThemeSetting.tsx b/src/components/settings/ThemeSetting.tsx
@@ -8,66 +8,34 @@ import { Settings } from '../../contexts/types/settings';
 
 const ThemeSettings = () => {
   const {
-    settingsState: { darkMode, autoTheme },
+    settingsState: { darkMode },
     settingsActions: { updateSetting },
   } = useContext(SettingsContext);
 
   return (
     <Box gap="small" pad={{ vertical: 'small' }}>
       <Box direction="row" justify="between">
-        <Text size="small">Use System Color Theme</Text>
+        <Text size="small" color={'text'}>
+          Color Theme
+        </Text>
         <Switch
           width={55}
-          checked={autoTheme}
+          checked={darkMode}
           uncheckedIcon={
             <Box align="center" justify="center" fill pad="xsmall">
-              <Text size="0.5em"> Off </Text>
+              <FiSun color="text" style={{ strokeWidth: '3' }} />
             </Box>
           }
           checkedIcon={
             <Box align="center" justify="center" fill pad="xsmall">
-              <Text size="0.5em"> Auto </Text>
+              <FiMoon color="text" style={{ strokeWidth: '3', fill: 'Background' }} />
             </Box>
           }
           offColor="#BFDBFE"
           onColor="#60A5FA"
-          onChange={(val: boolean) => updateSetting(Settings.AUTO_THEME, val)}
-          handleDiameter={20}
-          borderRadius={20}
-        />
-      </Box>
-
-      <Box direction="row" justify="between">
-        <Text size="small" color={autoTheme ? 'text-xweak' : 'text'}>
-          Color Theme
-        </Text>
-        <Switch
-          width={55}
-          checked={darkMode}
-          uncheckedIcon={
-            autoTheme ? (
-              false
-            ) : (
-              <Box align="center" justify="center" fill pad="xsmall">
-                <FiSun color="text" style={{ strokeWidth: '3' }} />
-              </Box>
-            )
-          }
-          checkedIcon={
-            autoTheme ? (
-              false
-            ) : (
-              <Box align="center" justify="center" fill pad="xsmall">
-                <FiMoon color="text" style={{ strokeWidth: '3', fill: 'Background' }} />
-              </Box>
-            )
-          }
-          offColor="#BFDBFE"
-          onColor="#60A5FA"
           onChange={(val: boolean) => updateSetting(Settings.DARK_MODE, val)}
           handleDiameter={20}
           borderRadius={20}
-          disabled={autoTheme}
         />
       </Box>
     </Box>

diff --git a/src/contexts/SettingsContext.tsx b/src/contexts/SettingsContext.tsx
@@ -15,8 +15,6 @@ const initState: ISettingsContextState = {
 
   /* Color theme */
   darkMode: false,
-  /* Set color theme based on system */
-  autoTheme: false,
 
   /* Has the usage disclaimer been checked? */
   disclaimerChecked: false,

diff --git a/src/contexts/types/settings.ts b/src/contexts/types/settings.ts
@@ -6,7 +6,6 @@ export enum Settings {
   SLIPPAGE_TOLERANCE = 'slippageTolerance',
   DIAGNOSTICS = 'diagnostics',
   DARK_MODE = 'darkMode',
-  AUTO_THEME = 'autoTheme',
   DISCLAIMER_CHECKED = 'disclaimerChecked',
   POWER_USER = 'powerUser',
   FORCE_TRANSACTIONS = 'forceTransactions',
@@ -32,16 +31,14 @@ export interface ISettingsContext {
 }
 
 export interface ISettingsContextActions {
-  updateSetting: (setting: Settings, value: string | number | boolean ) => void;
+  updateSetting: (setting: Settings, value: string | number | boolean) => void;
 }
 export type SettingsContextAction = { type: Settings; payload: string | number | boolean };
 
 export interface ISettingsContextState {
   /* User Settings ( getting from the cache first ) */
   slippageTolerance: number;
   darkMode: boolean;
-  autoTheme: boolean;
-
   approvalMethod: ApprovalType;
   approveMax: boolean;
   disclaimerChecked: boolean;
@@ -68,6 +65,4 @@ export interface ISettingsContextState {
 
   useMockedUser: boolean;
   mockUserAddress: `0x${string}`;
-
 }
-
diff --git a/src/hooks/useColorScheme.ts b/src/hooks/useColorScheme.ts
@@ -1,27 +1,39 @@
 import { useContext, useEffect, useState } from 'react';
 import { SettingsContext } from '../contexts/SettingsContext';
+import { Settings } from '../contexts/types/settings';
 
-/* Hook for using a color scheme provided by user autotheme or darkMode settings */
 export const useColorScheme = () => {
   const [colorScheme, setColorScheme] = useState<'light' | 'dark'>('light');
   const {
-    settingsState: { autoTheme, darkMode },
+    settingsState: { darkMode },
+    settingsActions: { updateSetting },
   } = useContext(SettingsContext);
 
   useEffect(() => {
-    if (autoTheme && typeof window !== 'undefined') {
-      window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? setColorScheme('dark')
-        : setColorScheme('light');
+    const storedDarkMode = localStorage.getItem('darkMode');
+    const hasStoredDarkMode = storedDarkMode !== null;
+    if (hasStoredDarkMode) {
+      updateSetting(Settings.DARK_MODE, storedDarkMode === 'true');
+      setColorScheme(storedDarkMode === 'true' ? 'dark' : 'light');
+    } else if (typeof window !== 'undefined') {
+      const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      updateSetting(Settings.DARK_MODE, systemDarkMode);
+      setColorScheme(systemDarkMode ? 'dark' : 'light');
 
       window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-        const newColorScheme = e.matches ? 'dark' : 'light';
-        autoTheme && setColorScheme(newColorScheme);
+        const newDarkMode = e.matches;
+        updateSetting(Settings.DARK_MODE, newDarkMode);
+        setColorScheme(newDarkMode ? 'dark' : 'light');
       });
     } else {
-      setColorScheme(darkMode ? 'dark' : 'light' || 'light');
+      updateSetting(Settings.DARK_MODE, false);
+      setColorScheme('light');
     }
-  }, [autoTheme, darkMode]);
+  }, []);
+
+  useEffect(() => {
+    setColorScheme(darkMode ? 'dark' : 'light');
+  }, [darkMode]);
 
   return colorScheme;
 };
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -12,23 +12,6 @@ export default class MyDocument extends Document {
           <link rel="shortcut icon" href="/favicons/favicon.ico" />
         </Head>
         <body>
-          <script
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: `
-          function getColorScheme() {
-            if (JSON.parse(localStorage.getItem('autoTheme'))) {
-              return window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light';
-            } else {
-              return JSON.parse(localStorage.getItem('darkMode')) ? 'dark' : 'light'
-            }
-          }
-          document.body.dataset.theme = getColorScheme();
-        `,
-            }}
-          />
           <Main />
           <NextScript />
         </body>