feat: Login page darkened

dashboard/src/theme/LightTheme.ts

@@ -36,7 +36,7 @@ const PurpleTheme: ThemeTypes = {
     gray100: '#fafafacc',
     primary200: '#90caf9',
     secondary200: '#b39ddb',
-    background: '#f9fafc',
+    background: '#f9fafcf4',
     overlay: '#ffffffaa',
     codeBg: '#f5f0ff',
     code: '#673ab7'

dashboard/src/views/authentication/auth/LoginPage.vue

@@ -4,6 +4,7 @@ import Logo from '@/components/shared/Logo.vue';
 import { onMounted, ref } from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import { useRouter } from 'vue-router';
+import {useCustomizerStore} from "@/stores/customizer";
 
 const cardVisible = ref(false);
 const router = useRouter();
@@ -24,7 +25,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="login-page-container">
+  <div v-if="useCustomizerStore().uiTheme==='PurpleTheme'" class="login-page-container">
     <div class="login-background"></div>
     <v-card 
       variant="outlined" 
@@ -42,6 +43,24 @@ onMounted(() => {
       </v-card-text>
     </v-card>
   </div>
+  <div v-else class="login-page-container-dark">
+    <div class="login-background"></div>
+    <v-card
+        variant="outlined"
+        class="login-card"
+        :class="{ 'card-visible': cardVisible }"
+    >
+      <v-card-text class="pa-10">
+        <div class="logo-wrapper">
+          <Logo />
+        </div>
+        <div class="divider-container">
+          <v-divider class="custom-divider"></v-divider>
+        </div>
+        <AuthLogin />
+      </v-card-text>
+    </v-card>
+  </div>
 </template>
 
 <style lang="scss">
@@ -56,6 +75,17 @@ onMounted(() => {
   overflow: hidden;
 }
 
+.login-page-container-dark {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  background: linear-gradient(135deg, #1a1b1c 0%, #1d1e21 100%);
+  overflow: hidden;
+}
+
 .login-background {
   position: absolute;
   width: 200%;
@@ -80,8 +110,9 @@ onMounted(() => {
   max-width: 520px;
   width: 90%;
   border-radius: 12px !important;
+  border-color: var(--v-theme-border) !important;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07) !important;
-  background-color: rgba(255, 255, 255, 0.98) !important;
+  background-color: var(--v-theme-background) !important;
   transform: translateY(20px);
   opacity: 0;
   transition: all 0.5s ease;

dashboard/src/views/authentication/authForms/AuthLogin.vue

@@ -160,7 +160,7 @@ async function validate(values: any, { setErrors }: any) {
   }
   
   .hint-text {
-    color: rgba(0, 0, 0, 0.5);
+    color: var(--v-theme-secondaryText);
     padding-left: 5px;
   }
   
@@ -171,7 +171,7 @@ async function validate(values: any, { setErrors }: any) {
   }
 }
 
-.custom-devider {
+.custom-divider {
   border-color: rgba(0, 0, 0, 0.08) !important;
 }
 </style>