From d37715e601eb6e8e46f54f41207344a8d04512af Mon Sep 17 00:00:00 2001
From: Aarav Dayal <pl46u3.ducklinz@gmail.com>
Date: Wed, 21 Jan 2026 06:17:21 -0600
Subject: [PATCH] UI: align composer meta icons, stabilize buttons, and fix
 settings visuals

- Aligned composer meta icons with the context meter and removed extra bottom spacing
- Fixed file status icon alignment
- Disabled default button bounce animations
- Corrected popover surface styling for the new agent background
- Fixed native select decoration for ungrouped selects in settings
- Corrected settings dialog background styling
- Standardized all settings knob colors to white
---
 src/features/app/components/SidebarHeader.tsx |  7 ++---
 src/features/app/components/WorkspaceCard.tsx |  6 +++--
 src/features/git/components/GitDiffPanel.tsx  |  2 +-
 src/features/home/components/Home.tsx         |  4 +--
 src/styles/base.css                           |  2 +-
 src/styles/buttons.css                        | 14 +++++++++-
 src/styles/composer.css                       |  9 +++++--
 src/styles/diff.css                           | 20 +++++++++++---
 src/styles/settings.css                       | 26 ++++++++++++++++---
 src/styles/sidebar.css                        |  4 +--
 10 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/src/features/app/components/SidebarHeader.tsx b/src/features/app/components/SidebarHeader.tsx
