fix remaining label for dark mode

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/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/base/BaseSelectInput.vue

@@ -29,12 +29,14 @@
           text-left
           bg-white
           dark:bg-gray-700
+          border border-gray-200
           rounded-md
           shadow-sm
           cursor-default
           focus:outline-none
           focus:ring-1
-          focus:ring-primary-400 focus:border-primary-400
+          focus:ring-primary-500
+          focus:border-primary-500
           sm:text-sm
         "
       >

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/components/icons/dashboard/PaymentIcon.vue

@@ -5,30 +5,27 @@
     viewBox="0 0 50 50"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    :class="colorClass"
   >
-    <circle cx="25" cy="25" r="25" :class="bgColor" />
+    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
     <path
       d="M17.8 17.8C17.1635 17.8 16.5531 18.0529 16.103 18.503C15.6529 18.9531 15.4 19.5635 15.4 20.2V21.4H34.6V20.2C34.6 19.5635 34.3472 18.9531 33.8971 18.503C33.447 18.0529 32.8365 17.8 32.2 17.8H17.8Z"
-      :class="color"
+      fill="currentColor"
     />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M34.6 23.8H15.4V29.8C15.4 30.4366 15.6529 31.047 16.103 31.4971C16.5531 31.9472 17.1635 32.2 17.8 32.2H32.2C32.8365 32.2 33.447 31.9472 33.8971 31.4971C34.3472 31.047 34.6 30.4366 34.6 29.8V23.8ZM17.8 28.6C17.8 28.2818 17.9265 27.9766 18.1515 27.7515C18.3765 27.5265 18.6818 27.4 19 27.4H20.2C20.5183 27.4 20.8235 27.5265 21.0486 27.7515C21.2736 27.9766 21.4 28.2818 21.4 28.6C21.4 28.9183 21.2736 29.2235 21.0486 29.4486C20.8235 29.6736 20.5183 29.8 20.2 29.8H19C18.6818 29.8 18.3765 29.6736 18.1515 29.4486C17.9265 29.2235 17.8 28.9183 17.8 28.6ZM23.8 27.4C23.4818 27.4 23.1765 27.5265 22.9515 27.7515C22.7265 27.9766 22.6 28.2818 22.6 28.6C22.6 28.9183 22.7265 29.2235 22.9515 29.4486C23.1765 29.6736 23.4818 29.8 23.8 29.8H25C25.3183 29.8 25.6235 29.6736 25.8486 29.4486C26.0736 29.2235 26.2 28.9183 26.2 28.6C26.2 28.2818 26.0736 27.9766 25.8486 27.7515C25.6235 27.5265 25.3183 27.4 25 27.4H23.8Z"
-      :class="color"
+      fill="currentColor"
     />
   </svg>
 </template>
 
 <script setup>
 const props = defineProps({
-  color: {
+  colorClass: {
     type: String,
-  default: 'fill-primary-500 dark:fill-white',
-  },
-  bgColor: {
-    type: String,
-    default: 'fill-gray-100 dark:fill-primary-400',
+    default: 'text-primary-500',
   },
 })
 </script>

resources/scripts/customer/layouts/partials/TheSiteHeader.vue

@@ -2,9 +2,8 @@
   <Disclosure
     v-slot="{ open }"
     as="nav"
-    class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full dark:bg-gray-800"
+    class="bg-white shadow-sm fixed top-0 left-0 z-20 w-full"
   >
-    <BaseDarkHighlight />
     <div class="mx-auto px-8">
       <div class="flex justify-between h-16 w-full">
         <div class="flex">
@@ -34,8 +33,8 @@
               :to="`/${globalStore.companySlug}${item.link}`"
               :class="[
                 hasActiveUrl(item.link)
-                  ? 'border-primary-500 text-primary-600 dark:text-primary-400'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-200',
+                  ? 'border-primary-500 text-primary-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
                 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
               ]"
             >
@@ -44,6 +43,20 @@
           </div>
         </div>
         <div class="hidden sm:ml-6 sm:flex sm:items-center">
+          <button
+            type="button"
+            class="
+              bg-white
+              p-1
+              rounded-full
+              text-gray-400
+              hover:text-gray-500
+              focus:outline-none
+              focus:ring-2
+              focus:ring-offset-2
+              focus:ring-primary-500
+            "
+          ></button>
 
           <!-- Profile dropdown -->
 
@@ -72,7 +85,7 @@
               <router-link :to="{ name: 'customer.profile' }">
                 <BaseDropdownItem>
                   <CogIcon
-                    class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200"
+                    class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
                     aria-hidden="true"
                   />
                   {{ $t('navigation.settings') }}
@@ -81,7 +94,7 @@
 
               <BaseDropdownItem @click="logout">
                 <LogoutIcon
-                  class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-200"
+                  class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
                   aria-hidden="true"
                 />
                 {{ $t('navigation.logout') }}
