Move theme toggle to settings.

src/components/header/index.tsx

@@ -5,53 +5,6 @@ import Link from "next/link"
 import { useTheme } from "next-themes"
 
 export function Header() {
-  const { theme, systemTheme, setTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  const renderThemeToggle = () => {
-    if (!mounted) return null
-
-    const currentTheme = theme === "system" ? systemTheme : theme
-
-    if (currentTheme === "dark") {
-      return (
-        <button onClick={() => setTheme("light")} className="icon-hover">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className="w-6 h-6"
-          >
-            <title>Theme toggle</title>
-            <path
-              fillRule="evenodd"
-              d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
-              clipRule="evenodd"
-            />
-          </svg>
-        </button>
-      )
-    } else {
-      return (
-        <button onClick={() => setTheme("dark")} className="icon-hover">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className="w-6 h-6"
-          >
-            <title>Theme toggle</title>
-            <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
-          </svg>
-        </button>
-      )
-    }
-  }
-
   return (
     <header className="mb-5 p-4">
       <div className="container mx-auto flex justify-between items-center">
@@ -65,14 +18,13 @@ export function Header() {
         >FAQ
         </Link> */}
           <a href="https://github.com/vilm3r/sendstr-web">
-            <DiGithubBadge className="inline text-3xl icon-hover" title="Github" />
+            <DiGithubBadge className="inline text-3xl primary-hover" title="Github" />
           </a>
           <Link href="/settings">
             <div className="cursor-pointer">
-              <MdSettings className="inline text-2xl icon-hover" title="Settings" />
+              <MdSettings className="inline text-2xl primary-hover" title="Settings" />
             </div>
           </Link>
-          {renderThemeToggle()}
         </div>
       </div>
     </header>

src/pages/settings/index.tsx

@@ -1,4 +1,4 @@
-import { createRef, useState } from "react"
+import { createRef, useEffect, useState } from "react"
 import { Button } from "../../components/button"
 import { Card } from "../../components/card"
 import { Header } from "../../components/header"
@@ -13,6 +13,7 @@ import { Input } from "../../components/input"
 import { MdDelete } from "react-icons/md"
 import { Toggle } from "../../components/toggle"
 import Head from "next/head"
+import { useTheme } from "next-themes"
 
 type SettingsState = {
   relays: SettingsRelay[]
@@ -23,6 +24,62 @@ export default function Settings() {
     relays: typeof window !== "undefined" ? getRelays() : [],
   })
   const newPool = createRef<HTMLInputElement>()
+  const { theme, systemTheme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const ThemeToggle = () => {
+    if (!mounted) return null
+
+    let content: JSX.Element
+    const currentTheme = theme === "system" ? systemTheme : theme
+    const isDark = currentTheme === "dark"
+
+    const toggleHandler = () => setTheme(isDark ? "light" : "dark")
+
+    if (isDark) {
+      content = (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="w-6 h-6"
+        >
+          <title>Theme toggle</title>
+          <path
+            fillRule="evenodd"
+            d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
+            clipRule="evenodd"
+          />
+        </svg>
+      )
+    } else {
+      content = (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="w-6 h-6"
+        >
+          <title>Theme toggle</title>
+          <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
+        </svg>
+      )
+    }
+
+    return (
+      <div onClick={toggleHandler} className="cursor-pointer">
+        <h2 className="text-2xl pb-5">Light mode</h2>
+        <div className="flex justify-between primary-hover">
+          <p className="lg:text-lg">Toggle</p>
+          {content}
+        </div>
+      </div>
+    )
+  }
 
   return (
     <>
@@ -53,61 +110,66 @@ export default function Settings() {
         />
         <meta property="twitter:image" content="/favicon-16x16.png" />
       </Head>
-      <div className="bg-custom-green-dark min-h-screen">
+      <div className="min-h-screen">
         <div className="p-5">
           <div className="max-w-[80rem] mx-auto">
             <Header />
             <main className="max-w-[64rem] m-auto">
               <div className="max-w-[30rem] m-auto p-10">
-                <h2 className="text-2xl pb-5">Relays</h2>
+                <div className="pb-10">
-                <ul>
+                  <h2 className="text-2xl pb-5">Relays</h2>
-                  {settings.relays.map((relay) => (
+                  <ul>
-                    <li key={relay.url}>
+                    {settings.relays.map((relay) => (
-                      <div className="m-auto flex items-center pb-3">
+                      <li key={relay.url}>
-                        <Toggle
+                        <div className="m-auto flex items-center pb-3">
-                          checked={relay.enabled}
+                          <Toggle
-                          onChange={() => {
+                            checked={relay.enabled}
-                            toggleRelay(relay.url)
+                            onChange={() => {
-                            setSettings({
+                              toggleRelay(relay.url)
-                              ...settings,
+                              setSettings({
-                              relays: getRelays(),
+                                ...settings,
-                            })
+                                relays: getRelays(),
-                          }}
+                              })
-                        />
+                            }}
-                        <label className="lg:text-lg flex-grow text-center p-2 truncate">
+                          />
-                          {relay.url}
+                          <label className="lg:text-lg flex-grow text-center p-2 truncate">
-                        </label>
+                            {relay.url}
-                        <button
+                          </label>
-                          onClick={() => {
+                          <button
-                            removeRelay(relay.url)
+                            onClick={() => {
-                            setSettings({
+                              removeRelay(relay.url)
-                              ...settings,
+                              setSettings({
-                              relays: getRelays(),
+                                ...settings,
-                            })
+                                relays: getRelays(),
-                          }}
+                              })
-                        >
+                            }}
-                          <MdDelete className="text-2xl" />
+                          >
-                        </button>
+                            <MdDelete className="text-2xl" />
-                      </div>
+                          </button>
-                    </li>
+                        </div>
-                  ))}
+                      </li>
-                </ul>
+                    ))}
-                <Input className="pt-5" ref={newPool} placeholder="Relay url" />
+                  </ul>
-                <Button
+                  <Input className="pt-5" ref={newPool} placeholder="Relay url" />
-                  className="pt-5"
+                  <Button
-                  onClick={() => {
+                    className="pt-5"
-                    addRelay({
+                    onClick={() => {
-                      url: newPool?.current?.value || "",
+                      addRelay({
-                      enabled: true,
+                        url: newPool?.current?.value || "",
-                    })
+                        enabled: true,
-                    setSettings({
+                      })
-                      ...settings,
+                      setSettings({
-                      relays: getRelays(),
+                        ...settings,
-                    })
+                        relays: getRelays(),
-                  }}
+                      })
-                >
+                    }}
-                  Add Relay
+                  >
-                </Button>
+                    Add Relay
+                  </Button>
+                </div>
+                <div className="pt-10">
+                  <ThemeToggle />
+                </div>
               </div>
             </main>
           </div>