feat: frontend redesign

src/components/ThemeToggle.tsx

@@ -1,26 +1,29 @@
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { useTheme } from "../context/ThemeContext";
+import { Sun, Moon } from "./icons";
 
 export function ThemeToggle() {
   const { theme, toggle } = useTheme();
   const dark = theme === "dark";
 
   return (
-    <motion.button
+    <button
       onClick={toggle}
-      whileTap={{ scale: 0.9 }}
       aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
-      className="focusable relative grid h-10 w-10 place-items-center overflow-hidden rounded-xl border-[1.5px] border-line bg-surface"
+      className="focusable relative grid h-9 w-9 place-items-center overflow-hidden rounded-lg border border-line bg-surface text-muted hover:text-ink"
     >
-      <motion.span
-        key={theme}
-        initial={{ y: 18, rotate: -90, opacity: 0, scale: 0.5 }}
-        animate={{ y: 0, rotate: 0, opacity: 1, scale: 1 }}
-        transition={{ type: "spring", stiffness: 500, damping: 14 }}
-        className="text-[17px]"
-      >
-        {dark ? "🌙" : "☀️"}
-      </motion.span>
-    </motion.button>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.span
+          key={theme}
+          initial={{ y: 12, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: -12, opacity: 0 }}
+          transition={{ duration: 0.18, ease: "easeOut" }}
+          className="grid place-items-center"
+        >
+          {dark ? <Moon size={17} /> : <Sun size={17} />}
+        </motion.span>
+      </AnimatePresence>
+    </button>
   );
 }