From 940bc6243b49894954e66f3a168db4464c7e75ba Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Tue, 7 Apr 2026 09:50:52 +0700
Subject: [PATCH] fix(app): polish diff toolbar toggle buttons

- Lower active button surface from surface3 to surface2 for dark mode
- Add gap between toolbar button groups
- Remove outer border from unified/split group, use per-button radius
---
 packages/app/src/components/git-diff-pane.tsx | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/app/src/components/git-diff-pane.tsx b/packages/app/src/components/git-diff-pane.tsx
index 3d2348a67..6c27ee1bb 100644
--- a/packages/app/src/components/git-diff-pane.tsx
+++ b/packages/app/src/components/git-diff-pane.tsx
@@ -1381,20 +1381,12 @@ const styles = StyleSheet.create((theme) => ({
   diffStatusButtons: {
     flexDirection: "row",
     alignItems: "center",
-    gap: {
-      xs: theme.spacing[1],
-      sm: theme.spacing[1],
-      md: 0,
-    },
+    gap: theme.spacing[1],
     flexWrap: "wrap",
   },
   toggleButtonGroup: {
     flexDirection: "row",
     alignItems: "center",
-    borderWidth: 1,
-    borderColor: theme.colors.border,
-    borderRadius: theme.borderRadius.base,
-    overflow: "hidden",
   },
   toggleButton: {
     alignItems: "center",
@@ -1402,7 +1394,7 @@ const styles = StyleSheet.create((theme) => ({
     minWidth: {
       xs: 32,
       sm: 32,
-      md: 28,
+      md: 24,
     },
     height: {
       xs: 32,
@@ -1414,15 +1406,17 @@ const styles = StyleSheet.create((theme) => ({
       sm: theme.spacing[2],
       md: theme.spacing[1],
     },
-    backgroundColor: theme.colors.surface1,
   },
   toggleButtonGroupStart: {
-    borderRightWidth: 1,
-    borderRightColor: theme.colors.border,
+    borderTopLeftRadius: theme.borderRadius.base,
+    borderBottomLeftRadius: theme.borderRadius.base,
+  },
+  toggleButtonGroupEnd: {
+    borderTopRightRadius: theme.borderRadius.base,
+    borderBottomRightRadius: theme.borderRadius.base,
   },
-  toggleButtonGroupEnd: {},
   toggleButtonSelected: {
-    backgroundColor: theme.colors.surface3,
+    backgroundColor: theme.colors.surface2,
   },
   expandAllButton: {
     flexDirection: "row",