From 6d41ea0923b975d511e098bfe914361a0aedf5cc Mon Sep 17 00:00:00 2001 From: trivikramkalagi91-commits Date: Sun, 17 May 2026 23:59:14 +0530 Subject: [PATCH 1/3] fix: map design tokens natively and restore disabled button states per review --- src/components/DownloadResult.tsx | 6 +++--- src/components/VideoEditor.tsx | 8 ++++---- tailwind.config.ts | 13 +++++++++++++ 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/components/DownloadResult.tsx b/src/components/DownloadResult.tsx index 9cfd2f8f..7748ac57 100644 --- a/src/components/DownloadResult.tsx +++ b/src/components/DownloadResult.tsx @@ -94,10 +94,10 @@ export default function DownloadResult({ result, onReset }: Props) { 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", + "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 hover:bg-film-700 hover:scale-[1.01] active:scale-[0.99] cursor-pointer" - : "bg-film-600/50 cursor-not-allowed" + ? "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(); diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx index a1ca4cf1..a10a0703 100644 --- a/src/components/VideoEditor.tsx +++ b/src/components/VideoEditor.tsx @@ -165,7 +165,7 @@ export default function VideoEditor() { }) } aria-label="Adjust brightness" - className="w-full" + className="w-full accent-film-600" /> @@ -196,7 +196,7 @@ export default function VideoEditor() { }) } aria-label="Adjust contrast" - className="w-full" + className="w-full accent-film-600" /> @@ -227,7 +227,7 @@ export default function VideoEditor() { }) } aria-label="Adjust saturation" - className="w-full" + className="w-full accent-film-600" /> @@ -322,7 +322,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" )} > diff --git a/tailwind.config.ts b/tailwind.config.ts index b2ff3512..1a6eccee 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -16,6 +16,19 @@ const config: Config = { colors: { background: "var(--background)", foreground: "var(--foreground)", + film: { + 50: "var(--film-50)", + 100: "var(--film-100)", + 200: "var(--film-200)", + 300: "var(--film-300)", + 400: "var(--film-400)", + 500: "var(--film-500)", + 600: "var(--film-600)", + 700: "var(--film-700)", + 800: "var(--film-800)", + 900: "var(--film-900)", + 950: "var(--film-950)", + }, }, }, }, From e58ca03ccc3a7ebc3b8d081a1335f383ae09c471 Mon Sep 17 00:00:00 2001 From: trivikramkalagi91-commits Date: Mon, 18 May 2026 00:16:22 +0530 Subject: [PATCH 2/3] fix: remove duplicate dropzone text from FileInfo component to fix layout overlap --- src/components/FileUpload.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index e22a910b..837af925 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -133,13 +133,7 @@ export default function FileUpload({ (Ctrl+O) -
- - MP4 / MOV / AVI / WebM -
-

- Supports: MP4, MOV, AVI, MKV, WebM, and most video formats -

+ {fileError && (

{fileError} From b1a7485648e3c695b270a529bf61393d149c1053 Mon Sep 17 00:00:00 2001 From: trivikramkalagi91-commits Date: Wed, 20 May 2026 22:59:53 +0530 Subject: [PATCH 3/3] feat: add accessible, theme-aware SVG brand logo to header layout (#809) --- src/app/layout.tsx | 6 +++++- src/components/BrandLogo.tsx | 29 +++++++++++++++++++++++++++++ src/components/VideoEditor.tsx | 1 + 3 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 src/components/BrandLogo.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 0f949be2..03ee0db9 100644 --- a/src/app/layout.tsx +++ b/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)]" > -

Reframe

+
+ +

Reframe

+
diff --git a/src/components/BrandLogo.tsx b/src/components/BrandLogo.tsx new file mode 100644 index 00000000..06d17492 --- /dev/null +++ b/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 ( + + + + {/* Notches */} + + + + + + + + ); +} diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx index 518ad39d..1f477bdc 100644 --- a/src/components/VideoEditor.tsx +++ b/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,