Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(wizard): unify status stepper and improve summary sidebar UX

Browse Source
This commit is contained in:
DanielS
2026-08-11 01:16:30 +02:00
parent 883b607482
commit bc02a6d000
2 changed files with 110 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
shop/components/order-wizard.tsx
View File

@@ -939,38 +939,38 @@ export function OrderWizard({
</p>
</div>
{/* Left Sidebar Status Stepper */}
{/* Left Sidebar Status Stepper (matching ProgressStepper sky-blue design) */}
<div className="space-y-2 py-4 border-t border-b border-white/5">
<p className="text-xs font-bold uppercase tracking-wider text-slate-500">
Status
</p>
<div className="flex flex-row flex-wrap items-center gap-x-3 gap-y-2 pl-1">
<div className="flex items-center gap-1.5">
<div className="w-5 h-5 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-[10px]">
<Check className="w-3 h-3" />
<div className="w-6 h-6 rounded-full bg-sky-500 border-2 border-sky-400 flex items-center justify-center shadow-[0_0_10px_rgba(56,189,248,0.4)]">
<Check className="w-3.5 h-3.5 text-slate-950 stroke-[3]" />
</div>
<span className="text-xs text-slate-400 font-medium">Kunde</span>
<span className="text-xs text-sky-300 font-semibold">Kunde</span>
</div>
<span className="text-slate-700 text-xs">/</span>
<div className="w-6 h-[2px] bg-gradient-to-r from-sky-500 to-sky-400 rounded-full shadow-[0_0_6px_rgba(56,189,248,0.5)]" />
<div className="flex items-center gap-1.5">
<div className="w-5 h-5 rounded-full bg-green-500/20 border border-green-500/35 flex items-center justify-center text-green-400 text-[10px]">
<Check className="w-3 h-3" />
<div className="w-6 h-6 rounded-full bg-sky-500 border-2 border-sky-400 flex items-center justify-center shadow-[0_0_10px_rgba(56,189,248,0.4)]">
<Check className="w-3.5 h-3.5 text-slate-950 stroke-[3]" />
</div>
<span className="text-xs text-slate-400 font-medium">Modell</span>
<span className="text-xs text-sky-300 font-semibold">Modell</span>
</div>
<span className="text-slate-700 text-xs">/</span>
<div className="w-6 h-[2px] bg-gradient-to-r from-sky-500 to-sky-400 rounded-full shadow-[0_0_6px_rgba(56,189,248,0.5)]" />
<div className="flex items-center gap-1.5">
<div className="w-5 h-5 rounded-full bg-primary/20 border border-primary text-primary flex items-center justify-center text-[10px] font-bold shadow-[0_0_10px_rgba(59,130,246,0.2)]">
<div className="w-6 h-6 rounded-full bg-slate-950 border-2 border-sky-400 text-sky-400 flex items-center justify-center text-xs font-bold shadow-[0_0_15px_rgba(56,189,248,0.5)]">
3
</div>
<span className="text-xs text-white font-bold">Software</span>
<span className="text-xs text-sky-300 font-bold">Software</span>
</div>
<span className="text-slate-700 text-xs">/</span>
<div className="w-6 h-[2px] bg-slate-800 rounded-full" />
<div className="flex items-center gap-1.5">
<div className="w-5 h-5 rounded-full bg-white/5 border border-white/10 text-slate-500 flex items-center justify-center text-[10px]">
<div className="w-6 h-6 rounded-full bg-slate-900 border-2 border-slate-800 text-slate-500 flex items-center justify-center text-xs">
4
</div>
<span className="text-xs text-slate-600 font-medium">Abschluss</span>
<span className="text-xs text-slate-500 font-medium">Abschluss</span>
</div>
</div>
</div>