fix(app): balance composer right-side button spacing

Tightens transparent icon gaps to 4px and gives filled action buttons
(send, interrupt) a 4px left margin so they sit 8px from neighbors.
Shrinks context-window meter SVG from 20 to 16 to match the visual
weight of surrounding icons.
This commit is contained in:
Mohamed Boudra
2026-04-16 20:30:16 +07:00
parent 827092a246
commit 981b94fa56
3 changed files with 5 additions and 3 deletions
+2 -1
View File
@@ -840,11 +840,12 @@ const styles = StyleSheet.create(((theme: Theme) => ({
backgroundColor: theme.colors.palette.red[600], backgroundColor: theme.colors.palette.red[600],
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
marginLeft: theme.spacing[1],
}, },
rightControls: { rightControls: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
gap: theme.spacing[2], gap: theme.spacing[1],
}, },
contextWindowMeterSlot: { contextWindowMeterSlot: {
width: 28, width: 28,
@@ -8,7 +8,7 @@ type ContextWindowMeterProps = {
usedTokens: number; usedTokens: number;
}; };
const SVG_SIZE = 20; const SVG_SIZE = 16;
const CENTER = SVG_SIZE / 2; const CENTER = SVG_SIZE / 2;
const RADIUS = 7; const RADIUS = 7;
const STROKE_WIDTH = 2.25; const STROKE_WIDTH = 2.25;
@@ -1365,7 +1365,7 @@ const styles = StyleSheet.create(((theme: any) => ({
flexShrink: 0, flexShrink: 0,
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
gap: isWeb ? theme.spacing[2] : theme.spacing[1], gap: theme.spacing[1],
}, },
attachButton: { attachButton: {
width: 28, width: 28,
@@ -1399,6 +1399,7 @@ const styles = StyleSheet.create(((theme: any) => ({
backgroundColor: theme.colors.accent, backgroundColor: theme.colors.accent,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
marginLeft: theme.spacing[1],
}, },
iconButtonHovered: { iconButtonHovered: {
backgroundColor: theme.colors.surface2, backgroundColor: theme.colors.surface2,