From d69d931ea96969171e9dc2f1ec1619426ee4c9c5 Mon Sep 17 00:00:00 2001
From: Mae PUGIN <48982737+mornepousse@users.noreply.github.com>
Date: Tue, 7 Apr 2026 09:03:44 +0200
Subject: [PATCH] style: Fix contrast on buttons, combobox, and tab titles

- button-bg lighter (#565970) to stand out from bg-secondary
- Border on DarkButton and DarkComboBox (#6272a4)
- Primary button: dark text on purple bg
- Tab titles: inactive #9a9ebb (was #6272a4), 13px, bold 700 when active

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/components/dark_button.slint    | 11 ++++++++---
 ui/components/dark_combo_box.slint |  2 +-
 ui/main.slint                      |  6 +++---
 ui/theme.slint                     |  3 ++-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui/components/dark_button.slint b/ui/components/dark_button.slint
index d2ac656..5f752d9 100644
--- a/ui/components/dark_button.slint
+++ b/ui/components/dark_button.slint
@@ -6,20 +6,25 @@ export component DarkButton inherits Rectangle {
     in property <bool> primary: false;
     callback clicked();
 
-    min-width: btn-text.preferred-width + 20px;
+    min-width: btn-text.preferred-width + 24px;
     height: 28px;
     border-radius: 4px;
+    border-width: 1px;
+    border-color: !root.enabled ? transparent
+        : root.primary ? Theme.accent-purple.darker(0.1)
+        : Theme.button-border;
     background: !root.enabled ? Theme.bg-primary
         : root.primary && ta.has-hover ? Theme.accent-purple.darker(0.2)
         : root.primary ? Theme.accent-purple
         : ta.has-hover ? Theme.button-hover
         : Theme.button-bg;
-    opacity: root.enabled ? 1.0 : 0.5;
+    opacity: root.enabled ? 1.0 : 0.4;
 
     btn-text := Text {
         text: root.text;
-        color: root.enabled ? Theme.fg-primary : Theme.fg-secondary;
+        color: root.primary ? #282a36 : root.enabled ? Theme.fg-primary : Theme.fg-secondary;
         font-size: 12px;
+        font-weight: 500;
         horizontal-alignment: center;
         vertical-alignment: center;
     }
diff --git a/ui/components/dark_combo_box.slint b/ui/components/dark_combo_box.slint
index db55b2a..81bbab5 100644
--- a/ui/components/dark_combo_box.slint
+++ b/ui/components/dark_combo_box.slint
@@ -11,7 +11,7 @@ export component DarkComboBox inherits Rectangle {
     border-radius: 4px;
     background: ta.has-hover ? Theme.button-hover : Theme.button-bg;
     border-width: 1px;
-    border-color: Theme.bg-primary;
+    border-color: Theme.button-border;
 
     HorizontalLayout {
         padding-left: 8px;
diff --git a/ui/main.slint b/ui/main.slint
index 4fc652f..75fee68 100644
--- a/ui/main.slint
+++ b/ui/main.slint
@@ -25,9 +25,9 @@ component DarkTab inherits Rectangle {
 
     Text {
         text: root.title;
-        color: root.active ? Theme.fg-primary : Theme.fg-secondary;
-        font-size: 12px;
-        font-weight: root.active ? 600 : 400;
+        color: root.active ? Theme.fg-primary : #9a9ebb;
+        font-size: 13px;
+        font-weight: root.active ? 700 : 400;
         horizontal-alignment: center;
         vertical-alignment: center;
     }
diff --git a/ui/theme.slint b/ui/theme.slint
index 052c5ad..77c1364 100644
--- a/ui/theme.slint
+++ b/ui/theme.slint
@@ -18,6 +18,7 @@ export global Theme {
     // UI elements
     out property <color> connected: #50fa7b;
     out property <color> disconnected: #ff5555;
-    out property <color> button-bg: #44475a;
+    out property <color> button-bg: #565970;
     out property <color> button-hover: #6272a4;
+    out property <color> button-border: #6272a4;
 }