feat: frontend redesign

src/components/Logo.tsx

@@ -1,29 +1,18 @@
-import { motion } from "framer-motion";
 import { Link } from "react-router-dom";
-import { useTheme } from "../context/ThemeContext";
+import { Scissors } from "./icons";
 
 export function Logo({ onClick }: { onClick?: () => void }) {
-  const { theme } = useTheme();
   return (
     <Link
       to="/"
       onClick={onClick}
-      className="focusable group inline-flex items-center gap-2.5 rounded-xl"
+      className="focusable inline-flex items-center gap-2 rounded-lg"
     >
-      <motion.span
-        whileHover={{ scale: 1.08 }}
-        transition={{ type: "spring", stiffness: 420, damping: 12 }}
-        className="flex items-center"
-      >
-        <img
-          src={theme === "dark" ? "/favicon.svg" : "/favicon_dark.svg"}
-          alt=""
-          className="h-7 w-auto"
-        />
-      </motion.span>
-      <span className="font-display text-[22px] font-bold tracking-tight text-ink">
+      <span className="grid h-7 w-7 place-items-center rounded-lg bg-[var(--ink)] text-[var(--bg)]">
+        <Scissors size={15} />
+      </span>
+      <span className="text-[17px] font-semibold tracking-tight text-ink">
         snip
-        <span className="text-accent">.</span>
       </span>
     </Link>
   );