Add dark mode in BaseErrorAlert

resources/scripts/components/base/BaseCustomInput.vue

@@ -40,7 +40,6 @@
                 font-normal
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-700/60
                 rounded
                 ml-1
                 py-0.5

resources/scripts/components/base/BaseCustomerAddressDisplay.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="address"
-    class="text-sm font-bold leading-5 text-black non-italic space-y-1 dark:text-white"
+    class="text-sm font-bold leading-5 text-black non-italic space-y-1"
   >
     <p v-if="address?.address_street_1">{{ address?.address_street_1 }},</p>
 

resources/scripts/components/base/BaseCustomerSelectPopup.vue

@@ -20,7 +20,6 @@
         border border-gray-200 border-solid
         min-h-[170px]
         rounded-md
-        dark:border-white/10 dark:bg-gray-800/50
       "
       @click.stop
     >
@@ -28,7 +27,7 @@
         <BaseText
           :text="selectedCustomer.name"
           :length="30"
-          class="flex-1 text-base font-medium text-left text-gray-900 dark:text-white"
+          class="flex-1 text-base font-medium text-left text-gray-900"
         />
         <div class="flex">
           <a
@@ -193,7 +192,6 @@
             border border-gray-200 border-solid
             rounded-md
             min-h-[170px]
-            dark:border-white/10 dark:bg-gray-700/60 dark:text-white
           "
         >
           <BaseIcon
@@ -209,12 +207,11 @@
               bg-gray-200
               rounded-full
               font-base
-              dark:bg-gray-700
             "
           />
 
           <div class="mt-1">
-            <label class="text-lg font-medium text-gray-900 dark:text-white">
+            <label class="text-lg font-medium text-gray-900">
               {{ $t('customers.new_customer') }}
               <span class="text-red-500"> * </span>
             </label>
@@ -249,11 +246,6 @@
               shadow-lg
               ring-1 ring-black ring-opacity-5
               bg-white
-               dark:border
-              dark:border-white/10
-              dark:bg-gray-800
-              dark:text-white
-              dark:shadow-glass
             "
           >
             <div class="relative">
@@ -273,7 +265,6 @@
                   overflow-auto
                   list
                   border-t border-gray-200
-                  dark:border-white/10
                 "
               >
                 <li
@@ -289,7 +280,6 @@
                     hover:cursor-pointer hover:bg-gray-100
                     focus:outline-none focus:bg-gray-100
                     last:border-b-0
-                    dark:border-white/10 dark:hover:bg-gray-700/30
                   "
                   @click="selectNewCustomer(customer.id, close)"
                 >
@@ -309,7 +299,6 @@
                       bg-gray-300
                       rounded-full
                       avatar
-                      dark:bg-gray-600
                     "
                   >
                     {{ initGenerator(customer.name) }}
@@ -344,9 +333,9 @@
                 </li>
                 <div
                   v-if="customerStore.customers.length === 0"
-                  class="flex justify-center p-5 text-gray-400 dark:text-gray-300"
+                  class="flex justify-center p-5 text-gray-400"
                 >
-                  <label class="text-base text-gray-500 cursor-pointer dark:text-gray-300">
+                  <label class="text-base text-gray-500 cursor-pointer">
                     {{ $t('customers.no_customers_found') }}
                   </label>
                 </div>
@@ -368,10 +357,6 @@
                 border-none
                 outline-none
                 focus:bg-gray-300
-                dark:bg-gray-600/70
-                dark:shadow-glass
-                dark:backdrop-blur-xl
-                dark:hover:bg-gray-600/80
               "
               @click="openCustomerModal"
             >

resources/scripts/components/base/BaseErrorAlert.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="rounded-md bg-red-50 p-4">
+  <div
+    class="
+      rounded-md
+      bg-red-50
+      p-4
+      dark:border dark:border-red-400 dark:bg-transparent
+    "
+  >
     <div class="flex">
       <div class="shrink-0">
-        <XCircleIcon class="h-5 w-5 text-red-400" aria-hidden="true" />
+        <XCircleIcon class="h-5 w-5 text-red-400 dark:text-red-500" aria-hidden="true" />
       </div>
       <div class="ml-3">
-        <h3 class="text-sm font-medium text-red-800">
+        <h3 class="text-sm font-medium text-red-800 dark:text-red-500">
           {{ errorTitle }}
         </h3>
         <div class="mt-2 text-sm text-red-700">