fix update app settings dark mode

* add LightDark option for customer dashboard

* fix color in customer light-dark button

---------

Co-authored-by: yashkanakiya <yashkanakiya281297@gmail.com>

resources/scripts/admin/components/modal-components/RolesModal.vue

@@ -40,6 +40,7 @@
             px-4
             md:px-8
             py-1.5
+            dark:text-gray-200
           "
         >
           {{ $tc('settings.roles.permission', 2) }}

resources/scripts/admin/layouts/LayoutInstallation.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="h-screen overflow-y-auto text-base">
+  <div class="h-screen overflow-y-auto text-base dark:bg-gray-800/80 dark:text-white">
     <NotificationRoot />
 
-    <div class="container mx-auto px-4">
+    <div class="container px-4 mx-auto">
       <router-view />
     </div>
   </div>

resources/scripts/admin/views/customers/View.vue

@@ -34,8 +34,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
             :to="`/admin/estimates/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem class="">
-              <BaseIcon name="DocumentIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="DocumentIcon" :class="slotProps.class" />
               {{ $t('estimates.new_estimate') }}
             </BaseDropdownItem>
           </router-link>
@@ -44,8 +44,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
             :to="`/admin/invoices/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem>
-              <BaseIcon name="DocumentTextIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="DocumentTextIcon" :class="slotProps.class" />
               {{ $t('invoices.new_invoice') }}
             </BaseDropdownItem>
           </router-link>
@@ -54,8 +54,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_PAYMENT)"
             :to="`/admin/payments/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem>
-              <BaseIcon name="CreditCardIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="CreditCardIcon" :class="slotProps.class" />
               {{ $t('payments.new_payment') }}
             </BaseDropdownItem>
           </router-link>
@@ -64,8 +64,8 @@
             v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
             :to="`/admin/expenses/create?customer=${$route.params.id}`"
           >
-            <BaseDropdownItem>
-              <BaseIcon name="CalculatorIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="CalculatorIcon" :class="slotProps.class" />
               {{ $t('expenses.new_expense') }}
             </BaseDropdownItem>
           </router-link>

resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue

@@ -13,6 +13,7 @@
       xl:ml-64
       w-88
       xl:block
+      dark:bg-gray-800
     "
   >
     <div
@@ -25,6 +26,7 @@
         pb-2
         border border-gray-200 border-solid
         height-full
+        dark:border-gray-600
       "
     >
       <BaseInput
@@ -59,6 +61,7 @@
               mb-2
               text-sm
               border-b border-gray-200 border-solid
+              dark:border-gray-600
             "
           >
             {{ $t('general.sort_by') }}
@@ -114,6 +117,7 @@
         border-l border-gray-200 border-solid
         sidebar
         base-scroll
+        dark:border-gray-600
       "
     >
       <div v-for="(customer, index) in customerList" :key="index">
@@ -122,9 +126,9 @@
           :id="'customer-' + customer.id"
           :to="`/admin/customers/${customer.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:border-primary-400 dark:bg-gray-700':
                 hasActiveUrl(customer.id),
             },
           ]"
@@ -143,6 +147,7 @@
                 text-black
                 capitalize
                 truncate
+                dark:text-white
               "
             />
 
@@ -157,6 +162,7 @@
                 font-medium
                 leading-5
                 text-gray-600
+                dark:text-gray-400
               "
             />
           </div>
@@ -175,7 +181,7 @@
       </div>
       <p
         v-if="!customerList?.length && !isFetching"
-        class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+        class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
       >
         {{ $t('customers.no_matching_customers') }}
       </p>

resources/scripts/admin/views/installation/Step1RequirementsCheck.vue

@@ -7,7 +7,7 @@
       <div class="mb-6">
         <div
           v-if="phpSupportInfo"
