From 6e2f34d707fadccbab8f054934e4dc7b9aa4d528 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 09:40:09 +0100
Subject: [PATCH] ux: modernize admin voting UI

---
 frontend/src/pages/admin/voting.astro | 45 ++++++---------------------
 1 file changed, 10 insertions(+), 35 deletions(-)

diff --git a/frontend/src/pages/admin/voting.astro b/frontend/src/pages/admin/voting.astro
index c501fd8..e037363 100644
--- a/frontend/src/pages/admin/voting.astro
+++ b/frontend/src/pages/admin/voting.astro
@@ -10,14 +10,14 @@ import { API_BASE } from '../../lib/api';
     <AdminNav currentPage="/admin/voting" />
 
     <main class="admin-content">
-      <header class="page-header">
+      <header class="ui-page-header">
         <div class="header-content">
           <div class="header-icon">
             <svg class="icon icon-xl"><use href="#icon-vote-cast"/></svg>
           </div>
-          <div>
+          <div class="ui-page-title">
             <h1>Voting Methods</h1>
-            <p class="subtitle">Configure how your communities make decisions</p>
+            <p class="ui-subtitle">Configure how your communities make decisions</p>
           </div>
         </div>
       </header>
@@ -29,7 +29,7 @@ import { API_BASE } from '../../lib/api';
           Understanding Voting Methods
         </h2>
         <div class="comparison-grid">
-          <div class="comparison-card" data-method="approval">
+          <div class="comparison-card ui-card ui-card-pad-md" data-method="approval">
             <div class="card-icon" style="--method-color: #22c55e;">
               <svg class="icon icon-lg"><use href="#icon-approval"/></svg>
             </div>
@@ -41,7 +41,7 @@ import { API_BASE } from '../../lib/api';
               <span class="dot"></span>
             </div>
           </div>
-          <div class="comparison-card" data-method="ranked_choice">
+          <div class="comparison-card ui-card ui-card-pad-md" data-method="ranked_choice">
             <div class="card-icon" style="--method-color: #3b82f6;">
               <svg class="icon icon-lg"><use href="#icon-ranked-choice"/></svg>
             </div>
@@ -53,7 +53,7 @@ import { API_BASE } from '../../lib/api';
               <span class="dot"></span>
             </div>
           </div>
-          <div class="comparison-card" data-method="schulze">
+          <div class="comparison-card ui-card ui-card-pad-md" data-method="schulze">
             <div class="card-icon" style="--method-color: #8b5cf6;">
               <svg class="icon icon-lg"><use href="#icon-schulze"/></svg>
             </div>
@@ -65,7 +65,7 @@ import { API_BASE } from '../../lib/api';
               <span class="dot filled"></span>
             </div>
           </div>
-          <div class="comparison-card" data-method="star">
+          <div class="comparison-card ui-card ui-card-pad-md" data-method="star">
             <div class="card-icon" style="--method-color: #f59e0b;">
               <svg class="icon icon-lg"><use href="#icon-star"/></svg>
             </div>
@@ -77,7 +77,7 @@ import { API_BASE } from '../../lib/api';
               <span class="dot"></span>
             </div>
           </div>
-          <div class="comparison-card" data-method="quadratic">
+          <div class="comparison-card ui-card ui-card-pad-md" data-method="quadratic">
             <div class="card-icon" style="--method-color: #ec4899;">
               <svg class="icon icon-lg"><use href="#icon-quadratic"/></svg>
             </div>
@@ -118,7 +118,7 @@ import { API_BASE } from '../../lib/api';
           </h2>
           <p>Configure the default deliberation workflow for proposals</p>
         </div>
-        <div class="phase-config" id="phase-config">
+        <div class="phase-config ui-card ui-card-pad-md" id="phase-config">
           <div class="phase-flow">
             <div class="phase-step">
               <div class="phase-icon inform">
@@ -184,10 +184,6 @@ import { API_BASE } from '../../lib/api';
     max-width: 1000px;
   }
 
-  .page-header {
-    margin-bottom: 2rem;
-  }
-
   .header-content {
     display: flex;
     align-items: center;
@@ -205,16 +201,6 @@ import { API_BASE } from '../../lib/api';
     color: var(--color-primary);
   }
 
-  .page-header h1 {
-    margin: 0 0 0.25rem;
-    font-size: 1.75rem;
-  }
-
-  .subtitle {
-    color: var(--color-text-muted);
-    margin: 0;
-  }
-
   /* Comparison Section */
   .comparison-section {
     margin-bottom: 2.5rem;
@@ -235,10 +221,6 @@ import { API_BASE } from '../../lib/api';
   }
 
   .comparison-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: 12px;
-    padding: 1.25rem;
     text-align: center;
     transition: all 0.2s ease;
     cursor: pointer;
@@ -324,10 +306,6 @@ import { API_BASE } from '../../lib/api';
     display: flex;
     align-items: center;
     gap: 1rem;
-    padding: 1rem 1.25rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: 12px;
     transition: all 0.15s ease;
   }
 
@@ -426,10 +404,7 @@ import { API_BASE } from '../../lib/api';
 
   /* Phase Flow */
   .phase-config {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: 16px;
-    padding: 1.5rem;
   }
 
   .phase-flow {
@@ -597,7 +572,7 @@ import { API_BASE } from '../../lib/api';
       container.innerHTML = methods.map(m => {
         const meta = methodIcons[m.name] || { icon: 'icon-vote-cast', color: 'var(--color-primary)' };
         return `
-          <div class="method-row ${m.is_active ? '' : 'disabled'}" data-id="${m.id}">
+          <div class="method-row ui-card ui-card-soft ui-card-pad-md ${m.is_active ? '' : 'disabled'}" data-id="${m.id}">
             <div class="method-icon" style="background: color-mix(in srgb, ${meta.color} 15%, transparent); color: ${meta.color};">
               <svg class="icon"><use href="#${meta.icon}"/></svg>
             </div>