fix password eye icon and minor fix in dark mode

fix sidebar and table data link in dark mode color (#1259 )
* fix sidebar and table data link in dark mode color * add dark mode toggle in installation step
2025-10-27 11:41:09 -04:00 · 2023-08-22 17:43:49 +05:30 · 2023-08-22 11:18:02 +05:30 · 2023-03-31 17:44:18 +05:30 · 2023-03-31 17:34:58 +05:30 · 2023-03-30 18:48:17 +05:30
44 changed files with 267 additions and 308 deletions
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
@ -30,7 +30,22 @@
        <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 "
+            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
+            "
            @click="openTaxModal"
          >
            <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
@ -53,7 +68,7 @@
      <BaseIcon
        v-if="taxes.length && index !== taxes.length - 1"
        name="TrashIcon"
-        class="h-5 text-gray-700 cursor-pointer"
+        class="h-5 text-gray-700 dark:text-red-400 cursor-pointer"
        @click="removeTax(index)"
      />
    </div>
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
@ -15,12 +15,26 @@
      <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="text-left" :class="theadClass">
+          <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
+            "
+          >
            <BaseContentPlaceholders v-if="isLoading">
              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
            </BaseContentPlaceholders>
@ -28,7 +42,19 @@
              {{ $tc('items.item', 2) }}
            </span>
          </th>
-          <th class="text-right" :class="theadClass">
+          <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
+            "
+          >
            <BaseContentPlaceholders v-if="isLoading">
              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
            </BaseContentPlaceholders>
@ -36,7 +62,19 @@
              {{ $t('invoices.item.quantity') }}
            </span>
          </th>
-          <th class="text-left" :class="theadClass">
+          <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
+            "
+          >
            <BaseContentPlaceholders v-if="isLoading">
              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
            </BaseContentPlaceholders>
@ -45,9 +83,18 @@
            </span>
          </th>
          <th
-            v-if="store[storeProp].discount_per_item_enabled"
-            class="text-left"
-            :class="theadClass"
+            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
+            "
          >
            <BaseContentPlaceholders v-if="isLoading">
              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
@ -56,7 +103,19 @@
              {{ $t('invoices.item.discount') }}
            </span>
          </th>
-          <th class="text-right" :class="theadClass">
+          <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
+            "
+          >
            <BaseContentPlaceholders v-if="isLoading">
              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
            </BaseContentPlaceholders>
@ -138,11 +197,6 @@ 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()
--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ b/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) }}
--- a/resources/scripts/admin/layouts/LayoutInstallation.vue
+++ b/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>
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@ -68,10 +68,8 @@
          </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">
-              <MainLogo
-                class="block h-auto max-w-full w-36 text-primary-400"
-                alt="Crater Logo"
-              />
+              <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"/>
            </div>

            <nav
@ -95,7 +93,7 @@
                  :name="item.icon"
                  :class="[
                    hasActiveUrl(item.link)
-                      ? 'text-primary-500 '
+                      ? 'text-primary-500 dark:text-primary-400'
                      : 'text-gray-400',
                    'mr-4 shrink-0 h-5 w-5',
                  ]"
@ -151,7 +149,7 @@
          :name="item.icon"
          :class="[
            hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
+              ? 'text-primary-500 dark:text-primary-400'
              : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
            'mr-4 shrink-0 h-5 w-5 ',
          ]"
@ -167,8 +165,7 @@
 </template>

 <script setup>
-import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-
+import { computed } from 'vue'
 import {
  Dialog,
  DialogOverlay,
@ -183,6 +180,9 @@ 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
 }
--- a/resources/scripts/admin/stores/global.js
+++ b/resources/scripts/admin/stores/global.js
@ -34,8 +34,7 @@ export const useGlobalStore = (useWindow = false) => {
      isAppLoaded: false,
      isSidebarOpen: false,
      areCurrenciesLoading: false,
-      isDarkModeOn: false,
-
+      isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark'),
      downloadReport: null,
    }),

