add dark mode in admin login layout (#1202)

* add dark mode in admin login layout

* Add dark mode in customer dashboard (#1199)

* add dark mode in DashboardStatsItem

* add dark mode in customer side header

* add dark mode in customer view file

* fix placeholder

* fix base select input

---------

Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>

* Dark label (#1203)

* add dark mode for label

* fix dark issue in customer view page

* fix remaining label for dark mode

---------

Co-authored-by: yashkanakiya <yashkanakiya281297@gmail.com>

* add customer dark mode login

* fix dark mode classes

---------

Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>
Co-authored-by: Yogesh Gohil <33858419+yogesh-gohil@users.noreply.github.com>
Co-authored-by: PayalDholakiya <payaldholakiya312@gmail.com>

resources/scripts/admin/layouts/LayoutLogin.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100">
+  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-gray-100 dark:bg-gray-900">
     <NotificationRoot />
 
     <div

resources/scripts/admin/views/auth/ForgotPassword.vue

@@ -32,7 +32,7 @@
     <div class="mt-4 mb-4 text-sm">
       <router-link
         to="/login"
-        class="text-sm text-primary-400 hover:text-gray-700"
+        class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
       >
         {{ $t('general.back_to_login') }}
       </router-link>

resources/scripts/admin/views/auth/Login.vue

@@ -49,7 +49,7 @@
       <div class="mb-4">
         <router-link
           to="forgot-password"
-          class="text-sm text-primary-400 hover:text-gray-700"
+          class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
         >
           {{ $t('login.forgot_password') }}
         </router-link>

resources/scripts/components/svg/LoginBottomVector.vue

@@ -3,6 +3,7 @@
     <path
       d="M690 4.08004C518 -9.91998 231 4.08004 -6 176.361L231 197.08L1170 219.08C1113.33 175.747 909.275 21.928 690 4.08004Z"
       fill="white"
+      class="dark:fill-gray-900"
       fill-opacity="0.1"
     />
   </svg>

resources/scripts/customer/layouts/LayoutBasic.vue

@@ -6,7 +6,7 @@
 
     <!-- <SiteSidebar /> -->
 
-    <main class="mt-16 pb-16 h-screen overflow-y-auto min-h-0">
+    <main class="h-screen min-h-0 pb-16 mt-16 overflow-y-auto">
       <router-view />
     </main>
   </div>

resources/scripts/customer/layouts/LayoutLogin.vue

@@ -1,31 +1,24 @@
 <template>
   <div
-    class="
+    class="flex flex-col justify-center h-full min-h-screen py-12 overflow-hidden bg-gray-100 sm:px-6 lg:px-8 dark:bg-gray-800/80 dark:text-white font-base "
-      min-h-screen
-      bg-gray-200
-      flex flex-col
-      justify-center
-      py-12
-      sm:px-6
-      lg:px-8
-    "
   >
     <NotificationRoot />
 
-    <div class="sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
+    <div class="px-4 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
       <MainLogo
         v-if="!customerLogo"
-        class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
+        class="block w-48 h-auto max-w-full mx-auto text-primary-400"
       />
       <img
         v-else
         :src="customerLogo"
-        class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
+        class="block w-48 h-auto max-w-full mx-auto text-primary-400"
       />
     </div>
 
-    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
+    <div class="px-4 mt-8 sm:mx-auto sm:w-full sm:max-w-md sm:px-0">
-      <div class="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
+      <div class="px-4 py-8 bg-white rounded-lg shadow sm:px-10 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">
+      <BaseDarkHighlight/>
         <router-view />
       </div>
     </div>

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

@@ -34,7 +34,7 @@
               :to="`/${globalStore.companySlug}${item.link}`"
               :class="[
                 hasActiveUrl(item.link)
-                  ? 'border-primary-500 text-primary-600 dark:text-primary-400'
+                  ? 'text-primary-600 border-primary-600 dark:border-primary-400 dark:text-primary-400'
                   : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-200',
                 'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
               ]"

resources/scripts/customer/views/auth/ForgotPassword.vue

@@ -31,7 +31,7 @@
     <div class="mt-4 mb-4 text-sm">
       <router-link
         to="login"
-        class="text-sm text-primary-400 hover:text-gray-700"
+        class="text-sm text-primary-400 hover:text-gray-700 dark:hover:text-primary-500"
       >
         {{ $t('general.back_to_login') }}
       </router-link>

resources/scripts/customer/views/auth/Login.vue

@@ -55,7 +55,7 @@
     <div class="flex items-center justify-between">
       <router-link
         :to="{ name: 'customer.forgot-password' }"
-        class="text-sm text-primary-600 hover:text-gray-500"
+        class="text-sm text-primary-400 hover:text-gray-500 dark:hover:text-primary-500"
       >
         {{ $t('login.forgot_password') }}
       </router-link>