ashwin/nxtgauge-admin-solid
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(parity): align onboarding builder surfaces and tab strips with next ui

Browse source
This commit is contained in:
Ashwin Kumar 2026-03-20 15:37:56 +01:00
parent 5140d12332
commit 998bebc8ec
4 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/app.css
View file

@ -557,34 +557,37 @@ body {
}
.admin-link-tabs {
display: inline-flex;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
gap: 32px;
margin-bottom: 16px;
border-bottom: 1px solid #e2e8f0;
background: #fff;
padding: 0 24px;
}
.admin-link-tab {
text-decoration: none;
border: 1px solid #cbd5e1;
border-radius: 10px;
background: #fff;
color: #475569;
padding: 8px 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 150ms ease;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent;
color: #64748b;
padding: 14px 0;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
transition: color 150ms ease, border-color 150ms ease;
}
.admin-link-tab:hover {
border-color: #94a3b8;
border-bottom-color: #fd6216;
color: #0f172a;
}
.admin-link-tab.active {
border-color: #ffc9ac;
background: #fff1e8;
color: #c2410c;
border-bottom-color: #fd6216;
color: #0f172a;
}
.admin-segmented {

7
src/components/admin/OnboardingFlowBuilder.tsx
View file

@ -186,7 +186,7 @@ export default function OnboardingFlowBuilder(props: Props) {
<section class="card">
<h2 style="margin-bottom:4px">Flow Builder</h2>
<p class="notice" style="margin:0 0 10px">
Choose the role, number of steps, questions, and final submission message.
Choose the external role, how many steps the onboarding should have, which questions appear, add custom questions, and define the final submission message.
</p>
<Show when={props.error}>
@ -221,6 +221,10 @@ export default function OnboardingFlowBuilder(props: Props) {
<label>Number of steps</label>
<input type="number" min={1} max={8} value={props.stepCount} onInput={(event) => props.onChange({ stepCount: Number(event.currentTarget.value) || 1 })} />
</div>
<div class="nested-card" style="display:flex;flex-direction:column;justify-content:center">
<p style="margin:0;font-size:13px;font-weight:700;color:#0f172a">{props.selectedFields.length} fields selected</p>
<p class="notice" style="margin:6px 0 0">Add from the library or create custom questions for this role.</p>
</div>
<div class="field" style="grid-column:1 / -1">
<label>Final submission message</label>
<textarea rows="3" value={props.finalSubmissionMessage} onInput={(event) => props.onChange({ finalSubmissionMessage: event.currentTarget.value })} />
@ -275,6 +279,7 @@ export default function OnboardingFlowBuilder(props: Props) {
<Show when={activeTab() === 'selected'}>
<div class="space-y-3">
<h3 style="margin:0;font-size:14px;font-weight:700;color:#0f172a">Selected Questions</h3>
<Show when={props.selectedFields.length === 0}>
<p class="notice">No questions selected yet.</p>
</Show>

4
src/routes/admin/onboarding-schemas/[schemaId].tsx
View file

@ -122,7 +122,7 @@ export default function OnboardingSchemaDetailPage() {
<div class="page-hero-card page-actions">
<div>
<h1 class="page-title">Onboarding Management</h1>
<p class="page-subtitle">Open one onboarding flow at a time, review publishing state, then update role, questions, and final message.</p>
<p class="page-subtitle">Open one onboarding flow at a time, review its publishing state, then update the role, questions, step count, and final message in the builder.</p>
</div>
<div class="page-actions-right">
<button class="btn" type="button" disabled={saving()} onClick={() => void persist(true)}>
@ -142,7 +142,7 @@ export default function OnboardingSchemaDetailPage() {
<Show when={schema() && loaded()}>
<>
<div class="field-grid-2" style="margin-bottom:16px">
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:16px">
<div class="card"><p class="kv-label">Status</p><p class="kv-value">{schema()?.is_active ? 'PUBLISHED' : 'DRAFT'}</p></div>
<div class="card"><p class="kv-label">Version</p><p class="kv-value">{schema()?.schema_json?.version || 1}</p></div>
<div class="card"><p class="kv-label">Steps</p><p class="kv-value">{stepCount()}</p></div>

6
src/routes/admin/onboarding-schemas/new.tsx
View file

@ -74,15 +74,15 @@ export default function NewOnboardingSchemaPage() {
<div class="page-hero-card page-actions">
<div>
<h1 class="page-title">Create Onboarding Flow</h1>
<p class="page-subtitle">Build one onboarding flow at a time. Start with role, questions, and final submission message.</p>
<p class="page-subtitle">Build one onboarding flow at a time. Start with the role, choose the questions, arrange the step count, and finish with the final submission message.</p>
</div>
<A class="btn" href="/admin/onboarding-schemas">Back to Onboarding Management</A>
</div>
<div class="field-grid-2" style="margin-bottom:16px">
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:16px">
<div class="card"><p class="kv-label">Role</p><p class="kv-value">{roleKey().replace(/_/g, ' ').toUpperCase()}</p></div>
<div class="card"><p class="kv-label">Steps</p><p class="kv-value">{stepCount()}</p></div>
<div class="card" style="grid-column:1 / -1"><p class="kv-label">Questions</p><p class="kv-value">{selectedFields().length}</p></div>
<div class="card"><p class="kv-label">Questions</p><p class="kv-value">{selectedFields().length}</p></div>
</div>
<OnboardingFlowBuilder