From 699d1a118cb93c360067bed8e153c35ff459755b Mon Sep 17 00:00:00 2001
From: ansh <ansh@anshnk.dev>
Date: Sun, 13 Oct 2024 22:17:47 -0500
Subject: [PATCH] Themes to appearances instead of top navbar.

---
 src/app/settings/appearance/page.tsx | 2 ++
 src/components/ThemeSwitch.tsx       | 7 ++++---
 src/components/navbar.tsx            | 1 -
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/settings/appearance/page.tsx b/src/app/settings/appearance/page.tsx
index 1576c16..e6886bf 100644
--- a/src/app/settings/appearance/page.tsx
+++ b/src/app/settings/appearance/page.tsx
@@ -3,6 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { ModeToggle } from "@/components/ThemeSwitch";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -89,6 +90,7 @@ export default function Settings() {
           </div>
         </form>
       </Form>
+      <ModeToggle />
     </div>
   );
 }
diff --git a/src/components/ThemeSwitch.tsx b/src/components/ThemeSwitch.tsx
index 24049cc..3114881 100644
--- a/src/components/ThemeSwitch.tsx
+++ b/src/components/ThemeSwitch.tsx
@@ -18,9 +18,10 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <Button variant="outline">
+          <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 mr-1" />
+          <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <p>Themes</p>
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 66d551a..aef3b31 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -20,7 +20,6 @@ export default function Navbar() {
         <Button onClick={() => setOpen(true)} size="icon" variant="ghost">
                 <Lucide.Menu className="h-7 w-7" />
         </Button>
-        <ModeToggle />
         {/* Wrap the logo and text in a Link */}
         <Link href="/" className="flex items-center gap-2">
           <Lucide.Radius className="h-8 w-8 rotate-180" />