login page dan check in

assets/styles/loginpage/login.scss

@@ -1,14 +1,9 @@
-/* assets/styles/loginpage/login.css */
+/* assets/styles/loginpage/login.scss */
+@use '~/assets/scss/_colors.scss' as *;
 
-/* --- COLOR DEFINITIONS --- */
-/* Base Orange: #FF9B1B (New) */
-/* Hover/Darker Orange: #E68A00 (Calculated darker shade for hover effect) */
-/* --- END COLOR DEFINITIONS --- */
-
-
-/* Main Background - Now Orange */
+/* Main Background - Using Primary Color */
 .login-background {
-  background: #FF9B1B; /* Solid Orange Background: #FF9B1B */
+  background: $primary-500; /* Primary-500: #567EE7 */
   min-height: 100vh;
   position: relative;
   overflow: hidden;
@@ -26,7 +21,7 @@
   background: none;
 }
 
-/* Floating Medical Icons - Subtle on Orange Background */
+/* Floating Medical Icons - Subtle on Primary Background */
 .floating-medical-icon {
   position: absolute;
   opacity: 0.8;
@@ -45,7 +40,7 @@
 }
 
 .floating-medical-icon .v-icon {
-  color: rgba(255, 255, 255, 0.15) !important; /* Light white for icons on orange background */
+  color: rgba(255, 255, 255, 0.15) !important; /* Light white for icons on primary background */
 }
 
 /* Specific icon positioning - now static */
@@ -66,14 +61,14 @@
 }
 
 .white-card {
-  background: white !important; /* Main card background is white */
+  background: $neutral-300 !important; /* Neutral-300: #F5F7FA */
   border: 1px solid rgba(0, 0, 0, 0.1);
   /* box-shadow is now managed by .main-card */
 }
 
-/* Right Login Section (White) */
+/* Right Login Section (Neutral-300) */
 .login-section-box {
-  background: white; /* Changed to white */
+  background: $neutral-300; /* Neutral-300: #F5F7FA */
   min-height: 500px; /* Reduced min-height since there is no side-by-side comparison */
 }
 
@@ -84,51 +79,51 @@
 
 /* White Dialog Styles */
 .white-dialog {
-  background: white !important;
+  background: $neutral-100 !important;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
 }
 
-/* Card Header - Dark Text for white background */
+/* Card Header - Using Neutral Color with Larger Font */
 .welcome-title-dark {
-  color: #333; /* Dark text on white background */
-  font-size: 1.1rem;
+  color: $neutral-900; /* Neutral-900: #212121 */
+  font-size: 1.6rem;
   font-weight: 700;
   letter-spacing: 1px;
   margin-bottom: 0.25rem;
 }
 
 .login-instruction-dark {
-  color: #777; /* Grey text for instruction on white background */
-  font-size: 0.8rem;
+  color: $neutral-700; /* Neutral-700: #717171 */
+  font-size: 1.1rem;
   letter-spacing: 0.3px;
 }
 
-/* App Title - Dark for white background */
+/* App Title - Using Primary Color */
 .app-title-dark {
-  color: #FF9B1B; /* Orange app title: #FF9B1B */
+  color: $primary-500; /* Primary-500: #567EE7 */
   text-shadow: none;
 }
 
 .hospital-logo {
-  height: 332px;
+  height: 180px;
   width: auto;
   filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
 }
 
 .sso-text-dark {
-  color: #555; /* Dark grey for SSO text */
+  color: $neutral-800; /* Dark grey for SSO text */
   font-size: 0.95rem;
   font-weight: 500;
 }
 
