From cafcce8c90ba9d2766e70284e4ad32e359aeeabe Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 09:54:38 +0100
Subject: [PATCH] ux: modernize setup form UI

---
 frontend/src/pages/setup.astro | 82 +++++++++-------------------------
 1 file changed, 21 insertions(+), 61 deletions(-)

diff --git a/frontend/src/pages/setup.astro b/frontend/src/pages/setup.astro
index 18440df..ba8077b 100644
--- a/frontend/src/pages/setup.astro
+++ b/frontend/src/pages/setup.astro
@@ -28,13 +28,13 @@ if (!setupRequired) {
 
 <Layout title="Setup - Likwid">
   <div class="setup-container">
-    <div class="setup-card">
+    <div class="setup-card ui-card">
       <div class="setup-header">
         <h1>Welcome to Likwid</h1>
         <p>Let's configure your governance platform</p>
       </div>
 
-      <form id="setup-form" class="setup-form">
+      <form id="setup-form" class="setup-form ui-form">
         <!-- Step 1: Instance Identity -->
         <section class="setup-section" data-step="1">
           <h2>Instance Identity</h2>
@@ -43,7 +43,7 @@ if (!setupRequired) {
             <label for="instance_name">Platform Name</label>
             <input type="text" id="instance_name" name="instance_name" required
                    placeholder="My Community Platform" />
-            <span class="hint">This name will appear in the header and emails</span>
+            <span class="help-text">This name will appear in the header and emails</span>
           </div>
         </section>
 
@@ -107,7 +107,7 @@ if (!setupRequired) {
         </section>
 
         <div class="form-actions">
-          <button type="submit" id="submit-btn" disabled>Complete Setup</button>
+          <button type="submit" id="submit-btn" class="ui-btn ui-btn-primary" disabled>Complete Setup</button>
         </div>
       </form>
     </div>
@@ -125,9 +125,6 @@ if (!setupRequired) {
   }
 
   .setup-card {
-    background: #fff;
-    border-radius: 12px;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
     max-width: 600px;
     width: 100%;
     overflow: hidden;
@@ -157,7 +154,7 @@ if (!setupRequired) {
   .setup-section {
     margin-bottom: 2rem;
     padding-bottom: 2rem;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--color-border);
   }
 
   .setup-section:last-of-type {
@@ -167,11 +164,11 @@ if (!setupRequired) {
   .setup-section h2 {
     font-size: 1.25rem;
     margin: 0 0 0.5rem 0;
-    color: #333;
+    color: var(--color-text);
   }
 
   .section-desc {
-    color: #666;
+    color: var(--color-text-muted);
     margin: 0 0 1rem 0;
   }
 
@@ -179,34 +176,6 @@ if (!setupRequired) {
     margin-bottom: 1rem;
   }
 
-  .form-group label {
-    display: block;
-    font-weight: 500;
-    margin-bottom: 0.5rem;
-    color: #333;
-  }
-
-  .form-group input[type="text"] {
-    width: 100%;
-    padding: 0.75rem;
-    border: 2px solid #e0e0e0;
-    border-radius: 8px;
-    font-size: 1rem;
-    transition: border-color 0.2s;
-  }
-
-  .form-group input[type="text"]:focus {
-    outline: none;
-    border-color: #667eea;
-  }
-
-  .hint {
-    display: block;
-    font-size: 0.85rem;
-    color: #888;
-    margin-top: 0.25rem;
-  }
-
   .mode-options {
     display: grid;
     gap: 1rem;
@@ -222,66 +191,57 @@ if (!setupRequired) {
 
   .mode-card {
     padding: 1rem;
-    border: 2px solid #e0e0e0;
+    border: 1px solid var(--color-border);
     border-radius: 8px;
     transition: all 0.2s;
+    background: var(--color-bg-alt);
   }
 
   .mode-option input:checked + .mode-card {
-    border-color: #667eea;
-    background: #f8f9ff;
+    border-color: var(--color-primary);
+    background: var(--color-primary-muted);
   }
 
   .mode-card strong {
     display: block;
-    color: #333;
+    color: var(--color-text);
   }
 
   .mode-card p {
     margin: 0.25rem 0 0 0;
     font-size: 0.9rem;
-    color: #666;
+    color: var(--color-text-muted);
   }
 
   .auth-status {
     padding: 1rem;
     border-radius: 8px;
-    background: #f5f5f5;
+    background: var(--color-bg-alt);
   }
 
   .auth-status.success {
-    background: #e8f5e9;
-    color: #2e7d32;
+    background: var(--color-success-muted);
+    color: var(--color-success);
   }
 
   .auth-status.error {
-    background: #ffebee;
-    color: #c62828;
+    background: var(--color-error-muted);
+    color: var(--color-error);
   }
 
   .form-actions {
     margin-top: 2rem;
   }
 
-  .form-actions button {
+  .form-actions .ui-btn {
     width: 100%;
+    justify-content: center;
     padding: 1rem;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    border: none;
-    border-radius: 8px;
     font-size: 1.1rem;
     font-weight: 600;
-    cursor: pointer;
-    transition: opacity 0.2s, transform 0.2s;
   }
 
-  .form-actions button:hover:not(:disabled) {
-    opacity: 0.9;
-    transform: translateY(-1px);
-  }
-
-  .form-actions button:disabled {
+  .form-actions .ui-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }