fix color in customer light-dark button

resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue

@@ -30,22 +30,7 @@
         <template v-if="userStore.hasAbilities(ability)" #action>
           <button
             type="button"
-            class="
-              flex
-              items-center
-              justify-center
-              w-full
-              px-2
-              py-2
-              bg-gray-200
-              border-none
-              outline-none
-              cursor-pointer
-              dark:bg-gray-600/70
-              dark:backdrop-blur-xl
-              dark:shadow-glass
-              dark:hover:bg-gray-600/80
-            "
+            class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-none cursor-pointer "
             @click="openTaxModal"
           >
             <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
@@ -68,7 +53,7 @@
       <BaseIcon
         v-if="taxes.length && index !== taxes.length - 1"
         name="TrashIcon"
-        class="h-5 text-gray-700 dark:text-red-400 cursor-pointer"
+        class="h-5 text-gray-700 cursor-pointer"
         @click="removeTax(index)"
       />
     </div>

resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue

@@ -15,26 +15,12 @@
       <thead
         class="
           bg-white
-          border
-          border-gray-200
-          border-solid
+          border border-gray-200 border-solid
           dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
-        "
-      >
+          "
+        >
         <tr>
-          <th
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
-              dark:text-white dark:border-white/10
-            "
-          >
+          <th class="text-left" :class="theadClass">
             <BaseContentPlaceholders v-if="isLoading">
               <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
             </BaseContentPlaceholders>
@@ -42,19 +28,7 @@
               {{ $tc('items.item', 2) }}
             </span>
           </th>
-          <th
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-right text-gray-700
-              border-t border-b border-gray-200 border-solid
-              dark:text-white dark:border-white/10
-            "
-          >
+          <th class="text-right" :class="theadClass">
             <BaseContentPlaceholders v-if="isLoading">
               <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
             </BaseContentPlaceholders>
@@ -62,19 +36,7 @@
               {{ $t('invoices.item.quantity') }}
             </span>
           </th>
-          <th
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
-              dark:text-white dark:border-white/10
-            "
-          >
+          <th class="text-left" :class="theadClass">
             <BaseContentPlaceholders v-if="isLoading">
               <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
             </BaseContentPlaceholders>
@@ -83,18 +45,9 @@
             </span>
           </th>
           <th
-            v-if="store[storeProp].discount_per_item === 'YES'"
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
-              dark:text-white dark:border-white/10
-            "
+            v-if="store[storeProp].discount_per_item_enabled"
+            class="text-left"
+            :class="theadClass"
           >
             <BaseContentPlaceholders v-if="isLoading">
               <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
@@ -103,19 +56,7 @@
               {{ $t('invoices.item.discount') }}
             </span>
           </th>
-          <th
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-right text-gray-700
-              border-t border-b border-gray-200 border-solid
-              dark:text-white dark:border-white/10
-            "
-          >
+          <th class="text-right" :class="theadClass">
             <BaseContentPlaceholders v-if="isLoading">
               <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
             </BaseContentPlaceholders>
@@ -197,6 +138,11 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  theadClass: {
+    type: String,
+    default: `px-5 py-3 text-sm not-italic font-medium leading-5
+              text-gray-700 border-t border-b border-gray-200 border-solid dark:text-white dark:border-white/10`
+  },
 })
 
 const companyStore = useCompanyStore()

resources/scripts/admin/layouts/LayoutInstallation.vue

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

resources/scripts/admin/layouts/partials/TheSiteSidebar.vue

@@ -68,8 +68,10 @@
           </TransitionChild>
           <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
             <div class="flex items-center shrink-0 px-4 mb-10">
-              <img class="h-auto max-w-full w-36 hidden dark:block" :src="getDarkLogo"/>
-              <img class="h-auto max-w-full w-36 block dark:hidden" :src="getLightLogo"/>
+              <MainLogo
+                class="block h-auto max-w-full w-36 text-primary-400"
+                alt="Crater Logo"
+              />
             </div>
 
             <nav
@@ -165,7 +167,8 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import MainLogo from '@/scripts/components/icons/MainLogo.vue'
+
 import {
   Dialog,
   DialogOverlay,
@@ -180,9 +183,6 @@ import LightDarkSwitch from '@/scripts/components/LightDarkSwitcher.vue'
 const route = useRoute()
 const globalStore = useGlobalStore()
 
-const getDarkLogo = computed(() => new URL('/img/logo-white.png', import.meta.url))
-const getLightLogo = computed(() => new URL('/img/crater-logo.png', import.meta.url))
-
 function hasActiveUrl(url) {
   return route.path.indexOf(url) > -1
 }

resources/scripts/admin/stores/global.js

@@ -34,7 +34,8 @@ export const useGlobalStore = (useWindow = false) => {
       isAppLoaded: false,
       isSidebarOpen: false,
       areCurrenciesLoading: false,
-      isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark'),
+      isDarkModeOn: false,
+
       downloadReport: null,
     }),
 

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 dark:border-white/10"
+          class="grid grid-flow-row grid-cols-3 p-3 border border-gray-200  lg:gap-24 sm:gap-4"
         >
           <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 dark:border-gray-600 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"
           >
             <div class="col-span-2 text-sm">
               {{ index }}

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

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

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

