add dark-mode in InvoiceInformationCard

add dark card and dark highlight component

resources/scripts/components/InvoiceInformationCard.vue

@@ -1,46 +1,46 @@
 <template>
-  <div class="bg-white shadow overflow-hidden rounded-lg mt-6">
+  <div class="bg-white shadow overflow-hidden rounded-lg mt-6 dark:bg-gray-800">
     <div class="px-4 py-5 sm:px-6">
-      <h3 class="text-lg leading-6 font-medium text-gray-900">
+      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-400">
         {{ $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">
+      <dl class="sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-500">
         <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">
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
             {{ $t('general.from') }}
           </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   dark:text-gray-100">
             {{ 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">
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
             {{ $t('general.to') }}
           </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   dark:text-gray-100">
             {{ 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">
+          <dt class="text-sm font-medium text-gray-500 capitalize dark:text-gray-400 ">
             {{ $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"
+              class="px-3 py-1 dark:text-gray-400"
             >
               {{ 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">
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
             {{ $t('invoices.total') }}
           </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 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
             <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">
+          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-100" >
             <span v-html="invoice.formatted_notes"></span>
           </dd>
         </div>

resources/scripts/components/base/BaseCard.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="bg-white rounded-lg shadow">
+  <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
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-black border-b border-gray-100 border-solid"

resources/scripts/components/base/BaseDarkHighlight.vue

@@ -0,0 +1,21 @@
+<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/BaseDialog.vue

@@ -30,13 +30,8 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75 dark:backdrop-blur-xl dark:bg-gray-900/80"
-          >
-           <BaseDarkHighlight
-            class="!bg-highlight/[.17] !top-1/2 h-60 -translate-y-1/2 mt-5"
-            :class="dialogSizeClasses"
+            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
           />
-          </DialogOverlay>
         </TransitionChild>
 
         <!-- This element is to trick the browser into centering the modal contents. -->
@@ -69,11 +64,6 @@
               shadow-xl
               sm:my-8 sm:align-middle sm:w-full sm:p-6
               relative
-              dark:backdrop-blur-xl
-              dark:shadow-glass
-              dark:border
-              dark:border-white/10
-              dark:bg-gray-800
             "
             :class="dialogSizeClasses"
           >
@@ -90,31 +80,31 @@
                   rounded-full
                 "
                 :class="{
-                  'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
-                  'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
+                  'bg-green-100': dialogStore.variant === 'primary',
+                  'bg-red-100': dialogStore.variant === 'danger',
                 }"
               >
                 <BaseIcon
                   v-if="dialogStore.variant === 'primary'"
                   name="CheckIcon"
-                  class="w-6 h-6 text-green-600 dark:text-white"
+                  class="w-6 h-6 text-green-600"
                 />
                 <BaseIcon
                   v-else
                   name="ExclamationIcon"
-                  class="w-6 h-6 text-red-600 dark:text-white"
+                  class="w-6 h-6 text-red-600"
                   aria-hidden="true"
                 />
               </div>
               <div class="mt-3 text-center sm:mt-5">
                 <DialogTitle
                   as="h3"
-                  class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
+                  class="text-lg font-medium leading-6 text-gray-900"
                 >
                   {{ dialogStore.title }}
                 </DialogTitle>
                 <div class="mt-2">
-                  <p class="text-sm text-gray-500 dark:text-gray-400">
+                  <p class="text-sm text-gray-500">
                     {{ dialogStore.message }}
                   </p>
                 </div>

tailwind.config.js

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