From 5c6dab48de948ec33b374fff72e1d61abf265389 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sun, 23 Nov 2025 22:33:15 -0800
Subject: [PATCH] ui sanding

---
 apps/desktop/src/renderer/globals.css                  |  6 ++++++
 .../src/renderer/screens/main/components/AppFrame.tsx  |  2 +-
 .../TopBar/WorkspaceTabs/WorkspaceDropdown.tsx         |  4 ++--
 .../TopBar/WorkspaceTabs/WorkspaceGroupHeader.tsx      |  3 ++-
 .../components/TopBar/WorkspaceTabs/WorkspaceItem.tsx  |  4 ++--
 .../renderer/screens/main/components/TopBar/index.tsx  |  2 +-
 .../TabsContent/GroupTabView/mosaic-theme.css          | 10 ++++++----
 .../Sidebar/ModeCarousel/AnimatedBackground.tsx        |  2 +-
 .../WorkspaceView/Sidebar/TabsView/TabItem/index.tsx   |  6 +++---
 .../screens/main/components/WorkspaceView/index.tsx    |  2 +-
 10 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/apps/desktop/src/renderer/globals.css b/apps/desktop/src/renderer/globals.css
index 06e7ea7233f..3dd81ba409f 100644
--- a/apps/desktop/src/renderer/globals.css
+++ b/apps/desktop/src/renderer/globals.css
@@ -22,6 +22,8 @@
 	--muted-foreground: oklch(0.556 0 0);
 	--accent: oklch(0.97 0 0);
 	--accent-foreground: oklch(0.205 0 0);
+	--tertiary: oklch(0.12 0.003 40);
+	--tertiary-active: oklch(0.20 0.003 40); 
 	--destructive: oklch(0.577 0.245 27.325);
 	--destructive-foreground: oklch(0.577 0.245 27.325);
 	--border: oklch(0.922 0 0);
@@ -58,6 +60,8 @@
 	--muted-foreground: oklch(0.708 0 0);
 	--accent: oklch(0.269 0 0);
 	--accent-foreground: oklch(0.985 0 0);
+	--tertiary: oklch(0.18 0.005 40);
+	--tertiary-active: oklch(0.24 0.005 40); 
 	--destructive: oklch(0.396 0.141 25.723);
 	--destructive-foreground: oklch(0.637 0.237 25.331);
 	--border: oklch(0.269 0 0);
@@ -93,6 +97,8 @@
 	--color-muted-foreground: var(--muted-foreground);
 	--color-accent: var(--accent);
 	--color-accent-foreground: var(--accent-foreground);
+	--color-tertiary: var(--tertiary);
+	--color-tertiary-active: var(--tertiary-active);
 	--color-destructive: var(--destructive);
 	--color-destructive-foreground: var(--destructive-foreground);
 	--color-border: var(--border);
diff --git a/apps/desktop/src/renderer/screens/main/components/AppFrame.tsx b/apps/desktop/src/renderer/screens/main/components/AppFrame.tsx
index 5bce819bb7c..8f2efd3b9f7 100644
--- a/apps/desktop/src/renderer/screens/main/components/AppFrame.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/AppFrame.tsx
@@ -3,5 +3,5 @@ interface AppFrameProps {
 }
 
 export function AppFrame({ children }: AppFrameProps) {
-	return <div className="absolute inset-0 bg-stone-950 flex">{children}</div>;
+	return <div className="absolute inset-0 bg-background flex">{children}</div>;
 }
diff --git a/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx b/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
index 7bb973753de..6bbb33e9666 100644
--- a/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceDropdown.tsx
@@ -4,7 +4,7 @@ import {
 	DropdownMenuContent,
 	DropdownMenuTrigger,
 } from "@superset/ui/dropdown-menu";
-import { HiMiniFolderOpen } from "react-icons/hi2";
+import { HiMiniFolderOpen, HiMiniPlus } from "react-icons/hi2";
 import { useState } from "react";
 import { trpc } from "renderer/lib/trpc";
 import { useOpenNew } from "renderer/react-query/projects";
