Navbar Edits/Dark Mode Toggle

components/NavBar.tsx

@@ -1,12 +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 } from '@tabler/icons'
+
 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<boolean>('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 (
     <>
       <div className="relative bg-sky-800 py-2 text-center lg:px-4">
@@ -17,7 +41,7 @@ const NavBar = () => {
           <span className="sm:text-md mx-4 flex-auto text-center text-sm font-semibold">
             <label
               className="cursor-pointer text-teal-300"
-              // htmlFor="changelog-modal"
+            // htmlFor="changelog-modal"
             >
               <a
                 href="https://discord.gg/qhnqxtphSg"
@@ -86,6 +110,7 @@ const NavBar = () => {
             </a>
           </div>
         </div>
+        {/* The previous language selector
         <div className="navbar-end text-right text-lg font-semibold uppercase">
           <IconLanguage />
           <select
@@ -102,9 +127,52 @@ const NavBar = () => {
             <option value="zh">ZH</option>
           </select>
         </div>
+      */}
+        <div className="navbar-end uppercase">
+          <div id="darkModeToggle">
+            <button
+              className="btn btn-ghost btn-sm ml-2 mr-auto cursor-pointer"
+              onClick={() =>
+                setDarkMode(!darkMode)
+              }
+            >
+              {darkMode ? <IconMoon /> : <IconSun />}
+            </button>
+          </div>
+          <span className="mx-1" />
+          <div id="langSelector" className='dropdown dropdown-end'>
+            <label tabIndex={0} className="btn btn-ghost btn-sm"><IconLanguage /><span className='px-1'>{router.locale}</span></label>
+            <ul id="langSelectorList" tabIndex={0} className={'dropdown-content menu shadow bg-base-100 border border-white'}>
+              {router.locales?.map((locale, idx, arr) => {
+                return (
+                  <li
+                    id={"langSelector_" + locale}
+                    role="option"
+                    key={idx+1}
+                    tabIndex={idx+1}
+                    className={
+                      classNames('px-4 rounded-none select-none active:bg-base-dropdown active:text-white hover:bg-base-dropdown hover:text-white',
+                        { 'bg-sky-600 text-white font-semibold': router.locale === locale },
+                      )}
+                    onClick={() => {
+                      const { pathname, asPath, query } = router
+                      router.replace({ pathname, query }, asPath, {
+                        locale: arr[idx],
+                      })
+                    }}>
+                    {locale}
+                  </li>
+                )
+              })
+              }
+            </ul>
+          </div>
+
+        </div>
       </div>
     </>
   )
 }
 
+
 export default NavBar

components/modals/AlarmConfigModal.tsx

@@ -162,6 +162,7 @@ const AlarmConfigModal = () => {
                     setDarkMode((e.target as HTMLInputElement).checked)
                   }
                   defaultChecked={darkMode}
+                  checked={darkMode}
                   className="checkbox checkbox-sm"
                 />
               </label>

components/modals/MerchantConfigModal.tsx

@@ -99,6 +99,7 @@ const MerchantConfigModal = () => {
                     setDarkMode((e.target as HTMLInputElement).checked)
                   }
                   defaultChecked={darkMode}
+                  checked={darkMode}
                   className="checkbox checkbox-sm"
                 />
               </label>

pages/alarms.tsx

@@ -85,38 +85,6 @@ const Alarms: NextPage = () => {
     'regionTZName',
     'US West'
   )
-  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<boolean>(
-    '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])
-
   const [serverTime, setServerTime] = useState<DateTime>(
     currDate.setZone(regionTZ)
   )

pages/merchants.tsx

@@ -32,25 +32,6 @@ const Merchants: NextPage = (props) => {
     'merchantServer',
     'Shandi'
   )
-  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<boolean>('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])
-
   const [currDate, setCurrDate] = useState<DateTime>(DateTime.now())
   const [regionTZ, setRegionTZ] = useLocalStorage<string>('regionTZ', 'UTC-7')
 
@@ -219,24 +200,23 @@ const Merchants: NextPage = (props) => {
       </Head>
       <MerchantConfigModal />
       <div className="flex min-h-screen flex-col items-center whitespace-normal bg-base-300 py-2 dark:bg-base-100">
-        <div className="ml-auto flex w-full justify-end px-4 lg:px-20">
-          <div className="hidden w-1/5 whitespace-normal text-center text-sm uppercase sm:inline lg:text-lg">
-            <span
-              dangerouslySetInnerHTML={{
-                __html: t('server-note-text', {
-                  timeType: viewLocalizedTime ? 'CURRENT TIME' : 'SERVER TIME',
-                }),
-              }}
-            />
+        <div className="ml-auto flex w-full justify-end px-4 pb-2 lg:px-20">
+          <div className="hidden w-1/5 whitespace-normal text-center align-middle text-sm uppercase sm:inline lg:text-lg">
+            <Trans
+              i18nKey="server-note-text"
+              values={{ timeType: viewLocalizedTime ? t('common:current-time') : t('common:server-time') }}
+            >
+              {t('server-note-text')}
+            </Trans>
           </div>
           <label
             htmlFor="merchant-config-modal"
-            className="btn btn-ghost ml-2 mr-auto cursor-pointer"
+            className="btn btn-ghost ml-2 my-auto cursor-pointer"
           >
             <IconSettings className="transition ease-in-out hover:-translate-y-px hover:rotate-45" />
           </label>
-
-          <div className="mr-4 mb-2 w-40 flex-col">
+          <div className="flex grow" />
+          <div className="w-40 flex-col mr-4 my-auto">
             <select
               className="select select-bordered select-sm w-full"
               onChange={(e) => {
@@ -269,7 +249,7 @@ const Merchants: NextPage = (props) => {
               </select>
             )}
           </div>
-          <table className="mb-2">
+          <table className="my-auto">
             <tbody>
               <tr
                 className={classNames('text-left', {
@@ -491,7 +471,7 @@ const Merchants: NextPage = (props) => {
 }
 
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
-import { useTranslation } from 'next-i18next'
+import { Trans, useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 
 export async function getStaticProps({ locale }: { locale: string }) {

public/locales/zh/common.json

@@ -6,6 +6,6 @@
   "view-in-24-hr": "查看24小时内的",
   "option-minute-before": "提前{{minutes}}分钟提醒",
   "view-in-current-time": "当前时间内查看",
-  "dark-mode": "Dark Mode",
+  "dark-mode": "深色模式",
   "all-done": "确定"
 }

public/locales/zh/merchants.json

@@ -9,7 +9,7 @@
   "vote": "投票",
   "data-by": "数据来源: ",
   "last-updated": "最后更新",
-  "server-note-text": "注意：当前显示的是<strong>服务器时间</strong>.",
+  "server-note-text": "注意：当前显示的是<strong>{{timeType}}</strong>.",
 
   "locations": {
     "Rethramis": "阿尔忒弥斯",
@@ -82,7 +82,10 @@
     "Tideshelf Path": "浅海之路",
     "Starsand Beach": "星星沙滩",
     "Tikatika Colony": "蒂卡蒂卡群落地",
-    "Secret Forest": "秘密森林"
+    "Secret Forest": "秘密森林",
+    "South Vern": "伯尔尼南部",
+    "Candaria Territory": "Candaria Territory",
+    "Bellion Ruins": "Bellion Ruins"
   },
   "items": {
     "920404": {
@@ -227,6 +230,17 @@
     "70503001": { "name": "Yudia Spellbook" },
     "70503005": { "name": "Shimmering Essence" },
     "70503006": { "name": "Energy X7 Capsule" },
-    "70503008": { "name": "Piyer's Secret Textbook" }
+    "70503008": { "name": "Piyer's Secret Textbook" },
+
+    "70500063": { "name": "Feather Fan" },
+    "70500062": { "name": "Febre Potion" },
+    "70500064": { "name": "Mockup Firefly" },
+    "70501012": { "name": "Necromancer's Records" },
+
+    "63200407": { "name": "Satra" },
+    "63200408": { "name": "Killian" },
+    "63200402": { "name": "Lujean" },
+    "63200404": { "name": "Vern Zenlord" },
+    "63200403": { "name": "Xereon" }
   }
 }

tailwind.config.js

@@ -6,7 +6,11 @@ module.exports = {
   ],
   darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'base-dropdown': '#767676',
+      }
+    },
   },
   plugins: [require('daisyui')],
   daisyui: {