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

style(wizard): refine step 3 UI styling and micro interactions
All checks were successful
Staging Build / build (push) Successful in 3m0s
Details

Browse Source
This commit is contained in:
DanielS
2026-08-11 17:30:17 +02:00
parent 866c5522f2
commit 46699e8bf3
3 changed files with 108 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -932,12 +932,12 @@ export function OrderWizard({
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
className="h-[calc(100vh-100px)] overflow-hidden"
className="h-[calc(100vh-100px)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
>
<div className="grid grid-cols-1 lg:grid-cols-6 gap-6 h-full items-stretch">
<div className="grid grid-cols-1 lg:grid-cols-6 gap-4 h-full items-stretch">
{/* LEFT inside step 3: Categories Sidebar Menu */}
<div className="lg:col-span-2 flex flex-col justify-start pr-4 space-y-4 overflow-y-auto">
<div className="lg:col-span-2 flex flex-col justify-start p-3 pr-2 space-y-4 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
<div>
<h1 className="text-xl font-extrabold tracking-tight mb-1 text-gradient">
Kategorien & Optionen
@@ -947,7 +947,7 @@ export function OrderWizard({
</p>
</div>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2.5">
{visibleCategories.map((cat) => {
const sel = selections[cat.id]
const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
@@ -959,8 +959,8 @@ export function OrderWizard({
key={cat.id}
onClick={() => setActiveCategoryId(cat.id)}
className={`flex items-center gap-3 p-3.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group ${isActive
? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.15)]'
: 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10'
? 'bg-primary/10 border-primary text-white shadow-[0_0_20px_rgba(59,130,246,0.2)]'
: 'bg-slate-900/50 border-white/5 text-slate-400 hover:bg-slate-900 hover:border-white/20 hover:text-white'
}`}
>
{/* Left glow line for active category */}
@@ -984,11 +984,11 @@ export function OrderWizard({
{/* Status indicators */}
{hasSelection ? (
<span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-green-500/30 text-green-400 bg-green-500/10">
<span className="text-[10px] px-2 py-0.5 rounded-full font-semibold shrink-0 border border-emerald-500/30 text-emerald-400 bg-emerald-500/10 shadow-sm">
Ausgewählt
</span>
) : isRequired ? (
<span className="text-[10px] px-2 py-0.5 rounded-full font-medium shrink-0 border border-red-500/30 text-red-400 bg-red-500/10">
<span className="text-[10px] px-2 py-0.5 rounded-full font-semibold shrink-0 border border-amber-500/30 text-amber-400 bg-amber-500/10 shadow-sm">
Erforderlich
</span>
) : null}
@@ -999,8 +999,8 @@ export function OrderWizard({
</div>
{/* CENTER: Scrollable Category Selection */}
<div className="lg:col-span-2 flex flex-col h-full overflow-hidden border-x border-white/5 px-4">
<div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
<div className="lg:col-span-2 flex flex-col h-full overflow-hidden border-x border-slate-800 p-2 px-3">
<div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{/* Upgrade-Modus Hinweis-Banner */}
{upgradeMode && lockedDeviceId && (
<div className="mb-4 p-3 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2">
@@ -1032,7 +1032,7 @@ export function OrderWizard({
</div>
{/* RIGHT: Summary sidebar */}
<div className="lg:col-span-2 flex flex-col h-full overflow-hidden pl-2">
<div className="lg:col-span-2 flex flex-col h-full overflow-hidden p-2 pl-2">
<div className="flex-1 overflow-hidden">
<SummarySidebar
visibleCategories={visibleCategories}