@@ -46,7 +46,7 @@ export function WorkspaceDropdown({ className }: WorkspaceDropdownProps) {
 		<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
 			<DropdownMenuTrigger className={className} asChild>
 				<Button variant="ghost" size="icon" aria-label="Add new workspace">
-					<span className="text-lg">+</span>
+					<HiMiniPlus className="size-4" />
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent className="w-80 p-0" align="start">
diff --git a/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroupHeader.tsx b/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroupHeader.tsx
index 0812f278afb..ba07478f772 100644
--- a/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroupHeader.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroupHeader.tsx
@@ -56,7 +56,8 @@ export function WorkspaceGroupHeader({
 		<div
 			className="flex items-center h-full"
 			style={{
-				borderBottom: `2px solid ${projectColor}`,
+				transition: "border-bottom 0.3s ease",
+				borderBottom: `2px solid ${isCollapsed ? "transparent" : projectColor}`,
 			}}
 		>
 			<button
diff --git a/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx b/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx
index 6d97698391a..e319d2ddb52 100644
--- a/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx
@@ -90,8 +90,8 @@ export function WorkspaceItem({
 						flex items-center gap-0.5 rounded-t-md transition-all w-full shrink-0 pr-6 pl-3 h-[80%]
 						${
 							isActive
-								? "text-foreground bg-muted"
-								: "text-muted-foreground hover:text-foreground hover:bg-muted/30"
+								? "text-foreground bg-tertiary-active"
+								: "text-muted-foreground hover:text-foreground hover:bg-tertiary/30"
 						}
 						${isDragging ? "opacity-30" : "opacity-100"}
 					`}
diff --git a/apps/desktop/src/renderer/screens/main/components/TopBar/index.tsx b/apps/desktop/src/renderer/screens/main/components/TopBar/index.tsx
index 1f1d4d3360e..bfc318fdc3e 100644
--- a/apps/desktop/src/renderer/screens/main/components/TopBar/index.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/TopBar/index.tsx
@@ -7,7 +7,7 @@ export function TopBar() {
 	const { data: platform } = trpc.window.getPlatform.useQuery();
 	const isMac = platform === "darwin";
 	return (
-		<div className="drag gap-2 h-12 w-full flex items-center justify-between border-b border-sidebar bg-background">
+		<div className="drag gap-2 h-12 w-full flex items-center justify-between bg-background">
 			<div
 				className="flex items-center gap-4 h-full"
 				style={{
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupTabView/mosaic-theme.css b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupTabView/mosaic-theme.css
index 737856d719a..0b6e2172fd6 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupTabView/mosaic-theme.css
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupTabView/mosaic-theme.css
@@ -3,21 +3,23 @@
 }
 
 .mosaic-theme-dark .mosaic-window {
+	border: 1px solid var(--color-tertiary-active);
+	border-radius: var(--radius-sm);
 	transition:
 		border-color 0.15s ease,
 		box-shadow 0.15s ease;
 }
 
 .mosaic-theme-dark .mosaic-window .mosaic-window-toolbar {
-	background: var(--color-sidebar);
-	border-top-left-radius: var(--radius-xs);
-	border-top-right-radius: var(--radius-xs);
+	background: var(--color-tertiary);
+	border-top-left-radius: var(--radius-sm);
+	border-top-right-radius: var(--radius-sm);
 	height: 32px;
 	padding: 0 8px;
 	transition: background-color 0.15s ease;
 }
 .mosaic-window-focused .mosaic-window-toolbar {
-	background: var(--color-border) !important;
+	background: var(--color-tertiary-active) !important;
 }
 .mosaic-theme-dark .mosaic-window .mosaic-window-title {
 	color: var(--color-foreground);
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/AnimatedBackground.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/AnimatedBackground.tsx
index 4d47b11a2c0..8f2b90848f4 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/AnimatedBackground.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/AnimatedBackground.tsx
@@ -24,7 +24,7 @@ export function AnimatedBackground({
 
 	return (
 		<motion.div
-			className="absolute h-8 w-8 rounded-sm bg-sidebar-accent"
+			className="absolute h-8 w-8 rounded-sm bg-tertiary-active"
 			style={{
 				x: translateX,
 			}}
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx
index 6d723af4dd2..330ee95c789 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx
@@ -109,9 +109,9 @@ export function TabItem({ tab, childTabs = [] }: TabItemProps) {
 					tabIndex={0}
 					className={`
 					w-full text-start group px-3 py-2 rounded-md cursor-pointer flex items-center justify-between
-					${isActive ? "bg-sidebar-accent" : ""}
+					${isActive ? "bg-tertiary-active" : ""}
 					${isDragging ? "opacity-50" : ""}
-					${isDragOver ? "bg-sidebar-accent/50" : ""}
+					${isDragOver ? "bg-tertiary-active/50" : ""}
 				`}
 				>
 					<div className="flex items-center gap-1 flex-1 min-w-0">
@@ -146,7 +146,7 @@ export function TabItem({ tab, childTabs = [] }: TabItemProps) {
 								onBlur={rename.submitRename}
 								onKeyDown={rename.handleKeyDown}
 								onClick={(e) => e.stopPropagation()}
-								className="flex-1 bg-sidebar-accent border border-primary rounded px-1 py-0.5 text-sm outline-none"
+								className="flex-1 bg-stone-800 border border-primary rounded px-1 py-0.5 text-sm outline-none"
 							/>
 						) : (
 							<>
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsx
index c80997a467c..5e0f9839d10 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsx
@@ -78,7 +78,7 @@ export function WorkspaceView() {
 	);
 
 	return (
-		<div className="flex flex-1 bg-sidebar">
+		<div className="flex flex-1 bg-tertiary">
 			<Sidebar />
 			<div className="flex-1 m-3 bg-background rounded p-2">
 				<ContentView />