From 7e80bfb50795b36def2179bcf6c6b3fb2f5c1ebf Mon Sep 17 00:00:00 2001
From: Yash Kanakiya <76934250+yashkanakiya@users.noreply.github.com>
Date: Thu, 30 Mar 2023 17:51:26 +0530
Subject: [PATCH] add dark mode in est,inv,pay,rec view&create page (#1201)

* add dark mode in est,inv,pay,rec view&create page

* fix dark issue in itemRow and total taxes

---------

Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>
---
 .../admin/components/SelectNotePopup.vue      |  16 +-
 .../estimate-invoice-common/CreateItemRow.vue |  12 +-
 .../estimate-invoice-common/CreateItems.vue   | 259 ++++++++----------
 .../estimate-invoice-common/CreateTotal.vue   |   4 +-
 .../CreateTotalTaxes.vue                      |   2 +-
 .../SelectTaxPopup.vue                        |  10 +-
 .../scripts/admin/views/estimates/View.vue    |  16 +-
 .../scripts/admin/views/invoices/View.vue     |  20 +-
 .../scripts/admin/views/payments/View.vue     |  16 +-
 .../partials/RecurringInvoiceViewSidebar.vue  |  16 +-
 10 files changed, 196 insertions(+), 175 deletions(-)

diff --git a/resources/scripts/admin/components/SelectNotePopup.vue b/resources/scripts/admin/components/SelectNotePopup.vue
index 80fc64d6..bcc81cca 100644
--- a/resources/scripts/admin/components/SelectNotePopup.vue
+++ b/resources/scripts/admin/components/SelectNotePopup.vue
@@ -43,6 +43,12 @@
             max-w-full
             left-0
             top-3
+            bg-white
+            dark:border
+            dark:border-white/10
+            dark:text-white
+            dark:bg-gray-800
+            dark:shadow-glass
           "
         >
           <div
@@ -53,7 +59,7 @@
               ring-1 ring-black ring-opacity-5
             "
           >
-            <div class="relative grid bg-white">
+            <div class="relative grid bg-white dark:bg-gray-800">
               <div class="relative p-4">
                 <BaseInput
                   v-model="textSearch"
@@ -66,7 +72,7 @@
 
               <div
                 v-if="filteredNotes.length > 0"
-                class="relative flex flex-col overflow-auto list max-h-36"
+                class="relative flex flex-col overflow-auto list max-h-36 dark:border-white/10"
               >
                 <div
                   v-for="(note, index) in filteredNotes"
@@ -79,6 +85,8 @@
                     cursor-pointer
                     hover:bg-gray-100 hover:cursor-pointer
                     last:border-b-0
+                    dark:border-gray-600
+                    dark:border-white/10 dark:hover:bg-gray-700/30
                   "
                   @click="selectNote(index, close)"
                 >
@@ -119,6 +127,10 @@
                 bg-gray-200
                 border-none
                 outline-none
+                dark:bg-gray-600/70
+                dark:backdrop-blur-xl
+                dark:shadow-glass
+                dark:hover:bg-gray-600/80
               "
               @click="openNoteModal"
             >
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
index 8af4293f..b425d7a1 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
@@ -1,5 +1,13 @@
 <template>
-  <tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
+  <tr
+    class="
+      box-border
+      bg-white
+      border border-gray-200 border-solid
+      rounded-b
+      dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70
+      "
+    >
     <td colspan="5" class="p-0 text-left align-top">
       <table class="w-full">
         <colgroup>
@@ -130,7 +138,7 @@
                 <div class="flex items-center justify-center w-6 h-10 mx-2">
                   <BaseIcon
                     v-if="showRemoveButton"
-                    class="h-5 text-gray-700 cursor-pointer"
+                    class="h-5 dark:text-red-400 cursor-pointer"
                     name="TrashIcon"
                     @click="store.removeItem(index)"
                   />
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
index f5042e90..63953bfe 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
@@ -1,155 +1,113 @@
 <template>
-  <table class="text-center item-table min-w-full">
-    <colgroup>
-      <col style="width: 40%; min-width: 280px" />
-      <col style="width: 10%; min-width: 120px" />
-      <col style="width: 15%; min-width: 120px" />
-      <col
-        v-if="store[storeProp].discount_per_item === 'YES'"
-        style="width: 15%; min-width: 160px"
-      />
-      <col style="width: 15%; min-width: 120px" />
-    </colgroup>
-    <thead class="bg-white border border-gray-200 border-solid">
-      <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
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else class="pl-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
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $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
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.price') }}
-          </span>
-        </th>
-        <th
+  <div class="relative" >
+    <BaseDarkHighlight class="z-[-1]" />
+    <table class="text-center item-table min-w-full">
+      <colgroup>
+        <col style="width: 40%; min-width: 280px" />
+        <col style="width: 10%; min-width: 120px" />
+        <col style="width: 15%; min-width: 120px" />
+        <col
           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
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $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
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else class="pr-10 column-heading">
-            {{ $t('invoices.item.amount') }}
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <draggable
-      v-model="store[storeProp].items"
-      item-key="id"
-      tag="tbody"
-      handle=".handle"
-    >
-      <template #item="{ element, index }">
-        <Item
-          :key="element.id"
-          :index="index"
-          :item-data="element"
-          :loading="isLoading"
-          :currency="defaultCurrency"
-          :item-validation-scope="itemValidationScope"
-          :invoice-items="store[storeProp].items"
-          :store="store"
-          :store-prop="storeProp"
+          style="width: 15%; min-width: 160px"
         />
-      </template>
-    </draggable>
-  </table>
+        <col style="width: 15%; min-width: 120px" />
+      </colgroup>
+      <thead
+        class="
+          bg-white
+          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">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else class="pl-7">
+              {{ $tc('items.item', 2) }}
+            </span>
+          </th>
+          <th class="text-right" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.quantity') }}
+            </span>
+          </th>
+          <th class="text-left" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.price') }}
+            </span>
+          </th>
+          <th
+            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" />
+            </BaseContentPlaceholders>
+            <span v-else>
+              {{ $t('invoices.item.discount') }}
+            </span>
+          </th>
+          <th class="text-right" :class="theadClass">
+            <BaseContentPlaceholders v-if="isLoading">
+              <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
+            </BaseContentPlaceholders>
+            <span v-else class="pr-10 column-heading">
+              {{ $t('invoices.item.amount') }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <draggable
+        v-model="store[storeProp].items"
+        item-key="id"
+        tag="tbody"
+        handle=".handle"
+      >
+        <template #item="{ element, index }">
+          <Item
+            :key="element.id"
+            :index="index"
+            :item-data="element"
+            :loading="isLoading"
+            :currency="defaultCurrency"
+            :item-validation-scope="itemValidationScope"
+            :invoice-items="store[storeProp].items"
+            :store="store"
+            :store-prop="storeProp"
+          />
+        </template>
+      </draggable>
+    </table>
 
-  <div
-    class="
-      flex
-      items-center
-      justify-center
-      w-full
-      px-6
-      py-3
-      text-base
-      border border-t-0 border-gray-200 border-solid
-      cursor-pointer
-      text-primary-400
-      hover:bg-primary-100
-    "
-    @click="store.addItem"
-  >
-    <BaseIcon name="PlusCircleIcon" class="mr-2" />
-    {{ $t('general.add_new_item') }}
+    <div
+      class="
+        flex
+        items-center
+        justify-center
+        w-full
+        px-6
+        py-3
+        text-base
+        border border-t-0 border-gray-200 border-solid
+        cursor-pointer
+        text-primary-400
+        hover:bg-primary-100
+        dark:bg-gray-900/50 dark:border-white/10 dark:hover:bg-gray-900/80
+      "
+      @click="store.addItem"
+    >
+      <BaseIcon name="PlusCircleIcon" class="mr-2" />
+      {{ $t('general.add_new_item') }}
+    </div>
   </div>
 </template>
 
@@ -180,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()
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
index e4ba6e72..3bd7f1ba 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
@@ -6,6 +6,7 @@
       mt-6
       bg-white
       border border-gray-200 border-solid
+      dark:bg-gray-800/50 dark:border-white/10
       rounded
       md:min-w-[390px]
       min-w-[300px]
@@ -192,6 +193,7 @@
         pt-2
         mt-5
         border-t border-gray-200 border-solid
+        dark:border-gray-600
       "
     >
       <BaseContentPlaceholders v-if="isLoading">
@@ -199,7 +201,7 @@
       </BaseContentPlaceholders>
       <label
         v-else
-        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
+        class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase dark:text-gray-400"
         >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
       >
 
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
index 9ce1fad1..ac7a5394 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
@@ -17,7 +17,7 @@
 
       <BaseIcon
         name="TrashIcon"
-        class="h-5 ml-2 cursor-pointer"
+        class="h-5 ml-2 cursor-pointer dark:text-red-400"
         @click="$emit('remove', tax.id)"
       />
     </label>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
index 255ff359..cc2c655c 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
@@ -44,7 +44,7 @@
             >
               <!-- Tax Search Input  -->
 
-              <div class="relative bg-white">
+              <div class="relative bg-white dark:bg-gray-800">
                 <div class="relative p-4">
                   <BaseInput
                     v-model="textSearch"
@@ -65,13 +65,14 @@
                     list
                     max-h-36
                     border-t border-gray-200
+                    dark:border-gray-600
                   "
                 >
                   <div
                     v-for="(taxType, index) in filteredTaxType"
                     :key="index"
                     :class="{
-                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
+                      'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none dark:bg-gray-900':
                         taxes.find((val) => {
                           return val.tax_type_id === taxType.id
                         }),
@@ -84,6 +85,7 @@
                       cursor-pointer
                       hover:bg-gray-100 hover:cursor-pointer
                       last:border-b-0
+                      dark:border-gray-600 dark:hover:bg-gray-700/20
                     "
                     @click="selectTaxType(taxType, close)"
                   >
@@ -140,6 +142,10 @@
                   bg-gray-200
                   border-none
                   outline-none
+                  dark:bg-gray-600/70
+                  dark:backdrop-blur-xl
+                  dark:shadow-glass
+                  dark:hover:bg-gray-600/80
                 "
                 @click="openTaxTypeModal"
               >
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index a4d0f799..af788df7 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -50,6 +50,7 @@
         xl:ml-64
         w-88
         xl:block
+        dark:bg-gray-800
       "
     >
       <div
@@ -62,6 +63,7 @@
           pb-2
           border border-gray-200 border-solid
           height-full
+          dark:border-gray-600
         "
       >
         <div class="mb-6">
@@ -96,9 +98,10 @@
                 px-4
                 py-1
                 pb-2
-                mb-1 mb-2
+                mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -161,6 +164,7 @@
           overflow-y-scroll
           border-l border-gray-200 border-solid
           base-scroll
+          dark:border-gray-600
         "
       >
         <div v-for="(estimate, index) in estimateList" :key="index">
@@ -169,9 +173,9 @@
             :id="'estimate-' + estimate.id"
             :to="`/admin/estimates/${estimate.id}/view`"
             :class="[
-              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
+              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-gray-100 items-center 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(estimate.id),
               },
             ]"