--- a/resources/scripts/admin/views/customers/Index.vue
+++ b/resources/scripts/admin/views/customers/Index.vue
@ -113,7 +113,7 @@
            </span>
          </template>
          <BaseDropdownItem @click="removeMultipleCustomers">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@ -154,7 +154,7 @@
              :text="row.data.name"
              :length="30"
              tag="span"
-              class="font-medium text-primary-500 flex flex-col"
+              class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
            />
            <BaseText
              :text="row.data.contact_name ? row.data.contact_name : ''"
--- a/resources/scripts/admin/views/customers/View.vue
+++ b/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>
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ b/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>
--- a/resources/scripts/admin/views/dashboard/DashboardTable.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardTable.vue
@ -28,7 +28,7 @@
          <template #cell-user="{ row }">
            <router-link
              :to="{ path: `invoices/${row.data.id}/view` }"
-              class="font-medium text-primary-500"
+              class="font-medium text-primary-500 dark:text-primary-400"
            >
              {{ row.data.customer.name }}
            </router-link>
@ -78,7 +78,7 @@
          <template #cell-user="{ row }">
            <router-link
              :to="{ path: `estimates/${row.data.id}/view` }"
-              class="font-medium text-primary-500"
+              class="font-medium text-primary-500 dark:text-primary-400"
            >
              {{ row.data.customer.name }}
            </router-link>
--- a/resources/scripts/admin/views/estimates/Index.vue
+++ b/resources/scripts/admin/views/estimates/Index.vue
@ -164,7 +164,7 @@
          </template>

          <BaseDropdownItem @click="removeMultipleEstimates">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@ -205,7 +205,7 @@
        <template #cell-estimate_number="{ row }">
          <router-link
            :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.estimate_number }}
          </router-link>
--- a/resources/scripts/admin/views/expenses/Index.vue
+++ b/resources/scripts/admin/views/expenses/Index.vue
@ -135,7 +135,7 @@
            v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
            @click="removeMultipleExpenses"
          >
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@ -171,7 +171,7 @@
        <template #cell-name="{ row }">
          <router-link
            :to="{ path: `expenses/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.expense_category.name }}
          </router-link>
--- a/resources/scripts/admin/views/installation/Installation.vue
+++ b/resources/scripts/admin/views/installation/Installation.vue
@ -1,5 +1,6 @@
 <template>
  <div class="flex flex-col items-center justify-between w-full pt-10">
+    <LightDarkButton class="absolute z-10 top-2 right-2"/>
    <img
      id="logo-crater"
      src="/img/crater-logo.png"
@ -29,6 +30,7 @@ import Step7CompanyInfo from './Step7CompanyInfo.vue'
 import Step8CompanyPreferences from './Step8CompanyPreferences.vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation'
 import { useRouter } from 'vue-router'
+import LightDarkButton from '@/scripts/components/LightDarkButton.vue'

 export default {
  components: {
@ -40,6 +42,7 @@ export default {
    step_6: Step6AccountSettings,
    step_7: Step7CompanyInfo,
    step_8: Step8CompanyPreferences,
+    LightDarkButton
  },

  setup() {
--- a/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
+++ b/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 }}
--- a/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
+++ b/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>
--- a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
+++ b/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"
--- a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
+++ b/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>

--- a/resources/scripts/admin/views/installation/Step6AccountSettings.vue
+++ b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
@ -68,13 +68,15 @@
            @input="v$.userForm.password.$touch()"
          >
            <template #right>
-              <EyeOffIcon
+              <BaseIcon
                v-if="isShowPassword"
+                name="EyeOffIcon"
                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                @click="isShowPassword = !isShowPassword"
              />
-              <EyeIcon
+              <BaseIcon
                v-else
+                name="EyeIcon"
                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
                @click="isShowPassword = !isShowPassword"
              />
--- a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
+++ b/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">
--- a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
+++ b/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>
--- a/resources/scripts/admin/views/invoices/Index.vue
+++ b/resources/scripts/admin/views/invoices/Index.vue
@ -178,7 +178,7 @@
          </template>

          <BaseDropdownItem @click="removeMultipleInvoices">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@ -220,7 +220,7 @@
        <template #cell-invoice_number="{ row }">
          <router-link
            :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.invoice_number }}
          </router-link>
