From 072c8da18bbf0bc2c90e7f442fe540c0e6384111 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 12:27:50 +0100
Subject: [PATCH] ux: modernize voting config page

---
 .../communities/[slug]/voting-config.astro    | 90 +++++++------------
 1 file changed, 32 insertions(+), 58 deletions(-)

diff --git a/frontend/src/pages/communities/[slug]/voting-config.astro b/frontend/src/pages/communities/[slug]/voting-config.astro
index eae9b15..c484895 100644
--- a/frontend/src/pages/communities/[slug]/voting-config.astro
+++ b/frontend/src/pages/communities/[slug]/voting-config.astro
@@ -6,47 +6,28 @@ const { slug } = Astro.params;
 ---
 
 <Layout title="Voting Configuration">
-  <div class="config-container">
-    <header class="page-header">
-      <a href={`/communities/${slug}`} class="back-link">← Back to Community</a>
-      <h1>Voting Configuration</h1>
-      <p class="subtitle">Configure voting methods for this community</p>
-    </header>
+  <section class="ui-page">
+    <div class="ui-container ui-config-container">
+      <div class="ui-hero ui-card ui-card-glass">
+        <div class="ui-hero-top">
+          <div class="ui-hero-title">
+            <h1>Voting Configuration</h1>
+            <p class="ui-hero-subtitle">Configure voting methods for this community</p>
+          </div>
+          <a href={`/communities/${slug}`} class="ui-btn ui-btn-secondary">Back to Community</a>
+        </div>
+      </div>
 
-    <div class="voting-methods" id="voting-methods">
-      <p class="loading">Loading voting methods...</p>
+      <div class="voting-methods" id="voting-methods">
+        <p class="loading">Loading voting methods...</p>
+      </div>
     </div>
-  </div>
+  </section>
 </Layout>
 
 <style>
-  .config-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 2rem;
-  }
-
-  .back-link {
-    color: var(--text-secondary);
-    text-decoration: none;
-    font-size: 0.9rem;
-  }
-
-  .back-link:hover {
-    color: var(--accent-color);
-  }
-
-  .page-header {
-    margin-bottom: 2rem;
-  }
-
-  .page-header h1 {
-    margin: 0.5rem 0 0 0;
-  }
-
-  .subtitle {
-    color: var(--text-secondary);
-    margin-top: 0.5rem;
+  .ui-config-container {
+    max-width: 900px;
   }
 
   .voting-methods {
@@ -54,13 +35,6 @@ const { slug } = Astro.params;
     gap: 1.25rem;
   }
 
-  .method-card {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: 0.75rem;
-    padding: 1.25rem;
-  }
-
   .method-card.disabled {
     opacity: 0.5;
   }
@@ -85,13 +59,13 @@ const { slug } = Astro.params;
     font-weight: normal;
   }
 
-  .complexity.simple { background: #28a745; color: white; }
-  .complexity.moderate { background: #ffc107; color: #000; }
-  .complexity.advanced { background: #dc3545; color: white; }
+  .complexity.simple { background: var(--color-success); color: var(--color-on-primary); }
+  .complexity.moderate { background: var(--color-warning); color: var(--color-on-primary); }
+  .complexity.advanced { background: var(--color-error); color: var(--color-on-primary); }
 
   .method-info p {
     margin: 0;
-    color: var(--text-secondary);
+    color: var(--color-text-muted);
     font-size: 0.9rem;
   }
 
@@ -117,7 +91,7 @@ const { slug } = Astro.params;
     position: absolute;
     cursor: pointer;
     inset: 0;
-    background: var(--border-color);
+    background: var(--color-border);
     border-radius: 26px;
     transition: 0.3s;
   }
@@ -129,13 +103,13 @@ const { slug } = Astro.params;
     width: 20px;
     left: 3px;
     bottom: 3px;
-    background: white;
+    background: var(--color-surface);
     border-radius: 50%;
     transition: 0.3s;
   }
 
   input:checked + .toggle-slider {
-    background: var(--accent-color);
+    background: var(--color-primary);
   }
 
   input:checked + .toggle-slider:before {
@@ -143,8 +117,8 @@ const { slug } = Astro.params;
   }
 
   .default-badge {
-    background: var(--accent-color);
-    color: white;
+    background: var(--color-primary);
+    color: var(--color-on-primary);
     padding: 0.2rem 0.6rem;
     border-radius: 1rem;
     font-size: 0.75rem;
@@ -153,15 +127,15 @@ const { slug } = Astro.params;
   .loading {
     text-align: center;
     padding: 2rem;
-    color: var(--text-secondary);
+    color: var(--color-text-muted);
   }
 
   .error-message {
-    background: #dc354520;
-    border: 1px solid #dc3545;
+    background: var(--color-error-muted);
+    border: 1px solid var(--color-error);
     padding: 1rem;
-    border-radius: 0.5rem;
-    color: #dc3545;
+    border-radius: var(--radius-md);
+    color: var(--color-error);
   }
 </style>
 
@@ -220,7 +194,7 @@ const { slug } = Astro.params;
       const methods = await res.json();
 
       container.innerHTML = methods.map(m => `
-        <div class="method-card ${m.is_enabled ? '' : 'disabled'}" data-id="${m.voting_method.id}">
+        <div class="method-card ui-card ui-card-soft ui-card-pad-md ${m.is_enabled ? '' : 'disabled'}" data-id="${m.voting_method.id}">
           <div class="method-header">
             <div class="method-info">
               <h3>