From 75432fb1d61f6f0d828ee2df7c92c61916bacbe8 Mon Sep 17 00:00:00 2001 From: alairon Date: Sun, 8 May 2022 22:38:18 -0400 Subject: [PATCH 01/20] feat: enabled light/dark mode toggle in tailwind --- tailwind.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index a1daf173..2892d6c6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,8 +4,12 @@ module.exports = { './components/**/*.{js,ts,jsx,tsx}', './util/**/*.{js,ts,jsx,tsx}', ], + darkMode: 'class', theme: { extend: {}, }, plugins: [require('daisyui')], + daisyui: { + themes: ['light', 'dark'], + }, } From 354539c608b0e4b047d8f485675128483ed8f929 Mon Sep 17 00:00:00 2001 From: alairon Date: Sun, 8 May 2022 22:52:38 -0400 Subject: [PATCH 02/20] feat: dark mode --- components/modals/AlarmConfigModal.tsx | 17 +++++++++++++++++ components/modals/MerchantConfigModal.tsx | 17 +++++++++++++++++ pages/alarms.tsx | 14 ++++++++++++++ pages/merchants.tsx | 14 ++++++++++++++ public/locales/en/common.json | 1 + public/locales/zh/common.json | 1 + 6 files changed, 64 insertions(+) diff --git a/components/modals/AlarmConfigModal.tsx b/components/modals/AlarmConfigModal.tsx index 36c32594..46031fc4 100644 --- a/components/modals/AlarmConfigModal.tsx +++ b/components/modals/AlarmConfigModal.tsx @@ -33,6 +33,10 @@ const AlarmConfigModal = () => { 'view24HrTime', false ) + const [darkMode, setDarkMode] = useLocalStorage( + 'darkMode', + false + ) const [alertSound, setAlertSound] = useLocalStorage( 'alertSound', 'muted' @@ -148,6 +152,19 @@ const AlarmConfigModal = () => { className="checkbox checkbox-sm" /> +
+
+
+
+ +
    +
  • { + const { pathname, asPath, query } = router + router.replace({ pathname, query }, asPath, { + locale: 'en', + }) + }}>EN
    • +
  • { + const { pathname, asPath, query } = router + router.replace({ pathname, query }, asPath, { + locale: 'zh', + }) + }}>ZH
    • +
