From a89e8bf03490c34921d2be168ca118ab7b5f16cd Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Fri, 13 Feb 2026 13:23:55 -0500
Subject: [PATCH] feat: Show 4 color squares in preset theme previews

- Change from 2 vertical bars to 4 horizontal squares
- Use grid-cols-4 for even distribution
- Show 4 key colors from the theme:
  1. Primary background
  2. Secondary background
  3. Primary text
  4. Inverse background
- Better representation of theme's color palette
- More visual information at a glance
- Users can see background + text + accent colors
- Still compact at h-8

Before: 2 colors (primary + secondary background)
After: 4 colors (backgrounds + text + inverse)

Richer preview with more theme information!
---
 .../ThemeColorEditor/ThemeSelector/PresetGallery.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/desktop/src/components/settings/app/ThemeColorEditor/ThemeSelector/PresetGallery.tsx b/ui/desktop/src/components/settings/app/ThemeColorEditor/ThemeSelector/PresetGallery.tsx
index a7cf67540e..203511f78d 100644
--- a/ui/desktop/src/components/settings/app/ThemeColorEditor/ThemeSelector/PresetGallery.tsx
+++ b/ui/desktop/src/components/settings/app/ThemeColorEditor/ThemeSelector/PresetGallery.tsx
@@ -135,16 +135,20 @@ export function PresetGallery({ onApply }: PresetGalleryProps) {
             key={preset.id}
             className="border border-border-primary rounded-lg p-4 space-y-3 hover:border-border-secondary transition-colors"
           >
-            {/* Theme Preview Colors - Show only current mode */}
-            <div className="h-8 rounded border border-border-primary overflow-hidden">
+            {/* Theme Preview Colors - Show only current mode (4 colors) */}
+            <div className="grid grid-cols-4 h-8 rounded border border-border-primary overflow-hidden">
               <div 
-                className="h-1/2" 
                 style={{ backgroundColor: preset.colors[resolvedTheme]['color-background-primary'] }}
               />
               <div 
-                className="h-1/2" 
                 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>
 
             {/* Theme Info */}