From f10f3be584eaa63f3dc04e4d1da7d72d510bb5af Mon Sep 17 00:00:00 2001
From: Marty Friedel <1491079+martyf@users.noreply.github.com>
Date: Thu, 23 May 2024 23:38:16 +0930
Subject: [PATCH] [5.x] Fix dark mode for Set Picker (#10173)

* WIP

* Improved dark mode support for Set picker
---
 .../fieldtypes/replicator/SetPicker.vue       | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/fieldtypes/replicator/SetPicker.vue b/resources/js/components/fieldtypes/replicator/SetPicker.vue
index 8a44f44b89..1666994592 100644
--- a/resources/js/components/fieldtypes/replicator/SetPicker.vue
+++ b/resources/js/components/fieldtypes/replicator/SetPicker.vue
@@ -14,10 +14,10 @@
             <slot name="trigger" />
         </template>
         <template #default>
-            <div class="set-picker-header p-3 border-b text-xs flex items-center">
-                <input ref="search" type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSearch" v-model="search" />
-                <div v-if="showGroupBreadcrumb" class="flex items-center text-gray-700 font-medium">
-                    <button @click="unselectGroup" class=" hover:text-gray-900 rtl:mr-2.5 ltr:ml-2.5 rounded">
+            <div class="set-picker-header p-3 border-b dark:border-dark-900 text-xs flex items-center">
+                <input ref="search" type="text" class="input-text text-xs h-auto py-1 px-2 border rounded w-full dark:bg-dark-650 dark:border-gray-900" :placeholder="__('Search Sets')" v-show="showSearch" v-model="search" />
+                <div v-if="showGroupBreadcrumb" class="flex items-center text-gray-700 dark:text-gray-600 font-medium">
+                    <button @click="unselectGroup" class="hover:text-gray-900 dark:hover:text-gray-500 rtl:mr-2.5 ltr:ml-2.5 rounded">
                         {{ __('Groups') }}
                     </button>
                     <svg-icon name="micro/chevron-right" class="w-4 h-4" />
@@ -25,20 +25,20 @@
                 </div>
             </div>
             <div class="p-1 max-h-[21rem] overflow-auto">
-                <div v-for="(item, i) in items" :key="item.handle" class="cursor-pointer rounded" :class="{ 'bg-gray-200': selectionIndex === i }" @mouseover="selectionIndex = i">
+                <div v-for="(item, i) in items" :key="item.handle" class="cursor-pointer rounded" :class="{ 'bg-gray-200 dark:bg-dark-600': selectionIndex === i }" @mouseover="selectionIndex = i">
                     <div v-if="item.type === 'group'" @click="selectGroup(item.handle)" class="flex items-center group px-2 py-1.5 rounded-md">
-                        <svg-icon :name="groupIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white border border-gray-600 rtl:ml-2 ltr:mr-2 p-2 text-gray-800" />
+                        <svg-icon :name="groupIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white dark:bg-dark-650 border border-gray-600 dark:border-dark-800 rtl:ml-2 ltr:mr-2 p-2 text-gray-800 dark:text-dark-175" />
                         <div class="flex-1">
-                            <div class="text-md font-medium text-gray-800 truncate w-52">{{ __(item.display || item.handle) }}</div>
-                            <div v-if="item.instructions" class="text-2xs text-gray-700 truncate w-52">{{ __(item.instructions) }}</div>
+                            <div class="text-md font-medium text-gray-800 dark:text-dark-175 truncate w-52">{{ __(item.display || item.handle) }}</div>
+                            <div v-if="item.instructions" class="text-2xs text-gray-700 dark:text-dark-175 truncate w-52">{{ __(item.instructions) }}</div>
                         </div>
-                        <svg-icon name="micro/chevron-right-thin" class="text-gray-600 group-hover:text-gray-800" />
+                        <svg-icon name="micro/chevron-right-thin" class="text-gray-600 group-hover:text-dark-800 dark:group-hover:text-dark-175" />
                     </div>
                     <div v-if="item.type === 'set'" @click="addSet(item.handle)" class="flex items-center group px-2 py-1.5 rounded-md">
-                        <svg-icon :name="setIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white border border-gray-600 rtl:ml-2 ltr:mr-2 p-2 text-gray-800" />
+                        <svg-icon :name="setIconName(item.icon)" :directory="iconBaseDirectory" class="h-9 w-9 rounded bg-white dark:bg-dark-650 border border-gray-600 dark:border-dark-800 rtl:ml-2 ltr:mr-2 p-2 text-gray-800 dark:text-dark-175" />
                         <div class="flex-1">
-                            <div class="text-md font-medium text-gray-800 truncate w-52">{{ __(item.display || item.handle) }}</div>
-                            <div v-if="item.instructions" class="text-2xs text-gray-700 truncate w-52">{{ __(item.instructions) }}</div>
+                            <div class="text-md font-medium text-gray-800 dark:text-dark-175 truncate w-52">{{ __(item.display || item.handle) }}</div>
+                            <div v-if="item.instructions" class="text-2xs text-gray-700 dark:text-dark-175 truncate w-52">{{ __(item.instructions) }}</div>
                         </div>
                     </div>
                 </div>