From 89b6e936e242c151c9a924205f335900955da60c Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 09:50:02 +0100
Subject: [PATCH] ux: enhance ui-form controls and dedupe settings forms

---
 .../components/ui/DesignSystemStyles.astro    |  9 ++++
 frontend/src/pages/admin/settings.astro       | 14 +----
 .../pages/communities/[slug]/settings.astro   | 52 +++----------------
 3 files changed, 16 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 3e98eca..f095861 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -182,9 +182,18 @@
   }
 
   .ui-form .form-group {
+    margin-bottom: var(--ui-form-group-mb, 0);
+  }
+
+  .ui-form .form-group:last-child {
     margin-bottom: 0;
   }
 
+  .ui-form .form-group :where(input, textarea, select) {
+    width: 100%;
+    max-width: var(--ui-form-control-max-width, 100%);
+  }
+
   .ui-form .form-group label {
     display: block;
     margin-bottom: 0.5rem;
diff --git a/frontend/src/pages/admin/settings.astro b/frontend/src/pages/admin/settings.astro
index f6098b3..2b5683b 100644
--- a/frontend/src/pages/admin/settings.astro
+++ b/frontend/src/pages/admin/settings.astro
@@ -20,7 +20,7 @@ import { API_BASE as apiBase } from '../../lib/api';
       <div id="loading">Loading settings...</div>
       <div id="error" class="error-box" style="display: none;"></div>
 
-      <form id="settings-form" class="ui-form" style="display: none;">
+      <form id="settings-form" class="ui-form" style="--ui-form-control-max-width: 400px; display: none;">
         <!-- General Settings -->
         <section class="settings-section ui-card ui-card-soft ui-card-pad-md">
           <h2>General</h2>
@@ -145,18 +145,6 @@ import { API_BASE as apiBase } from '../../lib/api';
     margin-bottom: 0.5rem;
   }
 
-  .form-group input[type="text"],
-  .form-group select {
-    width: 100%;
-    max-width: 400px;
-    padding: 0.75rem;
-    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;
diff --git a/frontend/src/pages/communities/[slug]/settings.astro b/frontend/src/pages/communities/[slug]/settings.astro
index c07e528..feae364 100644
--- a/frontend/src/pages/communities/[slug]/settings.astro
+++ b/frontend/src/pages/communities/[slug]/settings.astro
@@ -20,9 +20,9 @@ const { slug } = Astro.params;
       You don't have permission to manage this community's settings.
     </div>
 
-    <form id="settings-form" style="display: none;">
+    <form id="settings-form" class="ui-form" style="--ui-form-control-max-width: 400px; display: none;">
       <!-- Membership -->
-      <section class="settings-section">
+      <section class="settings-section ui-card ui-card-soft ui-card-pad-md">
         <h2>Membership</h2>
         
         <div class="form-group">
@@ -37,7 +37,7 @@ const { slug } = Astro.params;
       </section>
 
       <!-- Moderation -->
-      <section class="settings-section">
+      <section class="settings-section ui-card ui-card-soft ui-card-pad-md">
         <h2>Moderation</h2>
         
         <div class="form-group">
@@ -52,7 +52,7 @@ const { slug } = Astro.params;
       </section>
 
       <!-- Governance -->
-      <section class="settings-section">
+      <section class="settings-section ui-card ui-card-soft ui-card-pad-md">
         <h2>Governance</h2>
         
         <div class="form-group">
@@ -68,7 +68,7 @@ const { slug } = Astro.params;
       </section>
 
       <!-- Plugins -->
-      <section class="settings-section">
+      <section class="settings-section ui-card ui-card-soft ui-card-pad-md">
         <h2>Plugins</h2>
         
         <div class="form-group">
@@ -88,7 +88,7 @@ const { slug } = Astro.params;
       </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>
@@ -127,10 +127,7 @@ const { slug } = Astro.params;
   }
 
   .settings-section {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: 8px;
-    padding: 1.5rem;
     margin-bottom: 1.5rem;
   }
 
@@ -157,22 +154,6 @@ const { slug } = Astro.params;
     color: var(--color-text);
   }
 
-  .form-group select {
-    width: 100%;
-    max-width: 400px;
-    padding: 0.75rem;
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    font-size: 1rem;
-    background: var(--color-bg);
-    color: var(--color-text);
-  }
-
-  .form-group select:focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
-
   .hint {
     font-size: 0.9rem;
     color: var(--color-text-muted);
@@ -190,27 +171,6 @@ const { slug } = Astro.params;
     margin-top: 1rem;
   }
 
-  .form-actions button {
-    padding: 0.75rem 2rem;
-    background: var(--color-primary);
-    color: var(--color-text-inverse);
-    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: var(--color-success);
     font-weight: 500;