diff --git a/packages/app/src/composer/draft/import-pill.tsx b/packages/app/src/composer/draft/import-pill.tsx index 743693f2c..37a16176b 100644 --- a/packages/app/src/composer/draft/import-pill.tsx +++ b/packages/app/src/composer/draft/import-pill.tsx @@ -19,6 +19,7 @@ export function ComposerImportPill({ onPress, disabled = false }: ComposerImport const handleHoverIn = useCallback(() => setIsHovered(true), []); const handleHoverOut = useCallback(() => setIsHovered(false), []); const bodyStyle = useMemo(() => [styles.body, isHovered && styles.bodyHovered], [isHovered]); + const labelStyle = useMemo(() => [styles.label, isHovered && styles.labelHovered], [isHovered]); return ( - + {t("importSession.title")} @@ -50,7 +51,7 @@ const styles = StyleSheet.create((theme) => ({ gap: theme.spacing[2], paddingHorizontal: theme.spacing[3], paddingVertical: theme.spacing[2], - borderRadius: theme.borderRadius.md, + borderRadius: theme.borderRadius.xl, borderWidth: theme.borderWidth[1], borderColor: theme.colors.borderAccent, backgroundColor: theme.colors.surface1, @@ -59,7 +60,10 @@ const styles = StyleSheet.create((theme) => ({ backgroundColor: theme.colors.surface2, }, label: { - color: theme.colors.foreground, + color: theme.colors.foregroundMuted, fontSize: theme.fontSize.sm, }, + labelHovered: { + color: theme.colors.foreground, + }, })); diff --git a/packages/app/src/screens/workspace/workspace-screen.tsx b/packages/app/src/screens/workspace/workspace-screen.tsx index f64447d9a..d3e1e0e87 100644 --- a/packages/app/src/screens/workspace/workspace-screen.tsx +++ b/packages/app/src/screens/workspace/workspace-screen.tsx @@ -3536,7 +3536,7 @@ function WorkspaceScreenContent({ tooltipLabel={t("workspace.tabs.explorer.toggle")} tooltipKeys={EXPLORER_TOGGLE_KEYS} tooltipSide="left" - style={styles.compactHeaderActionButton} + style={[styles.compactHeaderActionButton, styles.explorerPanelButton]} accessible accessibilityRole="button" accessibilityLabel={explorerToggleLabel} @@ -3959,6 +3959,11 @@ const styles = StyleSheet.create((theme) => ({ alignItems: "center", justifyContent: "center", }, + explorerPanelButton: { + // The 32px trigger and 16px panel glyph leave 8px more trailing space than + // the 22px split-pane trigger and its 14px glyph in the row below. + marginRight: -theme.spacing[2], + }, compactHeaderMenuCluster: { flexDirection: "row", alignItems: "center", @@ -3977,6 +3982,9 @@ const styles = StyleSheet.create((theme) => ({ minHeight: Math.ceil(theme.fontSize.sm * 1.5) + theme.spacing[1] * 2, minWidth: Math.ceil(theme.fontSize.sm * 1.5) + theme.spacing[1] * 2, borderRadius: theme.borderRadius.md, + // Match the painted right edge of the trailing split-pane glyph below. The + // two header rows intentionally use different control sizes and padding. + marginRight: -7, }, sourceControlButtonWithStats: { paddingHorizontal: theme.spacing[3],