-/* Buttons (Orange theme) */
+/* Buttons (Primary theme) */
 .login-btn {
-  background: #FF9B1B !important; /* Solid Orange button: #FF9B1B */
-  color: white !important; /* White text on orange button */
+  background: $primary-500 !important; /* Primary-500: #567EE7 */
+  color: $neutral-100 !important; /* White text on primary button */
   border: none;
   box-shadow:
-    0 8px 25px rgba(255, 155, 27, 0.3), /* Orange shadow: #FF9B1B */
-    0 4px 12px rgba(255, 155, 27, 0.2);
+    0 8px 25px rgba(86, 126, 231, 0.3), /* Primary shadow */
+    0 4px 12px rgba(86, 126, 231, 0.2);
   transition: all 0.3s ease;
   text-transform: none;
   font-size: 1rem;
@@ -137,15 +132,15 @@
 
 .login-btn:hover {
   transform: translateY(-2px);
-  background: #E68A00 !important; /* Slightly darker orange on hover */
+  background: $primary-600 !important; /* Primary-600: #3A61C9 on hover */
   box-shadow:
-    0 12px 30px rgba(255, 155, 27, 0.4),
-    0 6px 15px rgba(255, 155, 27, 0.3);
+    0 12px 30px rgba(86, 126, 231, 0.4),
+    0 6px 15px rgba(86, 126, 231, 0.3);
 }
 
 .register-btn-dark {
-  color: #FF9B1B !important; /* Orange text for register button: #FF9B1B */
-  border: 2px solid #FF9B1B !important; /* Orange border: #FF9B1B */
+  color: $primary-500 !important; /* Primary-500: #567EE7 */
+  border: 2px solid $primary-500 !important; /* Primary border */
   background: transparent !important;
   transition: all 0.3s ease;
   text-transform: none;
@@ -153,39 +148,39 @@
 }
 
 .register-btn-dark:hover {
-  background: rgba(255, 155, 27, 0.05) !important; /* Light orange hover background */
-  border-color: #E68A00 !important; /* Darker orange border on hover */
+  background: rgba(86, 126, 231, 0.05) !important; /* Light primary hover background */
+  border-color: $primary-600 !important; /* Primary-600 border on hover */
   transform: translateY(-1px);
 }
 
 /* Custom Divider - Dark for white background */
 .custom-divider-dark {
-  border-color: rgba(0, 0, 0, 0.1) !important; /* Light grey divider */
+  border-color: $neutral-400 !important; /* Light grey divider */
   opacity: 1 !important;
 }
 
 /* Help Text and Links - Dark for white background */
 .help-text-dark {
-  color: #555; /* Dark grey help text */
+  color: $neutral-800; /* Dark grey help text */
   font-size: 0.9rem;
 }
 
 .contact-link-dark {
-  color: #FF9B1B !important; /* Orange link: #FF9B1B */
+  color: $primary-500 !important; /* Primary-500: #567EE7 */
   text-decoration: underline;
   text-transform: none;
   font-size: 0.9rem;
 }
 
 .help-link-dark {
-  color: #777; /* Grey link */
+  color: $neutral-700; /* Grey link */
   font-size: 0.85rem;
   text-decoration: underline;
   cursor: pointer;
 }
 
 .help-link-dark:hover {
-  color: #FF9B1B; /* Orange on hover: #FF9B1B */
+  color: $primary-500; /* Primary-500 on hover */
 }
 
 /* Transparent Background */
@@ -196,17 +191,17 @@
 /* Dialog Accents */
 .v-card-title .v-icon,
 .v-list-item .v-icon {
-    color: #FF9B1B !important; /* Orange accents: #FF9B1B */
+    color: $primary-500 !important; /* Primary accents */
 }
 
 .v-btn[color="#FF9B1B"] {
-    background-color: #FF9B1B !important;
-    color: white !important;
+    background-color: $primary-500 !important;
+    color: $neutral-100 !important;
 }
 
 .v-alert[color="orange"] {
-    border-left: 8px solid #FF9B1B !important;
-    color: #333 !important;
+    border-left: 8px solid $primary-500 !important;
+    color: $neutral-900 !important;
 }
 
 /* Responsive Design Adjustments for single column */
@@ -232,4 +227,4 @@
   .login-section-box {
     padding: 1.5rem !important;
   }
-}
+}

pages/LoginPage.vue

@@ -31,13 +31,16 @@
                   <p class="login-instruction-dark">MASUK UNTUK MELANJUTKAN</p>
                 </div>
 
-                <div class="d-flex flex-column align-center text-center mb-6">
-                  <span class="text-h5 font-weight-bold app-title-dark">Antrean RSSA</span>
+                <div class="d-flex flex-column align-center text-center mb-10 pt-10 pb-10">
                   <img
-                    src="/AntreanLogobg.png"  
+                    src="/love logo biru.png"
                     alt="Antrean Logo"
                     class="mt-3 hospital-logo"
                   />
+                  <!-- src="/x logo biru.png"  -->
+                  <!-- src="/logo spiral.png"   -->
+                  <!-- src="/logo biru.png"     -->
+                  <!-- src="/love logo biru.png" -->
                 </div>
 
                 <v-alert v-if="errorMessage" type="error" class="mb-4" dismissible @click:close="errorMessage = ''">
@@ -375,4 +378,4 @@ Jam Operasional: Senin - Jumat, 07:00 - 15:00
 }
 </script>
 
-<style scoped src="~/assets/styles/loginpage/login.css"></style>
+<style scoped src="~/assets/styles/loginpage/login.scss"></style>