From b6ab744fc9e9c666a5f2acd6f4dd071bd61e82c2 Mon Sep 17 00:00:00 2001 From: Wes Date: Tue, 30 May 2023 14:04:13 -0700 Subject: [PATCH] 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 --- console/index.html | 4 +- console/src/App.tsx | 12 +++--- console/src/app.css | 42 ------------------ console/src/components/DarkModeSwitch.tsx | 36 ++++++++++++++++ console/src/components/Navigation.tsx | 52 ++++------------------- console/src/hooks/use-local-storage.ts | 15 +++++++ console/tailwind.config.js | 1 + 7 files changed, 68 insertions(+), 94 deletions(-) delete mode 100644 console/src/app.css create mode 100644 console/src/components/DarkModeSwitch.tsx create mode 100644 console/src/hooks/use-local-storage.ts diff --git a/console/index.html b/console/index.html index 9d74635f..928b0e53 100644 --- a/console/index.html +++ b/console/index.html @@ -1,12 +1,12 @@ - + FTL - +
diff --git a/console/src/App.tsx b/console/src/App.tsx index 4b86b609..b509437f 100644 --- 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 ( <> @@ -26,5 +26,3 @@ function App() { ) } - -export default App diff --git a/console/src/app.css b/console/src/app.css deleted file mode 100644 index b9d355df..00000000 --- a/console/src/app.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/console/src/components/DarkModeSwitch.tsx b/console/src/components/DarkModeSwitch.tsx new file mode 100644 index 00000000..ec8ec71b --- /dev/null +++ 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 ( + + Dark mode toggle + + + ) +} diff --git a/console/src/components/Navigation.tsx b/console/src/components/Navigation.tsx index 388a490a..f0b6716b 100644 --- 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() { -
- {/* Settings dropdown */} - -
- - Open user menu - -
- - - {userNavigation.map(item => ( - - {({ active }) => ( - - {item.name} - - )} - - ))} - - - +
+
+
{/* Mobile menu button */} + + Open main menu {open ? (