diff options
Diffstat (limited to 'apps/web/src/components/editor')
6 files changed, 14 insertions, 13 deletions
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"> |