From dbc7e7d6d4b959b6b4ad81db7a3ef32273a523fe Mon Sep 17 00:00:00 2001
From: raizasafeel <89463672+raizasafeel@users.noreply.github.com>
Date: Thu, 12 Feb 2026 10:14:23 +0530
Subject: [PATCH] fix: dark mode styling for controls and modals

---
 frontend/src/components/Controls/Autocomplete.vue | 9 ++++++---
 frontend/src/components/Controls/ChildTable.vue   | 8 ++++----
 frontend/src/components/Controls/MultiSelect.vue  | 2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Controls/Autocomplete.vue b/frontend/src/components/Controls/Autocomplete.vue
index dee1268f..9c742fc4 100644
--- a/frontend/src/components/Controls/Autocomplete.vue
+++ b/frontend/src/components/Controls/Autocomplete.vue
@@ -39,7 +39,7 @@
 				<template #body="{ isOpen }">
 					<div v-show="isOpen" class="">
 						<div
-							class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
+							class="mt-1 rounded-lg bg-surface-modal py-1 text-base border-2 border-outline-gray-modals"
 						>
 							<div class="relative px-1.5 pt-0.5">
 								<ComboboxInput
@@ -122,7 +122,10 @@
 									No results found
 								</li>
 							</ComboboxOptions>
-							<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
+							<div
+								v-if="slots.footer"
+								class="border-t border-outline-gray-modals p-1.5 pb-0.5"
+							>
 								<slot
 									name="footer"
 									v-bind="{ value: search?.el._value, close }"
@@ -283,7 +286,7 @@ const inputClasses = computed(() => {
 	let variant = props.disabled ? 'disabled' : props.variant
 	let variantClasses = {
 		subtle:
-			'border border-gray-100 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
+			'border border-outline-gray-modals bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
 		outline:
 			'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
 		disabled: [
diff --git a/frontend/src/components/Controls/ChildTable.vue b/frontend/src/components/Controls/ChildTable.vue
index 5e6ef47e..55e9fd4d 100644
--- a/frontend/src/components/Controls/ChildTable.vue
+++ b/frontend/src/components/Controls/ChildTable.vue
@@ -3,10 +3,10 @@
 		<div class="text-xs text-ink-gray-5 mb-2">
 			{{ label }}
 		</div>
-		<div class="overflow-visible border rounded-md">
+		<div class="overflow-visible border border-outline-gray-modals rounded-md">
 			<div class="overflow-x-auto">
 				<div
-					class="grid items-center space-x-4 p-2 border-b"
+					class="grid items-center space-x-4 p-2 border-b border-outline-gray-modals"
 					:style="{ gridTemplateColumns: getGridTemplateColumns() }"
 				>
 					<div
@@ -28,7 +28,7 @@
 						<input
 							v-if="showKey(key)"
 							v-model="row[key]"
-							class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
+							class="py-1.5 px-2 w-full border-none bg-transparent text-ink-gray-8 focus:ring-0 focus:border focus:border-outline-gray-3 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
 						/>
 					</template>
 
@@ -47,7 +47,7 @@
 						<div
 							v-if="menuOpenIndex === rowIndex"
 							ref="menuRef"
-							class="absolute right-0 w-32 z-50 bg-surface-white border border-outline-gray-1 rounded-md shadow-sm"
+							class="absolute right-0 w-32 z-50 bg-surface-modal border border-outline-gray-modals rounded-md shadow-sm"
 							:class="
 								rowIndex == (rows?.length ?? 0) - 1
 									? 'bottom-full mb-1'
diff --git a/frontend/src/components/Controls/MultiSelect.vue b/frontend/src/components/Controls/MultiSelect.vue
index 063dea4a..ba7261aa 100644
--- a/frontend/src/components/Controls/MultiSelect.vue
+++ b/frontend/src/components/Controls/MultiSelect.vue
@@ -22,7 +22,7 @@
 				<ComboboxOptions
 					v-show="open"
 					static
-					class="absolute z-20 mt-1 w-full rounded-lg bg-surface-white border-2 max-h-[13rem] flex flex-col"
+					class="absolute z-20 mt-1 w-full rounded-lg bg-surface-modal border-2 border-outline-gray-modals max-h-[13rem] flex flex-col"
 				>
 					<div
 						class="flex-1 my-1 overflow-y-auto px-1.5"