fix tab-list border in dark-mode

resources/scripts/admin/views/estimates/Index.vue

@@ -130,6 +130,7 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <!-- Tabs -->

resources/scripts/admin/views/invoices/Index.vue

@@ -127,6 +127,7 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <!-- Tabs -->

resources/scripts/admin/views/recurring-invoices/Index.vue

@@ -121,6 +121,7 @@
           mt-5
           list-none
           border-b-2 border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <!-- Tabs -->

resources/scripts/components/base/BaseInput.vue

@@ -65,7 +65,6 @@
         rounded-l-md
         bg-gray-50
         sm:text-sm
-        dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300
       "
     >
       {{ addon }}
@@ -83,7 +82,7 @@
         pointer-events-none
       "
     >
-      <span class="text-gray-500 dark:text-white sm:text-sm ">
+      <span class="text-gray-500 sm:text-sm">
         {{ inlineAddon }}
       </span>
     </div>
@@ -200,7 +199,7 @@ const props = defineProps({
   defaultInputClass: {
     type: String,
     default:
-      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black  dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500',
+      'font-base block w-full sm:text-sm border-gray-200 rounded-md text-black',
   },
   iconLeftClass: {
     type: String,
@@ -251,8 +250,7 @@ const inputAddonClass = computed(() => {
 
 const inputInvalidClass = computed(() => {
   if (props.invalid) {
-    return 'border-red-500 dark:border-red-500 ring-red-500 dark:ring-red-500 focus:ring-red-500 dark:focus:ring-red-500  focus:border-red-500  dark:focus:border-red-500  '
-
+    return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
   }
 
   return 'focus:ring-primary-400 focus:border-primary-400'
@@ -260,7 +258,7 @@ const inputInvalidClass = computed(() => {
 
 const inputDisabledClass = computed(() => {
   if (props.disabled) {
-    return `border-gray-100 bg-gray-100 !text-gray-400 dark:!text-gray-200   ring-gray-200 focus:ring-gray-200 focus:border-gray-100 dark:opacity-25 `
+    return `border-gray-100 bg-gray-100 !text-gray-400 ring-gray-200 focus:ring-gray-200 focus:border-gray-100`
   }
 
   return ''

resources/scripts/components/base/BaseTabGroup.vue

@@ -7,7 +7,7 @@
     >
       <TabList
         :class="[
-          'flex border-b border-grey-light',
+          'flex border-b border-grey-light dark:border-gray-600',
           'relative overflow-x-auto overflow-y-hidden',
           'lg:pb-0 lg:ml-0',
         ]"
@@ -22,8 +22,8 @@
             :class="[
               'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-none whitespace-nowrap',
               selected
-                ? ' border-primary-400 text-black font-medium'
-                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                ? 'border-primary-400 text-black font-medium dark:text-white'
+                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:border-gray-500',
             ]"
           >
             {{ tab.title }}