From 2c8f55d31cd521f4a8e346bce54143fc727bf776 Mon Sep 17 00:00:00 2001 From: Marco Allegretti Date: Thu, 29 Jan 2026 19:05:27 +0100 Subject: [PATCH] ux: unify public buttons to ui-btn --- .../components/ui/DesignSystemStyles.astro | 12 ++++ .../components/voting/DelegationGraph.astro | 14 +---- frontend/src/pages/demo.astro | 45 +-------------- frontend/src/pages/features.astro | 39 +------------ frontend/src/pages/index.astro | 55 ++----------------- frontend/src/pages/manifesto.astro | 39 +------------ frontend/src/pages/notifications.astro | 16 +----- 7 files changed, 24 insertions(+), 196 deletions(-) diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro index ae64e6c..4d508e1 100644 --- a/frontend/src/components/ui/DesignSystemStyles.astro +++ b/frontend/src/components/ui/DesignSystemStyles.astro @@ -382,6 +382,18 @@ 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-lg { + padding: 0.875rem 1.75rem; + border-radius: var(--radius-md); + font-size: 0.9375rem; + } + + .ui-btn-xl { + padding: 1rem 2.5rem; + border-radius: var(--radius-md); + font-size: 1.125rem; + } + .ui-btn:active { transform: translateY(1px); } diff --git a/frontend/src/components/voting/DelegationGraph.astro b/frontend/src/components/voting/DelegationGraph.astro index cf78aae..7b1702b 100644 --- a/frontend/src/components/voting/DelegationGraph.astro +++ b/frontend/src/components/voting/DelegationGraph.astro @@ -197,7 +197,7 @@ const { userId, communityId, compact = false } = Astro.props;

No Active Delegations

You haven't delegated your vote to anyone, and no one has delegated to you.

