From b6162539f7ac43d0baa1838c9d2faf194cc6d50a Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Mon, 4 May 2026 05:59:02 +0000
Subject: [PATCH] feat(desktop): modernize desktop UI with minimalist theme

- Updated global.css to use a zinc-based neutral color palette
- Simplified header layout by removing borders
- Redesigned chat input to be borderless and flat
- Removed heavy backgrounds and borders from user message bubbles
- Tweaked tool call cards to be more compact with tighter padding
- Adjusted code block and inline code styles for better contrast and readability
---
 packages/desktop/src/renderer/App.tsx         |  2 +-
 .../src/renderer/components/ChatPanel.tsx     |  2 +-
 .../src/renderer/components/MessageBubble.tsx |  4 +-
 .../src/renderer/components/ToolCallCard.tsx  |  4 +-
 .../desktop/src/renderer/styles/global.css    | 40 +++++++++----------
 5 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/desktop/src/renderer/App.tsx b/packages/desktop/src/renderer/App.tsx
index 7908187..74687f3 100644
--- a/packages/desktop/src/renderer/App.tsx
+++ b/packages/desktop/src/renderer/App.tsx
@@ -332,7 +332,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 border-b border-xibe-border-subtle shrink-0 bg-xibe-bg z-10">
+      <header className="flex h-12 items-center justify-between px-3 shrink-0 bg-xibe-bg z-10">
         <div className="flex items-center gap-3">
           <button
             onClick={() => setLeftPanelOpen((v) => !v)}
diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 174bba1..9b7e03e 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -186,7 +186,7 @@ export default function ChatPanel({
           )}
 
           {/* Floating Pill input */}
-          <div className="relative flex items-end rounded-2xl border border-xibe-border-subtle bg-xibe-surface/80 backdrop-blur shadow-sm focus-within:border-xibe-border focus-within:bg-xibe-surface focus-within:ring-1 focus-within:ring-xibe-border transition-all duration-200">
+          <div className="relative flex items-end rounded-2xl bg-xibe-surface transition-all duration-200">
             <textarea
               ref={inputRef}
               value={input}
diff --git a/packages/desktop/src/renderer/components/MessageBubble.tsx b/packages/desktop/src/renderer/components/MessageBubble.tsx
index 08799e4..91a5acb 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-[85%] sm:max-w-[75%] rounded-2xl rounded-tr-sm bg-xibe-surface-raised border border-xibe-border-subtle px-4 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap shadow-sm">
+        <div className="max-w-[85%] sm:max-w-[75%] rounded-2xl rounded-tr-sm bg-xibe-surface px-4 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
           {content}
         </div>
       </div>
@@ -30,7 +30,7 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
         prose-blockquote:my-4 prose-blockquote:border-l-xibe-border-focus prose-blockquote:text-xibe-text-dim
         prose-a:text-xibe-brand-blue prose-a:no-underline hover:prose-a:underline hover:prose-a:underline-offset-2
         prose-strong:text-xibe-text prose-strong:font-semibold
-        prose-code:text-xibe-text-secondary prose-code:bg-xibe-surface-raised prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:font-medium prose-code:before:content-none prose-code:after:content-none
+        prose-code:text-xibe-text-secondary prose-code:bg-xibe-surface/50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:font-medium prose-code:before:content-none prose-code:after:content-none
         prose-h1:text-xl prose-h2:text-lg prose-h3:text-base prose-h1:font-semibold prose-h2:font-semibold prose-h3:font-semibold">
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
diff --git a/packages/desktop/src/renderer/components/ToolCallCard.tsx b/packages/desktop/src/renderer/components/ToolCallCard.tsx
index de99791..cf53f79 100644
--- a/packages/desktop/src/renderer/components/ToolCallCard.tsx
+++ b/packages/desktop/src/renderer/components/ToolCallCard.tsx
@@ -16,10 +16,10 @@ 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 bg-xibe-bg overflow-hidden animate-fade-in my-3 shadow-sm group">
+    <div className="rounded-xl border border-xibe-border-subtle overflow-hidden animate-fade-in my-3 group">
       <button
         onClick={() => setOpen(!open)}
-        className="flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-xibe-surface-hover transition-colors"
+        className="flex w-full items-center gap-3 px-3 py-1.5 text-left hover:bg-xibe-surface-hover transition-colors"
       >
         <ChevronRight className={cn("h-4 w-4 shrink-0 transition-transform text-xibe-text-dim", open && "rotate-90")} />
 
diff --git a/packages/desktop/src/renderer/styles/global.css b/packages/desktop/src/renderer/styles/global.css
index 3dda0d0..e6450c6 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -1,27 +1,27 @@
 @import "tailwindcss";
 
 @theme {
-  --color-xibe-bg: #0D0D12;
-  --color-xibe-surface: #13131A;
-  --color-xibe-surface-raised: #1A1A24;
-  --color-xibe-surface-hover: #22222E;
-  --color-xibe-border: #2A2A35;
-  --color-xibe-border-subtle: #1F1F29;
-  --color-xibe-border-focus: #3B82F6;
-  --color-xibe-muted: #71717a;
-  --color-xibe-text: #F3F4F6;
-  --color-xibe-text-secondary: #D1D5DB;
-  --color-xibe-text-dim: #9CA3AF;
-  --color-xibe-accent: #3B82F6;
-  --color-xibe-accent-hover: #2563EB;
-  --color-xibe-accent-muted: rgba(59, 130, 246, 0.15);
+  --color-xibe-bg: #111111;
+  --color-xibe-surface: #1A1A1A;
+  --color-xibe-surface-raised: #2A2A2A;
+  --color-xibe-surface-hover: #222222;
+  --color-xibe-border: #333333;
+  --color-xibe-border-subtle: #222222;
+  --color-xibe-border-focus: #444444;
+  --color-xibe-muted: #888888;
+  --color-xibe-text: #fafafa;
+  --color-xibe-text-secondary: #e4e4e7;
+  --color-xibe-text-dim: #a1a1aa;
+  --color-xibe-accent: #f4f4f5;
+  --color-xibe-accent-hover: #e4e4e7;
+  --color-xibe-accent-muted: rgba(244, 244, 245, 0.15);
   --color-xibe-brand-blue: #60A5FA;
   --color-xibe-brand-green: #34D399;
   --color-xibe-brand-orange: #FBBF24;
   --color-xibe-brand-purple: #A78BFA;
   --color-xibe-brand-red: #F87171;
   --color-xibe-suggestion: #93C5FD;
-  --color-xibe-user-bubble: #1E293B;
+  --color-xibe-user-bubble: #27272a;
   --color-xibe-warning: #F59E0B;
   --color-xibe-error: #EF4444;
   --color-xibe-info: #0EA5E9;
@@ -48,16 +48,16 @@ body {
   line-height: 1.6;
 }
 
-::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar { width: 5px; height: 5px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #3a3a42; border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: #4a4a54; }
+::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
 
-::selection { background: rgba(107, 155, 245, 0.2); color: #e8e8ec; }
+::selection { background: rgba(250, 250, 250, 0.2); color: #fff; }
 pre, code { font-family: var(--font-mono); }
 
 @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
 @keyframes slide-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes pulse-dot { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
 
-*:focus-visible { outline: 2px solid var(--color-xibe-brand-blue); outline-offset: -2px; border-radius: 4px; }
+*:focus-visible { outline: 2px solid var(--color-xibe-border-focus); outline-offset: -2px; border-radius: 4px; }