ui: centralize ui-pill primitive

This commit is contained in:
Marco Allegretti 2026-01-29 16:41:42 +01:00
parent c6529c6996
commit c7791611a5
2 changed files with 18 additions and 19 deletions

View file

@ -345,6 +345,20 @@
font-weight: var(--ui-font-weight-bold);
}
.ui-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.125rem 0.5rem;
border-radius: 999px;
font-size: 0.625rem;
font-weight: var(--ui-font-weight-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
white-space: nowrap;
}
:where(input.ui-input, select.ui-select) {
width: 100%;
border-radius: var(--radius-md);

View file

@ -189,7 +189,7 @@ import { API_BASE as apiBase } from '../lib/api';
if (!safeLink.startsWith('/')) safeLink = '#';
return `
<a href="${safeLink}" class="activity-item">
<span class="activity-type type-${typeClass}">${type}</span>
<span class="ui-pill type-${typeClass}">${type}</span>
<span class="activity-title">${safeTitle}</span>
</a>
`;
@ -218,12 +218,13 @@ import { API_BASE as apiBase } from '../lib/api';
}
container.innerHTML = proposals.slice(0, 7).map((p) => {
const safeTitle = escapeHtml(p.title);
const safeTitle = escapeHtml(p.title || 'Untitled');
const status = normalizeStatus(p.status);
return `
<a href="/proposals/${encodeURIComponent(String(p.id))}" class="list-item">
<span class="item-title">${safeTitle}</span>
<span class="item-status status-${status}">${escapeHtml(status)}</span>
<span class="ui-pill status-${status}">${escapeHtml(status)}</span>
</a>
`;
}).join('');
@ -422,14 +423,6 @@ import { API_BASE as apiBase } from '../lib/api';
color: var(--color-primary);
}
.activity-type {
font-size: 0.625rem;
padding: 0.125rem 0.5rem;
border-radius: 4px;
text-transform: uppercase;
font-weight: 600;
}
.type-proposal { background: var(--color-success); color: var(--color-on-primary); }
.type-community { background: var(--color-secondary); color: var(--color-on-primary); }
@ -441,14 +434,6 @@ import { API_BASE as apiBase } from '../lib/api';
flex: 1;
}
.item-status {
font-size: 0.625rem;
padding: 0.125rem 0.5rem;
border-radius: 4px;
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); }