Add dark mode in BaseErrorAlert

* add dark mode base switch & switcher

* fix indentation

resources/scripts/components/base/BaseContentPlaceholders.vue

@@ -39,6 +39,8 @@ $base-content-placeholders-border-radius: 6px !default;
 $base-content-placeholders-line-height: 15px !default;
 $base-content-placeholders-spacing: 10px !default;
 
+$base-content-placeholders-primary-color-dark: rgb(71, 85, 105) !default;
+$base-content-placeholders-secondary-color-dark: rgb(71, 85, 105) !default;
 // Animations
 @keyframes vueContentPlaceholdersAnimation {
   0% {
@@ -57,6 +59,10 @@ $base-content-placeholders-spacing: 10px !default;
   min-height: $base-content-placeholders-line-height;
   background: $base-content-placeholders-secondary-color;
 
+  .dark & {
+    background: $base-content-placeholders-secondary-color-dark;
+  }
+
   .base-content-placeholders-is-rounded & {
     border-radius: $base-content-placeholders-border-radius;
   }
@@ -86,6 +92,15 @@ $base-content-placeholders-spacing: 10px !default;
     animation-name: vueContentPlaceholdersAnimation;
     animation-timing-function: linear;
   }
+
+  .dark .base-content-placeholders-is-animated &::before {
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
+      transparent 30%
+    );
+  }
 }
 
 @mixin base-content-placeholders-spacing {
@@ -156,6 +171,10 @@ $base-content-placeholders-spacing: 10px !default;
   min-height: $base-content-placeholders-line-height;
   background: $base-content-placeholders-secondary-color;
 
+  .dark & {
+    background: $base-content-placeholders-secondary-color-dark;
+  }
+  
   .base-content-placeholders-is-animated &::before {
     content: '';
     position: absolute;
@@ -177,6 +196,14 @@ $base-content-placeholders-spacing: 10px !default;
     animation-timing-function: linear;
   }
 
+    .dark .base-content-placeholders-is-animated &::before {
+      background: linear-gradient(
+      to right,
+      transparent 0%,
+      darken($base-content-placeholders-secondary-color-dark, 5%) 15%,
+      transparent 30%
+    );
+  }
   // @include base-content-placeholders-spacing;
 }
 

resources/scripts/components/base/BaseDialog.vue

@@ -30,8 +30,13 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
+            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"
           />
+          </DialogOverlay>
         </TransitionChild>
 
         <!-- This element is to trick the browser into centering the modal contents. -->
@@ -64,6 +69,11 @@
               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"
           >
@@ -80,31 +90,31 @@
                   rounded-full
                 "
                 :class="{
-                  'bg-green-100': dialogStore.variant === 'primary',
+                  'bg-green-100 dark:bg-primary-500': dialogStore.variant === 'primary',
-                  'bg-red-100': dialogStore.variant === 'danger',
+                  'bg-red-100 dark:bg-red-500': dialogStore.variant === 'danger',
                 }"
               >
                 <BaseIcon
                   v-if="dialogStore.variant === 'primary'"
                   name="CheckIcon"
-                  class="w-6 h-6 text-green-600"
+                  class="w-6 h-6 text-green-600 dark:text-white"
                 />
                 <BaseIcon
                   v-else
                   name="ExclamationIcon"
-                  class="w-6 h-6 text-red-600"
+                  class="w-6 h-6 text-red-600 dark:text-white"
                   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"
+                  class="text-lg font-medium leading-6 text-gray-900 dark:text-white"
                 >
                   {{ dialogStore.title }}
                 </DialogTitle>
                 <div class="mt-2">
-                  <p class="text-sm text-gray-500">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                     {{ dialogStore.message }}
                   </p>
                 </div>

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

resources/scripts/components/base/BaseEstimateStatusBadge.vue