- Explore Delegates + Explore Delegates `; return; @@ -598,18 +598,6 @@ const { userId, communityId, compact = false } = Astro.props; margin-bottom: 1.5rem; } - .btn-primary { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.75rem 1.5rem; - background: var(--color-primary); - color: var(--color-on-primary); - border-radius: 8px; - text-decoration: none; - font-weight: 500; - } - /* Tree View */ .tree-container { display: flex; diff --git a/frontend/src/pages/demo.astro b/frontend/src/pages/demo.astro index 2c10ef3..713894a 100644 --- a/frontend/src/pages/demo.astro +++ b/frontend/src/pages/demo.astro @@ -213,8 +213,8 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : ''; Use demo accounts to participate.

- Enter the Demo - Continue + Enter the Demo + Continue
@@ -622,47 +622,6 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : ''; flex-wrap: wrap; } - .btn-primary { - display: inline-flex; - align-items: center; - justify-content: center; - background: var(--color-primary); - color: var(--color-text-inverse); - padding: 0.875rem 1.75rem; - border-radius: var(--radius-md); - font-weight: 600; - font-size: 0.9375rem; - transition: all var(--motion-fast) var(--easing-standard); - } - - .btn-primary:hover { - background: var(--color-primary-hover); - color: var(--color-text-inverse); - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(129, 140, 248, 0.3); - } - - .btn-primary.btn-large { - padding: 1rem 2.5rem; - font-size: 1.125rem; - } - - .btn-secondary { - display: inline-block; - background: transparent; - color: var(--color-text); - padding: 0.875rem 2rem; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - font-weight: 500; - transition: all var(--motion-fast) var(--easing-standard); - } - - .btn-secondary:hover { - border-color: var(--color-primary); - color: var(--color-primary); - } - /* Next Section */ .demo-next { padding: 3rem 0; diff --git a/frontend/src/pages/features.astro b/frontend/src/pages/features.astro index 3649b50..9db2c7d 100644 --- a/frontend/src/pages/features.astro +++ b/frontend/src/pages/features.astro @@ -327,8 +327,8 @@ import PublicLayout from '../layouts/PublicLayout.astro'; with pre-populated communities and governance history.

- Explore the Demo - Read Documentation + Explore the Demo + Read Documentation
@@ -642,39 +642,4 @@ import PublicLayout from '../layouts/PublicLayout.astro'; justify-content: center; flex-wrap: wrap; } - - .btn-primary { - display: inline-block; - background: var(--color-primary); - color: var(--color-on-primary); - padding: 1rem 2rem; - border-radius: var(--radius-md); - font-weight: 600; - font-size: 1rem; - transition: all var(--motion-fast) var(--easing-standard); - } - - .btn-primary:hover { - background: var(--color-primary-hover); - color: var(--color-on-primary); - transform: translateY(-2px); - box-shadow: var(--shadow-md); - } - - .btn-secondary { - display: inline-block; - background: transparent; - color: var(--color-text); - padding: 1rem 2rem; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - font-weight: 500; - font-size: 1rem; - transition: all var(--motion-fast) var(--easing-standard); - } - - .btn-secondary:hover { - border-color: var(--color-primary); - color: var(--color-primary); - } diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro index 12d3005..be84d19 100644 --- a/frontend/src/pages/index.astro +++ b/frontend/src/pages/index.astro @@ -17,8 +17,8 @@ import PublicLayout from '../layouts/PublicLayout.astro'; A complete governance layer for complex, distributed organizations.

- Explore the Demo - Learn More + Explore the Demo + Learn More
@@ -191,8 +191,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';

Experience Governance in Action

The best way to understand Likwid is to see it working. Explore our demo instance with pre-populated communities, ongoing decisions, and real governance history.

- Explore the Demo - Read the Manifesto + Explore the Demo + Read the Manifesto
@@ -240,53 +240,6 @@ import PublicLayout from '../layouts/PublicLayout.astro'; flex-wrap: wrap; } - .btn-primary { - display: inline-flex; - align-items: center; - justify-content: center; - background: var(--color-primary); - color: var(--color-text-inverse); - padding: 0.875rem 1.75rem; - border-radius: var(--radius-md); - font-weight: 600; - font-size: 0.9375rem; - transition: all var(--motion-fast) var(--easing-standard); - gap: 0.5rem; - } - - .btn-primary:hover { - background: var(--color-primary-hover); - color: var(--color-text-inverse); - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(129, 140, 248, 0.3); - } - - .btn-secondary { - display: inline-flex; - align-items: center; - justify-content: center; - background: transparent; - color: var(--color-text); - padding: 0.875rem 1.75rem; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - font-weight: 500; - font-size: 0.9375rem; - transition: all var(--motion-fast) var(--easing-standard); - gap: 0.5rem; - } - - .btn-secondary:hover { - border-color: var(--color-text-muted); - background: rgba(255, 255, 255, 0.04); - color: var(--color-text); - } - - .btn-large { - padding: 1rem 2.5rem; - font-size: 1.125rem; - } - /* Section Styling */ section { padding: 4rem 2rem; diff --git a/frontend/src/pages/manifesto.astro b/frontend/src/pages/manifesto.astro index 4b9452c..630325f 100644 --- a/frontend/src/pages/manifesto.astro +++ b/frontend/src/pages/manifesto.astro @@ -227,8 +227,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
- Explore the Demo - Learn More About Likwid + Explore the Demo + Learn More About Likwid
@@ -405,41 +405,6 @@ import PublicLayout from '../layouts/PublicLayout.astro'; flex-wrap: wrap; } - .btn-primary { - display: inline-block; - background: var(--color-primary); - color: var(--color-on-primary); - padding: 1rem 2rem; - border-radius: var(--radius-md); - font-weight: 600; - font-size: 1rem; - transition: all var(--motion-fast) var(--easing-standard); - } - - .btn-primary:hover { - background: var(--color-primary-hover); - color: var(--color-on-primary); - transform: translateY(-2px); - box-shadow: var(--shadow-md); - } - - .btn-secondary { - display: inline-block; - background: transparent; - color: var(--color-text); - padding: 1rem 2rem; - border: 1px solid var(--color-border); - border-radius: var(--radius-md); - font-weight: 500; - font-size: 1rem; - transition: all var(--motion-fast) var(--easing-standard); - } - - .btn-secondary:hover { - border-color: var(--color-primary); - color: var(--color-primary); - } - @media (max-width: 640px) { .page-header h1 { font-size: 2.25rem; diff --git a/frontend/src/pages/notifications.astro b/frontend/src/pages/notifications.astro index 93f2b5a..fd6519d 100644 --- a/frontend/src/pages/notifications.astro +++ b/frontend/src/pages/notifications.astro @@ -7,7 +7,7 @@ import { API_BASE as apiBase } from '../lib/api';

Notifications

- +
@@ -110,20 +110,6 @@ import { API_BASE as apiBase } from '../lib/api'; font-size: 2rem; } - .btn-secondary { - background: transparent; - border: 1px solid var(--color-border); - color: var(--color-text); - padding: 0.5rem 1rem; - border-radius: 6px; - cursor: pointer; - } - - .btn-secondary:hover { - border-color: var(--color-primary); - color: var(--color-primary); - } - .notifications-list { display: grid; gap: 1rem;