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

---
 frontend/src/pages/admin/settings.astro | 122 +++++-------------------
 1 file changed, 24 insertions(+), 98 deletions(-)

diff --git a/frontend/src/pages/admin/settings.astro b/frontend/src/pages/admin/settings.astro
index b5894b6..f6098b3 100644
--- a/frontend/src/pages/admin/settings.astro
+++ b/frontend/src/pages/admin/settings.astro
@@ -9,18 +9,20 @@ import { API_BASE as apiBase } from '../../lib/api';
   <div class="admin-container">
     <AdminNav currentPage="/admin/settings" />
 
-    <main class="admin-main">
-      <header class="admin-header">
-        <h1>Instance Settings</h1>
-        <p>Configure global platform settings</p>
+    <main class="admin-content">
+      <header class="ui-page-header">
+        <div class="ui-page-title">
+          <h1>Instance Settings</h1>
+          <p class="ui-subtitle">Configure global platform settings</p>
+        </div>
       </header>
 
       <div id="loading">Loading settings...</div>
       <div id="error" class="error-box" style="display: none;"></div>
 
-      <form id="settings-form" style="display: none;">
+      <form id="settings-form" class="ui-form" style="display: none;">
         <!-- General Settings -->
-        <section class="settings-section">
+        <section class="settings-section ui-card ui-card-soft ui-card-pad-md">
           <h2>General</h2>
           
           <div class="form-group">
@@ -30,7 +32,7 @@ import { API_BASE as apiBase } from '../../lib/api';
         </section>
 
         <!-- Platform Mode -->
-        <section class="settings-section">
+        <section class="settings-section ui-card ui-card-soft ui-card-pad-md">
           <h2>Community Creation</h2>
           
           <div class="form-group">
@@ -45,7 +47,7 @@ import { API_BASE as apiBase } from '../../lib/api';
         </section>
 
         <!-- Registration -->
-        <section class="settings-section">
+        <section class="settings-section ui-card ui-card-soft ui-card-pad-md">
           <h2>Registration</h2>
           
           <div class="form-group">
@@ -66,7 +68,7 @@ import { API_BASE as apiBase } from '../../lib/api';
         </section>
 
         <!-- Defaults -->
-        <section class="settings-section">
+        <section class="settings-section ui-card ui-card-soft ui-card-pad-md">
           <h2>Defaults</h2>
           
           <div class="form-group">
@@ -98,7 +100,7 @@ import { API_BASE as apiBase } from '../../lib/api';
         </section>
 
         <div class="form-actions">
-          <button type="submit" id="save-btn">Save Settings</button>
+          <button type="submit" id="save-btn" class="ui-btn ui-btn-primary">Save Settings</button>
           <span id="save-status"></span>
         </div>
       </form>
@@ -109,81 +111,24 @@ import { API_BASE as apiBase } from '../../lib/api';
 <style>
   .admin-container {
     display: flex;
-    min-height: 100vh;
+    min-height: calc(100vh - 60px);
   }
 
-  .admin-sidebar {
-    width: 240px;
-    background: #1a1a2e;
-    color: white;
-    padding: 1.5rem;
-    flex-shrink: 0;
-  }
-
-  .admin-sidebar h2 {
-    margin: 0 0 1.5rem 0;
-    font-size: 1.25rem;
-    color: #667eea;
-  }
-
-  .admin-sidebar nav {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .admin-sidebar a {
-    color: #aaa;
-    text-decoration: none;
-    padding: 0.75rem 1rem;
-    border-radius: 8px;
-    transition: all 0.2s;
-  }
-
-  .admin-sidebar a:hover {
-    background: rgba(255,255,255,0.1);
-    color: white;
-  }
-
-  .admin-sidebar a.active {
-    background: #667eea;
-    color: white;
-  }
-
-  .admin-main {
+  .admin-content {
     flex: 1;
     padding: 2rem;
-    background: #f5f5f5;
-  }
-
-  .admin-header {
-    margin-bottom: 2rem;
-  }
-
-  .admin-header h1 {
-    margin: 0;
-    color: #333;
-  }
-
-  .admin-header p {
-    margin: 0.5rem 0 0 0;
-    color: #666;
   }
 
   .settings-section {
-    background: white;
     border-radius: 8px;
-    padding: 1.5rem;
     margin-bottom: 1.5rem;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
 
   .settings-section h2 {
     margin: 0 0 1rem 0;
     font-size: 1.1rem;
-    color: #333;
     padding-bottom: 0.75rem;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--color-border);
   }
 
   .form-group {
@@ -198,7 +143,6 @@ import { API_BASE as apiBase } from '../../lib/api';
     display: block;
     font-weight: 500;
     margin-bottom: 0.5rem;
-    color: #333;
   }
 
   .form-group input[type="text"],
@@ -206,15 +150,17 @@ import { API_BASE as apiBase } from '../../lib/api';
     width: 100%;
     max-width: 400px;
     padding: 0.75rem;
-    border: 2px solid #e0e0e0;
+    border: 1px solid var(--color-border);
     border-radius: 8px;
     font-size: 1rem;
+    background: var(--color-bg);
+    color: var(--color-text);
   }
 
   .form-group input:focus,
   .form-group select:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: var(--color-primary);
   }
 
   .checkbox-label {
@@ -223,6 +169,7 @@ import { API_BASE as apiBase } from '../../lib/api';
     gap: 0.5rem;
     cursor: pointer;
     font-weight: normal !important;
+    color: var(--color-text);
   }
 
   .checkbox-label input {
@@ -237,42 +184,21 @@ import { API_BASE as apiBase } from '../../lib/api';
     margin-top: 1rem;
   }
 
-  .form-actions button {
-    padding: 0.75rem 2rem;
-    background: #667eea;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: opacity 0.2s;
-  }
-
-  .form-actions button:hover {
-    opacity: 0.9;
-  }
-
-  .form-actions button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
   #save-status {
-    color: #2e7d32;
+    color: var(--color-success);
     font-weight: 500;
   }
 
   .error-box {
-    background: #ffebee;
-    color: #c62828;
+    background: color-mix(in srgb, var(--color-error) 18%, transparent);
+    color: var(--color-error);
     padding: 1rem;
     border-radius: 8px;
     margin-bottom: 1rem;
   }
 
   #loading {
-    color: #666;
+    color: var(--color-text-muted);
     padding: 2rem;
     text-align: center;
   }