From 5e79a06a84ad8072d08f499611583cbb9744decf Mon Sep 17 00:00:00 2001
From: klopez4212 <klopez4212@gmail.com>
Date: Mon, 6 Jul 2026 14:01:06 +0100
Subject: [PATCH] feat(desktop): align traffic lights, neutral bg, accent above
 themes

- Align traffic light positions in SystemPreferencePreviewSvg to match
  ThemePreviewSvg (x=3.5, 8, 12.5 instead of 4.5, 9, 13.5)
- Use current app muted color (CSS var) for system preference frame
  background instead of the light theme's muted color
- Move accent color picker between mode selector and theme grid
  so it doesn't get lost below the fold
- Add accent color elements (border, title, primary squares) to
  the system preference SVG light half
---
 .../features/settings/ui/SettingsPanels.tsx   | 70 +++++++++----------
 .../src/shared/theme/ThemePreviewFrame.tsx    | 14 ++--
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/desktop/src/features/settings/ui/SettingsPanels.tsx b/desktop/src/features/settings/ui/SettingsPanels.tsx
index f08fdf2312..4aa4032428 100644
--- a/desktop/src/features/settings/ui/SettingsPanels.tsx
+++ b/desktop/src/features/settings/ui/SettingsPanels.tsx
@@ -435,6 +435,41 @@ function ThemeSettingsCard() {
         ))}
       </div>
 
+      {/* Accent color picker */}
+      <div className="mb-6 px-1">
+        <h3 className="mb-2 text-sm font-medium">Accent color</h3>
+        <div className="flex flex-wrap gap-2 p-1">
+          {ACCENT_COLORS.map((color) => {
+            const isNeutral = color.value === NEUTRAL_ACCENT;
+            const swatchColor = isNeutral
+              ? "hsl(var(--foreground))"
+              : color.value;
+            const checkClassName =
+              isNeutral && isDark ? "text-black" : "text-white";
+
+            return (
+              <button
+                className={cn(
+                  "flex h-7 w-7 items-center justify-center rounded-full border border-border/50 transition-transform hover:scale-110",
+                  accentColor === color.value &&
+                    "ring-2 ring-ring ring-offset-2 ring-offset-background",
+                )}
+                data-testid={`accent-color-${color.name.toLowerCase()}`}
+                key={color.value}
+                onClick={() => setAccentColor(color.value)}
+                style={{ backgroundColor: swatchColor }}
+                title={color.name}
+                type="button"
+              >
+                {accentColor === color.value && (
+                  <Check className={cn("h-4 w-4", checkClassName)} />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
       {/* Theme grid based on selected mode */}
       <div className="mb-6">
         <div className="flex flex-wrap gap-4 p-1">
@@ -475,41 +510,6 @@ function ThemeSettingsCard() {
             ))}
         </div>
       </div>
-
-      {/* Accent color picker */}
-      <div className="mt-2 shrink-0 px-1 pb-2">
-        <h3 className="mb-2 text-sm font-medium">Accent color</h3>
-        <div className="flex flex-wrap gap-2 p-1">
-          {ACCENT_COLORS.map((color) => {
-            const isNeutral = color.value === NEUTRAL_ACCENT;
-            const swatchColor = isNeutral
-              ? "hsl(var(--foreground))"
-              : color.value;
-            const checkClassName =
-              isNeutral && isDark ? "text-black" : "text-white";
-
-            return (
-              <button
-                className={cn(
-                  "flex h-7 w-7 items-center justify-center rounded-full border border-border/50 transition-transform hover:scale-110",
-                  accentColor === color.value &&
-                    "ring-2 ring-ring ring-offset-2 ring-offset-background",
-                )}
-                data-testid={`accent-color-${color.name.toLowerCase()}`}
-                key={color.value}
-                onClick={() => setAccentColor(color.value)}
-                style={{ backgroundColor: swatchColor }}
-                title={color.name}
-                type="button"
-              >
-                {accentColor === color.value && (
-                  <Check className={cn("h-4 w-4", checkClassName)} />
-                )}
-              </button>
-            );
-          })}
-        </div>
-      </div>
     </section>
   );
 }
diff --git a/desktop/src/shared/theme/ThemePreviewFrame.tsx b/desktop/src/shared/theme/ThemePreviewFrame.tsx
index 5c37b1bc38..116d61e795 100644
--- a/desktop/src/shared/theme/ThemePreviewFrame.tsx
+++ b/desktop/src/shared/theme/ThemePreviewFrame.tsx
@@ -278,7 +278,7 @@ function SystemPreferencePreviewSvg({
           height="2.7"
           rx="1.35"
           width="2.7"
-          x="4.5"
+          x="3.5"
           y="4.72485"
         />
         <rect
@@ -288,7 +288,7 @@ function SystemPreferencePreviewSvg({
           strokeOpacity="0.2"
           strokeWidth="0.1125"
           width="2.5875"
-          x="4.55625"
+          x="3.55625"
           y="4.7811"
         />
         <rect
@@ -296,7 +296,7 @@ function SystemPreferencePreviewSvg({
           height="2.7"
           rx="1.35"
           width="2.7"
-          x="9"
+          x="8"
           y="4.72485"
         />
         <rect
@@ -306,7 +306,7 @@ function SystemPreferencePreviewSvg({
           strokeOpacity="0.2"
           strokeWidth="0.1125"
           width="2.5875"
-          x="9.05625"
+          x="8.05625"
           y="4.7811"
         />
         <rect
@@ -314,7 +314,7 @@ function SystemPreferencePreviewSvg({
           height="2.7"
           rx="1.35"
           width="2.7"
-          x="13.5"
+          x="12.5"
           y="4.72485"
         />
         <rect
@@ -324,7 +324,7 @@ function SystemPreferencePreviewSvg({
           strokeOpacity="0.2"
           strokeWidth="0.1125"
           width="2.5875"
-          x="13.5563"
+          x="12.5563"
           y="4.7811"
         />
         <rect
@@ -524,7 +524,7 @@ export function SystemPreferencePreviewFrame({
         className,
       )}
       style={{
-        backgroundColor: hsl(lightVars, "--muted"),
+        backgroundColor: "hsl(var(--muted))",
       }}
     >
       <div className="absolute -bottom-1 -right-1 h-[90%] w-[90%]">