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

---
 .../components/ui/DesignSystemStyles.astro    |  1 +
 .../src/pages/communities/[slug]/index.astro  | 22 +--------------
 frontend/src/pages/proposals/[id].astro       | 27 +------------------
 3 files changed, 3 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 98374df..f2011cd 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -168,6 +168,7 @@
   }
 
   :where(input, textarea, select):focus-visible {
+    outline: none;
     border-color: var(--color-primary);
   }
 
diff --git a/frontend/src/pages/communities/[slug]/index.astro b/frontend/src/pages/communities/[slug]/index.astro
index c663332..e9ed134 100644
--- a/frontend/src/pages/communities/[slug]/index.astro
+++ b/frontend/src/pages/communities/[slug]/index.astro
@@ -269,7 +269,7 @@ const { slug } = Astro.params;
     modal.innerHTML = `
       <div class="modal-content ui-card ui-card-pad-xl">
         <h2>Edit Community</h2>
-        <form id="edit-community-form">
+        <form id="edit-community-form" class="ui-form" style="--ui-form-group-mb: 1rem;">
           <div class="form-group">
             <label for="edit-name">Name</label>
             <input type="text" id="edit-name" value="${community.name}" required />
@@ -462,26 +462,6 @@ const { slug } = Astro.params;
     margin-bottom: 1.5rem;
   }
 
-  .modal-content .form-group {
-    margin-bottom: 1rem;
-  }
-
-  .modal-content label {
-    display: block;
-    font-size: 0.875rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .modal-content input, .modal-content textarea {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-family: inherit;
-  }
-
   .modal-actions {
     display: flex;
     gap: 1rem;
diff --git a/frontend/src/pages/proposals/[id].astro b/frontend/src/pages/proposals/[id].astro
index e34aed4..40357ee 100644
--- a/frontend/src/pages/proposals/[id].astro
+++ b/frontend/src/pages/proposals/[id].astro
@@ -545,7 +545,7 @@ const proposalId = id ?? '';
     modal.innerHTML = `
       <div class="modal-content ui-card ui-card-pad-xl">
         <h2>Edit Proposal</h2>
-        <form id="edit-form">
+        <form id="edit-form" class="ui-form" style="--ui-form-group-mb: 1rem;">
           <div class="form-group">
             <label for="edit-title">Title</label>
             <input type="text" id="edit-title" value="${data.proposal.title}" required />
@@ -806,31 +806,6 @@ const proposalId = id ?? '';
     margin-bottom: 1.5rem;
   }
 
-  .modal-content .form-group {
-    margin-bottom: 1rem;
-  }
-
-  .modal-content label {
-    display: block;
-    font-size: 0.875rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .modal-content input, .modal-content textarea {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-family: inherit;
-  }
-
-  .modal-content input:focus, .modal-content textarea:focus {
-    outline: none;
-    border-color: var(--color-primary);
-  }
-
   .modal-actions {
     display: flex;
     gap: 1rem;