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:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user