Add dark mode toggle and store in local storage (#32)

![Screenshot 2023-05-30 at 12 12 02 PM](https://github.com/TBD54566975/ftl/assets/51647/a0860a4a-c599-45e3-9639-bf5a350d3587) ![Screenshot 2023-05-30 at 12 12 05 PM](https://github.com/TBD54566975/ftl/assets/51647/f72f7cf2-27fb-4507-b784-018030068de6) Makes the experience a bit more obvious and testing a bit easier
TBD54566975 · May 30, 2023 · b6ab744 · b6ab744
1 parent be24cf7
commit b6ab744
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 94 deletions.
diff --git a/console/index.html b/console/index.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="en" class="dark bg-white dark:bg-slate-800">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FTL</title>
   </head>
-  <body class="h-full">
+  <body class="h-full bg-white dark:bg-slate-800">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/console/src/App.tsx b/console/src/App.tsx
@@ -1,13 +1,13 @@
 import { Navigate, Route, Routes } from 'react-router-dom'
-import LogsPage from './features/log/LogsPage'
 import Layout from './components/Layout'
-import ModulePage from './features/modules/ModulePage'
 import Navigation from './components/Navigation'
-import VerbPage from './features/verbs/VerbPage'
-import ModulesPage from './features/modules/ModulesPage'
 import GraphPage from './features/graph/GraphPage'
+import LogsPage from './features/log/LogsPage'
+import ModulePage from './features/modules/ModulePage'
+import ModulesPage from './features/modules/ModulesPage'
+import VerbPage from './features/verbs/VerbPage'
 
-function App() {
+export default function App() {
   return (
     <>
       <Navigation />
@@ -26,5 +26,3 @@ function App() {
     </>
   )
 }
-
-export default App
diff --git a/console/src/app.css b/console/src/app.css
diff --git a/console/src/components/DarkModeSwitch.tsx b/console/src/components/DarkModeSwitch.tsx
@@ -0,0 +1,36 @@
+import { Switch } from '@headlessui/react'
+import { MoonIcon, SunIcon } from '@heroicons/react/20/solid'
+import { useEffect } from 'react'
+import useLocalStorage from '../hooks/use-local-storage'
+import { classNames } from '../utils/react.utils'
+
+export default function DarkModeSwitch() {
+  const [darkMode, setDarkMode] = useLocalStorage('dark-mode', false)
+
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }, [darkMode])
+
+  return (
+    <Switch
+      checked={darkMode}
+      onChange={setDarkMode}
+      className="bg-indigo-700 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+    >
+      <span className="sr-only">Dark mode toggle</span>
+      <span
+        aria-hidden="true"
+        className={classNames(
+          darkMode ? 'translate-x-5' : 'translate-x-0',
+          'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white dark:bg-indigo-600 shadow ring-0 transition duration-200 ease-in-out',
+        )}
+      >
+        {darkMode ? <MoonIcon className="text-white p-0.5" /> : <SunIcon className="text-indigo-600 p-0.5" />}
+      </span>
+    </Switch>
+  )
+}
diff --git a/console/src/components/Navigation.tsx b/console/src/components/Navigation.tsx
@@ -1,8 +1,8 @@
-import { Disclosure, Menu, Transition } from '@headlessui/react'
-import { Bars3Icon, XMarkIcon, Cog6ToothIcon } from '@heroicons/react/24/outline'
-import { Link, NavLink } from 'react-router-dom'
-import { Fragment } from 'react'
+import { Disclosure } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import { NavLink } from 'react-router-dom'
 import { classNames } from '../utils/react.utils'
+import DarkModeSwitch from './DarkModeSwitch'
 
 const navigation = [
   {
@@ -13,8 +13,6 @@ const navigation = [
   { name: 'Graph', href: '/graph' },
 ]
 
-const userNavigation = [{ name: 'Settings', href: '#' }]
-
 export default function Navigation() {
   return (
     <>
@@ -51,47 +49,15 @@ export default function Navigation() {
                     </div>
                   </div>
                 </div>
-                <div className="hidden sm:ml-6 sm:flex sm:items-center">
-                  {/* Settings dropdown */}
-                  <Menu as="div" className="relative ml-3">
-                    <div>
-                      <Menu.Button className="inline-flex items-center justify-center rounded-md p-2 text-indigo-200 hover:bg-indigo-500 hover:text-white">
-                        <span className="sr-only">Open user menu</span>
-                        <Cog6ToothIcon className="block h-6 w-6" aria-hidden="true" />
-                      </Menu.Button>
-                    </div>
-                    <Transition
-                      as={Fragment}
-                      enter="transition ease-out duration-200"
-                      enterFrom="transform opacity-0 scale-95"
-                      enterTo="transform opacity-100 scale-100"
-                      leave="transition ease-in duration-75"
-                      leaveFrom="transform opacity-100 scale-100"
-                      leaveTo="transform opacity-0 scale-95"
-                    >
-                      <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-                        {userNavigation.map(item => (
-                          <Menu.Item key={item.name}>
-                            {({ active }) => (
-                              <Link
-                                to={item.href}
-                                className={classNames(
-                                  active ? 'bg-gray-100' : '',
-                                  'block px-4 py-2 text-sm text-gray-700',
-                                )}
-                              >
-                                {item.name}
-                              </Link>
-                            )}
-                          </Menu.Item>
-                        ))}
-                      </Menu.Items>
-                    </Transition>
-                  </Menu>
+                <div className="hidden md:block">
+                  <DarkModeSwitch />
                 </div>
+
                 <div className="-mr-2 flex md:hidden">
                   {/* Mobile menu button */}
                   <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
+                    <DarkModeSwitch />
+                    <span className="p-1"></span>
                     <span className="sr-only">Open main menu</span>
                     {open ? (
                       <XMarkIcon className="block h-6 w-6" aria-hidden="true" />

diff --git a/console/src/hooks/use-local-storage.ts b/console/src/hooks/use-local-storage.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+export default function useLocalStorage(key: string, initialValue) {
+  const [value, setValue] = useState(() => {
+    const jsonValue = localStorage.getItem(key)
+    if (jsonValue != null) return JSON.parse(jsonValue)
+    return initialValue
+  })
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value))
+  }, [key, value])
+
+  return [value, setValue]
+}
diff --git a/console/tailwind.config.js b/console/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
+  darkMode: 'class',
   theme: {
     extend: {},
   },