marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ux: unify public buttons to ui-btn

Browse source
This commit is contained in:
Marco Allegretti 2026-01-29 19:05:27 +01:00
parent c00814156d
commit 2c8f55d31c
7 changed files with 24 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/components/ui/DesignSystemStyles.astro
View file

@ -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); 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 { .ui-btn:active {
transform: translateY(1px); transform: translateY(1px);
} }

14
frontend/src/components/voting/DelegationGraph.astro
View file

@ -197,7 +197,7 @@ const { userId, communityId, compact = false } = Astro.props;
<svg class="icon icon-xl"><use href="#icon-delegation"/></svg> <svg class="icon icon-xl"><use href="#icon-delegation"/></svg>
<h4>No Active Delegations</h4> <h4>No Active Delegations</h4>
<p>You haven't delegated your vote to anyone, and no one has delegated to you.</p> <p>You haven't delegated your vote to anyone, and no one has delegated to you.</p>
<a href="/delegations" class="btn-primary ui-btn ui-btn-primary">Explore Delegates</a> <a href="/delegations" class="ui-btn ui-btn-primary ui-btn-lg">Explore Delegates</a>
</div> </div>
`; `;
return; return;
@ -598,18 +598,6 @@ const { userId, communityId, compact = false } = Astro.props;
margin-bottom: 1.5rem; 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 View */
.tree-container { .tree-container {
display: flex; display: flex;

45
frontend/src/pages/demo.astro
View file

@ -213,8 +213,8 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
Use demo accounts to participate. Use demo accounts to participate.
</p> </p>
<div class="cta-buttons"> <div class="cta-buttons">
<a href={`/demo?enter=1${nextQuery || '&next=%2Fcommunities'}`} class="btn-primary btn-large">Enter the Demo</a> <a href={`/demo?enter=1${nextQuery || '&next=%2Fcommunities'}`} class="ui-btn ui-btn-primary ui-btn-xl">Enter the Demo</a>
<a href={`/demo?enter=1${nextQuery || '&next=%2Flogin'}`} class="btn-secondary">Continue</a> <a href={`/demo?enter=1${nextQuery || '&next=%2Flogin'}`} class="ui-btn ui-btn-secondary ui-btn-lg">Continue</a>
</div> </div>
</section> </section>
@ -622,47 +622,6 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
flex-wrap: wrap; 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 */ /* Next Section */
.demo-next { .demo-next {
padding: 3rem 0; padding: 3rem 0;

39
frontend/src/pages/features.astro
View file

@ -327,8 +327,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
with pre-populated communities and governance history. with pre-populated communities and governance history.
</p> </p>
<div class="cta-buttons"> <div class="cta-buttons">
<a href="/demo" class="btn-primary">Explore the Demo</a> <a href="/demo" class="ui-btn ui-btn-primary ui-btn-lg">Explore the Demo</a>
<a href="/docs" class="btn-secondary">Read Documentation</a> <a href="/docs" class="ui-btn ui-btn-secondary ui-btn-lg">Read Documentation</a>
</div> </div>
</section> </section>
</article> </article>
@ -642,39 +642,4 @@ import PublicLayout from '../layouts/PublicLayout.astro';
justify-content: center; justify-content: center;
flex-wrap: wrap; 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);
}
</style> </style>

55
frontend/src/pages/index.astro
View file

@ -17,8 +17,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
A complete governance layer for complex, distributed organizations. A complete governance layer for complex, distributed organizations.
</p> </p>
<div class="hero-actions"> <div class="hero-actions">
<a href="/demo" class="btn-primary">Explore the Demo</a> <a href="/demo" class="ui-btn ui-btn-primary ui-btn-lg">Explore the Demo</a>
<a href="/about" class="btn-secondary">Learn More</a> <a href="/about" class="ui-btn ui-btn-secondary ui-btn-lg">Learn More</a>
</div> </div>
</div> </div>
</section> </section>
@ -191,8 +191,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
<h2>Experience Governance in Action</h2> <h2>Experience Governance in Action</h2>
<p>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.</p> <p>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.</p>
<div class="cta-buttons"> <div class="cta-buttons">
<a href="/demo" class="btn-primary btn-large">Explore the Demo</a> <a href="/demo" class="ui-btn ui-btn-primary ui-btn-xl">Explore the Demo</a>
<a href="/manifesto" class="btn-secondary btn-large">Read the Manifesto</a> <a href="/manifesto" class="ui-btn ui-btn-secondary ui-btn-xl">Read the Manifesto</a>
</div> </div>
</div> </div>
</section> </section>
@ -240,53 +240,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
flex-wrap: wrap; 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 Styling */
section { section {
padding: 4rem 2rem; padding: 4rem 2rem;

39
frontend/src/pages/manifesto.astro
View file

@ -227,8 +227,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
</section> </section>
<section class="manifesto-cta"> <section class="manifesto-cta">
<a href="/demo" class="btn-primary">Explore the Demo</a> <a href="/demo" class="ui-btn ui-btn-primary ui-btn-lg">Explore the Demo</a>
<a href="/about" class="btn-secondary">Learn More About Likwid</a> <a href="/about" class="ui-btn ui-btn-secondary ui-btn-lg">Learn More About Likwid</a>
</section> </section>
</article> </article>
</PublicLayout> </PublicLayout>
@ -405,41 +405,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
flex-wrap: wrap; 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) { @media (max-width: 640px) {
.page-header h1 { .page-header h1 {
font-size: 2.25rem; font-size: 2.25rem;

16
frontend/src/pages/notifications.astro
View file

@ -7,7 +7,7 @@ import { API_BASE as apiBase } from '../lib/api';
<section class="notifications-page"> <section class="notifications-page">
<div class="header-row"> <div class="header-row">
<h1>Notifications</h1> <h1>Notifications</h1>
<button id="mark-all-read" class="btn-secondary">Mark All Read</button> <button id="mark-all-read" class="ui-btn ui-btn-secondary" type="button">Mark All Read</button>
</div> </div>
<div id="notifications-list" class="notifications-list"> <div id="notifications-list" class="notifications-list">
@ -110,20 +110,6 @@ import { API_BASE as apiBase } from '../lib/api';
font-size: 2rem; 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 { .notifications-list {
display: grid; display: grid;
gap: 1rem; gap: 1rem;