Skip to content

Commit 653cfa4

Browse files
zackhazackha
committed
fix: dark mode
1 parent 9406b3c commit 653cfa4

File tree

4 files changed

+54
-19
lines changed

4 files changed

+54
-19
lines changed

‎components/AppHeader.vue‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
<template>
2-
<div role="tablist" class="flex w-full flex-row items-center px-4 py-1 h-20 z-50 fixed bg-white">
2+
<div role="tablist" class="flex w-full flex-row items-center px-4 py-1 h-20 z-50 fixed bg-white dark:bg-black">
33
<div class="flex flex-row w-full flex-nowrap items-center h-14">
4-
<div class="flex items-center justify-center w-12 h-12 hover:bg-[#e9e9e9] rounded-full">
4+
<div class="flex items-center justify-center w-12 h-12 hover:bg-[#e9e9e9] hover:dark:bg-[#262626] rounded-full">
55
<NuxtLink to="/">
66
<Icon name="Logo" size="32" />
77
</NuxtLink>
88
</div>
9-
<div class="font-semibold px-4 rounded-full hover:bg-black h-12 flex items-center justify-center hover:text-white">Categories</div>
10-
<div class="font-semibold px-4 rounded-full hover:bg-black h-12 flex items-center justify-center hover:text-white">Favorites</div>
11-
<div class="relative flex flex-shrink flex-grow flex-col text-sm font-semibold text-neutral-600 px-2">
9+
<div class="font-semibold cursor-pointer px-4 rounded-full hover:bg-black hover:dark:bg-white h-12 flex items-center justify-center hover:text-white hover:dark:text-black">
10+
Categories
11+
</div>
12+
<div class="font-semibold cursor-pointer px-4 rounded-full hover:bg-black hover:dark:bg-white h-12 flex items-center justify-center hover:text-white hover:dark:text-black">
13+
Favorites
14+
</div>
15+
<div class="relative flex flex-shrink flex-grow flex-col text-sm font-semibold text-neutral-500 dark:text-neutral-300 px-2">
1216
<form
13-
class="group flex h-12 flex-grow rounded-full bg-[#e9e9e9] pl-4 pr-3 transition-all hover:bg-[#e1e1e1]"
17+
class="group flex h-12 flex-grow rounded-full bg-[#e9e9e9] dark:bg-[#262626] pl-4 pr-3 transition-all hover:bg-[#e1e1e1]"
1418
@submit.prevent="
1519
setSearch(searchQuery);
1620
suggestionMenu = false;
@@ -21,7 +25,7 @@
2125
</div>
2226
<div class="flex w-full">
2327
<input
24-
class="w-full bg-transparent py-2 outline-none placeholder:text-[#757575] placeholder:dark:text-neutral-500"
28+
class="w-full bg-transparent py-2 outline-none placeholder:text-[#757575] placeholder:dark:text-neutral-400"
2529
v-model="searchQuery"
2630
@click="suggestionMenu = !suggestionMenu"
2731
:placeholder="route.query.category ? `Search in ${route.query.category}` : 'Search'" />
@@ -32,7 +36,7 @@
3236
</div>
3337
</div>
3438
</form>
35-
<div v-if="suggestionMenu" ref="suggestionMenuRef" class="absolute top-full left-0 right-0 z-50 bg-white rounded-b-2xl w-full">
39+
<div v-if="suggestionMenu" ref="suggestionMenuRef" class="absolute top-full left-0 right-0 z-50 bg-white dark:bg-black rounded-b-2xl w-full">
3640
<div class="m-8">
3741
<!-- Loading State -->
3842
<div v-if="loading">Loading...</div>
@@ -50,16 +54,19 @@
5054
</div>
5155
<!-- Results State -->
5256
<div v-else>
53-
<div v-if="!searchQuery" class="font-semibold text-base text-[#111] my-2">New</div>
57+
<div v-if="!searchQuery" class="font-semibold text-base my-2">New</div>
5458
<div class="items-center gap-2 flex flex-wrap flex-row">
55-
<NuxtLink :to="`/product/${product.slug}-${product.sku.split('-')[0]}`" v-for="product in searchResult" class="flex bg-black/5 rounded-2xl overflow-hidden">
59+
<NuxtLink
60+
:to="`/product/${product.slug}-${product.sku.split('-')[0]}`"
61+
v-for="product in searchResult"
62+
class="flex bg-black/5 dark:bg-[#141414] rounded-2xl overflow-hidden">
5663
<div class="relative w-32 h-32 will-change-transform">
5764
<div class="h-full relative box-border">
5865
<NuxtImg class="object-cover absolute w-full h-full" :src="product.image.sourceUrl" />
5966
</div>
6067
</div>
6168
<div class="p-4 items-center flex flex-row box-border w-60">
62-
<div class="text-base text-[#111]">
69+
<div class="text-base">
6370
{{ product.name }}
6471
</div>
6572
</div>
@@ -69,7 +76,9 @@
6976
</div>
7077
</div>
7178
</div>
72-
<div class="hover:bg-[#e9e9e9] w-12 h-12 flex items-center justify-center rounded-full"><Icon color="#5f5f5f" name="fa6-solid:bag-shopping" size="22" /></div>
79+
<div class="hover:bg-[#e9e9e9] hover:dark:bg-[#262626] w-12 h-12 flex items-center justify-center rounded-full">
80+
<Icon color="#5f5f5f" name="fa6-solid:bag-shopping" size="22" />
81+
</div>
7382
</div>
7483
</div>
7584
<div v-if="suggestionMenu" class="fixed inset-0 z-40">

