From b4242f7b472d648f81eb8f2934487be772318d63 Mon Sep 17 00:00:00 2001
From: AbleKSaju <126228406+AbleKSaju@users.noreply.github.com>
Date: Sat, 28 Sep 2024 10:23:09 +0530
Subject: [PATCH] feat: dark mode for grid view in POS items

---
 src/components/POS/ItemsGrid.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/POS/ItemsGrid.vue b/src/components/POS/ItemsGrid.vue
index 04109c2f..f3b4c77b 100644
--- a/src/components/POS/ItemsGrid.vue
+++ b/src/components/POS/ItemsGrid.vue
@@ -4,7 +4,7 @@
       flex flex-col
       gap-4
       p-4
-      border
+      border border-none
       items-center
       mt-4
       px-2
@@ -17,10 +17,16 @@
     <!-- Items Grid -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 w-full">
       <div
+        class="
+          border border-gray-300
+          dark:border-gray-800
+          p-1
+          flex flex-col
+          text-sm text-center
+        "
+        @click="handleChange(item as POSItem)"
         v-for="item in items as POSItem[]"
         :key="item.name"
-        class="border border-gray-300 p-1 flex flex-col text-sm text-center"
-        @click="handleChange(item as POSItem)"
       >
         <div class="self-center w-32 h-32 rounded-lg mb-1">
           <div class="relative">
@@ -38,6 +44,7 @@
                 h-32
                 flex
                 bg-gray-100
+                dark:bg-gray-850
                 justify-center
                 items-center
               "
@@ -58,9 +65,9 @@
             </p>
           </div>
         </div>
-        <h3 class="text-lg font-medium">{{ item.name }}</h3>
+        <h3 class="text-lg font-medium dark:text-white">{{ item.name }}</h3>
 
-        <p class="text-lg font-medium">
+        <p class="text-lg font-medium dark:text-white">
           {{
             item.rate ? fyo.currencySymbols[item.rate.getCurrency()] : undefined
           }}