src/@/components/ui/badge.tsx

@@ -9,7 +9,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-accent text-accent-foreground",
+          "border-transparent bg-primary text-primary-foreground",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:

src/app/layout.tsx

@@ -8,7 +8,6 @@ import Link from "next/link";
 import { ComponentProps } from "react";
 import { Send } from "lucide-react";
 import Navlinks from "./ui/navLinks";
-import { ModeToggle } from "./ui/modeToggle";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -33,14 +32,14 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
+          <div id="layout-container" className="p-4 w-screen mt-6 flex justify-center">
             <div className="grid grid-cols-12 w-5/6">
-              <div id="sidebar" className="col-start-1 col-end-3 h-5/6 flex flex-col"> <header className="">
+              <div id="sidebar" className="col-start-1 col-end-3">
+                <header className="">
                   <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2">SubMan</h1>
                   <p className="mt-2 mx-1 text-sm antialiased">The self-hosted literary submission tracker.</p>
                 </header>
                 <Navlinks className="mt-6" />
-                <footer className="mt-auto"><ModeToggle /></footer>
               </div>
               <div className="col-start-3 col-span-full">
                 {children}

src/app/ui/forms/story.tsx

@@ -22,6 +22,7 @@ import {
 } from "@/components/ui/popover"
 import GenresTrigger from "./genresTrigger"
 import GenreCheckbox from "./genreCheckbox"
+import { Badge } from "@/components/ui/badge"
 import { useRef, useImperativeHandle } from "react"
 
 const formSchema = z.object({

src/app/ui/modeToggle.tsx

@@ -1,41 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
-import { useTheme } from "next-themes"
-
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-export function ModeToggle() {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-

src/app/ui/navLinks.tsx

@@ -3,7 +3,6 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ComponentProps } from "react";
 import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
 
 
 function NavLink(props: ComponentProps<"div"> & { href: string }) {
@@ -23,12 +22,12 @@ export default function Navlinks(props: ComponentProps<"div">) {
       <div className="text-secondary-foreground" >
         {
           links.map(e => (<NavLink key={e.link} href={e.link}
-            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full pl-2 antialiased text-secondary-foreground bg-secondary",
+            className={clsx("text-xl font-black my-2 w-full pl-2 antialiased",
               {
-                "text-primary-foreground bg-primary": pathname.includes(e.link)
+                "text-primary-foreground bg-primary": pathname === e.link
               }
-            ))}
+            )}
-          ><p className="drop-shadow-sm">{e.label}</p></NavLink >))
+          >{e.label}</NavLink >))
         }
       </ div>
     </div>