From 5e1f780fffb9ab72d9a0a8e12614a85a213c3744 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 9 Jul 2025 21:45:25 +0200
Subject: style: completely fresh ui in editor

---
 apps/web/src/components/editor-header.tsx                  | 6 +++---
 apps/web/src/components/editor/media-panel/index.tsx       | 2 +-
 apps/web/src/components/editor/media-panel/tabbar.tsx      | 4 ++--
 apps/web/src/components/editor/media-panel/views/media.tsx | 2 +-
 apps/web/src/components/editor/preview-panel.tsx           | 9 +++++----
 apps/web/src/components/editor/properties-panel.tsx        | 2 +-
 apps/web/src/components/editor/timeline.tsx                | 8 ++++----
 apps/web/src/components/ui/button.tsx                      | 2 +-
 apps/web/src/components/ui/resizable.tsx                   | 7 +------
 9 files changed, 19 insertions(+), 23 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index daeb14cb..666ddaed 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -30,14 +30,14 @@ export function EditorHeader() {
   );
 
   const centerContent = (
-    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+    <div className="flex items-center gap-2 text-xs">
       <span>{formatTimeCode(getTotalDuration(), "HH:MM:SS:CS")}</span>
     </div>
   );
 
   const rightContent = (
     <nav className="flex items-center gap-2">
-      <Button size="sm" variant="primary" onClick={handleExport}>
+      <Button size="sm" variant="primary" className="h-7 text-xs" onClick={handleExport}>
         <Download className="h-4 w-4" />
         <span className="text-sm">Export</span>
       </Button>
@@ -49,7 +49,7 @@ export function EditorHeader() {
       leftContent={leftContent}
       centerContent={centerContent}
       rightContent={rightContent}
-      className="bg-background border-b"
+      className="bg-background h-[3.2rem] px-4"
     />
   );
 }
diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index 51e9a264..9f7322c7 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -47,7 +47,7 @@ export function MediaPanel() {
   };
 
   return (
-    <div className="h-full flex flex-col">
+    <div className="h-full flex flex-col bg-panel rounded-sm overflow-hidden">
       <TabBar />
       <div className="flex-1">{viewMap[activeTab]}</div>
     </div>
diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
index 580394b9..f4e520b2 100644
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -69,7 +69,7 @@ export function TabBar() {
       />
       <div
         ref={scrollContainerRef}
-        className="h-12 bg-accent/50 px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative"
+        className="h-12 bg-panel-accent px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative"
       >
         {(Object.keys(tabs) as Tab[]).map((tabKey) => {
           const tab = tabs[tabKey];
@@ -111,7 +111,7 @@ function ScrollButton({
   const Icon = direction === "left" ? ChevronLeft : ChevronRight;
 
   return (
-    <div className="bg-accent/50 w-12 h-full flex items-center justify-center">
+    <div className="bg-panel-accent w-12 h-full flex items-center justify-center">
       <Button
         size="icon"
         className="rounded-[0.4rem] w-4 h-7 !bg-foreground/10"
diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index 00b9478b..48e54961 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -235,7 +235,7 @@ export function MediaView() {
               size="sm"
               onClick={handleFileSelect}
               disabled={isProcessing}
-              className="flex-none min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
+              className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center"
             >
               {isProcessing ? (
                 <>
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 25da97ba..1c41e267 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -230,10 +230,10 @@ export function PreviewPanel() {
   };
 
   return (
-    <div className="h-full w-full flex flex-col min-h-0 min-w-0">
+    <div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm">
       <div
         ref={containerRef}
-        className="flex-1 flex flex-col items-start justify-center p-3 min-h-0 min-w-0"
+        className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0"
       >
         <div className="flex-1"></div>
         {hasAnyElements ? (
@@ -289,7 +289,7 @@ function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
   return (
     <div
       data-toolbar
-      className="flex items-end justify-between gap-2 p-1 pt-2 bg-background-500 w-full"
+      className="flex items-end justify-between gap-2 p-1 pt-2 w-full"
     >
       <div>
         <p
@@ -307,6 +307,7 @@ function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
         size="icon"
         onClick={toggle}
         disabled={!hasAnyElements}
+        className="h-auto p-0"
       >
         {isPlaying ? (
           <Pause className="h-3 w-3" />
@@ -319,7 +320,7 @@ function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
           <DropdownMenuTrigger asChild>
             <Button
               size="sm"
-              className="!bg-background text-foreground/85 text-xs h-auto rounded-none border border-muted-foreground px-0.5 py-0 font-light"
+              className="!bg-panel-accent text-foreground/85 text-xs h-auto rounded-none border border-muted-foreground px-0.5 py-0 font-light"
               disabled={!hasAnyElements}
             >
               {getDisplayName()}
diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx
index a51f6f2a..b0f9c62e 100644
--- a/apps/web/src/components/editor/properties-panel.tsx
+++ b/apps/web/src/components/editor/properties-panel.tsx
@@ -10,7 +10,7 @@ export function PropertiesPanel() {
   const { getDisplayName, canvasSize } = useAspectRatio();
 
   return (
-    <ScrollArea className="h-full">
+    <ScrollArea className="h-full bg-panel rounded-sm">
       <div className="space-y-4 p-5">
         {/* Media Properties */}
         <div className="flex flex-col gap-3">
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index f7208224..cfe72cd1 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -749,7 +749,7 @@ export function Timeline() {
 
   return (
     <div
-      className={`h-full flex flex-col transition-colors duration-200 relative`}
+      className={`h-full flex flex-col transition-colors duration-200 relative bg-panel rounded-sm overflow-hidden`}
       {...dragProps}
       onMouseEnter={() => setIsInTimeline(true)}
       onMouseLeave={() => setIsInTimeline(false)}
@@ -911,7 +911,7 @@ export function Timeline() {
       {/* Timeline Container */}
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Timeline Header with Ruler */}
-        <div className="flex border-b bg-background sticky top-0 z-10">
+        <div className="flex border-b bg-panel-accent sticky top-0 z-10">
           {/* Track Labels Header */}
           <div className="w-48 flex-shrink-0 bg-muted/30 border-r flex items-center justify-between px-3 py-2">
             <span className="text-sm font-medium text-muted-foreground">
@@ -1019,12 +1019,12 @@ export function Timeline() {
         <div className="flex-1 flex overflow-hidden">
           {/* Track Labels */}
           {tracks.length > 0 && (
-            <div className="w-48 flex-shrink-0 border-r bg-background overflow-y-auto">
+            <div className="w-48 flex-shrink-0 border-r bg-panel-accent overflow-y-auto">
               <div className="flex flex-col">
                 {tracks.map((track) => (
                   <div
                     key={track.id}
-                    className="flex items-center px-3 border-b border-muted/30 bg-background group"
+                    className="flex items-center px-3 border-b border-muted/30 group"
                     style={{ height: `${getTrackHeight(track.type)}px` }}
                   >
                     <div className="flex items-center flex-1 min-w-0">
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 234230f6..b8b9ab2f 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -24,7 +24,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
+        sm: "h-8 rounded-sm px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-7 w-7",
       },
diff --git a/apps/web/src/components/ui/resizable.tsx b/apps/web/src/components/ui/resizable.tsx
index 0b9a955c..7f9ea66e 100644
--- a/apps/web/src/components/ui/resizable.tsx
+++ b/apps/web/src/components/ui/resizable.tsx
@@ -29,16 +29,11 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "hidden",
       className
     )}
     {...props}
   >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
   </ResizablePrimitive.PanelResizeHandle>
 );
 
-- 
cgit v1.3.1