From a8ea0c53fb3e68eff09d011c747da457d36551a6 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Fri, 30 Jan 2026 11:46:41 +0100
Subject: [PATCH] ux: normalize forms via ui-form

---
 .../communities/[slug]/proposals/new.astro    | 46 ++------------
 frontend/src/pages/communities/new.astro      | 60 +++----------------
 frontend/src/pages/settings.astro             | 52 +---------------
 3 files changed, 14 insertions(+), 144 deletions(-)

diff --git a/frontend/src/pages/communities/[slug]/proposals/new.astro b/frontend/src/pages/communities/[slug]/proposals/new.astro
index fa3db93..8561a58 100644
--- a/frontend/src/pages/communities/[slug]/proposals/new.astro
+++ b/frontend/src/pages/communities/[slug]/proposals/new.astro
@@ -9,16 +9,16 @@ const { slug } = Astro.params;
   <section class="create-page">
     <div class="create-card ui-card ui-card-pad-xl">
       <h1>Create Proposal</h1>
-      <form id="create-form">
-        <div class="field">
+      <form id="create-form" class="ui-form" style="--ui-form-group-mb: 1.25rem;">
+        <div class="form-group">
           <label for="title">Title</label>
           <input type="text" id="title" name="title" required />
         </div>
-        <div class="field">
+        <div class="form-group">
           <label for="description">Description</label>
           <textarea id="description" name="description" rows="5" required></textarea>
         </div>
-        <div class="field">
+        <div class="form-group">
           <label>Options</label>
           <div id="options-container">
             <div class="option-input">
@@ -128,44 +128,6 @@ const { slug } = Astro.params;
     margin-bottom: 1.5rem;
   }
 
-  .field {
-    margin-bottom: 1.25rem;
-  }
-
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--color-text-muted);
-  }
-
-  input, textarea {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-size: 1rem;
-    font-family: inherit;
-  }
-
-  input:focus, textarea:focus, select:focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
-
-  select {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-size: 1rem;
-    cursor: pointer;
-  }
-
   .method-hint {
     font-size: 0.75rem;
     color: var(--color-text-muted);
diff --git a/frontend/src/pages/communities/new.astro b/frontend/src/pages/communities/new.astro
index fa305ec..f0fa440 100644
--- a/frontend/src/pages/communities/new.astro
+++ b/frontend/src/pages/communities/new.astro
@@ -7,22 +7,22 @@ import { API_BASE as apiBase } from '../../lib/api';
   <section class="create-page">
     <div class="create-card ui-card ui-card-pad-xl">
       <h1>Create Community</h1>
-      <form id="create-form">
-        <div class="field">
+      <form id="create-form" class="ui-form" style="--ui-form-group-mb: 1rem;">
+        <div class="form-group">
           <label for="name">Community Name</label>
           <input type="text" id="name" name="name" required />
         </div>
-        <div class="field">
+        <div class="form-group">
           <label for="slug">URL Slug</label>
           <input type="text" id="slug" name="slug" required pattern="[a-z0-9-]+" />
-          <small>Lowercase letters, numbers, and hyphens only</small>
+          <small class="help-text">Lowercase letters, numbers, and hyphens only</small>
         </div>
-        <div class="field">
+        <div class="form-group">
           <label for="description">Description (optional)</label>
           <textarea id="description" name="description" rows="3"></textarea>
         </div>
         <div id="error" class="error"></div>
-        <button type="submit">Create Community</button>
+        <button type="submit" class="ui-btn ui-btn-primary create-submit-btn">Create Community</button>
       </form>
     </div>
   </section>
@@ -100,57 +100,11 @@ import { API_BASE as apiBase } from '../../lib/api';
     margin-bottom: 1.5rem;
   }
 
-  .field {
-    margin-bottom: 1rem;
-  }
-
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--color-text-muted);
-  }
-
-  input, textarea {
+  .create-submit-btn {
     width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-size: 1rem;
-    font-family: inherit;
-  }
-
-  input:focus, textarea:focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
-
-  small {
-    display: block;
-    margin-top: 0.25rem;
-    color: var(--color-text-muted);
-    font-size: 0.75rem;
-  }
-
-  button {
-    width: 100%;
-    padding: 0.75rem;
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border: none;
-    border-radius: 6px;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
     margin-top: 1rem;
   }
 
-  button:hover {
-    background: var(--color-primary-hover);
-  }
-
   .error {
     color: var(--color-error);
     font-size: 0.875rem;
diff --git a/frontend/src/pages/settings.astro b/frontend/src/pages/settings.astro
index 0069b2e..2f02fb9 100644
--- a/frontend/src/pages/settings.astro
+++ b/frontend/src/pages/settings.astro
@@ -51,7 +51,7 @@ import { API_BASE as apiBase } from '../lib/api';
         .join('');
 
       container.innerHTML = `
-        <div class="form-section ui-card ui-card-pad-lg">
+        <div class="form-section ui-card ui-card-pad-lg ui-form">
           <h2>Appearance</h2>
           
           <div class="form-group">
@@ -74,7 +74,7 @@ import { API_BASE as apiBase } from '../lib/api';
         </div>
 
         <form id="profile-form" class="settings-form">
-          <div class="form-section ui-card ui-card-pad-lg">
+          <div class="form-section ui-card ui-card-pad-lg ui-form">
             <h2>Profile</h2>
             
             <div class="form-group">
@@ -181,6 +181,7 @@ import { API_BASE as apiBase } from '../lib/api';
   .settings-page {
     padding: 2rem 0;
     max-width: 500px;
+    --ui-form-group-mb: 1.25rem;
   }
 
   h1 {
@@ -204,37 +205,6 @@ import { API_BASE as apiBase } from '../lib/api';
     margin-bottom: 1rem;
   }
 
-  .form-group {
-    margin-bottom: 1.25rem;
-  }
-
-  .form-group label {
-    display: block;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin-bottom: 0.5rem;
-  }
-
-  .form-group input {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-size: 1rem;
-  }
-
-  .form-group input:focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
-
-  .form-group input:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
   .hint {
     font-size: 0.75rem;
     color: var(--color-text-muted);
@@ -260,25 +230,9 @@ import { API_BASE as apiBase } from '../lib/api';
   }
 
   .theme-select {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-size: 1rem;
     cursor: pointer;
   }
 
-  .theme-select:hover {
-    border-color: var(--color-border-hover);
-  }
-
-  .theme-select:focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
-
   .theme-preview {
     margin-top: 1rem;
     padding: 0.75rem;