From 1d864acfcc16181aa268b257a85e31de57e4faa0 Mon Sep 17 00:00:00 2001
From: candifloss <candifloss@candifloss.cc>
Date: Fri, 25 Oct 2024 00:37:52 +0530
Subject: [PATCH] css fixes

---
 test/scss/_colors.scss |  2 ++
 test/scss/login.scss   | 63 +++++++++++++++++++++++-------------------
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss
index a33b303..5e134bf 100644
--- a/test/scss/_colors.scss
+++ b/test/scss/_colors.scss
@@ -6,6 +6,7 @@ $login-form-background: rgba(255, 255, 255, 0.9);
 $login-form-shadow-color: rgba(0, 0, 0, 0.2); 
 $login-form-title-color: #5f5f5f; 
 $login-form-input-background: rgba(255, 255, 255, 0.95); 
+$login-form-input-focused-background: #fff; 
 $login-form-input-border-color: rgba(232, 232, 232, 0.7); 
 $login-form-input-hover-border-color: #005f73; 
 $login-form-input-focus-border-color: #005f73; 
@@ -13,3 +14,4 @@ $login-button-color: #003f5c;
 $login-button-hover-color: #2f798a; 
 $login-button-shadow: rgba(0, 95, 115, 0.3); 
 $login-button-active-shadow: rgba(70, 70, 70, 0.2); 
+$login-button-text-color: #fff; 
diff --git a/test/scss/login.scss b/test/scss/login.scss
index 7ae8cd9..cf7ab43 100644
--- a/test/scss/login.scss
+++ b/test/scss/login.scss
@@ -1,20 +1,21 @@
-@use "common";
-@use "colors" as *; // Import the color scheme
+@use "common";  // Reset styles
+@use "colors" as *; // Color scheme
 
 // Hide the title
 title {
   display: none;
 }
 
-// Basic body styling with a new color theme
 body {
+  // Page background
   font-family: 'Arial', sans-serif;
-  background: $login-page-background-color; // Use login background gradient
+  background: $login-page-background-color;
   display: flex;
   align-items: center;
   height: 100vh;
-  padding-right: 50px; // Space between the form and the right edge
+  padding-right: 50px; 
 
+  // The left side, with the logo
   .left-container {
     flex: 1; // Take available space on the left
     padding-left: 50px; // Space from the left edge
@@ -23,38 +24,43 @@ body {
     flex-direction: column; // Stack elements vertically
     justify-content: center; // Center elements vertically
 
+    // App or organization logo
     .logo {
-      height: 190px; // Set logo height to 250px
+      height: 190px; // Set logo height
       max-width: 100%; // Ensure the logo doesn't exceed the container's width
       width: auto; // Maintain aspect ratio
-      margin-bottom: 20px; // Space below the logo
+      margin-bottom: 20px; // Space below the logo, above the title
       align-self: flex-start; // Align logo to the start (left) of the container
     }
 
+    // Application name
     h1 {
-      font-size: 36px; // Adjust font size for application name
-      color: $login-page-appname-color; // Use login main text color
+      font-size: 36px; 
+      color: $login-page-appname-color;
       margin-bottom: 10px; // Space below the heading
     }
 
+    // App description
     p {
-      font-size: 18px; // Adjust font size for the description
-      color: $login-page-description-color; // Use login description color
+      font-size: 18px; 
+      color: $login-page-description-color; 
     }
   }
 
+  // The login form container
   .login-container {
     background-color: $login-form-background;
-    padding: 40px;
-    border-radius: 12px;
+    padding: 40px;  // Spaces
+    border-radius: 12px;  // Round corners
     box-shadow: 0 8px 15px $login-form-shadow-color;
     width: 350px;
     text-align: center;
 
+    // The heading ("Login")
     h2 {
       display: block;
-      margin-bottom: 20px; // Add more space below the heading
-      color: $login-form-title-color; // Use login main text color
+      margin-bottom: 20px; // Add space below the heading
+      color: $login-form-title-color; 
       font-size: 26px;
     }
 
@@ -63,42 +69,43 @@ body {
       flex-direction: column;
       align-items: center; // Center the form elements
 
+      // The input fields
       input[type="text"],
       input[type="password"] {
         width: 100%; // Make the inputs full width of the form
-        padding: 12px;
+        padding: 12px;  // Spaces
         margin-bottom: 15px;
-        border: 1px solid $login-form-input-border-color; // Use login input border color
-        border-radius: 6px;
+        border: 1px solid $login-form-input-border-color; 
+        border-radius: 6px; // Round corners
         font-size: 16px;
-        background-color: $login-form-input-background; // Use login input background color
+        background-color: $login-form-input-background; 
         transition: border-color 0.3s, background-color 0.3s;
 
         &:hover {
             border-color: $login-form-input-hover-border-color;
         }
         &:focus {
-          border-color: $login-form-input-focus-border-color; // Use focus border color
-          background-color: #fff;
+          border-color: $login-form-input-focus-border-color; 
+          background-color: $login-form-input-focused-background;
           outline: none;
         }
       }
 
       button {
-        width: 100%; // Make the button full width of the form
-        padding: 12px;
-        background-color: $login-button-color; // Use login button color
-        color: #fff;
+        width: 100%; // Full width of the form
+        padding: 12px;  // Spaces
+        background-color: $login-button-color; 
+        color: $login-button-text-color;
         border: none;
-        border-radius: 6px;
+        border-radius: 6px; // Round corners
         font-size: 18px;
         font-weight: bold;
         cursor: pointer;
         transition: background-color 0.3s, transform 0.3s;
-        box-shadow: 0 4px 10px $login-button-shadow; // Use button shadow color
+        box-shadow: 0 4px 10px $login-button-shadow; 
 
         &:hover {
-          background-color: $login-button-hover-color; // Use login button hover 
+          background-color: $login-button-hover-color; 
         }
 
         &:active {