@@ -191,6 +195,7 @@
                   text-black
                   capitalize
                   truncate
+                  dark:text-white
                 "
               />
 
@@ -203,6 +208,7 @@
                   font-medium
                   leading-5
                   text-gray-600
+                  dark:text-gray-400
                 "
               >
                 {{ estimate.estimate_number }}
@@ -228,6 +234,7 @@
                   font-semibold
                   leading-8
                   text-right text-gray-900
+                  dark:text-white
                 "
               />
 
@@ -239,6 +246,7 @@
                   leading-5
                   text-right text-gray-600
                   est-date
+                  dark:text-gray-400
                 "
               >
                 {{ estimate.formatted_estimate_date }}
@@ -251,7 +259,7 @@
         </div>
         <p
           v-if="!estimateList?.length && !isLoading"
-          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('estimates.no_matching_estimates') }}
         </p>
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 6e282934..c3f46d27 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -299,6 +299,7 @@ onSearched = debounce(onSearched, 500)
         xl:ml-64
         w-88
         xl:block
+        dark:bg-gray-800
       "
     >
       <div
@@ -311,6 +312,7 @@ onSearched = debounce(onSearched, 500)
           pb-2
           border border-gray-200 border-solid
           height-full
+          dark:border-gray-600
         "
       >
         <div class="mb-6">
