From d9ace2d201af7b8f41dc76e84681f66cdfe7fc90 Mon Sep 17 00:00:00 2001 From: Marco Allegretti Date: Thu, 29 Jan 2026 19:49:44 +0100 Subject: [PATCH] ux: migrate app/admin buttons to ui-btn --- .../components/moderation/LedgerViewer.astro | 64 ++----------------- frontend/src/layouts/Layout.astro | 23 +------ frontend/src/layouts/PublicLayout.astro | 31 +-------- frontend/src/pages/admin/approvals.astro | 43 ++----------- frontend/src/pages/admin/invitations.astro | 40 ++---------- frontend/src/pages/admin/voting.astro | 32 +++------- .../src/pages/communities/[slug]/index.astro | 22 +------ .../communities/[slug]/proposals/new.astro | 47 +++----------- .../communities/[slug]/voting-config.astro | 19 +----- frontend/src/pages/notifications.astro | 29 +-------- frontend/src/pages/proposals/[id].astro | 22 +------ frontend/src/pages/settings.astro | 35 ++-------- 12 files changed, 56 insertions(+), 351 deletions(-) diff --git a/frontend/src/components/moderation/LedgerViewer.astro b/frontend/src/components/moderation/LedgerViewer.astro index 5514796..0b285bf 100644 --- a/frontend/src/components/moderation/LedgerViewer.astro +++ b/frontend/src/components/moderation/LedgerViewer.astro @@ -1,7 +1,7 @@ --- export interface Props { - communityId?; - compact?; + communityId?: string | number; + compact?: boolean; } const { communityId, compact = false } = Astro.props; @@ -21,11 +21,11 @@ import { API_BASE } from '../../lib/api';
- - @@ -85,9 +85,9 @@ import { API_BASE } from '../../lib/api';
- + Page 1 - +
@@ -149,39 +149,6 @@ import { API_BASE } from '../../lib/api'; gap: 0.75rem; } - .btn-verify, .btn-export { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 1rem; - border-radius: 8px; - font-size: 0.875rem; - cursor: pointer; - transition: all 0.15s ease; - } - - .btn-verify { - background: transparent; - border: 1px solid var(--color-border); - color: var(--color-text); - } - - .btn-verify:hover { - background: var(--color-bg); - border-color: var(--color-success); - color: var(--color-success); - } - - .btn-export { - background: var(--color-primary); - border: none; - color: white; - } - - .btn-export:hover { - background: var(--color-primary-hover); - } - /* Chain Status */ .chain-status { display: flex; @@ -398,25 +365,6 @@ import { API_BASE } from '../../lib/api'; border-top: 1px solid var(--color-border); } - .btn-page { - padding: 0.5rem 1rem; - border: 1px solid var(--color-border); - border-radius: 6px; - background: transparent; - color: var(--color-text); - cursor: pointer; - font-size: 0.875rem; - } - - .btn-page:disabled { - opacity: 0.5; - cursor: not-allowed; - } - - .btn-page:not(:disabled):hover { - background: var(--color-bg); - } - .page-info { font-size: 0.875rem; color: var(--color-text-muted); diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro index c2419c5..466829a 100644 --- a/frontend/src/layouts/Layout.astro +++ b/frontend/src/layouts/Layout.astro @@ -93,7 +93,7 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
@@ -258,27 +258,6 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S color: var(--color-text); } - .btn-register { - background: var(--color-primary); - color: var(--color-text-inverse) !important; - padding: 0.5rem 1.25rem; - border-radius: var(--radius-sm); - font-weight: 600; - font-size: 0.875rem; - transition: all var(--motion-fast) var(--easing-standard); - } - - .btn-register:hover { - background: var(--color-primary-hover); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(129, 140, 248, 0.25); - } - - .btn-register:active { - transform: translateY(0); - box-shadow: var(--shadow-sm); - } - .user-name { color: var(--color-text); font-weight: 500; diff --git a/frontend/src/layouts/PublicLayout.astro b/frontend/src/layouts/PublicLayout.astro index 80b4e53..114be69 100644 --- a/frontend/src/layouts/PublicLayout.astro +++ b/frontend/src/layouts/PublicLayout.astro @@ -91,8 +91,8 @@ const defaultTheme = DEFAULT_THEME; Documentation
- Explore Demo - {!publicDemoSite ? : null} + Explore Demo + {!publicDemoSite ? Sign In : null}
@@ -216,33 +216,6 @@ const defaultTheme = DEFAULT_THEME; align-items: center; } - .btn-demo { - background: var(--color-primary); - color: var(--color-text-inverse); - padding: 0.5rem 1.25rem; - border-radius: var(--radius-sm); - font-weight: 600; - font-size: 0.875rem; - transition: all var(--motion-fast) var(--easing-standard); - } - - .btn-demo:hover { - background: var(--color-primary-hover); - color: var(--color-text-inverse); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(129, 140, 248, 0.25); - } - - .btn-login { - color: var(--color-text-muted); - font-size: 0.9375rem; - padding: 0.625rem 1rem; - } - - .btn-login:hover { - color: var(--color-text); - } - .public-main { flex: 1; } diff --git a/frontend/src/pages/admin/approvals.astro b/frontend/src/pages/admin/approvals.astro index fdb790d..a09eddb 100644 --- a/frontend/src/pages/admin/approvals.astro +++ b/frontend/src/pages/admin/approvals.astro @@ -91,8 +91,8 @@ import { API_BASE as apiBase } from '../../lib/api'; ${r.expires_at ? `Expires: ${new Date(r.expires_at).toLocaleDateString()}` : ''}
- - + +
`).join(''); @@ -141,8 +141,8 @@ import { API_BASE as apiBase } from '../../lib/api'; Requested: ${new Date(c.created_at).toLocaleDateString()}
- - + +
`).join(''); @@ -154,7 +154,7 @@ import { API_BASE as apiBase } from '../../lib/api'; } function setupActionButtons() { - document.querySelectorAll('.btn-approve').forEach(btn => { + document.querySelectorAll('.js-approve').forEach(btn => { btn.addEventListener('click', async () => { const type = btn.dataset.type; const id = btn.dataset.id; @@ -162,7 +162,7 @@ import { API_BASE as apiBase } from '../../lib/api'; }); }); - document.querySelectorAll('.btn-reject').forEach(btn => { + document.querySelectorAll('.js-reject').forEach(btn => { btn.addEventListener('click', async () => { const type = btn.dataset.type; const id = btn.dataset.id; @@ -172,7 +172,7 @@ import { API_BASE as apiBase } from '../../lib/api'; }); } - async function reviewItem(type, id, approve, reason?) { + async function reviewItem(type, id, approve, reason) { const endpoint = type === 'registration' ? `/api/approvals/registrations/${id}` : `/api/approvals/communities/${id}`; @@ -344,35 +344,6 @@ import { API_BASE as apiBase } from '../../lib/api'; flex-shrink: 0; } - .btn-approve { - padding: 0.5rem 1rem; - background: var(--color-success); - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-weight: 500; - } - - .btn-approve:hover { - opacity: 0.9; - } - - .btn-reject { - padding: 0.5rem 1rem; - background: transparent; - color: var(--color-error); - border: 1px solid var(--color-error); - border-radius: 6px; - cursor: pointer; - font-weight: 500; - } - - .btn-reject:hover { - background: var(--color-error); - color: white; - } - .loading, .empty, .error { text-align: center; padding: 2rem; diff --git a/frontend/src/pages/admin/invitations.astro b/frontend/src/pages/admin/invitations.astro index d3d268b..dfb9dd9 100644 --- a/frontend/src/pages/admin/invitations.astro +++ b/frontend/src/pages/admin/invitations.astro @@ -32,7 +32,7 @@ import { API_BASE as apiBase } from '../../lib/api'; - + @@ -154,14 +154,14 @@ import { API_BASE as apiBase } from '../../lib/api';
- - ${inv.is_active ? `` : 'Inactive'} + + ${inv.is_active ? `` : 'Inactive'}
`).join(''); // Setup action buttons - document.querySelectorAll('.btn-copy').forEach(btn => { + document.querySelectorAll('.js-copy').forEach(btn => { btn.addEventListener('click', () => { const code = (btn).dataset.code; navigator.clipboard.writeText(code || ''); @@ -169,7 +169,7 @@ import { API_BASE as apiBase } from '../../lib/api'; }); }); - document.querySelectorAll('.btn-revoke').forEach(btn => { + document.querySelectorAll('.js-revoke').forEach(btn => { btn.addEventListener('click', async () => { if (!confirm('Revoke this invitation?')) return; const id = (btn).dataset.id; @@ -293,19 +293,6 @@ import { API_BASE as apiBase } from '../../lib/api'; color: var(--color-text); } - .btn-create { - padding: 0.75rem 1.5rem; - background: var(--color-primary); - color: var(--color-on-primary); - border: none; - border-radius: 8px; - cursor: pointer; - font-weight: 500; - } - - .btn-create:hover { - background: var(--color-primary-hover); - } .invitations-list { display: flex; @@ -365,22 +352,9 @@ import { API_BASE as apiBase } from '../../lib/api'; align-items: center; } - .btn-copy, .btn-revoke { + .inv-action-btn { padding: 0.5rem; - background: transparent; - border: 1px solid var(--color-border); - border-radius: 6px; - cursor: pointer; - font-size: 1rem; - } - - .btn-copy:hover { - background: var(--color-bg); - } - - .btn-revoke:hover { - background: var(--color-error); - border-color: var(--color-error); + width: 40px; } .status-inactive { diff --git a/frontend/src/pages/admin/voting.astro b/frontend/src/pages/admin/voting.astro index 887cf86..c501fd8 100644 --- a/frontend/src/pages/admin/voting.astro +++ b/frontend/src/pages/admin/voting.astro @@ -370,28 +370,16 @@ import { API_BASE } from '../../lib/api'; } .default-badge { - font-size: 0.6875rem; + display: inline-flex; + align-items: center; padding: 0.25rem 0.625rem; - background: var(--color-warning); - color: white; - border-radius: 4px; - font-weight: 600; + border-radius: 999px; + background: color-mix(in srgb, var(--color-success) 20%, transparent); + color: var(--color-success); + font-size: 0.6875rem; + font-weight: 700; text-transform: uppercase; - } - - .btn-set-default { - font-size: 0.75rem; - padding: 0.375rem 0.75rem; - background: transparent; - border: 1px solid var(--color-border); - border-radius: 6px; - color: var(--color-text-muted); - cursor: pointer; - } - - .btn-set-default:hover { - background: var(--color-bg); - color: var(--color-text); + letter-spacing: 0.06em; } /* Toggle Switch */ @@ -619,7 +607,7 @@ import { API_BASE } from '../../lib/api';
${m.is_default ? 'Default' : ` - + `}
- - + +
@@ -513,24 +513,6 @@ const { slug } = Astro.params; margin-top: 1.5rem; } - .btn-cancel { - background: transparent; - border: 1px solid var(--color-border); - color: var(--color-text); - padding: 0.75rem 1.5rem; - border-radius: 8px; - cursor: pointer; - } - - .btn-save { - background: var(--color-primary); - color: var(--color-on-primary); - border: none; - padding: 0.75rem 1.5rem; - border-radius: 8px; - cursor: pointer; - } - .sections { display: grid; grid-template-columns: 1fr 1fr; diff --git a/frontend/src/pages/communities/[slug]/proposals/new.astro b/frontend/src/pages/communities/[slug]/proposals/new.astro index 8283df4..b6116d4 100644 --- a/frontend/src/pages/communities/[slug]/proposals/new.astro +++ b/frontend/src/pages/communities/[slug]/proposals/new.astro @@ -28,10 +28,10 @@ const { slug } = Astro.params; - +
- + @@ -55,7 +55,7 @@ const { slug } = Astro.params; div.className = 'option-input'; div.innerHTML = ` - + `; optionsContainer?.appendChild(div); }); @@ -186,49 +186,22 @@ const { slug } = Astro.params; flex: 1; } - .btn-remove { - background: var(--color-error); - color: var(--color-on-primary); - border: none; - width: 36px; - border-radius: 6px; - cursor: pointer; - font-size: 1.25rem; - } - - .btn-add { - background: transparent; - border: 1px dashed var(--color-border); - color: var(--color-text-muted); - padding: 0.5rem 1rem; - border-radius: 6px; - cursor: pointer; - font-size: 0.875rem; + .create-add-btn { + border-style: dashed; margin-top: 0.5rem; } - .btn-add:hover { - border-color: var(--color-primary); - color: var(--color-primary); + .create-remove-btn { + width: 36px; + padding: 0; + font-size: 1.25rem; } - button[type="submit"] { + .create-submit-btn { width: 100%; - padding: 0.75rem; - background: var(--color-primary); - color: var(--color-on-primary); - border: none; - border-radius: 6px; - font-size: 1rem; - font-weight: 600; - cursor: pointer; margin-top: 1rem; } - button[type="submit"]:hover { - background: var(--color-primary-hover); - } - .error { color: var(--color-error); font-size: 0.875rem; diff --git a/frontend/src/pages/communities/[slug]/voting-config.astro b/frontend/src/pages/communities/[slug]/voting-config.astro index b45e315..eae9b15 100644 --- a/frontend/src/pages/communities/[slug]/voting-config.astro +++ b/frontend/src/pages/communities/[slug]/voting-config.astro @@ -150,21 +150,6 @@ const { slug } = Astro.params; font-size: 0.75rem; } - .btn-default { - padding: 0.35rem 0.65rem; - background: transparent; - border: 1px solid var(--border-color); - border-radius: 0.5rem; - color: var(--text-secondary); - cursor: pointer; - font-size: 0.8rem; - } - - .btn-default:hover { - background: var(--bg-hover); - color: var(--text-primary); - } - .loading { text-align: center; padding: 2rem; @@ -246,7 +231,7 @@ const { slug } = Astro.params;
${m.is_default ? 'Default' : ` - `} @@ -300,7 +285,7 @@ const { slug } = Astro.params; }); // Default handlers - document.querySelectorAll('.btn-default').forEach(btn => { + document.querySelectorAll('.js-set-default').forEach(btn => { btn.addEventListener('click', async () => { const methodId = btn.dataset.id; diff --git a/frontend/src/pages/notifications.astro b/frontend/src/pages/notifications.astro index fd6519d..7444d40 100644 --- a/frontend/src/pages/notifications.astro +++ b/frontend/src/pages/notifications.astro @@ -47,14 +47,14 @@ import { API_BASE as apiBase } from '../lib/api'; ${new Date(n.created_at).toLocaleString()}
- ${n.link ? `View` : ''} - ${!n.is_read ? `` : ''} + ${n.link ? `View` : ''} + ${!n.is_read ? `` : ''}
`).join(''); // Add mark read handlers - document.querySelectorAll('.btn-mark-read').forEach(btn => { + document.querySelectorAll('.js-mark-read').forEach(btn => { btn.addEventListener('click', async (e) => { const id = (e.target).dataset.id; await markRead(id); @@ -171,29 +171,6 @@ import { API_BASE as apiBase } from '../lib/api'; flex-shrink: 0; } - .btn-view, .btn-mark-read { - font-size: 0.75rem; - padding: 0.375rem 0.75rem; - border-radius: 4px; - cursor: pointer; - } - - .btn-view { - background: var(--color-primary); - color: var(--color-on-primary); - border: none; - } - - .btn-mark-read { - background: transparent; - border: 1px solid var(--color-border); - color: var(--color-text-muted); - } - - .btn-mark-read:hover { - border-color: var(--color-text-muted); - } - .loading, .empty, .error { text-align: center; padding: 3rem; diff --git a/frontend/src/pages/proposals/[id].astro b/frontend/src/pages/proposals/[id].astro index 8938967..d2f8462 100644 --- a/frontend/src/pages/proposals/[id].astro +++ b/frontend/src/pages/proposals/[id].astro @@ -555,8 +555,8 @@ const proposalId = id ?? '';
- - + +
@@ -866,24 +866,6 @@ const proposalId = id ?? ''; margin-top: 1.5rem; } - .btn-cancel { - background: transparent; - border: 1px solid var(--color-border); - color: var(--color-text); - padding: 0.75rem 1.5rem; - border-radius: 8px; - cursor: pointer; - } - - .btn-save { - background: var(--color-primary); - color: var(--color-on-primary); - border: none; - padding: 0.75rem 1.5rem; - border-radius: 8px; - cursor: pointer; - } - .btn-vote:disabled { opacity: 0.5; cursor: not-allowed; diff --git a/frontend/src/pages/settings.astro b/frontend/src/pages/settings.astro index 33d4e1b..7f40a52 100644 --- a/frontend/src/pages/settings.astro +++ b/frontend/src/pages/settings.astro @@ -88,14 +88,14 @@ import { API_BASE as apiBase } from '../lib/api'; - +

Account

Logged in as @${user.username}

- +
`; @@ -244,45 +244,18 @@ import { API_BASE as apiBase } from '../lib/api'; margin-top: 0.25rem; } - .btn-save { - background: var(--color-primary); - color: var(--color-on-primary); - border: none; - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-weight: 600; - cursor: pointer; + .settings-save-btn { width: 100%; } - .btn-save:hover { - background: var(--color-primary-hover); - } - - .btn-save:disabled { - opacity: 0.7; - cursor: default; - } - .danger-zone { border-color: var(--color-error); } - .btn-logout { - background: var(--color-error); - color: var(--color-on-primary); - border: none; - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-weight: 600; - cursor: pointer; + .settings-logout-btn { margin-top: 0.5rem; } - .btn-logout:hover { - background: var(--color-error-hover); - } - .loading, .error { text-align: center; padding: 2rem;