From 03b37f857afbd468329858f63ab87d73ad917d50 Mon Sep 17 00:00:00 2001 From: Jacob Bryant Date: Wed, 1 Mar 2023 07:19:15 -0500 Subject: [PATCH 01/36] enhancing dark mode settings --- src/components/Sidebar.tsx | 6 ++-- src/components/settings/ThemeSetting.tsx | 44 ++++-------------------- src/contexts/SettingsContext.tsx | 2 +- src/hooks/useColorScheme.ts | 20 ++++++++--- 4 files changed, 24 insertions(+), 48 deletions(-) diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 30665e968..c931dd280 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -4,7 +4,6 @@ import { Box, Collapsible, Layer, ResponsiveContext, Tip, Text } from 'grommet'; import { FiEye, FiLogOut } 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'; @@ -58,7 +57,6 @@ const Sidebar = ({ settingsOpen, setSettingsOpen }: any) => { width={mobile ? undefined : '400px'} background="lightBackground" elevation="xlarge" - justify="between" style={{ overflow: 'auto' }} > @@ -134,13 +132,13 @@ const Sidebar = ({ settingsOpen, setSettingsOpen }: any) => { {!mobile && ( - + )} - + diff --git a/src/components/settings/ThemeSetting.tsx b/src/components/settings/ThemeSetting.tsx index 86e102404..35e0628cf 100644 --- a/src/components/settings/ThemeSetting.tsx +++ b/src/components/settings/ThemeSetting.tsx @@ -14,29 +14,6 @@ const ThemeSettings = () => { return ( - - Use System Color Theme - - Off - - } - checkedIcon={ - - Auto - - } - offColor="#BFDBFE" - onColor="#60A5FA" - onChange={(val: boolean) => updateSetting(Settings.AUTO_THEME, val)} - handleDiameter={20} - borderRadius={20} - /> - - Color Theme @@ -45,29 +22,20 @@ const ThemeSettings = () => { width={55} checked={darkMode} uncheckedIcon={ - autoTheme ? ( - false - ) : ( - - - - ) + + + } checkedIcon={ - autoTheme ? ( - false - ) : ( - - - - ) + + + } offColor="#BFDBFE" onColor="#60A5FA" onChange={(val: boolean) => updateSetting(Settings.DARK_MODE, val)} handleDiameter={20} borderRadius={20} - disabled={autoTheme} /> diff --git a/src/contexts/SettingsContext.tsx b/src/contexts/SettingsContext.tsx index 05ad9631f..2c5198c88 100644 --- a/src/contexts/SettingsContext.tsx +++ b/src/contexts/SettingsContext.tsx @@ -20,7 +20,7 @@ const initState: ISettingsContextState = { darkMode: false, /* Set color theme based on system */ - autoTheme: false, + autoTheme: true, /* Has the usage disclaimer been checked? */ disclaimerChecked: false, diff --git a/src/hooks/useColorScheme.ts b/src/hooks/useColorScheme.ts index b6a8663bc..0e4e34efc 100644 --- a/src/hooks/useColorScheme.ts +++ b/src/hooks/useColorScheme.ts @@ -1,27 +1,37 @@ 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 }, + settingsActions: { updateSetting }, } = useContext(SettingsContext); useEffect(() => { if (autoTheme && typeof window !== 'undefined') { - window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches - ? setColorScheme('dark') - : setColorScheme('light'); + // set initial dark mode + updateSetting(Settings.DARK_MODE, window.matchMedia('(prefers-color-scheme: dark)').matches); + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { + const newDarkMode = e.matches; + updateSetting(Settings.DARK_MODE, newDarkMode); + autoTheme && setColorScheme(newDarkMode ? 'dark' : 'light'); + }); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { const newColorScheme = e.matches ? 'dark' : 'light'; autoTheme && setColorScheme(newColorScheme); }); } else { - setColorScheme(darkMode ? 'dark' : 'light' || 'light'); + updateSetting(Settings.DARK_MODE, false); } - }, [autoTheme, darkMode]); + }, [autoTheme]); + + useEffect(() => { + setColorScheme(darkMode ? 'dark' : 'light'); + }, [darkMode]); return colorScheme; }; From eff6e23757a0c14774eec329bb5d8c8e9da2aac0 Mon Sep 17 00:00:00 2001 From: Jacob Bryant Date: Tue, 14 Mar 2023 16:45:18 -0400 Subject: [PATCH 02/36] fixing useColorScheme to check localstorage --- src/hooks/useColorScheme.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/hooks/useColorScheme.ts b/src/hooks/useColorScheme.ts index 0e4e34efc..a96685dc2 100644 --- a/src/hooks/useColorScheme.ts +++ b/src/hooks/useColorScheme.ts @@ -2,7 +2,6 @@ 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 { @@ -11,7 +10,11 @@ export const useColorScheme = () => { } = useContext(SettingsContext); useEffect(() => { - if (autoTheme && typeof window !== 'undefined') { + const storedDarkMode = localStorage.getItem('darkMode'); + const hasStoredDarkMode = storedDarkMode !== null; + if (hasStoredDarkMode) { + updateSetting(Settings.DARK_MODE, storedDarkMode === 'true'); + } else if (autoTheme && typeof window !== 'undefined') { // set initial dark mode updateSetting(Settings.DARK_MODE, window.matchMedia('(prefers-color-scheme: dark)').matches); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { @@ -30,7 +33,13 @@ export const useColorScheme = () => { }, [autoTheme]); useEffect(() => { - setColorScheme(darkMode ? 'dark' : 'light'); + const storedDarkMode = localStorage.getItem('darkMode'); + const hasStoredDarkMode = storedDarkMode !== null; + if (hasStoredDarkMode) { + setColorScheme(storedDarkMode === 'true' ? 'dark' : 'light'); + } else { + setColorScheme(darkMode ? 'dark' : 'light'); + } }, [darkMode]); return colorScheme; From 1afa6aafec099ee5d4585bb63800fc969300a8e7 Mon Sep 17 00:00:00 2001 From: Jacob Bryant Date: Tue, 14 Mar 2023 17:20:52 -0400 Subject: [PATCH 03/36] removing autoTheme --- src/components/settings/ThemeSetting.tsx | 4 ++-- src/contexts/SettingsContext.tsx | 2 -- src/contexts/types/settings.ts | 7 +----- src/hooks/useColorScheme.ts | 29 +++++++++--------------- src/pages/_document.tsx | 17 -------------- 5 files changed, 14 insertions(+), 45 deletions(-) diff --git a/src/components/settings/ThemeSetting.tsx b/src/components/settings/ThemeSetting.tsx index 35e0628cf..d5c66df1f 100644 --- a/src/components/settings/ThemeSetting.tsx +++ b/src/components/settings/ThemeSetting.tsx @@ -8,14 +8,14 @@ import { Settings } from '../../contexts/types/settings'; const ThemeSettings = () => { const { - settingsState: { darkMode, autoTheme }, + settingsState: { darkMode }, settingsActions: { updateSetting }, } = useContext(SettingsContext); return ( - + Color Theme void; + updateSetting: (setting: Settings, value: string | number | boolean) => void; } export type SettingsContextAction = { type: Settings; payload: string | number | boolean }; @@ -40,8 +39,6 @@ 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 index a96685dc2..b5f4cf6f5 100644 --- a/src/hooks/useColorScheme.ts +++ b/src/hooks/useColorScheme.ts @@ -5,7 +5,7 @@ import { Settings } from '../contexts/types/settings'; export const useColorScheme = () => { const [colorScheme, setColorScheme] = useState<'light' | 'dark'>('light'); const { - settingsState: { autoTheme, darkMode }, + settingsState: { darkMode }, settingsActions: { updateSetting }, } = useContext(SettingsContext); @@ -14,32 +14,25 @@ export const useColorScheme = () => { const hasStoredDarkMode = storedDarkMode !== null; if (hasStoredDarkMode) { updateSetting(Settings.DARK_MODE, storedDarkMode === 'true'); - } else if (autoTheme && typeof window !== 'undefined') { - // set initial dark mode - updateSetting(Settings.DARK_MODE, window.matchMedia('(prefers-color-scheme: dark)').matches); + 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 newDarkMode = e.matches; updateSetting(Settings.DARK_MODE, newDarkMode); - autoTheme && setColorScheme(newDarkMode ? 'dark' : 'light'); - }); - - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { - const newColorScheme = e.matches ? 'dark' : 'light'; - autoTheme && setColorScheme(newColorScheme); + setColorScheme(newDarkMode ? 'dark' : 'light'); }); } else { updateSetting(Settings.DARK_MODE, false); + setColorScheme('light'); } - }, [autoTheme]); + }, []); useEffect(() => { - const storedDarkMode = localStorage.getItem('darkMode'); - const hasStoredDarkMode = storedDarkMode !== null; - if (hasStoredDarkMode) { - setColorScheme(storedDarkMode === 'true' ? 'dark' : 'light'); - } else { - setColorScheme(darkMode ? 'dark' : 'light'); - } + setColorScheme(darkMode ? 'dark' : 'light'); }, [darkMode]); return colorScheme; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index dd7a312bd..eb8f0506d 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -12,23 +12,6 @@ export default class MyDocument extends Document { -