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/InvoiceInformationCard.vue

@@ -1,46 +1,46 @@
 <template>
-  <div class="bg-white shadow overflow-hidden rounded-lg mt-6 dark:bg-gray-800">
+  <div class="bg-white shadow overflow-hidden rounded-lg mt-6">
     <div class="px-4 py-5 sm:px-6">
-      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-400">
+      <h3 class="text-lg leading-6 font-medium text-gray-900">
         {{ $t('invoices.invoice_information') }}
       </h3>
     </div>
     <div v-if="invoice" class="border-t border-gray-200 px-4 py-5 sm:p-0">
-      <dl class="sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-500">
+      <dl class="sm:divide-y sm:divide-gray-200">
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+          <dt class="text-sm font-medium text-gray-500">
             {{ $t('general.from') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2   dark:text-gray-100">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             {{ invoice.company.name }}
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+          <dt class="text-sm font-medium text-gray-500">
             {{ $t('general.to') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2   dark:text-gray-100">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             {{ invoice.customer.name }}
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500 capitalize dark:text-gray-400 ">
+          <dt class="text-sm font-medium text-gray-500 capitalize">
             {{ $t('invoices.paid_status').toLowerCase() }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 ">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             <BaseInvoiceStatusBadge
               :status="invoice.paid_status"
-              class="px-3 py-1 dark:text-gray-400"
+              class="px-3 py-1"
             >
               {{ invoice.paid_status }}
             </BaseInvoiceStatusBadge>
           </dd>
         </div>
         <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
+          <dt class="text-sm font-medium text-gray-500">
             {{ $t('invoices.total') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             <BaseFormatMoney
               :currency="invoice.currency"
               :amount="invoice.total"
@@ -54,7 +54,7 @@
           <dt class="text-sm font-medium text-gray-500">
             {{ $t('invoices.notes') }}
           </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100" >
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
             <span v-html="invoice.formatted_notes"></span>
           </dd>
         </div>

resources/scripts/components/base/BaseCard.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="bg-white rounded-lg shadow dark:bg-gray-800 dark:text-white dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70 relative"
-  >
-    <BaseDarkHighlight class="z-[-1] mt-10" />
-
+  <div class="bg-white rounded-lg shadow">
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-black border-b border-gray-100 border-solid"

resources/scripts/components/base/BaseDarkHighlight.vue

@@ -1,21 +0,0 @@
-<template>
-  <div
-    class="
-      hidden
-      top-0
-      w-full
-      absolute
-      ml-auto
-      mr-auto
-      left-0
-      right-0
-      text-center
-      h-full
-      rounded-full
-      bg-highlight/[.10]
-      blur-2xl
-      dark:block
-      z-[-1]
-    "
-  />
-</template>

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 }}

tailwind.config.js

@@ -36,7 +36,6 @@ module.exports = {
           900: withOpacityValue('--color-primary-900'),
         },
         black: '#040405',
-        highlight: 'rgb(56, 189, 248)',
         red: colors.red,
         teal: colors.teal,
         gray: colors.slate,