From 45aaee72d81563df83704a52f1861e81ef91d827 Mon Sep 17 00:00:00 2001
From: Yash Kanakiya <76934250+yashkanakiya@users.noreply.github.com>
Date: Tue, 22 Aug 2023 11:18:02 +0530
Subject: [PATCH] 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
---
 resources/scripts/admin/layouts/partials/TheSiteSidebar.vue | 4 ++--
 resources/scripts/admin/views/customers/Index.vue           | 2 +-
 resources/scripts/admin/views/dashboard/DashboardTable.vue  | 4 ++--
 resources/scripts/admin/views/estimates/Index.vue           | 2 +-
 resources/scripts/admin/views/expenses/Index.vue            | 2 +-
 resources/scripts/admin/views/installation/Installation.vue | 3 +++
 resources/scripts/admin/views/invoices/Index.vue            | 2 +-
 resources/scripts/admin/views/items/Index.vue               | 2 +-
 resources/scripts/admin/views/payments/Index.vue            | 2 +-
 resources/scripts/admin/views/recurring-invoices/Index.vue  | 2 +-
 resources/scripts/admin/views/users/Index.vue               | 2 +-
 .../{CustomerLightDarkButton.vue => LightDarkButton.vue}    | 2 +-
 .../scripts/customer/layouts/partials/TheSiteHeader.vue     | 6 +++---
 .../scripts/customer/views/dashboard/DashboardTable.vue     | 4 ++--
 resources/scripts/customer/views/estimates/Index.vue        | 2 +-
 resources/scripts/customer/views/invoices/Index.vue         | 2 +-
 resources/scripts/customer/views/payments/Index.vue         | 2 +-
 17 files changed, 24 insertions(+), 21 deletions(-)
 rename resources/scripts/components/{CustomerLightDarkButton.vue => LightDarkButton.vue} (90%)

diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
index f02577a1..ad453fb4 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@@ -93,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',
                   ]"
@@ -149,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 ',
           ]"
diff --git a/resources/scripts/admin/views/customers/Index.vue b/resources/scripts/admin/views/customers/Index.vue
index 9c64d384..d51275a5 100644
--- a/resources/scripts/admin/views/customers/Index.vue
+++ b/resources/scripts/admin/views/customers/Index.vue
@@ -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 : ''"
diff --git a/resources/scripts/admin/views/dashboard/DashboardTable.vue b/resources/scripts/admin/views/dashboard/DashboardTable.vue
index 0decb6a5..86a4091d 100644
--- 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>
diff --git a/resources/scripts/admin/views/estimates/Index.vue b/resources/scripts/admin/views/estimates/Index.vue
index 184012bd..5fc474e3 100644
--- a/resources/scripts/admin/views/estimates/Index.vue
+++ b/resources/scripts/admin/views/estimates/Index.vue
@@ -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>
diff --git a/resources/scripts/admin/views/expenses/Index.vue b/resources/scripts/admin/views/expenses/Index.vue
index 3219b249..64aee126 100644
--- a/resources/scripts/admin/views/expenses/Index.vue
+++ b/resources/scripts/admin/views/expenses/Index.vue
@@ -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>
diff --git a/resources/scripts/admin/views/installation/Installation.vue b/resources/scripts/admin/views/installation/Installation.vue
index 31adf417..6eec8c6b 100644
--- 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() {
diff --git a/resources/scripts/admin/views/invoices/Index.vue b/resources/scripts/admin/views/invoices/Index.vue
index 2342eba5..c4027dc0 100644
--- a/resources/scripts/admin/views/invoices/Index.vue
+++ b/resources/scripts/admin/views/invoices/Index.vue
@@ -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>
diff --git a/resources/scripts/admin/views/items/Index.vue b/resources/scripts/admin/views/items/Index.vue
index 1be6f8ad..c96a75e0 100644
--- a/resources/scripts/admin/views/items/Index.vue
+++ b/resources/scripts/admin/views/items/Index.vue
@@ -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>
diff --git a/resources/scripts/admin/views/payments/Index.vue b/resources/scripts/admin/views/payments/Index.vue
index c83a53af..62627367 100644
--- a/resources/scripts/admin/views/payments/Index.vue
+++ b/resources/scripts/admin/views/payments/Index.vue
@@ -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>
diff --git a/resources/scripts/admin/views/recurring-invoices/Index.vue b/resources/scripts/admin/views/recurring-invoices/Index.vue
index 092632b7..f905e0b6 100644
--- a/resources/scripts/admin/views/recurring-invoices/Index.vue
+++ b/resources/scripts/admin/views/recurring-invoices/Index.vue
@@ -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
diff --git a/resources/scripts/admin/views/users/Index.vue b/resources/scripts/admin/views/users/Index.vue
index b2f2cc64..ff42ca93 100644
--- a/resources/scripts/admin/views/users/Index.vue
+++ b/resources/scripts/admin/views/users/Index.vue
@@ -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>
diff --git a/resources/scripts/components/CustomerLightDarkButton.vue b/resources/scripts/components/LightDarkButton.vue
similarity index 90%
rename from resources/scripts/components/CustomerLightDarkButton.vue
rename to resources/scripts/components/LightDarkButton.vue
index a58c0038..25fa2fad 100644
--- a/resources/scripts/components/CustomerLightDarkButton.vue
+++ b/resources/scripts/components/LightDarkButton.vue
@@ -14,7 +14,7 @@
     "
     @click="onChange"
   >
-    <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-black" name="SunIcon" />
+  <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-yellow-500" name="SunIcon" />
     <BaseIcon v-else class="h-5 w-5 text-white" name="MoonIcon" />
   </button>
 </template>
diff --git a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
index c127cc25..47182bda 100644
--- 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,
diff --git a/resources/scripts/customer/views/dashboard/DashboardTable.vue b/resources/scripts/customer/views/dashboard/DashboardTable.vue
index 25f57d96..90bd1453 100644
--- 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>
diff --git a/resources/scripts/customer/views/estimates/Index.vue b/resources/scripts/customer/views/estimates/Index.vue
index aeafe639..e77916e2 100644
--- 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>
diff --git a/resources/scripts/customer/views/invoices/Index.vue b/resources/scripts/customer/views/invoices/Index.vue
index e1099967..5ffbf416 100644
--- 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>
diff --git a/resources/scripts/customer/views/payments/Index.vue b/resources/scripts/customer/views/payments/Index.vue
index a6e3eadc..95495b13 100644
--- 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>