ux: refactor dashboard to shared ui primitives

This commit is contained in:
Marco Allegretti 2026-01-29 20:24:31 +01:00
parent 09efdab83b
commit ee96360354

View file

@ -150,7 +150,7 @@ import { API_BASE as apiBase } from '../lib/api';
const safeEmail = escapeHtml(user.email || ''); const safeEmail = escapeHtml(user.email || '');
container.innerHTML = ` container.innerHTML = `
<div class="hero ui-card ui-card-glass"> <div class="hero ui-card ui-card-glass ui-card-pad-md">
<div class="hero-top"> <div class="hero-top">
<div> <div>
<h1 class="hero-title">Welcome, ${safeName}!</h1> <h1 class="hero-title">Welcome, ${safeName}!</h1>
@ -238,7 +238,7 @@ import { API_BASE as apiBase } from '../lib/api';
</div> </div>
</details> </details>
<div class="account ui-card"> <div class="account ui-card ui-card-pad-md">
<div class="account-row"> <div class="account-row">
<div> <div>
<div class="account-title">Account</div> <div class="account-title">Account</div>
@ -290,9 +290,9 @@ import { API_BASE as apiBase } from '../lib/api';
let safeLink = String(a.link || '#'); let safeLink = String(a.link || '#');
if (!safeLink.startsWith('/')) safeLink = '#'; if (!safeLink.startsWith('/')) safeLink = '#';
return ` return `
<a href="${safeLink}" class="activity-item"> <a href="${safeLink}" class="list-item">
<span class="ui-pill type-${typeClass}">${type}</span> <span class="ui-pill type-${typeClass}">${type}</span>
<span class="activity-title">${safeTitle}</span> <span class="item-title">${safeTitle}</span>
</a> </a>
`; `;
}).join(''); }).join('');
@ -377,7 +377,6 @@ import { API_BASE as apiBase } from '../lib/api';
<style> <style>
.hero { .hero {
padding: 1.25rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -423,10 +422,6 @@ import { API_BASE as apiBase } from '../lib/api';
min-height: 72px; min-height: 72px;
} }
.account {
padding: 1rem 1.1rem;
}
.account-row { .account-row {
display: flex; display: flex;
align-items: center; align-items: center;
@ -477,32 +472,9 @@ import { API_BASE as apiBase } from '../lib/api';
gap: 0.35rem; gap: 0.35rem;
} }
.activity-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-border);
text-decoration: none;
color: var(--color-text);
transition: color 140ms ease;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-item:hover .activity-title {
color: var(--color-primary);
}
.type-proposal { background: var(--color-success); color: var(--color-on-primary); } .type-proposal { background: var(--color-success); color: var(--color-on-primary); }
.type-community { background: var(--color-secondary); color: var(--color-on-primary); } .type-community { background: var(--color-secondary); color: var(--color-on-primary); }
.activity-title {
font-size: 0.875rem;
}
.status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); } .status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
.status-discussion { background: var(--color-info); 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); } .status-voting { background: var(--color-success); color: var(--color-on-primary); }