@@ -2,6 +2,7 @@
   <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 dark:text-white">Notes:</p>
-    <ul class="w-full text-gray-600 list-disc list-inside dark:text-gray-300">
+    <p class="mt-4 mb-0 text-sm text-gray-600">Notes:</p>
+    <ul class="w-full text-gray-600 list-disc list-inside">
       <li class="text-sm leading-8">
         App domain should not contain
-        <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
+        <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
         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 rounded-md dark:bg-gray-400 dark:text-gray-600">localhost:8080</b>
+        <b class="inline-block px-1 bg-gray-100">localhost:8080</b>
       </li>
     </ul>
 

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

@@ -2,6 +2,7 @@
   <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,6 +2,7 @@
   <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/components/CustomerLightDarkButton.vue

@@ -24,6 +24,14 @@ import { useGlobalStore } from '@/scripts/customer/stores/global'
 
 const globalStore = useGlobalStore()
 
+const enabled = computed(
+  ()=>
+    localStorage.getItem('theme') === 'dark' ||
+    document.documentElement.classList.contains('dark')
+)
+
+globalStore.isDarkModeOn = enabled.value
+
 function onChange() {
   globalStore.isDarkModeOn = !globalStore.isDarkModeOn
 
@@ -35,6 +43,7 @@ function onChange() {
     localStorage.theme = 'light'
     document.documentElement.classList.remove('dark')
     document.documentElement.style.setProperty('color-scheme', 'light')
+
   }
 }
 </script>

resources/scripts/components/LightDarkSwitcher.vue

@@ -16,21 +16,26 @@ defineProps({
 
 const globalStore = useGlobalStore()
 
-const enabled = computed({
-  get: () => globalStore.isDarkModeOn,
-  set: (value) => {
-    if (value) {
-      localStorage.theme = 'dark'
-      document.documentElement.classList.add('dark')
-      document.documentElement.style.setProperty('color-scheme', 'dark')
-    } else {
-      localStorage.theme = 'light'
-      document.documentElement.classList.remove('dark')
-      document.documentElement.style.setProperty('color-scheme', 'light')
-    }
-    globalStore.isDarkModeOn = value
-  },
-})
+const enabled = ref(
+  localStorage.getItem('theme') === 'dark' ||
+    document.documentElement.classList.contains('dark')
+)
+
+globalStore.isDarkModeOn = enabled
+
+function onChange(val) {
+  if (val) {
+    localStorage.theme = 'dark'
+    document.documentElement.classList.add('dark')
+    document.documentElement.style.setProperty('color-scheme', 'dark')
+    globalStore.isDarkModeOn = true
+  } else {
+    localStorage.theme = 'light'
+    document.documentElement.classList.remove('dark')
+    document.documentElement.style.setProperty('color-scheme', 'light')
+    globalStore.isDarkModeOn = false
+  }
+}
 </script>
 
 <template>
@@ -44,6 +49,7 @@ const enabled = computed({
         v-model="enabled"
         class="relative inline-flex 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 dark:ring-offset-gray-700"
         :class="[enabled ? 'bg-primary-600' : 'bg-gray-200']"
+        @update:modelValue="onChange"
       >
         <span class="sr-only">Use setting</span>
         <span

resources/scripts/components/base/BaseWizardNavigation.vue

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

resources/scripts/components/base/BaseWizardStep.vue

@@ -9,7 +9,6 @@
       </p>
     </div>
     <slot />
-    <BaseDarkHighlight class="z-[-1]"/>
   </div>
 </template>
 
@@ -26,16 +25,16 @@ const props = defineProps({
   stepContainerClass: {
     type: String,
     default:
-      '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',
+      'w-full p-8 mb-8 bg-white border border-gray-200 border-solid rounded',
   },
   stepTitleClass: {
     type: String,
-    default: 'text-2xl not-italic font-semibold leading-7 text-black dark:text-white',
+    default: 'text-2xl not-italic font-semibold leading-7 text-black',
   },
   stepDescriptionClass: {
     type: String,
     default:
-      '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',
+      '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',
   },
 })
 </script>

resources/scripts/customer/stores/global.js

@@ -14,7 +14,7 @@ export const useGlobalStore = defineStore({
     companySlug: '',
     mainMenu: null,
     enabledModules: [],
-    isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark')
+    isDarkModeOn: false
   }),
 
   actions: {