@@ -105,8 +118,6 @@
               focus:ring-2
               focus:ring-offset-2
               focus:ring-primary-500
-              dark:bg-gray-700
-              dark:focus:ring-offset-gray-900
             "
           >
             <span class="sr-only">Open main menu</span>
@@ -125,15 +136,15 @@
           :to="`/${globalStore.companySlug}${item.link}`"
           :class="[
             hasActiveUrl(item.link)
-              ? 'bg-primary-50 border-primary-500 text-primary-700 dark:bg-gray-700 dark:text-primary-400'
-              : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
+              ? 'bg-primary-50 border-primary-500 text-primary-700'
+              : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
             'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
           ]"
           :aria-current="item.current ? 'page' : undefined"
           >{{ item.title }}
         </router-link>
       </div>
-      <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-500">
+      <div class="pt-4 pb-3 border-t border-gray-200">
         <div class="flex items-center px-4">
           <div class="shrink-0">
             <img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
@@ -142,10 +153,26 @@
             <div class="text-base font-medium text-gray-800">
               {{ globalStore.currentUser.title }}
             </div>
-            <div class="text-sm font-medium text-gray-500 dark:text-gray-200">
+            <div class="text-sm font-medium text-gray-500">
               {{ globalStore.currentUser.email }}
             </div>
           </div>
+          <button
+            type="button"
+            class="
+              ml-auto
+              bg-white
+              shrink-0
+              p-1
+              rounded-full
+              text-gray-400
+              hover:text-gray-500
+              focus:outline-none
+              focus:ring-2
+              focus:ring-offset-2
+              focus:ring-primary-500
+            "
+          ></button>
         </div>
         <div class="mt-3 space-y-1">
           <router-link
@@ -155,7 +182,7 @@
             :class="[
               hasActiveUrl(item.link)
                 ? 'bg-primary-50 border-primary-500 text-primary-700'
-                : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700',
+                : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800',
               'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
             ]"
             >{{ item.title }}</router-link

resources/scripts/customer/views/dashboard/DashboardStatsItem.vue

@@ -12,24 +12,18 @@
       hover:bg-gray-50
       xl:p-4
       lg:col-span-2
-      dark:backdrop-blur-xl
-      dark:shadow-glass
-      dark:border
-      dark:border-white/10
-      dark:bg-gray-800/70
     "
     :class="{ 'lg:!col-span-3': large }"
     :to="route"
   >
     <div>
-      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl dark:text-white">
+      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
         <slot />
       </span>
-      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg dark:text-gray-300">
+      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
         {{ label }}
       </span>
     </div>
-      <BaseDarkHighlight class="!bg-highlight/[.17] !top-5" />
     <div class="flex items-center">
       <component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
     </div>

resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseContentPlaceholders
     :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4 dark:bg-gray-800"
+    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
   >
     <div>
       <BaseContentPlaceholdersText

resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue

@@ -12,7 +12,6 @@
       shadow
       lg:col-span-2
       xl:p-4
-      dark:bg-gray-800
     "
   >
     <div>

resources/scripts/customer/views/estimates/Index.vue

@@ -119,11 +119,11 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500 dark:text-gray-200" />
+              <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
             </template>
             <router-link :to="`estimates/${row.data.id}/view`">
               <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600 dark:text-gray-200" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
                 {{ $t('general.view') }}
               </BaseDropdownItem>
             </router-link>

resources/scripts/customer/views/estimates/View.vue

@@ -25,7 +25,7 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
     >
       <div
         class="
@@ -36,7 +36,6 @@
           pt-8
           pb-6
           border border-gray-200 border-solid
-          dark:border-gray-600
         "
       >
         <BaseInput
@@ -71,7 +70,6 @@
                 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
-                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -126,7 +124,7 @@
             </div>
           </BaseDropdown>
 
-          <BaseButton class="ml-1" variant="gray" @click="sortData">
+          <BaseButton class="ml-1" variant="white" @click="sortData">
             <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
             <BaseIcon v-else name="SortDescendingIcon" class="h-5" />
           </BaseButton>
@@ -140,7 +138,6 @@
           overflow-y-scroll
           border-l border-gray-200 border-solid
           sw-scroll
-          dark:border-gray-600
         "
       >
         <router-link
@@ -149,9 +146,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/estimates/${estimate.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid':
                 hasActiveUrl(estimate.id),
             },
           ]"
@@ -167,7 +164,6 @@
                 leading-5
                 text-gray-500
                 capitalize
-                dark:text-gray-400
               "
             >
               {{ estimate.estimate_number }}
@@ -188,12 +184,11 @@
                 leading-8
                 text-right text-gray-900
                 block
-                dark:text-white
               "
               :amount="estimate.total"
               :currency="estimate.currency"
             />