-          class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
+          class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 lg:gap-24 sm:gap-4 dark:border-white/10"
         >
           <div class="col-span-2 text-sm">
             {{
@@ -32,7 +32,7 @@
           <div
             v-for="(requirement, index) in requirements"
             :key="index"
-            class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
+            class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200 dark:border-gray-600 lg:gap-24 sm:gap-4"
           >
             <div class="col-span-2 text-sm">
               {{ index }}

resources/scripts/admin/views/installation/Step2PermissionCheck.vue

@@ -8,12 +8,7 @@
       <div
         v-for="(permission, index) in 3"
         :key="index"
-        class="
-          grid grid-flow-row grid-cols-3
-          lg:gap-24
-          sm:gap-4
-          border border-gray-200
-        "
+        class="grid grid-flow-row grid-cols-3 border border-gray-200 lg:gap-24 sm:gap-4 dark:border-gray-600"
       >
         <BaseContentPlaceholdersText :lines="1" class="col-span-4 p-3" />
       </div>
@@ -29,7 +24,7 @@
       <div
         v-for="(permission, index) in permissions"
         :key="index"
-        class="border border-gray-200"
+        class="border border-gray-200 dark:border-gray-600"
       >
         <div class="grid grid-flow-row grid-cols-3 lg:gap-24 sm:gap-4">
           <div class="col-span-2 p-3">
@@ -38,11 +33,11 @@
           <div class="p-3 text-right">
             <span
               v-if="permission.isSet"
-              class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-green-500"
+              class="inline-block w-4 h-4 ml-3 mr-2 bg-green-500 rounded-full"
             />
             <span
               v-else
-              class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-red-500"
+              class="inline-block w-4 h-4 ml-3 mr-2 bg-red-500 rounded-full"
             />
             <span>{{ permission.permission }}</span>
           </div>

resources/scripts/admin/views/installation/Step3DatabaseConfig.vue

@@ -2,7 +2,6 @@
   <BaseWizardStep
     :title="$t('wizard.database.database')"
     :description="$t('wizard.database.desc')"
-    step-container="w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded md:w-full"
   >
     <component
       :is="databaseData.database_connection"

resources/scripts/admin/views/installation/Step4VerifyDomain.vue

@@ -18,18 +18,18 @@
       </BaseInputGroup>
     </div>
 
-    <p class="mt-4 mb-0 text-sm text-gray-600">Notes:</p>
-    <ul class="w-full text-gray-600 list-disc list-inside">
+    <p class="mt-4 mb-0 text-sm text-gray-600 dark:text-white">Notes:</p>
+    <ul class="w-full text-gray-600 list-disc list-inside dark:text-gray-300">
       <li class="text-sm leading-8">
         App domain should not contain
-        <b class="inline-block px-1 bg-gray-100 rounded-sm">https://</b> or
-        <b class="inline-block px-1 bg-gray-100 rounded-sm">http</b> in front of
+        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">https://</b> or
+        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">http</b> in front of
         the domain.
       </li>
       <li class="text-sm leading-8">
         If you're accessing the website on a different port, please mention the
         port. For example:
-        <b class="inline-block px-1 bg-gray-100">localhost:8080</b>
+        <b class="inline-block px-1 bg-gray-100 rounded-md dark:bg-gray-400 dark:text-gray-600">localhost:8080</b>
       </li>
     </ul>
 

resources/scripts/admin/views/installation/Step7CompanyInfo.vue

@@ -2,7 +2,6 @@
   <BaseWizardStep
     :title="$t('wizard.company_info')"
     :description="$t('wizard.company_info_desc')"
-    step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
   >
     <form action="" @submit.prevent="next">
       <div class="grid grid-cols-1 mb-4 md:grid-cols-2 md:mb-6">

resources/scripts/admin/views/installation/Step8CompanyPreferences.vue

@@ -2,7 +2,6 @@
   <BaseWizardStep
     :title="$t('wizard.preferences')"
     :description="$t('wizard.preferences_desc')"
-    step-container="bg-white border border-gray-200 border-solid mb-8 md:w-full p-8 rounded w-full"
   >
     <form action="" @submit.prevent="next">
       <div>

resources/scripts/admin/views/settings/UpdateAppSetting.vue

@@ -92,7 +92,7 @@
           <tr
             v-for="(ext, i) in requiredExtentions"
             :key="i"
-            class="p-2 border-2 border-gray-200"
+            class="p-2 border-2 border-gray-200 dark:border-gray-600"
           >
             <td width="70%" class="p-2 text-sm truncate">
               {{ i }}
@@ -121,7 +121,7 @@
             {{ $t('settings.update_app.update_progress') }}
           </h6>
           <p
-            class="mb-8 text-sm leading-snug text-gray-500"
+            class="mb-8 text-sm leading-snug text-gray-500 dark:text-gray-400"
             style="max-width: 480px"
           >
             {{ $t('settings.update_app.progress_text') }}
@@ -135,11 +135,11 @@
         <li
           v-for="step in updateSteps"
           :key="step.stepUrl"
-          class="flex justify-between w-full py-3 border-b border-gray-200 border-solid last:border-b-0"
+          class="flex justify-between w-full py-3 border-b border-gray-200 dark:border-gray-600 border-solid last:border-b-0"
         >
-          <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
+          <p class="m-0 text-sm dark:text-gray-300 leading-8">{{ $t(step.translationKey) }}</p>
           <div class="flex flex-row items-center">
-            <span v-if="step.time" class="mr-3 text-xs text-gray-500">
+            <span v-if="step.time" class="mr-3 text-xs text-gray-500 dark:text-gray-300">
               {{ step.time }}
             </span>
             <span
@@ -275,7 +275,7 @@ function statusClass(step) {
     case 'running':
       return 'text-blue-400 bg-blue-100'
     case 'error':
-      return 'text-danger bg-red-200'
+      return 'text-red-400 bg-red-200'
     default:
       return ''
   }

resources/scripts/components/CustomerLightDarkButton.vue

@@ -2,22 +2,20 @@
    <button
     type="button"
     class="
-      bg-white
-      p-1.5
-      rounded-full
-      text-gray-400
-      hover:text-gray-500
-      focus:outline-none
-      focus:ring-2
-      focus:ring-primary-500
-      dark:bg-transparent
-      dark:focus:ring-gray-500
+      flex
+      h-8
+      w-8
+      items-center
+      justify-center
+      rounded-md
+      transition
+      hover:bg-zinc-900/5
+      dark:hover:bg-white/5
     "
     @click="onChange"
   >
-
-    <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-yellow-500" name="SunIcon" />
-    <BaseIcon v-else class="h-5 w-5 text-primary-400" name="MoonIcon" />
+    <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-black" name="SunIcon" />
+    <BaseIcon v-else class="h-5 w-5 text-white" name="MoonIcon" />
   </button>
 </template>
 <script setup>

resources/scripts/components/base/BaseWizardNavigation.vue

@@ -1,16 +1,7 @@
 <template>
   <div
     :class="containerClass"
-    class="
-      relative
-      after:bg-gray-200
-      after:absolute
-      after:transform
-      after:top-1/2
-      after:-translate-y-1/2
-      after:h-2
-      after:w-full
-    "
+    class="relative after:bg-gray-200 dark:after:bg-gray-700 after:absolute after:transform after:top-1/2 after:-translate-y-1/2 after:h-2 after:w-full"
   >
     <a
       v-for="(number, index) in steps"
@@ -58,21 +49,21 @@ export default {
     },
     currentStepClass: {
       type: String,
-      default: 'bg-white border-primary-500',
+      default: 'bg-white border-primary-500 dark:bg-gray-600 dark:border-gray-500 dark:border-primary-600',
     },
     nextStepClass: {
       type: String,
-      default: 'border-gray-200 bg-white',
+      default: 'border-gray-200 bg-white dark:bg-gray-600 dark:border-gray-500',
     },
     previousStepClass: {
       type: String,
       default:
-        'bg-primary-500 border-primary-500 flex justify-center items-center',
+        'bg-primary-500 dark:bg-primary-600 border-primary-500 flex justify-center items-center dark:border-primary-600',
     },
     iconClass: {
       type: String,
       default:
-        'flex items-center justify-center w-full h-full text-sm font-black text-center text-white',
+        'flex items-center justify-center w-full h-full text-sm font-black text-center text-white dark:text-gray-400',
     },
   },
 

resources/scripts/components/base/BaseWizardStep.vue

@@ -9,6 +9,7 @@
       </p>
     </div>
     <slot />
+    <BaseDarkHighlight class="z-[-1]"/>
   </div>
 </template>
 
@@ -25,16 +26,16 @@ const props = defineProps({
   stepContainerClass: {
     type: String,
     default:
-      'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded',
+      'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded dark:from-gray-700/70 dark:to-gray-800/70 dark:bg-transparent dark:backdrop-blur-xl dark:shadow-glass dark:border dark:border-white/10',
   },
   stepTitleClass: {
     type: String,
-    default: 'text-2xl not-italic font-semibold leading-7 text-black',
+    default: 'text-2xl not-italic font-semibold leading-7 text-black dark:text-white',
   },
   stepDescriptionClass: {
     type: String,
     default:
-      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 lg:w-7/12 md:w-7/12 sm:w-7/12',
+      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-gray-500 dark:text-gray-300 lg:w-7/12 md:w-7/12 sm:w-7/12',
   },
 })
 </script>