--- a/resources/scripts/admin/views/items/Index.vue
+++ b/resources/scripts/admin/views/items/Index.vue
@ -117,7 +117,7 @@
            </span>
          </template>
          <BaseDropdownItem @click="removeMultipleItems">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@ -153,7 +153,7 @@
        <template #cell-name="{ row }">
          <router-link
            :to="{ path: `items/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.name }}
          </router-link>
--- a/resources/scripts/admin/views/payments/Index.vue
+++ b/resources/scripts/admin/views/payments/Index.vue
@ -116,7 +116,7 @@
            </span>
          </template>
          <BaseDropdownItem @click="removeMultiplePayments">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@ -158,7 +158,7 @@
        <template #cell-payment_number="{ row }">
          <router-link
            :to="{ path: `payments/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.payment_number }}
          </router-link>
--- a/resources/scripts/admin/views/recurring-invoices/Index.vue
+++ b/resources/scripts/admin/views/recurring-invoices/Index.vue
@ -151,12 +151,12 @@
              "
            >
              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" class="h-5" />
+              <BaseIcon name="ChevronDownIcon"/>
            </span>
          </template>

          <BaseDropdownItem @click="removeMultipleRecurringInvoices()">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@ -204,7 +204,7 @@
              :text="row.data.customer.name"
              :length="30"
              tag="span"
-              class="font-medium text-primary-500 flex flex-col"
+              class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
            />

            <BaseText
--- a/resources/scripts/admin/views/settings/UpdateAppSetting.vue
+++ b/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 ''
  }
--- a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
@ -51,27 +51,12 @@
        <BaseInput
          v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_secret"
          :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
          name="mailgun_secret"
          autocomplete="off"
          :invalid="v$.mailgunConfig.mail_mailgun_secret.$error"
          @input="v$.mailgunConfig.mail_mailgun_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
        />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
      </BaseInputGroup>

      <BaseInputGroup
@ -184,15 +169,6 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()

