From 4a0af512d0181d4cae01632da32746d3309529a9 Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Fri, 22 May 2026 06:24:26 +0000
Subject: [PATCH] style(desktop): refine UI for a cleaner, flatter, dark-mode
 aesthetic

Updated the `/packages/desktop` styling to mirror modern coding assistants (like Claude/Cursor).
- Adjusted `global.css` variables to use softer, grayscale dark background colors instead of harsh blacks, while keeping semantic colors intact.
- Removed borders from the app header and left navigation pane in `App.tsx` for a seamless layout.
- Flattened the chat input pill in `ChatPanel.tsx` and removed its external borders.
- Simplified message bubbles in `MessageBubble.tsx`, making user bubbles borderless with subtle text.
- Cleaned up the `ToolCallCard.tsx` design to act as a flat block rather than an outlined card.
---
 packages/desktop/src/renderer/App.tsx                |  4 ++--
 .../desktop/src/renderer/components/ChatPanel.tsx    |  4 ++--
 .../src/renderer/components/MessageBubble.tsx        |  2 +-
 .../desktop/src/renderer/components/ToolCallCard.tsx |  2 +-
 packages/desktop/src/renderer/styles/global.css      | 12 ++++++------
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/desktop/src/renderer/App.tsx b/packages/desktop/src/renderer/App.tsx
index 3ce2516..afee4b7 100644
--- a/packages/desktop/src/renderer/App.tsx
+++ b/packages/desktop/src/renderer/App.tsx
@@ -319,7 +319,7 @@ export default function App() {
   return (
     <div className="flex h-screen flex-col bg-xibe-bg text-xibe-text font-sans overflow-hidden">
       {/* Header */}
-      <header className="flex h-12 items-center justify-between px-3 shrink-0 bg-xibe-bg z-10">
+      <header className="flex h-12 items-center justify-between px-3 shrink-0 z-10">
         <div className="flex items-center gap-3">
           <button
             onClick={() => setLeftPanelOpen((v) => !v)}
@@ -372,7 +372,7 @@ export default function App() {
       <div className="flex flex-1 min-h-0 overflow-hidden relative">
         {/* Left panel: Chat history + settings shortcut */}
         <aside
-          className="shrink-0 bg-xibe-surface flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-xibe-border-subtle"
+          className="shrink-0 bg-xibe-surface flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-transparent"
           style={{ width: leftPanelOpen ? 240 : 0 }}
         >
             <div className="flex-1 min-h-0 overflow-y-auto p-3">
diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 82974f1..635f3aa 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -180,7 +180,7 @@ export default function ChatPanel({
           )}
 
           {/* Floating Pill input */}
-          <div className="relative flex flex-col rounded-3xl bg-xibe-surface border border-xibe-border-subtle focus-within:border-xibe-border-focus focus-within:bg-xibe-surface transition-all duration-200">
+          <div className="relative flex flex-col rounded-2xl bg-xibe-surface border border-transparent focus-within:border-transparent focus-within:bg-xibe-surface transition-all duration-200">
             <div className="flex items-center px-4 pt-2 pb-1 text-xs text-xibe-text-dim">
                 <span className="flex items-center gap-1.5">
                     {MODES.map((m) => (
@@ -220,7 +220,7 @@ export default function ChatPanel({
               <button
                 onClick={submit}
                 disabled={isRunning || !input.trim()}
-                className="absolute right-3 bottom-2 h-8 w-8 rounded-full flex items-center justify-center text-xibe-bg bg-xibe-text hover:opacity-90 disabled:opacity-30 disabled:bg-xibe-text-dim disabled:text-xibe-surface disabled:cursor-not-allowed transition-all duration-200"
+                className="absolute right-3 bottom-2 h-8 w-8 rounded-full flex items-center justify-center text-xibe-text-dim hover:text-xibe-text bg-transparent hover:bg-xibe-surface-hover disabled:opacity-30 disabled:bg-transparent disabled:text-xibe-text-dim disabled:cursor-not-allowed transition-all duration-200"
               >
                 <Send className="h-3.5 w-3.5 ml-0.5" />
               </button>
diff --git a/packages/desktop/src/renderer/components/MessageBubble.tsx b/packages/desktop/src/renderer/components/MessageBubble.tsx
index da57468..118b35b 100644
--- a/packages/desktop/src/renderer/components/MessageBubble.tsx
+++ b/packages/desktop/src/renderer/components/MessageBubble.tsx
@@ -15,7 +15,7 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
   if (isUser) {
     return (
       <div className="flex justify-end animate-fade-in w-full group">
-        <div className="max-w-[90%] sm:max-w-[80%] rounded-2xl bg-xibe-surface-raised px-5 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
+        <div className="max-w-[90%] sm:max-w-[80%] rounded-xl bg-transparent px-5 py-3 text-[15px] leading-relaxed text-xibe-text-secondary whitespace-pre-wrap">
           {content}
         </div>
       </div>
diff --git a/packages/desktop/src/renderer/components/ToolCallCard.tsx b/packages/desktop/src/renderer/components/ToolCallCard.tsx
index efaa667..eb2ffcd 100644
--- a/packages/desktop/src/renderer/components/ToolCallCard.tsx
+++ b/packages/desktop/src/renderer/components/ToolCallCard.tsx
@@ -16,7 +16,7 @@ const ToolCallCard = memo(function ToolCallCard({ toolName, toolInput, toolOutpu
   const outputStr = toolOutput ? (typeof toolOutput === 'string' ? toolOutput : JSON.stringify(toolOutput, null, 2)) : '';
 
   return (
-    <div className="rounded-xl border border-xibe-border-subtle overflow-hidden animate-fade-in my-3 group">
+    <div className="rounded-lg border border-transparent bg-xibe-surface overflow-hidden animate-fade-in my-3 group">
       <button
         onClick={() => setOpen(!open)}
         className="flex w-full items-center gap-3 px-2.5 py-1 text-left hover:bg-xibe-surface-hover transition-colors"
diff --git a/packages/desktop/src/renderer/styles/global.css b/packages/desktop/src/renderer/styles/global.css
index 214243c..ef26d98 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -1,18 +1,18 @@
 @import "tailwindcss";
 
 @theme {
-  --color-xibe-bg: #09090b;
-  --color-xibe-surface: #121214;
-  --color-xibe-surface-raised: #18181b;
-  --color-xibe-surface-hover: #27272a;
+  --color-xibe-bg: #0d0d0f;
+  --color-xibe-surface: #161618;
+  --color-xibe-surface-raised: #1c1c1f;
+  --color-xibe-surface-hover: #222225;
   --color-xibe-border: #27272a;
-  --color-xibe-border-subtle: #18181b;
+  --color-xibe-border-subtle: #222225;
   --color-xibe-border-focus: #52525b;
   --color-xibe-muted: #71717a;
   --color-xibe-text: #fafafa;
   --color-xibe-text-secondary: #a1a1aa;
   --color-xibe-text-dim: #71717a;
-  --color-xibe-accent: #e4e4e7;
+  --color-xibe-accent: #ececec;
   --color-xibe-accent-hover: #ffffff;
   --color-xibe-accent-muted: rgba(244, 244, 245, 0.1);
   --color-xibe-brand-blue: #60A5FA;