Simplify order and cart cards
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user