index e73cc691c..3621bf904 100644
--- a/src/features/app/components/SidebarHeader.tsx
+++ b/src/features/app/components/SidebarHeader.tsx
@@ -1,4 +1,4 @@
-import { FolderKanban } from "lucide-react";
+import { FolderKanban, Plus } from "lucide-react";
 
 type SidebarHeaderProps = {
   onSelectHome: () => void;
@@ -20,12 +20,13 @@ export function SidebarHeader({ onSelectHome, onAddWorkspace }: SidebarHeaderPro
         </button>
       </div>
       <button
-        className="ghost workspace-add"
+        className="ghost plus-button"
+        style={{height: "24px", width: "24px", padding: "0 0 0 0", display: "flex", justifyContent: "center", alignItems: "center"}}
         onClick={onAddWorkspace}
         data-tauri-drag-region="false"
         aria-label="Add workspace"
       >
-        +
+        <Plus size={12}></Plus>
       </button>
     </div>
   );
diff --git a/src/features/app/components/WorkspaceCard.tsx b/src/features/app/components/WorkspaceCard.tsx
index 01c21aa55..4d3612e18 100644
--- a/src/features/app/components/WorkspaceCard.tsx
+++ b/src/features/app/components/WorkspaceCard.tsx
@@ -1,6 +1,7 @@
 import type { MouseEvent } from "react";
 
 import type { WorkspaceInfo } from "../../../types";
+import { Plus } from "lucide-react";
 
 type WorkspaceCardProps = {
   workspace: WorkspaceInfo;
@@ -67,7 +68,8 @@ export function WorkspaceCard({
               </button>
             </div>
             <button
-              className="ghost workspace-add"
+              className="ghost plus-button"
+              style={{height: "24px", width: "24px", padding: "0 0 0 0", display: "flex", justifyContent: "center", alignItems: "center"}}
               onClick={(event) => {
                 event.stopPropagation();
                 const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
@@ -91,7 +93,7 @@ export function WorkspaceCard({
               aria-label="Add agent options"
               aria-expanded={addMenuOpen}
             >
-              +
+              <Plus size={12}></Plus>
             </button>
           </div>
         </div>
diff --git a/src/features/git/components/GitDiffPanel.tsx b/src/features/git/components/GitDiffPanel.tsx
index 78f193d22..5f998fd95 100644
--- a/src/features/git/components/GitDiffPanel.tsx
+++ b/src/features/git/components/GitDiffPanel.tsx
@@ -290,7 +290,7 @@ function DiffFileRow({
       onContextMenu={onContextMenu}
     >
       <span className={`diff-icon ${statusClass}`} aria-hidden>
-        {statusSymbol}
+        <span className="diff-icon-text">{statusSymbol}</span>
       </span>
       <div className="diff-file">
         <div className="diff-path">
diff --git a/src/features/home/components/Home.tsx b/src/features/home/components/Home.tsx
index 91a1f6739..93d17ea15 100644
--- a/src/features/home/components/Home.tsx
+++ b/src/features/home/components/Home.tsx
@@ -238,7 +238,7 @@ export function Home({
       </div>
       <div className="home-actions">
         <button
-          className="home-button primary"
+          className="home-button primary bouncing_button"
           onClick={onOpenProject}
           data-tauri-drag-region="false"
         >
@@ -248,7 +248,7 @@ export function Home({
           Open Project
         </button>
         <button
-          className="home-button secondary"
+          className="home-button secondary bouncing_button"
           onClick={onAddWorkspace}
           data-tauri-drag-region="false"
         >
diff --git a/src/styles/base.css b/src/styles/base.css
index 211ff4efa..35f65b9fb 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -264,7 +264,7 @@
 }
 
 .popover-surface {
-  background: var(--surface-popover);
+  background: #222;
   border: 1px solid var(--border-muted);
   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
 }
diff --git a/src/styles/buttons.css b/src/styles/buttons.css
index ad99bc6f5..3af24277c 100644
--- a/src/styles/buttons.css
+++ b/src/styles/buttons.css
@@ -48,7 +48,19 @@ button:disabled {
   height: 16px;
 }
 
-button:hover:not(:disabled) {
+.bouncing_button:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: 0 12px 18px rgba(0, 0, 0, 0.2);
 }
+
+.plus-button {
+  opacity: 0;
+}
+
+.sidebar-header:hover .plus-button {
+  opacity: 1;
+}
+
+.workspace-card:hover .plus-button {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/src/styles/composer.css b/src/styles/composer.css
index 9a337d63c..a18ca648c 100644
--- a/src/styles/composer.css
+++ b/src/styles/composer.css
@@ -3,7 +3,6 @@
   flex-direction: column;
   gap: 8px;
   -webkit-app-region: no-drag;
-  padding: 12px var(--main-panel-padding) 24px;
   border-top: 1px solid var(--border-subtle);
   background: var(--surface-composer);
   grid-column: 1;
@@ -67,6 +66,7 @@
 .composer-input {
   display: grid;
   grid-template-columns: 1fr auto auto;
+  padding: 12px 16px 24px;
   gap: 12px;
   align-items: center;
 }
@@ -512,6 +512,10 @@
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
+  padding-top: 4px;
+  padding-left: 16px;
+  padding-right: 4px;
+  padding-bottom: 8px;
 }
 
 .composer-context {
@@ -522,6 +526,8 @@
   gap: 8px;
   font-size: 11px;
   color: var(--text-muted);
+  padding-right: 12px;
+  margin-top: -6px;
 }
 
 .composer-context-ring {
@@ -584,7 +590,6 @@
 }
 
 .composer-icon {
-  display: inline-flex;
   width: 14px;
   height: 14px;
   color: var(--text-muted);
diff --git a/src/styles/diff.css b/src/styles/diff.css
index 01885fe11..ca45f7503 100644
--- a/src/styles/diff.css
+++ b/src/styles/diff.css
@@ -25,6 +25,7 @@
   text-transform: uppercase;
   color: var(--text-subtle);
   min-height: 26px;
+  gap: 8px;
 }
 
 .git-panel-title {
@@ -342,14 +343,25 @@
 .diff-icon {
   width: 16px;
   height: 16px;
-  display: grid;
-  place-items: center;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
   border-radius: 4px;
+  border: 1px solid transparent;
+
   font-size: 10px;
   font-weight: 700;
-  border: 1px solid transparent;
   line-height: 1;
-  padding-bottom: 2px;
+
+  box-sizing: border-box;
+}
+
+.diff-icon-text {
+  padding-left: 0.25px;
+  padding-bottom: 0.55px;
+  display: block;
 }
 
 .diff-icon-added {
diff --git a/src/styles/settings.css b/src/styles/settings.css
index 16b4bff93..e99e539e3 100644
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@@ -29,6 +29,19 @@
   z-index: 1;
 }
 
+.settings-window::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--surface-app, #111);
+  border-radius: inherit;
+  z-index: 0;
+}
+
+.settings-window > * {
+  position: relative;
+  z-index: 1;
+}
 
 .settings-titlebar {
   display: flex;
@@ -36,7 +49,7 @@
   justify-content: space-between;
   padding: 12px 16px;
   border-bottom: 1px solid var(--border-muted);
-  background: var(--surface-topbar);
+  background: #111;
 }
 
 .app.reduced-transparency .settings-backdrop {
@@ -100,7 +113,7 @@
 .settings-content {
   padding: 20px 24px;
   overflow-y: auto;
-  background: var(--surface-messages);
+  background: #111;
 }
 
 .settings-field {
@@ -216,6 +229,13 @@
   background: var(--surface-control);
   color: var(--text-strong);
   font-size: 12px;
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  box-shadow: none;
+  background-image: none;
 }
 
 .settings-select--compact {
@@ -529,7 +549,7 @@
   width: 16px;
   height: 16px;
   border-radius: 999px;
-  background: var(--surface-card-strong);
+  background: white;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index b209bfe4c..96644925d 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -299,8 +299,8 @@
 }
 
 .workspace-add {
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   border-radius: 999px;
   border: 1px solid var(--border-stronger);
   background: var(--surface-card-muted);