From 1e1f5baf9b46a6e5a5430d4c575769e8d6298094 Mon Sep 17 00:00:00 2001
From: Echo <echo@romfast.ro>
Date: Tue, 10 Feb 2026 22:38:13 +0000
Subject: [PATCH] fix(UX): LARGE buttons/text in cards, opaque modal/dropdown,
 compact color picker grid

---
 dashboard/habits.html | 41 ++++++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/dashboard/habits.html b/dashboard/habits.html
index 36e28a2..828deb7 100644
--- a/dashboard/habits.html
+++ b/dashboard/habits.html
@@ -333,15 +333,15 @@
         }
         
         .habit-card-icon {
-            width: 24px;
-            height: 24px;
+            width: 32px;
+            height: 32px;
             color: var(--text-primary);
             flex-shrink: 0;
         }
         
         .habit-card-name {
             flex: 1;
-            font-size: 16px;
+            font-size: 20px;
             font-weight: 600;
             color: var(--text-primary);
             white-space: nowrap;
@@ -350,22 +350,22 @@
         }
         
         .habit-card-streak {
-            font-size: 14px;
+            font-size: 16px;
             color: var(--text-muted);
             white-space: nowrap;
             flex-shrink: 0;
-            font-weight: 500;
+            font-weight: 600;
         }
         
         /* Compact check button */
         .habit-card-check-btn-compact {
-            width: 50px;
-            height: 50px;
-            border: 2px solid var(--accent);
+            width: 60px;
+            height: 60px;
+            border: 3px solid var(--accent);
             background: transparent;
             color: var(--accent);
             border-radius: 50%;
-            font-size: 22px;
+            font-size: 28px;
             font-weight: 700;
             cursor: pointer;
             transition: all var(--transition-base);
@@ -419,8 +419,8 @@
         }
         
         .habit-card-action-btn svg {
-            width: 18px;
-            height: 18px;
+            width: 22px;
+            height: 22px;
         }
         
         /* Progress bar row */
@@ -445,19 +445,20 @@
         }
         
         .habit-card-progress-text {
-            font-size: 14px;
+            font-size: 16px;
             color: var(--text-muted);
-            font-weight: 600;
-            min-width: 35px;
+            font-weight: 700;
+            min-width: 40px;
             text-align: right;
             flex-shrink: 0;
         }
         
         /* Next date row */
         .habit-card-next-date {
-            font-size: 13px;
+            font-size: 15px;
             color: var(--text-muted);
             text-align: left;
+            font-weight: 500;
         }
         
         /* Keep priority indicator styles for future use */
@@ -608,9 +609,10 @@
         /* Color picker */
         .color-picker-swatches {
             display: grid;
-            grid-template-columns: repeat(8, 1fr);
+            grid-template-columns: repeat(4, 1fr);
             gap: var(--space-2);
             margin-bottom: var(--space-2);
+            max-width: 200px;
         }
         
         .color-swatch {
@@ -620,10 +622,11 @@
             border-radius: var(--radius-md);
             cursor: pointer;
             transition: all var(--transition-base);
+            min-height: 40px;
         }
         
         .color-swatch:hover {
-            transform: scale(1.1);
+            transform: scale(1.05);
         }
         
         .color-swatch.selected {
@@ -680,10 +683,10 @@
             top: calc(100% + var(--space-1));
             left: 0;
             right: 0;
-            background: var(--bg-surface);
+            background: rgba(26, 27, 30, 0.98);
             border: 1px solid var(--border);
             border-radius: var(--radius-md);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
             z-index: 100;
             display: none;
             max-height: 300px;