-            <div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
+            <div class="text-sm text-right text-gray-500 non-italic">
               {{ estimate.formatted_estimate_date }}
             </div>
           </div>
@@ -201,7 +196,7 @@
 
         <p
           v-if="!estimateStore.estimates.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('estimates.no_matching_estimates') }}
         </p>

resources/scripts/customer/views/invoices/Index.vue

@@ -126,11 +126,11 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500 dark:text-gray-200" />
+              <BaseIcon name="DotsHorizontalIcon" class="h-5 text-gray-500" />
             </template>
             <router-link :to="`invoices/${row.data.id}/view`">
               <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600  dark:text-gray-200" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
                 {{ $t('general.view') }}
               </BaseDropdownItem>
             </router-link>

resources/scripts/customer/views/invoices/View.vue

@@ -31,7 +31,7 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
     >
       <div
         class="
@@ -42,7 +42,6 @@
           pt-8
           pb-6
           border border-gray-200 border-solid
-          dark:border-gray-600
         "
       >
         <BaseInput
@@ -77,7 +76,6 @@
                 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
-                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -132,7 +130,7 @@
             </div>
           </BaseDropdown>
 
-          <BaseButton class="ml-1" variant="gray" @click="sortData">
+          <BaseButton class="ml-1" variant="white" @click="sortData">
             <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
             <BaseIcon v-else name="SortDescendingIcon" class="h-5" />
           </BaseButton>
@@ -146,7 +144,6 @@
           overflow-y-scroll
           border-l border-gray-200 border-solid
           sw-scroll
-          dark:border-gray-600
         "
       >
         <router-link
@@ -155,9 +152,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/invoices/${invoice.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid':
                 hasActiveUrl(invoice.id),
             },
           ]"
@@ -173,7 +170,6 @@
                 text-gray-500
                 capitalize
                 text-md
-                dark:text-gray-400
               "
             >
               {{ invoice.invoice_number }}
@@ -193,13 +189,12 @@
                 leading-8
                 text-right text-gray-900
                 block
-               dark:text-white
               "
               :amount="invoice.total"
               :currency="invoice.currency"
             />
 
-            <div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
+            <div class="text-sm text-right text-gray-500 non-italic">
               {{ invoice.formatted_invoice_date }}
             </div>
           </div>
@@ -207,7 +202,7 @@
 
         <p
           v-if="!invoiceStore.invoices.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('invoices.no_matching_invoices') }}
         </p>

resources/scripts/customer/views/payments/Index.vue

@@ -111,11 +111,11 @@
         <template #cell-actions="{ row }">
           <BaseDropdown>
             <template #activator>
-              <BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500  dark:text-gray-200" />
+              <BaseIcon name="DotsHorizontalIcon" class="w-5 text-gray-500" />
             </template>
             <router-link :to="`payments/${row.data.id}/view`">
               <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600  dark:text-gray-200" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
                 {{ $t('general.view') }}
               </BaseDropdownItem>
             </router-link>

resources/scripts/customer/views/payments/View.vue

@@ -19,7 +19,7 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block dark:bg-gray-800"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
     >
       <div
         class="
@@ -30,7 +30,6 @@
           pt-8
           pb-6
           border border-gray-200 border-solid
-          dark:border-gray-600
         "
       >
         <BaseInput
@@ -65,7 +64,6 @@
                 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
-                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -120,7 +118,7 @@
             </div>
           </BaseDropdown>
 
-          <BaseButton class="ml-1" variant="gray" @click="sortData">
+          <BaseButton class="ml-1" variant="white" @click="sortData">
             <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
             <BaseIcon v-else name="SortDescendingIcon" class="h-5" />
           </BaseButton>
@@ -134,7 +132,6 @@
           overflow-y-scroll
           border-l border-gray-200 border-solid
           sw-scroll
-          dark:border-gray-600
         "
       >
         <router-link
@@ -143,9 +140,9 @@
           :key="index"
           :to="`/${globalStore.companySlug}/customer/payments/${payment.id}/view`"
           :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
             {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:bg-gray-700':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid':
                 hasActiveUrl(payment.id),
             },
           ]"
@@ -161,7 +158,6 @@
                 leading-5
                 text-gray-500
                 capitalize
-                dark:text-gray-400
               "
             >
               {{ payment.payment_number }}
@@ -178,13 +174,12 @@
                 leading-8
                 text-right text-gray-900
                 block
-                dark:text-white
               "
               :amount="payment.amount"
               :currency="payment.currency"
             />
 
-            <div class="text-sm text-right text-gray-500 dark:text-gray-400 non-italic">
+            <div class="text-sm text-right text-gray-500 non-italic">
               {{ payment.formatted_payment_date }}
             </div>
           </div>
@@ -192,7 +187,7 @@
 
         <p
           v-if="!paymentStore.payments.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
+          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
         >
           {{ $t('payments.no_matching_payments') }}
         </p>