awesome-bookmarks/goose
3
0
Fork 0
mirror of https://github.com/block/goose.git synced 2026-07-17 12:56:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Keep color preview at top, bottom-align info and button

Browse Source 
- Color preview stays at top of card
- Add flex-1 spacer between preview and info
- Title, description, tags, and button are bottom-aligned
- Perfect visual hierarchy and balance

Layout now:
┌─────────────────────┐
│ [color preview]     │ ← Top
│                     │ ← Flexible space
│ Theme Name          │ ← Bottom-aligned
│ Description         │
│ by Author           │
│ [tags]              │
│ [apply button]      │
└─────────────────────┘

Colors prominent at top, info compact at bottom!
This commit is contained in:
spencrmartin
2026-02-13 13:33:21 -05:00
parent 612c6b0ed8
commit d1eb0a9939
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/components/settings/app/ThemeColorEditor/ThemeSelector/PresetGallery.tsx
+18 -18
View File
@@ -132,11 +132,27 @@ export function PresetGallery({ onApply }: PresetGalleryProps) {
key={preset.id}
className="border border-border-primary rounded-lg p-4 flex flex-col hover:border-border-secondary transition-colors"
>
{/* Spacer to push content to bottom */}
{/* Theme Preview Colors - Top of card */}
<div className="grid grid-cols-4 h-24 rounded border border-border-primary overflow-hidden">
<div
style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-primary'] }}
/>
<div
style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-secondary'] }}
/>
<div
style={{ backgroundColor: preset.colors[resolvedTheme]['color-text-primary'] }}
/>
<div
style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-inverse'] }}
/>
</div>
{/* Spacer to push info to bottom */}
<div className="flex-1" />
{/* Bottom-aligned content */}
<div className="space-y-3">
<div className="space-y-3 mt-3">
{/* Theme Info */}
<div>
<h3 className="text-sm font-semibold text-text-primary">
@@ -161,22 +177,6 @@ export function PresetGallery({ onApply }: PresetGalleryProps) {
</span>
))}
</div>
{/* Theme Preview Colors - Show only current mode (4 colors) */}
<div className="grid grid-cols-4 h-24 rounded border border-border-primary overflow-hidden">
<div
style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-primary'] }}
/>
<div
style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-secondary'] }}
/>
<div
style={{ backgroundColor: preset.colors[resolvedTheme]['color-text-primary'] }}
/>
<div
style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-inverse'] }}
/>
</div>
{/* Apply Button - Bottom Aligned */}
<Tooltip>