fix: tabs
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
<UInput v-model="searchQuery" type="text" :placeholder="t('Search address')"
|
||||
class="bg-white dark:bg-gray-800 text-black dark:text-white absolute" />
|
||||
<UIcon name="ic:baseline-search"
|
||||
class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark) relative left-40" />
|
||||
class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark) relative left-40" />
|
||||
</div>
|
||||
<UButton color="primary" @click="openCreateModal"
|
||||
class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
|
||||
@@ -32,7 +32,7 @@
|
||||
<UIcon name="material-symbols:delete" class="text-[18px]" />
|
||||
</button>
|
||||
<UButton size="sm" color="neutral" variant="outline" @click="openEditModal(address)"
|
||||
class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) text-[13px]">
|
||||
class="text-(--text-sky-light) dark:text-(--text-sky-dark) text-[13px]">
|
||||
{{ t('edit') }}
|
||||
<UIcon name="ic:sharp-edit" class="text-[15px]" />
|
||||
</UButton>
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
name: 'customer-product', params: {
|
||||
product_id: '51'
|
||||
}
|
||||
}" class="inline-block mt-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
|
||||
}" class="inline-block mt-4 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
|
||||
{{ t('Continue Shopping') }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
<div class="flex justify-between mb-6">
|
||||
<span class="text-black dark:text-white font-semibold text-lg">{{ t('Total') }}</span>
|
||||
<span class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) font-bold text-lg">${{
|
||||
<span class="text-(--text-sky-light) dark:text-(--text-sky-dark) font-bold text-lg">${{
|
||||
cartStore.orderTotal.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
@@ -103,7 +103,7 @@
|
||||
? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
|
||||
<input type="radio" :value="address.id" v-model="selectedAddress"
|
||||
class="mt-1 w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
|
||||
class="mt-1 w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
|
||||
<div class="flex-1">
|
||||
<p class="text-black dark:text-white font-medium">{{ address.street }}</p>
|
||||
<p class="text-gray-600 dark:text-gray-400 text-sm">{{ address.zipCode }}, {{ address.city }}</p>
|
||||
@@ -115,7 +115,7 @@
|
||||
<UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" />
|
||||
<p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p>
|
||||
<RouterLink :to="{ name: 'addresses' }"
|
||||
class="inline-block mt-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
|
||||
class="inline-block mt-2 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
|
||||
{{ t('Add Address') }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
@@ -131,11 +131,11 @@
|
||||
? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
|
||||
<input type="radio" :value="method.id" v-model="selectedDeliveryMethod"
|
||||
class="w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
|
||||
class="w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-black dark:text-white font-medium">{{ method.name }}</span>
|
||||
<span class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) font-medium">
|
||||
<span class="text-(--text-sky-light) dark:text-(--text-sky-dark) font-medium">
|
||||
{{ method.price > 0 ? `$${method.price.toFixed(2)}` : t('Free') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<p class="text-gray-600 dark:text-gray-300">
|
||||
{{ productData.description }}
|
||||
</p>
|
||||
<div class="text-3xl font-bold text-(--accent-blue-light) dark:text-(--accent-blue-dark)">
|
||||
<div class="text-3xl font-bold text-(--text-sky-light) dark:text-(--text-sky-dark)">
|
||||
{{ productData.price }}
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
@@ -32,7 +32,7 @@
|
||||
</div>
|
||||
<div class="flex md:flex-row flex-col justify-between md:items-end items-start gap-5 md:gap-0 md:mb-8 mb-4">
|
||||
<div class="flex flex-col gap-3">
|
||||
<span class="text-sm text-(--accent-blue-light) dark:text-(--accent-blue-dark) ">Colors:</span>
|
||||
<span class="text-sm text-(--text-sky-light) dark:text-(--text-sky-dark) ">Colors:</span>
|
||||
<div class="flex gap-2">
|
||||
<button v-for="color in productData.colors" :key="color.id" @click="selectedColor = color"
|
||||
class="w-10 h-10 border-2 transition-all" :class="selectedColor?.id === color.id
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-4">
|
||||
<h2 class="text-xl font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
|
||||
<UIcon name="mdi:domain"
|
||||
class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
|
||||
class="text-[24px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
|
||||
{{ t('Company Information') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-10">
|
||||
@@ -65,7 +65,7 @@
|
||||
<h2
|
||||
class="text-xl font-semibold text-black dark:text-white mb-2 flex items-center gap-2">
|
||||
<UIcon name="mdi:map-marker"
|
||||
class="text-[24px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
|
||||
class="text-[24px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
|
||||
{{ t('Addresses') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
@@ -88,7 +88,7 @@
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<UButton color="primary" variant="outline"
|
||||
class="text-(--accent-blue-light) dark:text-(--accent-blue-dark) border-(--accent-blue-light) dark:border-(--accent-blue-dark)"
|
||||
class="text-(--text-sky-light) dark:text-(--text-sky-dark) border-(--accent-blue-light) dark:border-(--accent-blue-dark)"
|
||||
@click="goToCreateAccount">
|
||||
<UIcon name="ic:sharp-edit" />
|
||||
{{ t('Edit Account') }}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<h2
|
||||
class="text-lg font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
|
||||
<UIcon name="mdi:domain"
|
||||
class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
|
||||
class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
|
||||
{{ t('Company Information') }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
@@ -54,7 +54,7 @@
|
||||
<h2
|
||||
class="text-lg font-semibold text-black dark:text-white mb-4 flex items-center gap-2">
|
||||
<UIcon name="mdi:map-marker"
|
||||
class="text-[20px] text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
|
||||
class="text-[20px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
|
||||
{{ t('Select Addresses') }}
|
||||
</h2>
|
||||
<div class="bg-(--second-light) dark:bg-(--main-dark)">
|
||||
@@ -70,7 +70,7 @@
|
||||
? 'border-(--accent-blue-light) dark:border-(--accent-blue-dark) bg-blue-50 dark:bg-blue-900/20'
|
||||
: 'border-(--border-light) dark:border-(--border-dark) hover:border-gray-400'">
|
||||
<input type="radio" :value="address.id" v-model="selectedAddress"
|
||||
class="mt-1 w-4 h-4 text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
|
||||
class="mt-1 w-4 h-4 text-(--text-sky-light) dark:text-(--text-sky-dark)" />
|
||||
<div class="flex-1">
|
||||
<p class="text-black dark:text-white font-medium">{{ address.street }}
|
||||
</p>
|
||||
@@ -87,7 +87,7 @@
|
||||
<UIcon name="mdi:map-marker-outline" class="text-4xl text-gray-400 mb-2" />
|
||||
<p class="text-gray-500 dark:text-gray-400">{{ t('No addresses found') }}</p>
|
||||
<RouterLink :to="{ name: 'addresses' }"
|
||||
class="inline-block mt-2 text-(--accent-blue-light) dark:text-(--accent-blue-dark) hover:underline">
|
||||
class="inline-block mt-2 text-(--text-sky-light) dark:text-(--text-sky-dark) hover:underline">
|
||||
{{ t('Add Address') }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user