From bc3440cdefadab3d230f4d04b7618e00b5c23c5f Mon Sep 17 00:00:00 2001
From: Marco Allegretti <mightymarco4@gmail.com>
Date: Thu, 29 Jan 2026 17:45:49 +0100
Subject: [PATCH] ui: use ui-pill for proposal status

---
 .../pages/communities/[slug]/proposals/index.astro    | 10 +---------
 frontend/src/pages/proposals.astro                    | 10 +---------
 frontend/src/pages/proposals/[id].astro               | 11 +----------
 3 files changed, 3 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/communities/[slug]/proposals/index.astro b/frontend/src/pages/communities/[slug]/proposals/index.astro
index e1df608..60d58c4 100644
--- a/frontend/src/pages/communities/[slug]/proposals/index.astro
+++ b/frontend/src/pages/communities/[slug]/proposals/index.astro
@@ -170,7 +170,7 @@ const { slug } = Astro.params;
         <a href="/proposals/${encodeURIComponent(String(p.id))}" class="proposal-card ui-card">
           <div class="proposal-header">
             <h3>${safeTitle}</h3>
-            <span class="status status-${statusKey}">${escapeHtml(statusKey)}</span>
+            <span class="ui-pill status-${statusKey}">${escapeHtml(statusKey)}</span>
           </div>
           ${createdAt ? `<div class="proposal-meta">Created ${escapeHtml(createdAt)}</div>` : ''}
           <p class="description">${safeDesc}${suffix}</p>
@@ -338,14 +338,6 @@ const { slug } = Astro.params;
     margin-bottom: 0.5rem;
   }
 
-  .status {
-    font-size: 0.75rem;
-    padding: 0.25rem 0.75rem;
-    border-radius: 999px;
-    text-transform: uppercase;
-    font-weight: 600;
-  }
-
   .status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
   .status-discussion { background: var(--color-info); color: var(--color-on-primary); }
   .status-voting { background: var(--color-success); color: var(--color-on-primary); }
diff --git a/frontend/src/pages/proposals.astro b/frontend/src/pages/proposals.astro
index 4dc32ee..adecc4d 100644
--- a/frontend/src/pages/proposals.astro
+++ b/frontend/src/pages/proposals.astro
@@ -65,7 +65,7 @@ import { API_BASE as apiBase } from '../lib/api';
       <a href="/proposals/${p.id}" class="proposal-card">
         <div class="proposal-header">
           <h3>${p.title}</h3>
-          <span class="status status-${p.status}">${p.status}</span>
+          <span class="ui-pill status-${p.status}">${p.status}</span>
         </div>
         <p class="community">in <span>${p.community_name}</span></p>
         <p class="description">${p.description.substring(0, 120)}${p.description.length > 120 ? '...' : ''}</p>
@@ -198,14 +198,6 @@ import { API_BASE as apiBase } from '../lib/api';
     font-size: 1.25rem;
   }
 
-  .status {
-    font-size: 0.75rem;
-    padding: 0.25rem 0.75rem;
-    border-radius: 999px;
-    text-transform: uppercase;
-    font-weight: 600;
-  }
-
   .status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
   .status-discussion { background: var(--color-info); color: var(--color-on-primary); }
   .status-voting { background: var(--color-success); color: var(--color-on-primary); }
diff --git a/frontend/src/pages/proposals/[id].astro b/frontend/src/pages/proposals/[id].astro
index a85ae0b..4e6fee4 100644
--- a/frontend/src/pages/proposals/[id].astro
+++ b/frontend/src/pages/proposals/[id].astro
@@ -95,7 +95,7 @@ const proposalId = id ?? '';
             <div class="hero-title">
               <h1>${safeTitle}</h1>
               <div class="hero-meta">
-                <span class="status status-${statusKey}">${escapeHtml(statusKey)}</span>
+                <span class="ui-pill status-${statusKey}">${escapeHtml(statusKey)}</span>
                 <span class="meta">
                   by <a href="/users/${encodeURIComponent(String(data.author_name))}" class="author-link">${safeAuthor}</a>
                   on ${new Date(data.proposal.created_at).toLocaleDateString()}
@@ -611,15 +611,6 @@ const proposalId = id ?? '';
     flex-wrap: wrap;
   }
 
-  .status {
-    font-size: 0.75rem;
-    padding: 0.25rem 0.75rem;
-    border-radius: 999px;
-    text-transform: uppercase;
-    font-weight: 600;
-    white-space: nowrap;
-  }
-
   .status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
   .status-discussion { background: var(--color-info); color: var(--color-on-primary); }
   .status-voting { background: var(--color-success); color: var(--color-on-primary); }