-let isShowPassword = ref(false)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 const rules = computed(() => {
  return {
    mailgunConfig: {
--- a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
@ -146,27 +146,12 @@
        <BaseInput
          v-model.trim="mailDriverStore.sesConfig.mail_ses_secret"
          :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
          name="mail_ses_secret"
          autocomplete="off"
          :invalid="v$.sesConfig.mail_ses_secret.$error"
          @input="v$.sesConfig.mail_ses_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
        />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
      </BaseInputGroup>
    </BaseInputGrid>

@ -223,7 +208,6 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])
 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()

-let isShowPassword = ref(false)
 const encryptions = reactive(['tls', 'ssl', 'starttls'])

 const rules = computed(() => {
@ -264,13 +248,6 @@ const v$ = useVuelidate(
  computed(() => mailDriverStore)
 )

-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 onMounted(() => {
  for (const key in mailDriverStore.sesConfig) {
    if (props.configData.hasOwnProperty(key)) {
--- a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
@ -58,24 +58,9 @@
        <BaseInput
          v-model.trim="mailDriverStore.smtpConfig.mail_password"
          :content-loading="isFetchingInitialData"
-          :type="getInputType"
+          type="password"
          name="password"
-        >
-          <template #right>
-            <BaseIcon
-              v-if="isShowPassword"
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeOffIcon"
-              @click="isShowPassword = !isShowPassword"
        />
-            <BaseIcon
-              v-else
-              class="mr-1 text-gray-500 cursor-pointer"
-              name="EyeIcon"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
      </BaseInputGroup>

      <BaseInputGroup
@ -209,17 +194,8 @@ const emit = defineEmits(['submit-data', 'on-change-driver'])

 const mailDriverStore = useMailDriverStore()
 const { t } = useI18n()
-
-let isShowPassword = ref(false)
 const encryptions = reactive(['tls', 'ssl', 'starttls'])

-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
 const rules = computed(() => {
  return {
    smtpConfig: {
--- a/resources/scripts/admin/views/users/Index.vue
+++ b/resources/scripts/admin/views/users/Index.vue
@ -118,11 +118,11 @@
              "
            >
              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" class="h-5" />
+              <BaseIcon name="ChevronDownIcon"/>
            </span>
          </template>
          <BaseDropdownItem @click="removeMultipleUsers">
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-400 dark:group-hover:text-white" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@ -158,7 +158,7 @@
        <template #cell-name="{ row }">
          <router-link
            :to="{ path: `users/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.name }}
          </router-link>
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ b/resources/scripts/components/GlobalSearchBar.vue
@ -93,6 +93,7 @@
                    rounded-full
                    text-primary-500
                    dark:bg-gray-600
+                    dark:text-primary-400
                  "
                >
                  {{ initGenerator(customer.name) }}
@ -141,6 +142,7 @@
                    bg-gray-200
                    rounded-full
                    text-primary-500
+                    dark:text-primary-400
                    dark:bg-gray-600
                  "
                >
--- a/resources/scripts/components/CustomerLightDarkButton.vue
+++ b/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-else class="h-5 w-5 text-white" name="MoonIcon" />
  </button>
 </template>
 <script setup>
@ -26,14 +24,6 @@ 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

@ -45,7 +35,6 @@ function onChange() {
    localStorage.theme = 'light'
    document.documentElement.classList.remove('dark')
    document.documentElement.style.setProperty('color-scheme', 'light')
-
  }
 }
 </script>
--- a/resources/scripts/components/LightDarkSwitcher.vue
+++ b/resources/scripts/components/LightDarkSwitcher.vue
@ -16,26 +16,21 @@ defineProps({

 const globalStore = useGlobalStore()

-const enabled = ref(
-  localStorage.getItem('theme') === 'dark' ||
-    document.documentElement.classList.contains('dark')
-)
-
-globalStore.isDarkModeOn = enabled
-
-function onChange(val) {
-  if (val) {
+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')
-    globalStore.isDarkModeOn = true
    } else {
      localStorage.theme = 'light'
      document.documentElement.classList.remove('dark')
      document.documentElement.style.setProperty('color-scheme', 'light')
-    globalStore.isDarkModeOn = false
    }
-}
+    globalStore.isDarkModeOn = value
+  },
+})
 </script>

 <template>
@ -49,7 +44,6 @@ function onChange(val) {
        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
--- a/resources/scripts/components/base/BaseInput.vue
+++ b/resources/scripts/components/base/BaseInput.vue
@ -90,7 +90,7 @@

    <input
      v-bind="$attrs"
-      :type="type"
+      :type="getType"
      :value="modelValue"
      :disabled="disabled"
      :class="[
@ -144,6 +144,44 @@
    >
      <slot name="right" :class="iconRightClass" />
    </div>
+    <div
+      v-if="loading && loadingPosition === 'right'" class="
+        absolute
+        inset-y-0
+        right-0
+        flex
+        items-center
+        pr-3
+        pointer-events-none
+      "
+    >
+      <svg
+        class="animate-spin !text-primary-500" :class="[iconRightClass]" xmlns="http://www.w3.org/2000/svg"
+        fill="none" viewBox="0 0 24 24"
+      >
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+        <path
+          class="opacity-75" fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    </div>
+
+    <div v-if="hasRightIconSlot" class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <slot name="right" :class="iconRightClass" />
+    </div>
+
+    <div v-if="type == 'password'" class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <a
+        v-if="isShowPassword" href="#" class="block" data-cy="eye" tabindex="-1"
+        @click.prevent="isShowPassword = !isShowPassword"
+      >
+        <BaseIcon name="EyeOffIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
+      </a>
+      <a v-else href="#" class="block" data-cy="eye" tabindex="-1" @click.prevent="isShowPassword = !isShowPassword">
+        <BaseIcon name="EyeIcon" class="w-5 h-5 mr-1 text-gray-500 cursor-pointer" />
+      </a>
+    </div>
  </div>
 </template>

@ -219,6 +257,15 @@ const slots = useSlots()

 const emit = defineEmits(['update:modelValue'])

+const isShowPassword = ref(false)
+
+const getType = computed(() => {
+  if (props.type === 'password')
+    return isShowPassword.value ? 'text' : 'password'
+
+  return props.type
+})
+
 const hasLeftIconSlot = computed(() => {
  return !!slots.left || (props.loading && props.loadingPosition === 'left')
 })
--- a/resources/scripts/components/base/BaseWizardNavigation.vue
+++ b/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',
    },
  },

--- a/resources/scripts/components/base/BaseWizardStep.vue
+++ b/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>
--- a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
@ -45,7 +45,7 @@
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:items-center">
          <!-- Dark mode Toggle -->
-          <CustomerLightDarkButton/>
+          <LightDarkButton/>

          <!-- Profile dropdown -->

@ -151,7 +151,7 @@
            </div>
        </div>
          <!-- Dark mode Toggle -->
-          <CustomerLightDarkButton/>
+          <LightDarkButton/>
        </div>
        <div class="mt-3 space-y-1">
          <router-link
@ -178,7 +178,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { ref, watch, computed } from 'vue'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-import CustomerLightDarkButton from '@/scripts/components/CustomerLightDarkButton.vue'
+import LightDarkButton from '@/scripts/components/LightDarkButton.vue'
 import {
  Disclosure,
  DisclosureButton,
--- a/resources/scripts/customer/stores/global.js
+++ b/resources/scripts/customer/stores/global.js
@ -14,7 +14,7 @@ export const useGlobalStore = defineStore({
    companySlug: '',
    mainMenu: null,
    enabledModules: [],
-    isDarkModeOn: false
+    isDarkModeOn: localStorage.getItem('theme') === 'dark' || document.documentElement.classList.contains('dark')
  }),

  actions: {
--- a/resources/scripts/customer/views/auth/Login.vue
+++ b/resources/scripts/customer/views/auth/Login.vue
@ -32,25 +32,10 @@
    >
      <BaseInput
        v-model="authStore.loginData.password"
-        :type="getInputType"
        :invalid="v$.loginData.password.$error"
+        type="password"
        @input="v$.loginData.password.$touch()"
-      >
-        <template #right>
-          <BaseIcon
-            v-if="isShowPassword"
-            name="EyeOffIcon"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
      />
-          <BaseIcon
-            v-else
-            name="EyeIcon"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-        </template>
-      </BaseInput>
    </BaseInputGroup>
    <div class="flex items-center justify-between">
      <router-link
@ -91,14 +76,6 @@ const authStore = useAuthStore()
 const { t } = useI18n()

 let isLoading = ref(false)
-const isShowPassword = ref(false)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})

 const rules = computed(() => {
  return {
--- a/resources/scripts/customer/views/auth/ResetPassword.vue
+++ b/resources/scripts/customer/views/auth/ResetPassword.vue
@ -23,23 +23,11 @@
    >
      <BaseInput
        v-model="loginData.password"
-        :type="isShowPassword ? 'text' : 'password'"
+        type="password"
        name="password"
        :invalid="v$.password.$error"
        @input="v$.password.$touch()"
-      >
-        <template #right>
-          <EyeOffIcon
-            v-if="isShowPassword"
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
      />
-          <EyeIcon
-            v-else
-            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          /> </template
-      ></BaseInput>
    </BaseInputGroup>

    <BaseInputGroup
@ -93,7 +81,6 @@ const loginData = reactive({

 const globalStore = useGlobalStore()

-let isShowPassword = ref(false)
 let isLoading = ref(false)

 const rules = computed(() => {
--- a/resources/scripts/customer/views/dashboard/DashboardTable.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardTable.vue
@ -26,7 +26,7 @@
            :to="{
              path: `/${globalStore.companySlug}/customer/invoices/${row.data.id}/view`,
            }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.invoice_number }}
          </router-link>
@ -73,7 +73,7 @@
            :to="{
              path: `/${globalStore.companySlug}/customer/estimates/${row.data.id}/view`,
            }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.estimate_number }}
          </router-link>
--- a/resources/scripts/customer/views/estimates/Index.vue
+++ b/resources/scripts/customer/views/estimates/Index.vue
@ -100,7 +100,7 @@
        <template #cell-estimate_number="{ row }">
          <router-link
            :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.estimate_number }}
          </router-link>
--- a/resources/scripts/customer/views/invoices/Index.vue
+++ b/resources/scripts/customer/views/invoices/Index.vue
@ -95,7 +95,7 @@
        <template #cell-invoice_number="{ row }">
          <router-link
            :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.invoice_number }}
          </router-link>
--- a/resources/scripts/customer/views/payments/Index.vue
+++ b/resources/scripts/customer/views/payments/Index.vue
@ -78,7 +78,7 @@
            :to="{
              path: `payments/${row.data.id}/view`,
            }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.payment_number }}
          </router-link>
--- a/resources/scripts/customer/views/settings/CustomerSettings.vue
+++ b/resources/scripts/customer/views/settings/CustomerSettings.vue
@ -66,24 +66,10 @@
        >
          <BaseInput
            v-model="userStore.userForm.password"
-            :type="isShowPassword ? 'text' : 'password'"
+            type="password"
            :invalid="v$.userForm.password.$error"
            @input="v$.userForm.password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                v-if="isShowPassword"
-                name="EyeOffIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
          />
-              <BaseIcon
-                v-else
-                name="EyeIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
-              /> </template
-          ></BaseInput>
        </BaseInputGroup>

        <BaseInputGroup
@ -95,24 +81,10 @@
        >
          <BaseInput
            v-model="userStore.userForm.confirm_password"
-            :type="isShowConfirmPassword ? 'text' : 'password'"
+            type="password"
            :invalid="v$.userForm.confirm_password.$error"
            @input="v$.userForm.confirm_password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                v-if="isShowConfirmPassword"
-                name="EyeOffIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
          />
-              <BaseIcon
-                v-else
-                name="EyeIcon"
-                class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
-              /> </template
-          ></BaseInput>
        </BaseInputGroup>
      </div>

@ -151,8 +123,6 @@ const { t, tm } = useI18n()
 let imgFiles = ref([])
 let isSaving = ref(false)
 let avatarFileBlob = ref(null)
-let isShowPassword = ref(false)
-let isShowConfirmPassword = ref(false)
 const isCustomerAvatarRemoved = ref(false)

 if (userStore.userForm.avatar) {
Author	SHA1	Message	Date
yashkanakiya	150380791f	fix password eye icon and minor fix in dark mode	2023-08-22 17:43:49 +05:30
Yash Kanakiya	45aaee72d8	fix sidebar and table data link in dark mode color (#1259 ) * fix sidebar and table data link in dark mode color * add dark mode toggle in installation step	2023-08-22 11:18:02 +05:30
Yash Kanakiya	f4bc78ce98	Dark mode fix issue (#1211 ) * fix dark mode in item row and switch issue * change class for create items title issue * fix indentation and remove console log --------- Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>	2023-03-31 17:44:18 +05:30
Yash Kanakiya	ba769864d4	fix view sidebar and customer dropdown dark issue (#1210 ) * fix view sidebar and customer dropdown dark issue * fix update app settings dark mode --------- Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>	2023-03-31 17:34:58 +05:30
Yogesh Gohil	de235a91e5	Dark cust light dark button (#1208 ) * add LightDark option for customer dashboard * fix color in customer light-dark button --------- Co-authored-by: yashkanakiya <yashkanakiya281297@gmail.com>	2023-03-30 18:48:17 +05:30
Payal Dholakiya	18dc88682c	add dark mode in wizard steps (#1206 ) * add dark mode in wizard steps * step navigation dark mode issue fixed	2023-03-30 18:43:37 +05:30