@@ -339,9 +341,10 @@ onSearched = debounce(onSearched, 500)
                 px-2
                 py-1
                 pb-2
-                mb-1 mb-2
+                mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -404,6 +407,7 @@ onSearched = debounce(onSearched, 500)
           overflow-y-scroll
           border-l border-gray-200 border-solid
           base-scroll
+          dark:border-gray-600
         "
       >
         <div v-for="(invoice, index) in invoiceList" :key="index">
@@ -412,9 +416,9 @@ onSearched = debounce(onSearched, 500)
             :id="'invoice-' + invoice.id"
             :to="`/admin/invoices/${invoice.id}/view`"
             :class="[
-              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
+              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center 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:bg-gray-700':
                   hasActiveUrl(invoice.id),
               },
             ]"
@@ -434,6 +438,7 @@ onSearched = debounce(onSearched, 500)
                   text-black
                   capitalize
                   truncate
+                  dark:text-white
                 "
               />
 
@@ -446,16 +451,17 @@ onSearched = debounce(onSearched, 500)
                   font-medium
                   leading-5
                   text-gray-600
+                  dark:text-gray-400
                 "
               >
                 {{ invoice.invoice_number }}
               </div>
-              <BaseEstimateStatusBadge
+              <BaseInvoiceStatusBadge
                 :status="invoice.status"
                 class="px-1 text-xs"
               >
                 {{ invoice.status }}