@@ -18,17 +18,17 @@ const props = defineProps({
 const badgeColorClasses = computed(() => {
   switch (props.status) {
     case 'DRAFT':
-      return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
+      return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center '
     case 'SENT':
-      return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-200 dark:text-yellow-200'
+      return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center '
     case 'VIEWED':
-      return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
+      return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
     case 'EXPIRED':
-      return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm  text-red-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
+      return 'bg-red-300 bg-opacity-25 px-2 py-1 text-sm  text-red-800 uppercase font-normal text-center'
     case 'ACCEPTED':
-      return 'bg-green-400 bg-opacity-25 px-2 py-1 text-sm  text-green-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
+      return 'bg-green-400 bg-opacity-25 px-2 py-1 text-sm  text-green-800 uppercase font-normal text-center'
     case 'REJECTED':
-      return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm  text-purple-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-purple-400 dark:text-purple-400'
+      return 'bg-purple-300 bg-opacity-25 px-2 py-1 text-sm  text-purple-800 uppercase font-normal text-center'
     default:
       return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
   }

resources/scripts/components/base/BaseFilterWrapper.vue

@@ -7,7 +7,7 @@
     leave-from-class="opacity-100"
     leave-to-class="opacity-0"
   >
-    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded">
+    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-gray-200 rounded dark:bg-gray-800">
       <slot name="filter-header" />
 
       <label
@@ -20,6 +20,7 @@
           hover:text-gray-700
           top-2.5
           right-3.5
+          dark:text-gray-300
         "
         @click="$emit('clear')"
       >

resources/scripts/components/base/BaseInvoiceStatusBadge.vue

@@ -20,25 +20,25 @@ export default {
     const badgeColorClasses = computed(() => {
       switch (props.status) {
         case 'DRAFT':
-          return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
+          return 'bg-yellow-300 bg-opacity-25 px-2  py-1 text-sm  text-yellow-800 uppercase font-normal text-center'
         case 'SENT':
-          return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-lime-200 dark:text-yellow-200'
+          return ' bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center '
         case 'VIEWED':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
         case 'COMPLETED':
-          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
+          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center'
         case 'DUE':
-          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
+          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
         case 'OVERDUE':
-          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center  dark:bg-transparent dark:border dark:border-red-500 dark:text-red-500'
+          return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center'
         case 'UNPAID':
-          return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
+          return 'bg-yellow-500 bg-opacity-25 px-2 py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
         case 'PARTIALLY_PAID':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center  dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
         case 'PAID':
-          return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center text-center dark:bg-transparent dark:border dark:border-green-400 dark:text-green-400'
+          return 'bg-green-500 bg-opacity-25 px-2 py-1 text-sm  text-green-900 uppercase font-normal text-center'
         default:
-          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-502 dark:text-gray-200'
+          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
       }
     })
     return { badgeColorClasses }

resources/scripts/components/base/BasePaidStatusBadge.vue

@@ -24,15 +24,15 @@ export default {
     const badgeColorClasses = computed(() => {
       switch (props.status) {
         case 'PAID':
-          return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-indigo-400 dark:text-indigo-400'
+          return 'bg-primary-300 bg-opacity-25 text-primary-800 uppercase font-normal text-center'
         case 'UNPAID':
-          return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-orange-300 dark:text-orange-300'
+          return ' bg-yellow-500 bg-opacity-25 text-yellow-900 uppercase font-normal text-center '
         case 'PARTIALLY_PAID':
-          return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-300 dark:text-blue-300'
+          return 'bg-blue-400 bg-opacity-25 text-blue-900 uppercase font-normal text-center'
         case 'OVERDUE':
           return 'bg-red-300 bg-opacity-50 px-2  py-1 text-sm  text-red-900 uppercase font-normal text-center'
         default:
-          return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-300 dark:text-gray-300'
+          return 'bg-gray-500 bg-opacity-25 text-gray-900 uppercase font-normal text-center'
       }
     })
     return { badgeColorClasses }

resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue

@@ -20,13 +20,13 @@ export default {
     const badgeColorClasses = computed(() => {
       switch (props.status) {
         case 'COMPLETED':
-          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-green-500 dark:text-green-500'
+          return 'bg-green-500 bg-opacity-25 px-2  py-1 text-sm  text-green-900 uppercase font-normal text-center'
         case 'ON_HOLD':
-          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-yellow-500 dark:text-yellow-500'
+          return 'bg-yellow-500 bg-opacity-25 px-2  py-1 text-sm  text-yellow-900 uppercase font-normal text-center'
         case 'ACTIVE':
-          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-blue-400 dark:text-blue-400'
+          return 'bg-blue-400 bg-opacity-25 px-2  py-1 text-sm  text-blue-900 uppercase font-normal text-center'
         default:
-          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center dark:bg-transparent dark:border dark:border-gray-500 dark:text-gray-500'
+          return 'bg-gray-500 bg-opacity-25 px-2 py-1 text-sm  text-gray-900 uppercase font-normal text-center'
       }
     })
     return { badgeColorClasses }

resources/scripts/components/base/BaseSwitch.vue

@@ -7,7 +7,7 @@
 
       <Switch
         v-model="enabled"
-        :class="enabled ? 'bg-primary-500' : 'bg-gray-300'"
+        :class="enabled ? 'bg-primary-500' : 'bg-gray-300 dark:bg-gray-900'"
         class="
           relative
           inline-flex
@@ -21,7 +21,11 @@
         v-bind="$attrs"
       >
         <span
-          :class="enabled ? 'translate-x-6' : 'translate-x-1'"
+          :class="
+            enabled
+              ? 'translate-x-6 dark:bg-white'
+              : 'translate-x-1 dark:bg-gray-500'
+          "
           class="
             inline-block
             w-4

resources/scripts/components/base/BaseSwitchSection.vue

@@ -5,12 +5,12 @@
     <div class="flex flex-col">
       <SwitchLabel
         as="p"
-        class="p-0 mb-1 text-sm leading-snug text-black font-medium"
+        class="p-0 mb-1 text-sm leading-snug text-black font-medium dark:text-white"
         passive
       >
         {{ title }}
       </SwitchLabel>
-      <SwitchDescription class="text-sm text-gray-500">
+      <SwitchDescription class="text-sm text-gray-500 dark:text-gray-400">
         {{ description }}
       </SwitchDescription>
     </div>
@@ -18,7 +18,7 @@
       :disabled="disabled"
       :model-value="modelValue"
       :class="[
-        modelValue ? 'bg-primary-500' : 'bg-gray-200',
+        modelValue ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-900',
         'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
       ]"
       @update:modelValue="onUpdate"
@@ -26,7 +26,7 @@
       <span
         aria-hidden="true"
         :class="[
-          modelValue ? 'translate-x-5' : 'translate-x-0',
+          modelValue ? 'translate-x-5 dark:bg-white' : 'translate-x-0 dark:bg-gray-500',
           'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
         ]"
       />