Simplify order and cart cards

This commit is contained in:
Ruslan Bakiev
2026-04-06 11:12:10 +07:00
parent 2b6ef46e65
commit 4a6871ecac
7 changed files with 28 additions and 59 deletions

View File

@@ -14,12 +14,12 @@ const presentation = computed(() => getOrderStatusPresentation(props.status, pro
function itemClass(state: 'done' | 'current' | 'upcoming') {
if (state === 'current') {
return 'border-[#139957] bg-[#eef9f2]';
return 'bg-white shadow-[0_14px_28px_rgba(19,153,87,0.08)]';
}
if (state === 'done') {
return 'border-[#d8eadf] bg-white';
return 'bg-white';
}
return 'border-[#e4ede8] bg-[#f7faf8]';
return 'bg-white';
}
function markerClass(state: 'done' | 'current' | 'upcoming') {
@@ -52,7 +52,7 @@ function markerClass(state: 'done' | 'current' | 'upcoming') {
<div class="flex items-center gap-3 pt-1">
<OrderStatusBadge :status="status" />
<span
class="flex h-10 w-10 items-center justify-center rounded-full bg-[#eef5f0] text-[#123824] transition-transform"
class="flex h-10 w-10 items-center justify-center rounded-full bg-[#f2f5f3] text-[#123824] transition-transform"
:class="{ 'rotate-180': isExpanded }"
>
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="none">
@@ -62,11 +62,11 @@ function markerClass(state: 'done' | 'current' | 'upcoming') {
</div>
</button>
<div v-if="isExpanded" class="mt-5 space-y-3 border-t border-[#e1ebe5] pt-5">
<div v-if="isExpanded" class="mt-5 space-y-3 pt-1">
<div
v-for="stage in presentation.stages"
:key="stage.code"
class="rounded-3xl border p-4"
class="rounded-3xl p-4"
:class="itemClass(stage.state)"
>
<div class="flex items-start gap-3">