-              </BaseEstimateStatusBadge>
+              </BaseInvoiceStatusBadge>
             </div>
 
             <div class="flex-1 whitespace-nowrap right">
@@ -468,6 +474,7 @@ onSearched = debounce(onSearched, 500)
                   leading-8
                   text-right text-gray-900
                   block
+                  dark:text-white
                 "
                 :amount="invoice.total"
                 :currency="invoice.customer.currency"
@@ -480,6 +487,7 @@ onSearched = debounce(onSearched, 500)
                   leading-5
                   text-right text-gray-600
                   est-date
+                  dark:text-gray-400
                 "
               >
                 {{ invoice.formatted_invoice_date }}
@@ -492,7 +500,7 @@ onSearched = debounce(onSearched, 500)
         </div>
         <p
           v-if="!invoiceList?.length && !isLoading"
-          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('invoices.no_matching_invoices') }}
         </p>
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
index 0b08827e..53b60168 100644
--- a/resources/scripts/admin/views/payments/View.vue
+++ b/resources/scripts/admin/views/payments/View.vue
@@ -35,6 +35,7 @@
         xl:ml-64
         w-88
         xl:block
+        dark:bg-gray-800
       "
     >
       <div
@@ -46,6 +47,7 @@
           pt-8
           pb-6
           border border-gray-200 border-solid
+          dark:border-gray-600
         "
       >
         <BaseInput
@@ -77,6 +79,7 @@
                 mb-2
                 text-sm
                 border-b border-gray-200 border-solid
+                dark:border-gray-600
               "
             >
               {{ $t('general.sort_by') }}
@@ -139,7 +142,7 @@
 
       <div
         ref="paymentListSection"
