From 2a44b08d4b14bd2367773823b31215815bb18361 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sun, 4 Jan 2026 10:21:26 +0700
Subject: [PATCH] style(sidebar): change New Agent button to outline style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the button less prominent since it's not frequently used once
you're actively coding with an agent. Changed from filled primary
to outline with muted colors.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../app/src/components/sliding-sidebar.tsx    | 35 +++++--------------
 1 file changed, 9 insertions(+), 26 deletions(-)

diff --git a/packages/app/src/components/sliding-sidebar.tsx b/packages/app/src/components/sliding-sidebar.tsx
index 7960af9bd..e4b117081 100644
--- a/packages/app/src/components/sliding-sidebar.tsx
+++ b/packages/app/src/components/sliding-sidebar.tsx
@@ -241,21 +241,11 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
             {/* Header: New Agent button */}
             <View style={styles.sidebarHeader}>
               <Pressable
-                style={[
-                  styles.newAgentButton,
-                  { backgroundColor: theme.colors.primary },
-                ]}
+                style={styles.newAgentButton}
                 onPress={handleCreateAgentMobile}
               >
-                <Plus size={18} color={theme.colors.primaryForeground} />
-                <Text
-                  style={[
-                    styles.newAgentButtonText,
-                    { color: theme.colors.primaryForeground },
-                  ]}
-                >
-                  New Agent
-                </Text>
+                <Plus size={18} color={theme.colors.mutedForeground} />
+                <Text style={styles.newAgentButtonText}>New Agent</Text>
               </Pressable>
             </View>
 
@@ -294,21 +284,11 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
       {/* Header: New Agent button */}
       <View style={styles.sidebarHeader}>
         <Pressable
-          style={[
-            styles.newAgentButton,
-            { backgroundColor: theme.colors.primary },
-          ]}
+          style={styles.newAgentButton}
           onPress={handleCreateAgentDesktop}
         >
-          <Plus size={18} color={theme.colors.primaryForeground} />
-          <Text
-            style={[
-              styles.newAgentButtonText,
-              { color: theme.colors.primaryForeground },
-            ]}
-          >
-            New Agent
-          </Text>
+          <Plus size={18} color={theme.colors.mutedForeground} />
+          <Text style={styles.newAgentButtonText}>New Agent</Text>
         </Pressable>
       </View>
 
@@ -366,10 +346,13 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
     paddingVertical: theme.spacing[3],
     borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
   },
   newAgentButtonText: {
     fontSize: theme.fontSize.base,
     fontWeight: theme.fontWeight.normal,
+    color: theme.colors.mutedForeground,
   },
   sidebarFooter: {
     paddingHorizontal: theme.spacing[4],