feat(ui): remove redundant column logic and use flexGrow for name column in colors visualizer

This commit is contained in:
Keith Guerin
2026-02-26 22:34:28 -08:00
parent 2a1ea7db2f
commit 96151ede07
2 changed files with 44 additions and 85 deletions

View File

@@ -31,7 +31,6 @@ interface BackgroundColorRow {
type ColorRow = StandardColorRow | GradientColorRow | BackgroundColorRow;
const VALUE_COLUMN_WIDTH = 10;
const NAME_COLUMN_WIDTH = '30%';
interface ColorsDisplayProps {
activeTheme: Theme;
@@ -155,7 +154,7 @@ export const ColorsDisplay: React.FC<ColorsDisplayProps> = ({
Value
</Text>
</Box>
<Box width={NAME_COLUMN_WIDTH}>
<Box flexGrow={1}>
<Text bold color={theme.text.link} dimColor>
Name
</Text>
@@ -184,7 +183,7 @@ function renderStandardRow({ name, value }: StandardColorRow) {
<Box width={VALUE_COLUMN_WIDTH}>
<Text color={displayColor}>{value || '(blank)'}</Text>
</Box>
<Box width={NAME_COLUMN_WIDTH}>
<Box flexGrow={1}>
<Text color={displayColor}>{name}</Text>
</Box>
</Box>
@@ -201,7 +200,7 @@ function renderGradientRow({ name, value }: GradientColorRow) {
</Text>
))}
</Box>
<Box width={NAME_COLUMN_WIDTH}>
<Box flexGrow={1}>
<Gradient colors={value}>
<Text>{name}</Text>
</Gradient>
@@ -223,7 +222,7 @@ function renderBackgroundRow({ name, value }: BackgroundColorRow) {
{value || 'default'}
</Text>
</Box>
<Box width={NAME_COLUMN_WIDTH} paddingLeft={1}>
<Box flexGrow={1} paddingLeft={1}>
<Text color={theme.text.primary}>{name}</Text>
</Box>
</Box>

View File

@@ -32,31 +32,21 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal
│ │ mapped to your terminal app's palette. │ │
│ │ │ │
│ │ Value Name │ │
│ │ #1E1E2E background.p │ │
│ │ rimary │ │
│ │ #2a2b3c background.m │ │
│ │ essage │ │
│ │ #313243 background.i │ │
│ │ nput │ │
│ │ #28350B background.d │ │
│ │ iff.added │ │
│ │ #430000 background.d │ │
│ │ iff.removed │ │
│ │ #1E1E2E background.primary │ │
│ │ #2a2b3c background.message │ │
│ │ #313243 background.input │ │
│ │ #28350B background.diff.added │ │
│ │ #430000 background.diff.removed │ │
│ │ (blank) text.primary │ │
│ │ #6C7086 text.secondar │ │
│ │ y │ │
│ │ #6C7086 text.secondary │ │
│ │ #89B4FA text.link │ │
│ │ #CBA6F7 text.accent │ │
│ │ (blank) text.response │ │
│ │ #3d3f51 border.defaul │ │
│ │ t │ │
│ │ #89B4FA border.focuse │ │
│ │ d │ │
│ │ #3d3f51 border.default │ │
│ │ #89B4FA border.focused │ │
│ │ #F38BA8 status.error │ │
│ │ #A6E3A1 status.succes │ │
│ │ s │ │
│ │ #F9E2AF status.warnin │ │
│ │ g │ │
│ │ #A6E3A1 status.success │ │
│ │ #F9E2AF status.warning │ │
│ │ #4796E4 ui.gradient │ │
│ │ #847ACE │ │
│ │ #C3677F │ │
@@ -100,31 +90,21 @@ exports[`Initial Theme Selection > should default to a light theme when terminal
│ │ mapped to your terminal app's palette. │ │
│ │ │ │
│ │ Value Name │ │
│ │ #FAFAFA background.p │ │
│ │ rimary │ │
│ │ #eaecee background.m │ │
│ │ essage │ │
│ │ #e2e4e8 background.i │ │
│ │ nput │ │
│ │ #C6EAD8 background.d │ │
│ │ iff.added │ │
│ │ #FFCCCC background.d │ │
│ │ iff.removed │ │
│ │ #FAFAFA background.primary │ │
│ │ #eaecee background.message │ │
│ │ #e2e4e8 background.input │ │
│ │ #C6EAD8 background.diff.added │ │
│ │ #FFCCCC background.diff.removed │ │
│ │ (blank) text.primary │ │
│ │ #97a0b0 text.secondar │ │
│ │ y │ │
│ │ #97a0b0 text.secondary │ │
│ │ #3B82F6 text.link │ │
│ │ #8B5CF6 text.accent │ │
│ │ (blank) text.response │ │
│ │ #d2d6dc border.defaul │ │
│ │ t │ │
│ │ #3B82F6 border.focuse │ │
│ │ d │ │
│ │ #d2d6dc border.default │ │
│ │ #3B82F6 border.focused │ │
│ │ #DD4C4C status.error │ │
│ │ #3CA84B status.succes │ │
│ │ s │ │
│ │ #D5A40A status.warnin │ │
│ │ g │ │
│ │ #3CA84B status.success │ │
│ │ #D5A40A status.warning │ │
│ │ #4796E4 ui.gradient │ │
│ │ #847ACE │ │
│ │ #C3677F │ │
@@ -168,31 +148,21 @@ exports[`Initial Theme Selection > should use the theme from settings even if te
│ │ mapped to your terminal app's palette. │ │
│ │ │ │
│ │ Value Name │ │
│ │ #1E1E2E background.p │ │
│ │ rimary │ │
│ │ #2a2b3c background.m │ │
│ │ essage │ │
│ │ #313243 background.i │ │
│ │ nput │ │
│ │ #28350B background.d │ │
│ │ iff.added │ │
│ │ #430000 background.d │ │
│ │ iff.removed │ │
│ │ #1E1E2E background.primary │ │
│ │ #2a2b3c background.message │ │
│ │ #313243 background.input │ │
│ │ #28350B background.diff.added │ │
│ │ #430000 background.diff.removed │ │
│ │ (blank) text.primary │ │
│ │ #6C7086 text.secondar │ │
│ │ y │ │
│ │ #6C7086 text.secondary │ │
│ │ #89B4FA text.link │ │
│ │ #CBA6F7 text.accent │ │
│ │ (blank) text.response │ │
│ │ #3d3f51 border.defaul │ │
│ │ t │ │
│ │ #89B4FA border.focuse │ │
│ │ d │ │
│ │ #3d3f51 border.default │ │
│ │ #89B4FA border.focused │ │
│ │ #F38BA8 status.error │ │
│ │ #A6E3A1 status.succes │ │
│ │ s │ │
│ │ #F9E2AF status.warnin │ │
│ │ g │ │
│ │ #A6E3A1 status.success │ │
│ │ #F9E2AF status.warning │ │
│ │ #4796E4 ui.gradient │ │
│ │ #847ACE │ │
│ │ #C3677F │ │
@@ -250,31 +220,21 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode
│ │ mapped to your terminal app's palette. │ │
│ │ │ │
│ │ Value Name │ │
│ │ #1E1E2E background.p │ │
│ │ rimary │ │
│ │ #2a2b3c background.m │ │
│ │ essage │ │
│ │ #313243 background.i │ │
│ │ nput │ │
│ │ #28350B background.d │ │
│ │ iff.added │ │
│ │ #430000 background.d │ │
│ │ iff.removed │ │
│ │ #1E1E2E background.primary │ │
│ │ #2a2b3c background.message │ │
│ │ #313243 background.input │ │
│ │ #28350B background.diff.added │ │
│ │ #430000 background.diff.removed │ │
│ │ (blank) text.primary │ │
│ │ #6C7086 text.secondar │ │
│ │ y │ │
│ │ #6C7086 text.secondary │ │
│ │ #89B4FA text.link │ │
│ │ #CBA6F7 text.accent │ │
│ │ (blank) text.response │ │
│ │ #3d3f51 border.defaul │ │
│ │ t │ │
│ │ #89B4FA border.focuse │ │
│ │ d │ │
│ │ #3d3f51 border.default │ │
│ │ #89B4FA border.focused │ │
│ │ #F38BA8 status.error │ │
│ │ #A6E3A1 status.succes │ │
│ │ s │ │
│ │ #F9E2AF status.warnin │ │
│ │ g │ │
│ │ #A6E3A1 status.success │ │
│ │ #F9E2AF status.warning │ │
│ │ #4796E4 ui.gradient │ │
│ │ #847ACE │ │
│ │ #C3677F │ │