refactor code to improve readability and maintainability + redesigned announcement bar

components/ui/Button.tsx

@@ -12,14 +12,15 @@ const buttonVariants = cva(
         primary: "bg-primary text-primary-content hover:bg-primary/80",
         secondary:
           "bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30",
-        destructive: "bg-error text-white hover:bg-error/80",
+        destructive:
+          "bg-error text-white hover:bg-error/80 border border-neutral/60",
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-content",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        small: "h-9 px-3",
+        small: "h-7 px-2",
         medium: "h-10 px-4 py-2",
         full: "px-4 py-2 w-full",
         icon: "h-10 w-10",

components/ui/ToggleDarkMode.tsx

@@ -1,40 +0,0 @@
-import useLocalSettingsStore from "@/store/localSettings";
-import { useEffect, useState } from "react";
-
-type Props = {
-  className?: string;
-};
-
-export default function ToggleDarkMode({ className }: Props) {
-  const { settings, updateSettings } = useLocalSettingsStore();
-
-  const [theme, setTheme] = useState(localStorage.getItem("theme"));
-
-  const handleToggle = (e: any) => {
-    setTheme(e.target.checked ? "dark" : "light");
-  };
-
-  useEffect(() => {
-    updateSettings({ theme: theme as string });
-  }, [theme]);
-
-  return (
-    <div
-      className="tooltip tooltip-bottom"
-      data-tip={`Switch to ${settings.theme === "light" ? "Dark" : "Light"}`}
-    >
-      <label
-        className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}
-      >
-        <input
-          type="checkbox"
-          onChange={handleToggle}
-          className="theme-controller"
-          checked={localStorage.getItem("theme") === "light" ? false : true}
-        />
-        <i className="bi-sun-fill text-xl swap-on"></i>
-        <i className="bi-moon-fill text-xl swap-off"></i>
-      </label>
-    </div>
-  );
-}