style: completely fresh ui in editor

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