‎components/ButtonSelectCategory.vue‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,27 @@
22
<div class="relative cursor-pointer select-none items-center justify-center text-base font-semibold" ref="dropdownRef" @click="isDropdownVisible = !isDropdownVisible">
33
<div
44
class="box-border flex items-center rounded-full py-3.5 pl-5 pr-4 transition-all active:scale-95"
5-
:class="{ 'bg-black text-white hover:bg-black': isDropdownVisible, 'bg-[#efefef] hover:bg-[#e2e2e2]': !isDropdownVisible }">
5+
:class="{
6+
'bg-black text-white hover:bg-black dark:bg-white dark:text-black hover:dark:bg-white': isDropdownVisible,
7+
'bg-[#efefef] hover:bg-[#e2e2e2] dark:bg-[#262626] hover:dark:bg-[#333]': !isDropdownVisible,
8+
}">
69
<span class="mr-1.5">{{ route.query.category || 'All Categories' }}</span>
710
<Icon name="iconamoon:arrow-down-2" size="24" />
811
</div>
912
<Transition>
10-
<div v-if="isDropdownVisible" class="absolute top-full z-10 mt-[18px] rounded-2xl text-base font-semibold bg-white shadow-[0_0_8px_rgba(0,0,0,.1)]">
13+
<div v-if="isDropdownVisible" class="absolute top-full z-10 mt-[18px] rounded-2xl text-base font-semibold bg-white dark:bg-[#262626] shadow-[0_0_8px_rgba(0,0,0,.1)]">
1114
<div class="m-2 w-44">
12-
<div @click="setCategory()" class="rounded-[10px] px-3 py-2 transition-all duration-300 hover:bg-[#e9e9e9]">
15+
<div @click="setCategory()" class="rounded-[10px] px-3 py-2 transition-all duration-300 hover:bg-[#e9e9e9] hover:dark:bg-[#3c3c3c]">
1316
<div class="flex items-center justify-between">
1417
<div class="mr-1 w-full">All Categories</div>
1518
<Icon v-if="!route.query.category" name="iconamoon:check-bold" size="20" />
1619
</div>
1720
</div>
18-
<div v-for="(category, i) in categories" :key="i" @click="setCategory(category.name)" class="rounded-[10px] px-3 py-2 transition-all duration-300 hover:bg-[#e9e9e9]">
21+
<div
22+
v-for="(category, i) in categories"
23+
:key="i"
24+
@click="setCategory(category.name)"
25+
class="rounded-[10px] px-3 py-2 transition-all duration-300 hover:bg-[#e9e9e9] hover:dark:bg-[#3c3c3c]">
1926
<div class="flex items-center justify-between">
2027
<div class="mr-1 w-full">{{ category.name }}</div>
2128
<Icon v-if="route.query.category === category.name" name="iconamoon:check-bold" size="20" />

‎components/ButtonSortBy.vue‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,21 @@
22
<div class="relative cursor-pointer select-none items-center justify-center text-base font-semibold" ref="dropdownRef" @click="isDropdownVisible = !isDropdownVisible">
33
<div
44
class="box-border flex items-center rounded-full py-3.5 pl-5 pr-4 transition-all active:scale-95"
5-
:class="{ 'bg-black text-white hover:bg-black': isDropdownVisible, 'bg-[#efefef] hover:bg-[#e2e2e2]': !isDropdownVisible }">
5+
:class="{
6+
'bg-black text-white hover:bg-black dark:bg-white dark:text-black hover:dark:bg-white': isDropdownVisible,
7+
'bg-[#efefef] hover:bg-[#e2e2e2] dark:bg-[#262626] hover:dark:bg-[#333]': !isDropdownVisible,
8+
}">
69
<span class="mr-1.5">{{ selectedSort }}</span>
710
<Icon name="iconamoon:arrow-down-2" size="24" />
811
</div>
912
<Transition>
10-
<div v-if="isDropdownVisible" class="absolute top-full right-0 z-10 mt-[18px] rounded-2xl text-base font-semibold bg-white shadow-[0_0_8px_rgba(0,0,0,.1)]">
13+
<div v-if="isDropdownVisible" class="absolute top-full right-0 z-10 mt-[18px] rounded-2xl text-base font-semibold bg-white dark:bg-[#262626] shadow-[0_0_8px_rgba(0,0,0,.1)]">
1114
<div class="m-2 w-48">
12-
<div v-for="(option, i) in options" :key="i" @click="setSort(option.value)" class="rounded-[10px] px-3 py-2 transition-all duration-300 hover:bg-[#e9e9e9]">
15+
<div
16+
v-for="(option, i) in options"
17+
:key="i"
18+
@click="setSort(option.value)"
19+
class="rounded-[10px] px-3 py-2 transition-all duration-300 hover:bg-[#e9e9e9] hover:dark:bg-[#3c3c3c]">
1320
<div class="flex items-center justify-between">
1421
<div class="mr-1 w-full">{{ option.value }}</div>
1522
<Icon v-if="selectedSort === option.value" name="iconamoon:check-bold" size="20" />

‎components/ProductsSkeleton.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,18 @@
2222
}
2323
}
2424
25+
.dark .skeleton {
26+
@apply bg-[#262626] relative overflow-hidden;
27+
&:before {
28+
@apply absolute w-full h-full;
29+
content: '';
30+
background: linear-gradient(110deg, #262626 8%, #141414 18%, #262626 33%);
31+
background-repeat: no-repeat;
32+
background-size: 400% 400%;
33+
animation: 1.5s shimmer linear infinite;
34+
}
35+
}
36+
2537
@keyframes shimmer {
2638
0% {
2739
background-position: -500px 0;

0 commit comments

Comments
 (0)