+
+ + +
+ + {/* + // The previous language selector
- + */} ) } + export default NavBar From ac8283619944a5f69562c32252a02ed262608f21 Mon Sep 17 00:00:00 2001 From: alairon Date: Sun, 29 May 2022 22:07:38 -0400 Subject: [PATCH 07/20] refactor: removed unused switch toggle --- components/DarkModeController.tsx | 60 ++++--------------------------- 1 file changed, 7 insertions(+), 53 deletions(-) diff --git a/components/DarkModeController.tsx b/components/DarkModeController.tsx index 51acafd2..a09a9b9c 100644 --- a/components/DarkModeController.tsx +++ b/components/DarkModeController.tsx @@ -1,12 +1,9 @@ -import { useEffect, useRef } from "react" -import { IconSun, IconMoon } from "@tabler/icons" -import useLocalStorage from "@olerichter00/use-localstorage" -import { useTranslation } from "next-i18next" +import { useEffect, useRef } from 'react' +import { IconSun, IconMoon } from '@tabler/icons' +import useLocalStorage from '@olerichter00/use-localstorage' // Dark Mode Button const DMButton = () => { - const { t } = useTranslation('common') - const isMounted = useRef(false) const defaultTheme = () => { // Defaults to system theme if unconfigured @@ -23,18 +20,17 @@ const DMButton = () => { //Toggle standard Tailwind colors (e.g. bg-sky-800) darkMode - ? document.documentElement.classList.add("dark") - : document.documentElement.classList.remove("dark") + ? document.documentElement.classList.add('dark') + : document.documentElement.classList.remove('dark') }, [darkMode]) return (
@@ -42,51 +38,9 @@ const DMButton = () => { ) } -// Dark Mode Toggle -const DMToggle = () => { - const isMounted = useRef(false) - const defaultTheme = () => { - // Defaults to system theme if unconfigured - return (localStorage.getItem('darkMode') || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) - } - const [darkMode, setDarkMode] = useLocalStorage('darkMode', defaultTheme) - - useEffect(() => { - //Prevents FoUC (Flash of Unstylized Content) by not refreshing on first mount - if (!isMounted.current) { isMounted.current = true; return } - - //Toggle Daisy UI colors (e.g. bg-base-###) - document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light') - - //Toggle standard Tailwind colors (e.g. bg-sky-800) - darkMode - ? document.documentElement.classList.add("dark") - : document.documentElement.classList.remove("dark") - }, [darkMode]) - return ( - <> - - - ) -} - const DarkModeController = () => { return ( - <> - - + ) } From 977a25fcefaa3354533b31b59e3666087e8f37e6 Mon Sep 17 00:00:00 2001 From: alairon Date: Sun, 29 May 2022 23:17:53 -0400 Subject: [PATCH 08/20] refactor: Moved settings into navbar --- components/DarkModeController.tsx | 47 ------------------------------- components/NavBar.tsx | 37 ++++++++++++++++++++++-- 2 files changed, 34 insertions(+), 50 deletions(-) delete mode 100644 components/DarkModeController.tsx diff --git a/components/DarkModeController.tsx b/components/DarkModeController.tsx deleted file mode 100644 index a09a9b9c..00000000 --- a/components/DarkModeController.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useEffect, useRef } from 'react' -import { IconSun, IconMoon } from '@tabler/icons' -import useLocalStorage from '@olerichter00/use-localstorage' - -// Dark Mode Button -const DMButton = () => { - const isMounted = useRef(false) - const defaultTheme = () => { - // Defaults to system theme if unconfigured - return (localStorage.getItem('darkMode') || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) - } - const [darkMode, setDarkMode] = useLocalStorage('darkMode', defaultTheme) - - useEffect(() => { - //Prevents FoUC (Flash of Unstylized Content) by not refreshing on first mount - if (!isMounted.current) { isMounted.current = true; return } - - //Toggle Daisy UI colors (e.g. bg-base-###) - document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light') - - //Toggle standard Tailwind colors (e.g. bg-sky-800) - darkMode - ? document.documentElement.classList.add('dark') - : document.documentElement.classList.remove('dark') - }, [darkMode]) - - return ( -
- -
- ) -} - -const DarkModeController = () => { - return ( - - ) -} - -export default DarkModeController diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 9e501039..caf525c4 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -1,13 +1,36 @@ import classNames from 'classnames' import Link from 'next/link' import { useRouter } from 'next/router' +import { useEffect, useRef } from 'react' +import { IconSun, IconMoon } from '@tabler/icons' +import useLocalStorage from '@olerichter00/use-localstorage' import { useTranslation } from 'next-i18next' import { IconLanguage, IconCaretDown } from '@tabler/icons' -import DarkModeController from './DarkModeController' + const NavBar = () => { const { t } = useTranslation('common') const router = useRouter() + + const isMounted = useRef(false) + const defaultTheme = () => { + return (localStorage.getItem('darkMode') || window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) + } + const [darkMode, setDarkMode] = useLocalStorage('darkMode', defaultTheme) + + useEffect(() => { + //Prevents FoUC (Flash of Unstylized Content) by not refreshing on first mount + if (!isMounted.current) { isMounted.current = true; return } + + //Toggle Daisy UI colors (e.g. bg-base-###) + document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light') + + //Toggle standard Tailwind colors (e.g. bg-sky-800) + darkMode + ? document.documentElement.classList.add('dark') + : document.documentElement.classList.remove('dark') + }, [darkMode]) + return ( <>
@@ -105,8 +128,16 @@ const NavBar = () => { }}>ZH
- - +
+ +
{/* From 5e4b60afebf62503fa644b4876f73b1c0f568d9d Mon Sep 17 00:00:00 2001 From: alairon Date: Sun, 29 May 2022 23:19:08 -0400 Subject: [PATCH 09/20] fix: dark mode desync --- components/modals/AlarmConfigModal.tsx | 1 + components/modals/MerchantConfigModal.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/components/modals/AlarmConfigModal.tsx b/components/modals/AlarmConfigModal.tsx index 167acfbc..5266a49c 100644 --- a/components/modals/AlarmConfigModal.tsx +++ b/components/modals/AlarmConfigModal.tsx @@ -162,6 +162,7 @@ const AlarmConfigModal = () => { setDarkMode((e.target as HTMLInputElement).checked) } defaultChecked={darkMode} + checked={darkMode} className="checkbox checkbox-sm" /> diff --git a/components/modals/MerchantConfigModal.tsx b/components/modals/MerchantConfigModal.tsx index d1dfa60d..7479a4d9 100644 --- a/components/modals/MerchantConfigModal.tsx +++ b/components/modals/MerchantConfigModal.tsx @@ -99,6 +99,7 @@ const MerchantConfigModal = () => { setDarkMode((e.target as HTMLInputElement).checked) } defaultChecked={darkMode} + checked={darkMode} className="checkbox checkbox-sm" /> From 26bf71705158e030e63a0db197f2aefadab2b375 Mon Sep 17 00:00:00 2001 From: alairon Date: Sun, 29 May 2022 23:37:32 -0400 Subject: [PATCH 10/20] refactor: changed color of selected language --- components/NavBar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/NavBar.tsx b/components/NavBar.tsx index caf525c4..3133f4a7 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -119,13 +119,13 @@ const NavBar = () => { router.replace({ pathname, query }, asPath, { locale: 'en', }) - }}>EN + }}>EN
  • { const { pathname, asPath, query } = router router.replace({ pathname, query }, asPath, { locale: 'zh', }) - }}>ZH
    • + }}>ZH
    @@ -158,7 +158,7 @@ const NavBar = () => {
    - */} + */} ) } From a62cbb692818d37af32c040b065101c65e69b70d Mon Sep 17 00:00:00 2001 From: alairon Date: Mon, 30 May 2022 03:21:36 -0400 Subject: [PATCH 11/20] feat: changed colors to match system dropdown --- components/NavBar.tsx | 4 ++-- tailwind.config.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 3133f4a7..fb1d7782 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -119,13 +119,13 @@ const NavBar = () => { router.replace({ pathname, query }, asPath, { locale: 'en', }) - }}>EN + }}>EN
  • { const { pathname, asPath, query } = router router.replace({ pathname, query }, asPath, { locale: 'zh', }) - }}>ZH
    • + }}>ZH
    diff --git a/tailwind.config.js b/tailwind.config.js index 2892d6c6..8a63e192 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,11 @@ module.exports = { ], darkMode: 'class', theme: { - extend: {}, + extend: { + colors: { + 'base-dropdown': '#767676', + } + }, }, plugins: [require('daisyui')], daisyui: { From 3280e4cfe131e2c078efd3a4212537799c06cb84 Mon Sep 17 00:00:00 2001 From: alairon Date: Mon, 30 May 2022 22:49:54 -0400 Subject: [PATCH 12/20] refactor: changed language selector --- components/NavBar.tsx | 72 +++++++++++++++++++++++-------------------- 1 file changed, 39 insertions(+), 33 deletions(-) diff --git a/components/NavBar.tsx b/components/NavBar.tsx index fb1d7782..2c5faefa 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -5,7 +5,7 @@ import { useEffect, useRef } from 'react' import { IconSun, IconMoon } from '@tabler/icons' import useLocalStorage from '@olerichter00/use-localstorage' import { useTranslation } from 'next-i18next' -import { IconLanguage, IconCaretDown } from '@tabler/icons' +import { IconLanguage, IconChevronDown } from '@tabler/icons' const NavBar = () => { const { t } = useTranslation('common') @@ -110,38 +110,7 @@ const NavBar = () => {
    -
    -
    - -
      -
    • { - const { pathname, asPath, query } = router - router.replace({ pathname, query }, asPath, { - locale: 'en', - }) - }}>EN
      • -
    • { - const { pathname, asPath, query } = router - router.replace({ pathname, query }, asPath, { - locale: 'zh', - }) - }}>ZH
      • -
    -
    -
    - -
    -
    - - {/* - // The previous language selector + {/* The previous language selector
    */} +
    +
    + +
      + {router.locales?.map((locale, idx, arr) => { + return ( +
    • { + const { pathname, asPath, query } = router + router.replace({ pathname, query }, asPath, { + locale: arr[idx], + }) + }}> + {locale} +
      • + ) + }) + } +
    +
    +
    + +
    +
    + ) } From f7b06baf72b00fefc5d86e090c4258121c4843df Mon Sep 17 00:00:00 2001 From: alairon Date: Tue, 31 May 2022 02:46:41 -0400 Subject: [PATCH 13/20] moved navbar elements and sizes --- components/NavBar.tsx | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 2c5faefa..aac17bc9 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -129,13 +129,25 @@ const NavBar = () => { */}
    +
    + +
    +
    - -
      + +
        {router.locales?.map((locale, idx, arr) => { return (
      • { }
    -
    - -
    +
    From 9d67b7f2afa5c2f044de649316d42669f62a9ec5 Mon Sep 17 00:00:00 2001 From: alairon Date: Tue, 31 May 2022 16:44:36 -0400 Subject: [PATCH 14/20] fix: data alignment --- pages/merchants.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/pages/merchants.tsx b/pages/merchants.tsx index 8b96c8a2..613e712f 100644 --- a/pages/merchants.tsx +++ b/pages/merchants.tsx @@ -200,8 +200,8 @@ const Merchants: NextPage = (props) => {
    -
    -
    +
    +
    {
    - -
    +
    +
    )}
    - +
    Date: Tue, 31 May 2022 16:47:43 -0400 Subject: [PATCH 15/20] refactor: replaced chevron with current language --- components/NavBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/NavBar.tsx b/components/NavBar.tsx index aac17bc9..e95bc469 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -5,7 +5,7 @@ import { useEffect, useRef } from 'react' import { IconSun, IconMoon } from '@tabler/icons' import useLocalStorage from '@olerichter00/use-localstorage' import { useTranslation } from 'next-i18next' -import { IconLanguage, IconChevronDown } from '@tabler/icons' +import { IconLanguage } from '@tabler/icons' const NavBar = () => { const { t } = useTranslation('common') @@ -141,7 +141,7 @@ const NavBar = () => {
    - +
      {router.locales?.map((locale, idx, arr) => { return ( From 0c6f1c6a08922bc6fbbe4a34a3550ea510f672d9 Mon Sep 17 00:00:00 2001 From: alairon Date: Tue, 31 May 2022 17:23:22 -0400 Subject: [PATCH 16/20] refactor: added div ids --- components/NavBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/NavBar.tsx b/components/NavBar.tsx index e95bc469..5ca714b4 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -140,7 +140,7 @@ const NavBar = () => {
    -
    +
      {router.locales?.map((locale, idx, arr) => { From 8207074c785a51802fe16c70b9a8662bf86fbca2 Mon Sep 17 00:00:00 2001 From: alairon Date: Mon, 6 Jun 2022 01:11:08 -0400 Subject: [PATCH 17/20] fix: unique key warning --- components/NavBar.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 5ca714b4..5b9a49f9 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -140,13 +140,15 @@ const NavBar = () => {
    -
    +
    -
      +
        {router.locales?.map((locale, idx, arr) => { return (
      • Date: Mon, 6 Jun 2022 01:38:47 -0400 Subject: [PATCH 18/20] fix: removed InnerHTML in favor of i18n --- pages/merchants.tsx | 17 ++++++++--------- public/locales/zh/merchants.json | 2 +- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/pages/merchants.tsx b/pages/merchants.tsx index 613e712f..d8180fde 100644 --- a/pages/merchants.tsx +++ b/pages/merchants.tsx @@ -202,13 +202,12 @@ const Merchants: NextPage = (props) => {
        - + + {t('server-note-text')} +
        -
        +