style: completely fresh ui in editor

apps/web/src/app/editor/[project_id]/page.tsx

@@ -58,7 +58,7 @@ export default function Editor() {
       <div className="h-screen w-screen flex flex-col bg-background overflow-hidden">
         <EditorHeader />
         <div className="flex-1 min-h-0 min-w-0">
-          <ResizablePanelGroup direction="vertical" className="h-full w-full">
+          <ResizablePanelGroup direction="vertical" className="h-full w-full gap-2">
             <ResizablePanel
               defaultSize={mainContent}
               minSize={30}
@@ -69,7 +69,7 @@ export default function Editor() {
               {/* Main content area */}
               <ResizablePanelGroup
                 direction="horizontal"
-                className="h-full w-full"
+                className="h-full w-full gap-2 px-2"
               >
                 {/* Tools Panel */}
                 <ResizablePanel
@@ -96,7 +96,6 @@ export default function Editor() {
 
                 <ResizableHandle withHandle />
 
-                
                 <ResizablePanel
                   defaultSize={propertiesPanel}
                   minSize={15}
@@ -117,7 +116,7 @@ export default function Editor() {
               minSize={15}
               maxSize={70}
               onResize={setTimeline}
-              className="min-h-0"
+              className="min-h-0 px-2 pb-2"
             >
               <Timeline />
             </ResizablePanel>

apps/web/src/app/globals.css

@@ -39,7 +39,7 @@
     --sidebar-ring: 0 0% 3.9%;
   }
   .dark {
-    --background: 0 0% 8%;
+    --background: 0 0% 4%;
     --foreground: 0 0% 89%;
     --card: 0 0% 14.9%;
     --card-foreground: 0 0% 98%;
@@ -71,6 +71,8 @@
     --sidebar-accent-foreground: 0 0% 98%;
     --sidebar-border: 0 0% 14.9%;
     --sidebar-ring: 0 0% 83.1%;
+    --panel-background: 0 0% 11%;
+    --panel-accent: 0 0% 15%;
   }
 }
 

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"
     />
   );
 }

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>

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"

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 ? (
                 <>

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()}

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">

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">

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",
       },

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>
 );
 

apps/web/tailwind.config.ts

@@ -5,6 +5,7 @@ export default {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/lib/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
@@ -68,11 +69,15 @@ export default {
           border: "hsl(var(--sidebar-border))",
           ring: "hsl(var(--sidebar-ring))",
         },
+        panel: {
+          DEFAULT: "hsl(var(--panel-background))",
+          accent: "hsl(var(--panel-accent))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 6px)",
+        sm: "calc(var(--radius) - 8px)",
       },
       keyframes: {
         "accordion-down": {