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: modernize setup form UI

Browse source
This commit is contained in:
Marco Allegretti 2026-01-30 09:54:38 +01:00
parent 89b6e936e2
commit cafcce8c90
1 changed files with 21 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
frontend/src/pages/setup.astro
View file

@ -28,13 +28,13 @@ if (!setupRequired) {
<Layout title="Setup - Likwid"> <Layout title="Setup - Likwid">
<div class="setup-container"> <div class="setup-container">
<div class="setup-card"> <div class="setup-card ui-card">
<div class="setup-header"> <div class="setup-header">
<h1>Welcome to Likwid</h1> <h1>Welcome to Likwid</h1>
<p>Let's configure your governance platform</p> <p>Let's configure your governance platform</p>
</div> </div>
<form id="setup-form" class="setup-form"> <form id="setup-form" class="setup-form ui-form">
<!-- Step 1: Instance Identity --> <!-- Step 1: Instance Identity -->
<section class="setup-section" data-step="1"> <section class="setup-section" data-step="1">
<h2>Instance Identity</h2> <h2>Instance Identity</h2>
@ -43,7 +43,7 @@ if (!setupRequired) {
<label for="instance_name">Platform Name</label> <label for="instance_name">Platform Name</label>
<input type="text" id="instance_name" name="instance_name" required <input type="text" id="instance_name" name="instance_name" required
placeholder="My Community Platform" /> placeholder="My Community Platform" />
<span class="hint">This name will appear in the header and emails</span> <span class="help-text">This name will appear in the header and emails</span>
</div> </div>
</section> </section>
@ -107,7 +107,7 @@ if (!setupRequired) {
</section> </section>
<div class="form-actions"> <div class="form-actions">
<button type="submit" id="submit-btn" disabled>Complete Setup</button> <button type="submit" id="submit-btn" class="ui-btn ui-btn-primary" disabled>Complete Setup</button>
</div> </div>
</form> </form>
</div> </div>
@ -125,9 +125,6 @@ if (!setupRequired) {
} }
.setup-card { .setup-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 600px; max-width: 600px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@ -157,7 +154,7 @@ if (!setupRequired) {
.setup-section { .setup-section {
margin-bottom: 2rem; margin-bottom: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
border-bottom: 1px solid #eee; border-bottom: 1px solid var(--color-border);
} }
.setup-section:last-of-type { .setup-section:last-of-type {
@ -167,11 +164,11 @@ if (!setupRequired) {
.setup-section h2 { .setup-section h2 {
font-size: 1.25rem; font-size: 1.25rem;
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
color: #333; color: var(--color-text);
} }
.section-desc { .section-desc {
color: #666; color: var(--color-text-muted);
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
} }
@ -179,34 +176,6 @@ if (!setupRequired) {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.form-group label {
display: block;
font-weight: 500;
margin-bottom: 0.5rem;
color: #333;
}
.form-group input[type="text"] {
width: 100%;
padding: 0.75rem;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s;
}
.form-group input[type="text"]:focus {
outline: none;
border-color: #667eea;
}
.hint {
display: block;
font-size: 0.85rem;
color: #888;
margin-top: 0.25rem;
}
.mode-options { .mode-options {
display: grid; display: grid;
gap: 1rem; gap: 1rem;
@ -222,66 +191,57 @@ if (!setupRequired) {
.mode-card { .mode-card {
padding: 1rem; padding: 1rem;
border: 2px solid #e0e0e0; border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
transition: all 0.2s; transition: all 0.2s;
background: var(--color-bg-alt);
} }
.mode-option input:checked + .mode-card { .mode-option input:checked + .mode-card {
border-color: #667eea; border-color: var(--color-primary);
background: #f8f9ff; background: var(--color-primary-muted);
} }
.mode-card strong { .mode-card strong {
display: block; display: block;
color: #333; color: var(--color-text);
} }
.mode-card p { .mode-card p {
margin: 0.25rem 0 0 0; margin: 0.25rem 0 0 0;
font-size: 0.9rem; font-size: 0.9rem;
color: #666; color: var(--color-text-muted);
} }
.auth-status { .auth-status {
padding: 1rem; padding: 1rem;
border-radius: 8px; border-radius: 8px;
background: #f5f5f5; background: var(--color-bg-alt);
} }
.auth-status.success { .auth-status.success {
background: #e8f5e9; background: var(--color-success-muted);
color: #2e7d32; color: var(--color-success);
} }
.auth-status.error { .auth-status.error {
background: #ffebee; background: var(--color-error-muted);
color: #c62828; color: var(--color-error);
} }
.form-actions { .form-actions {
margin-top: 2rem; margin-top: 2rem;
} }
.form-actions button { .form-actions .ui-btn {
width: 100%; width: 100%;
justify-content: center;
padding: 1rem; padding: 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
cursor: pointer;
transition: opacity 0.2s, transform 0.2s;
} }
.form-actions button:hover:not(:disabled) { .form-actions .ui-btn:disabled {
opacity: 0.9;
transform: translateY(-1px);
}
.form-actions button:disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }