fix: dark mode ui

zackha · zackha · commit 6ebf0642e2a7 · 2023-05-12T16:46:05.000+03:00
diff --git a/app.vue b/app.vue
@@ -96,20 +96,20 @@
         <div
           v-for="node in products"
           :key="node.id"
-          class="group cursor-pointer rounded-2xl border border-neutral-200 dark:border-neutral-800 p-2 transition-all hover:border-neutral-300 hover:dark:border-neutral-600">
-          <div class="relative mb-3 pb-[133%]">
+          class="group cursor-pointer rounded-2xl dark:bg-secondary-bg-d hover:dark:bg-[#222222] px-4 pt-4 pb-3 transition ease-[ease] duration-300 dark:border-[#222222] hover:dark:border-[#303030] border">
+          <div class="relative mb-4 pb-[133%] dark:shadow-[0_8px_24px_rgba(0,0,0,.5)] rounded-lg overflow-hidden">
             <NuxtImg
               loading="lazy"
               :title="node.name"
               :alt="node.image.altText || node.name"
               :src="node.galleryImages.nodes[0].sourceUrl"
-              class="absolute h-full w-full rounded-lg dark:bg-neutral-800 bg-neutral-200 object-cover" />
+              class="absolute h-full w-full dark:bg-neutral-800 bg-neutral-200 object-cover" />
             <NuxtImg
               loading="lazy"
               :title="node.name"
               :alt="node.image.altText || node.name"
               :src="node.image.sourceUrl"
-              class="absolute h-full w-full rounded-lg dark:bg-neutral-800 bg-neutral-200 object-cover transition-opacity duration-300 group-hover:opacity-0" />
+              class="absolute h-full w-full dark:bg-neutral-800 bg-neutral-200 object-cover transition-opacity duration-300 group-hover:opacity-0" />
           </div>
           <div class="mb-1 grid grid-flow-col gap-6 px-2 text-sm font-semibold">
             <div class="flex min-w-0 flex-col justify-between gap-1">
@@ -126,7 +126,7 @@
             </div>
           </div>
         </div>
-        <ProductSkeleton v-if="loading" />
+        <ProductSkeleton />
       </div>
       <div v-if="!empty && !loading" class="p-6 text-center text-lg">
         <Icon name="majesticons:search-line" size="99"></Icon>
diff --git a/components/ProductSkeleton.vue b/components/ProductSkeleton.vue
@@ -1,7 +1,7 @@
 <template>
-  <div v-for="i in 9" :key="i" class="animate-pulse rounded-2xl border border-neutral-200 dark:border-neutral-800 p-2">
-    <div class="relative mb-3 pb-[133%]">
-      <div class="absolute h-full w-full rounded-lg bg-neutral-200 dark:bg-neutral-800"></div>
+  <div v-for="i in 9" :key="i" class="animate-pulse rounded-2xl border dark:bg-secondary-bg-d px-4 pt-4 pb-3 dark:border-[#222222]">
+    <div class="relative mb-4 pb-[133%] dark:shadow-[0_8px_24px_rgba(0,0,0,.5)] rounded-lg overflow-hidden">
+      <div class="absolute h-full w-full bg-neutral-200 dark:bg-neutral-800"></div>
     </div>
     <div class="mb-1 grid grid-flow-row-dense grid-cols-3 px-2">
       <div class="col-span-2 flex min-w-0 flex-col justify-between gap-2">
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -5,6 +5,7 @@ module.exports = {
       colors: {
         'secondary-text': '#737373',
         'secondary-text-d': '#a8a8a8',
+        'secondary-bg-d': '#181818',
       },
       fontFamily: {
         sans: ['Inter', 'Helvetica', 'Arial', 'sans-serif'],
