From 156770b635ba3354fe011b091c977a8c0892bfec Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 30 Dec 2024 16:01:35 +0530
Subject: [PATCH] fix: dark mode in grid in modals

---
 frontend/src/components/Controls/Grid.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 5b96ccee..08d4cb21 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -57,7 +57,7 @@
               class="grid-row flex cursor-pointer items-center border-b border-outline-gray-modals bg-surface-modals last:rounded-b last:border-b-0"
             >
               <div
-                class="inline-flex h-9.5 items-center justify-center border-r border-outline-gray-modals p-2 w-12"
+                class="grid-row-checkbox inline-flex h-9.5 items-center bg-surface-white justify-center border-r border-outline-gray-modals p-2 w-12"
               >
                 <Checkbox
                   class="cursor-pointer duration-300"
@@ -66,7 +66,7 @@
                 />
               </div>
               <div
-                class="flex h-9.5 items-center justify-center border-r border-outline-gray-modals py-2 px-1 text-sm text-ink-gray-8 w-12"
+                class="flex h-9.5 items-center justify-center bg-surface-white border-r border-outline-gray-modals py-2 px-1 text-sm text-ink-gray-8 w-12"
               >
                 {{ index + 1 }}
               </div>
@@ -88,7 +88,7 @@
                   />
                   <div
                     v-else-if="field.type === 'Check'"
-                    class="flex h-full justify-center items-center"
+                    class="flex h-full bg-surface-white justify-center items-center"
                   >
                     <Checkbox
                       class="cursor-pointer duration-300"
@@ -353,6 +353,10 @@ const deleteRows = () => {
   height: 38px;
 }
 
+:deep(.grid-row:last-child .grid-row-checkbox) {
+  border-bottom-left-radius: 7px;
+}
+
 :deep(.grid-row .edit-row button) {
   border-bottom-right-radius: 7px;
 }