Improvements to the UI

components/layout/habit-brand.tsx

@@ -3,20 +3,33 @@
 import Link from "next/link";
 import { useState } from "react";
 
+import { HABIT_LOGO_SRC } from "@/lib/brand";
 import { routes } from "@/lib/routes";
 import { cn } from "@/lib/utils";
 
-const HABIT_LOGO_SRC = "/habit-logo.png";
+const logoSizeClass = {
+  sm: "h-6 w-auto max-h-6",
+  md: "h-8 w-auto max-h-8",
+  /** Compact — leaves vertical padding inside the top bar */
+  nav: "h-7 w-auto max-h-7 sm:h-8 sm:max-h-8",
+  lg: "h-12 w-auto max-h-12 sm:h-14",
+  hero: "h-16 w-auto max-h-16 sm:h-20 md:h-24",
+} as const;
 
 type HabitBrandProps = {
   className?: string;
   href?: string;
+  size?: keyof typeof logoSizeClass;
+  /** Show retro frame around the logo (top bar / site header). */
+  framed?: boolean;
   "aria-current"?: "page" | undefined;
 };
 
 export function HabitBrand({
   className,
   href = routes.home,
+  size = "sm",
+  framed = true,
   "aria-current": ariaCurrent,
 }: HabitBrandProps) {
   const [useText, setUseText] = useState(false);
@@ -24,10 +37,13 @@ export function HabitBrand({
   return (
     <Link
       href={href}
-      aria-label="Go to home"
+      aria-label="HaBit home"
       aria-current={ariaCurrent}
       className={cn(
-        "group flex shrink-0 items-center justify-center border-2 border-border bg-card/80 px-3 py-1.5 shadow-[var(--retro-shadow-sm)] transition-transform hover:-translate-y-0.5 hover:border-primary/60",
+        "group inline-flex shrink-0 items-center justify-center transition-transform hover:-translate-y-0.5",
+        framed &&
+          "border-2 border-border bg-card/80 px-3 py-1.5 shadow-[var(--retro-shadow-sm)] hover:border-primary/60",
+        !framed && "rounded-sm hover:opacity-85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         className,
       )}
     >
@@ -35,14 +51,16 @@ export function HabitBrand({
         // eslint-disable-next-line @next/next/no-img-element
         <img
           src={HABIT_LOGO_SRC}
-          alt=""
-          className="size-6 image-pixelated"
+          alt="HaBit"
+          className={cn("image-pixelated object-contain", logoSizeClass[size])}
           onError={() => setUseText(true)}
         />
       ) : (
         <span
-          className="font-pixel select-none text-[10px] uppercase tracking-widest text-primary"
-          aria-hidden="true"
+          className={cn(
+            "font-pixel select-none uppercase tracking-widest text-primary",
+            size === "hero" ? "text-base sm:text-lg" : "text-[10px]",
+          )}
         >
           HaBit
         </span>