feat: add accessible, theme-aware SVG brand logo to header layout (#809)

src/app/layout.tsx

@@ -5,6 +5,7 @@ import "./globals.css";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { ThemeToggle } from "@/components/ThemeToggle";
 import ScrollToTop from "@/components/ScrollToTop";
+import BrandLogo from "@/components/BrandLogo";
 
 export const metadata: Metadata = {
   title: "Reframe — Resize, trim, and export videos in your browser",
@@ -90,7 +91,10 @@ export default function RootLayout({
               role="banner"
               className="sticky top-0 z-50 flex items-center justify-between px-6 py-3 border-b border-[var(--border)] bg-[var(--bg)]"
             >
-              <h1 className="text-lg font-semibold">Reframe</h1>
+              <div className="flex items-center gap-2">
+                <BrandLogo size={24} />
+                <h1 className="text-lg font-semibold">Reframe</h1>
+              </div>
               <ThemeToggle />
             </header>
             <main id="main-content" tabIndex={-1}>

src/components/BrandLogo.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+
+interface BrandLogoProps {
+  className?: string;
+  size?: number;
+}
+
+export default function BrandLogo({ className, size = 32 }: BrandLogoProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("shrink-0 text-film-600", className)}
+    >
+      <rect x="3" y="3" width="18" height="18" rx="3" stroke="currentColor" strokeWidth="2" />
+      <path d="M10 8L16 12L10 16V8Z" fill="currentColor" />
+      {/* Notches */}
+      <circle cx="3" cy="7" r="1.5" fill="var(--surface)" />
+      <circle cx="3" cy="12" r="1.5" fill="var(--surface)" />
+      <circle cx="3" cy="17" r="1.5" fill="var(--surface)" />
+      <circle cx="21" cy="7" r="1.5" fill="var(--surface)" />
+      <circle cx="21" cy="12" r="1.5" fill="var(--surface)" />
+      <circle cx="21" cy="17" r="1.5" fill="var(--surface)" />
+    </svg>
+  );
+}

src/components/DownloadResult.tsx

@@ -101,10 +101,10 @@ export default function DownloadResult({ result, onReset, soundOnCompletion }: P
           href={isValid ? result.blobUrl : undefined}
           download={isValid ? filename : undefined}
           className={cn(
-            "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-white text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
-            isValid
-              ? "bg-film-600 hover:bg-film-700 hover:scale-[1.01] active:scale-[0.99] cursor-pointer"
-              : "bg-film-600/50 cursor-not-allowed"
+            "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
+            isValid 
+              ? "bg-film-600 text-white hover:bg-film-700 hover:scale-[1.01] active:scale-[0.99] cursor-pointer" 
+              : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
           )}
           onClick={(e) => {
             if (!isValid) e.preventDefault();

src/components/VideoEditor.tsx

@@ -16,6 +16,7 @@ import ExportSettings from "./ExportSettings";
 import ExportOverlay from "./ExportOverlay";
 import DownloadResult from "./DownloadResult";
 import ImageOverlay from "./ImageOverlay"
+
 import { cn } from "@/lib/utils";
 import {
   Layers, Crop, Scissors, RotateCw, Volume2,
@@ -243,6 +244,7 @@ export default function VideoEditor() {
                 </div>
                 <div className="bg-[var(--surface)] rounded-xl border border-[var(--border)] p-5 space-y-6">
                   <Section icon={<Volume2 size={12} />} title="Audio & Speed" delay={150}>
+
                     <AudioSpeedControl recipe={recipe} onChange={updateRecipe} />
                   </Section>
                   <Section
@@ -273,7 +275,7 @@ export default function VideoEditor() {
                           value={recipe.brightness}
                           onChange={(e) => updateRecipe({ brightness: Number(e.target.value) })}
                           aria-label="Adjust brightness"
-                          className="w-full"
+                          className="w-full accent-film-600"
                         />
                       </div>
                       {/* Contrast */}
@@ -298,7 +300,7 @@ export default function VideoEditor() {
                           value={recipe.contrast}
                           onChange={(e) => updateRecipe({ contrast: Number(e.target.value) })}
                           aria-label="Adjust contrast"
-                          className="w-full"
+                          className="w-full accent-film-600"
                         />
                       </div>
                       {/* Saturation */}
@@ -323,7 +325,7 @@ export default function VideoEditor() {
                           value={recipe.saturation}
                           onChange={(e) => updateRecipe({ saturation: Number(e.target.value) })}
                           aria-label="Adjust saturation"
-                          className="w-full"
+                          className="w-full accent-film-600"
                         />
                       </div>
                     </div>
@@ -445,7 +447,7 @@ export default function VideoEditor() {
                 "font-display text-2xl tracking-widest transition-all duration-200",
                 file && !isProcessing
                   ? "bg-film-600 hover:bg-film-700 hover:scale-[1.01] text-white shadow-lg shadow-film-200 active:scale-[0.98] cursor-pointer"
-                  : "bg-[var(--border)] text-[var(--muted)] opacity-40 cursor-not-allowed"
+                  : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
               )}
             >
               <Zap size={20} className={cn(file && !isProcessing && "animate-pulse")} />