-        class="h-full overflow-y-scroll border-l border-gray-200 border-solid"
+        class="h-full overflow-y-scroll border-l border-gray-200 border-solid dark:border-gray-600"
       >
         <div v-for="(payment, index) in paymentList" :key="index">
           <router-link
@@ -147,9 +150,9 @@
             :id="'payment-' + payment.id"
             :to="`/admin/payments/${payment.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:bg-gray-700':
                   hasActiveUrl(payment.id),
               },
             ]"
@@ -169,6 +172,7 @@
                   text-black
                   capitalize
                   truncate
+                  dark:text-white
                 "
               />
 
@@ -181,6 +185,7 @@
                   leading-5
                   text-gray-500
                   capitalize
+                  dark:text-gray-400
                 "
               >
                 {{ payment?.payment_number }}
@@ -211,12 +216,13 @@
                   font-semibold
                   leading-8
                   text-right text-gray-900
+                  dark:text-white
                 "
                 :amount="payment?.amount"
                 :currency="payment.customer?.currency"
               />
 
-              <div class="text-sm text-right text-gray-500 non-italic">
+              <div class="text-sm text-right text-gray-500 non-italic dark:text-gray-400">
                 {{ payment.formatted_payment_date }}
               </div>
             </div>
@@ -227,7 +233,7 @@
         </div>
         <p
           v-if="!paymentList?.length && !isLoading"
-          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('payments.no_matching_payments') }}
         </p>
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
index 42445324..d444fdfa 100644
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
@@ -152,6 +152,7 @@ onSearched = debounce(onSearched, 500)
       xl:ml-64
       w-88
       xl:block
+      dark:bg-gray-800
     "
   >
     <div
@@ -164,6 +165,7 @@ onSearched = debounce(onSearched, 500)
         pb-2
         border border-gray-200 border-solid
         height-full
+        dark:border-gray-600
       "
     >
       <div class="mb-6">
@@ -192,9 +194,10 @@ onSearched = debounce(onSearched, 500)
               px-2
               py-1
               pb-2
-              mb-1 mb-2
+              mb-2
               text-sm
               border-b border-gray-200 border-solid
+              dark:border-gray-600
             "
           >
             {{ $t('general.sort_by') }}
@@ -243,6 +246,7 @@ onSearched = debounce(onSearched, 500)
         overflow-y-scroll
         border-l border-gray-200 border-solid
         base-scroll
+        dark:border-gray-600
       "
     >
       <div v-for="(invoice, index) in invoiceList" :key="index">
@@ -251,9 +255,9 @@ onSearched = debounce(onSearched, 500)
           :id="'recurring-invoice-' + invoice.id"
           :to="`/admin/recurring-invoices/${invoice.id}/view`"
           :class="[
-            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center border-l-4 border-transparent',
+            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-gray-100 items-center 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:bg-gray-700':
                 hasActiveUrl(invoice.id),
             },
           ]"
@@ -273,6 +277,7 @@ onSearched = debounce(onSearched, 500)
                 text-black
                 capitalize
                 truncate
+                dark:text-white
               "
             />
 
@@ -285,6 +290,7 @@ onSearched = debounce(onSearched, 500)
                 font-medium
                 leading-5
                 text-gray-600
+                dark:text-gray-400
               "
             >
               {{ invoice.invoice_number }}
@@ -307,6 +313,7 @@ onSearched = debounce(onSearched, 500)
                 font-semibold
                 leading-8
                 text-right text-gray-900
+                dark:text-white
               "
               :amount="invoice.total"
               :currency="invoice.customer.currency"
@@ -320,6 +327,7 @@ onSearched = debounce(onSearched, 500)
                 leading-5
                 text-right text-gray-600
                 est-date
+                dark:text-gray-400
               "
             >
               {{ invoice.formatted_starts_at }}
@@ -332,7 +340,7 @@ onSearched = debounce(onSearched, 500)
       </div>
       <p
         v-if="!invoiceList?.length && !isLoading"
-        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('invoices.no_matching_invoices') }}
       </p>