From d0afeecc627f9dc0a1f1c9ac922d6e0a49e03575 Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Thu, 29 Jan 2026 19:56:46 +0100
Subject: [PATCH] ux: add ui-btn variants

---
 .../components/ui/DesignSystemStyles.astro    | 19 +++++++++++++++++++
 .../communities/[slug]/proposals/new.astro    | 15 ++-------------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 4d508e1..4a3ecae 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -371,17 +371,36 @@
     justify-content: center;
     gap: 0.5rem;
     padding: 0.625rem 1rem;
+    border: 1px solid transparent;
     border-radius: var(--radius-sm);
     font-weight: var(--ui-font-weight-semibold);
     font-size: var(--ui-font-size-sm);
     line-height: 1;
     white-space: nowrap;
+    text-decoration: none;
     cursor: pointer;
     user-select: none;
     -webkit-tap-highlight-color: transparent;
     transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), opacity var(--motion-fast) var(--easing-standard);
   }
 
+  .ui-btn-sm {
+    padding: 0.45rem 0.75rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+  }
+
+  .ui-btn-icon {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border-radius: var(--radius-sm);
+  }
+
+  .ui-btn-dashed {
+    border-style: dashed;
+  }
+
   .ui-btn-lg {
     padding: 0.875rem 1.75rem;
     border-radius: var(--radius-md);
diff --git a/frontend/src/pages/communities/[slug]/proposals/new.astro b/frontend/src/pages/communities/[slug]/proposals/new.astro
index b6116d4..0e83cb9 100644
--- a/frontend/src/pages/communities/[slug]/proposals/new.astro
+++ b/frontend/src/pages/communities/[slug]/proposals/new.astro
@@ -28,7 +28,7 @@ const { slug } = Astro.params;
               <input type="text" name="option" placeholder="Option 2" required />
             </div>
           </div>
-          <button type="button" id="add-option" class="ui-btn ui-btn-secondary create-add-btn">+ Add Option</button>
+          <button type="button" id="add-option" class="ui-btn ui-btn-secondary ui-btn-dashed">+ Add Option</button>
         </div>
         <div id="error" class="error"></div>
         <button type="submit" class="ui-btn ui-btn-primary create-submit-btn">Create Proposal</button>
@@ -55,7 +55,7 @@ const { slug } = Astro.params;
     div.className = 'option-input';
     div.innerHTML = `
       <input type="text" name="option" placeholder="Option ${optionCount}" required />
-      <button type="button" class="ui-btn ui-btn-danger create-remove-btn" onclick="this.parentElement.remove()">×</button>
+      <button type="button" class="ui-btn ui-btn-danger ui-btn-icon" onclick="this.parentElement.remove()">×</button>
     `;
     optionsContainer?.appendChild(div);
   });
@@ -186,17 +186,6 @@ const { slug } = Astro.params;
     flex: 1;
   }
 
-  .create-add-btn {
-    border-style: dashed;
-    margin-top: 0.5rem;
-  }
-
-  .create-remove-btn {
-    width: 36px;
-    padding: 0;
-    font-size: 1.25rem;
-  }
-
   .create-submit-btn {
     width: 100%;
     margin-top: 1rem;