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

26
shop/components/wizard/step-software.tsx
View File

@@ -229,12 +229,12 @@ export function StepSoftware({
{/* Modules */}
{selectedProduct?.modules && selectedProduct.modules.length > 0 && (
<div className="mt-6 p-5 rounded-2xl bg-white/5 border border-white/10 space-y-4">
<p className="text-sm font-bold text-white flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-primary" />
<div className="mt-6 p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-4 shadow-lg">
<p className="text-xs font-bold uppercase tracking-wider text-slate-400 flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
Zusatzmodule für {selectedProduct.name}
</p>
<div className="space-y-2.5">
<div className="space-y-3">
{selectedProduct.modules.map(module => {
const isExistingLicense = existingModuleIds.includes(module.id)
const disabled = isExistingLicense || isModuleDisabled(module, sel?.moduleIds ?? [])
@@ -242,14 +242,14 @@ export function StepSoftware({
return (
<div
key={module.id}
className={`flex flex-col p-4 rounded-xl border transition-all duration-200 ${
className={`flex flex-col p-4 rounded-xl border transition-all duration-300 ${
isExistingLicense
? 'border-primary/20 bg-primary/5 opacity-75'
? 'border-slate-800 bg-slate-900/30 opacity-60 cursor-not-allowed'
: disabled
? 'border-white/5 bg-white/5 opacity-40'
? 'border-slate-800/40 bg-slate-900/20 opacity-40 cursor-not-allowed'
: checked
? 'border-primary/30 bg-primary/5'
: 'border-white/5 bg-white/5 hover:bg-white/10'
? 'border-primary/40 bg-primary/10 shadow-[0_0_15px_rgba(59,130,246,0.1)]'
: 'border-slate-800 bg-slate-900/50 hover:bg-slate-900 hover:border-slate-700'
}`}
>
<div className="flex items-start space-x-3">
@@ -258,19 +258,19 @@ export function StepSoftware({
checked={checked}
onCheckedChange={() => !isExistingLicense && toggleModule(currentCategory.id, module.id)}
disabled={disabled}
className="rounded border-white/20 data-[state=checked]:bg-primary"
className="rounded border-slate-700 data-[state=checked]:bg-primary data-[state=checked]:border-primary transition-colors"
/>
<div className="flex-1">
<Label
htmlFor={isExistingLicense ? undefined : `mod-${currentCategory.id}-${module.id}`}
className={`font-semibold text-sm flex justify-between text-white ${
isExistingLicense ? 'cursor-default' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
isExistingLicense ? 'cursor-not-allowed' : disabled ? 'cursor-not-allowed' : 'cursor-pointer'
}`}
>
<span className="flex items-center gap-1.5 flex-wrap">
<span className="flex items-center gap-2 flex-wrap">
{module.name}
{isExistingLicense && (
<span className="inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded bg-primary/20 text-primary border border-primary/30 font-bold uppercase tracking-wider">
<span className="inline-flex items-center gap-1 text-[9px] px-2 py-0.5 rounded bg-slate-800 text-slate-400 border border-slate-700 font-semibold uppercase tracking-wider">
<Lock className="w-2.5 h-2.5" /> Bereits lizenziert
</span>
)}