From 3560ec7605f83d5638d8f5623cb0a0616bc70e37 Mon Sep 17 00:00:00 2001
From: Ian Labicani <labicaniian@gmail.com>
Date: Thu, 14 Mar 2024 16:48:34 +0800
Subject: [PATCH] Update login component HTML and SCSS files

---
 src/app/login/login.component.html |  2 +-
 src/app/login/login.component.scss | 78 ++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 181424c..be89992 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,5 +1,5 @@
 <div>
-  <h2>Register</h2>
+  <h2>Login</h2>
   <form [formGroup]="loginForm" (ngSubmit)="login()">
     <div>
       <label for="email">Email:</label>
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index e69de29..e05ea0a 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -0,0 +1,78 @@
+/* login.component.scss */
+
+div {
+  margin: 20px;
+  text-align: center;
+
+  h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+
+  form {
+    max-width: 400px;
+    margin: 0 auto;
+
+    div {
+      margin-bottom: 15px;
+
+      label {
+        display: block;
+        margin-bottom: 5px;
+      }
+
+      input {
+        width: 100%;
+        padding: 8px;
+        border-radius: 4px;
+        border: 1px solid #ccc;
+        transition: border-color 0.3s ease;
+
+        &:focus {
+          outline: none;
+          border-color: #007bff; /* Example focus color */
+        }
+      }
+
+      small {
+        color: red; /* Error message color */
+        display: block; /* Display error messages in block format */
+        margin-top: 5px; /* Add spacing above error messages */
+      }
+    }
+
+    button {
+      display: block;
+      width: 100%;
+      padding: 10px;
+      margin-top: 15px;
+      background-color: #007bff;
+      color: #fff;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+
+      &:hover {
+        background-color: #0056b3; /* Darker color on hover */
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+
+    p {
+      margin-top: 15px;
+      a {
+        color: #007bff;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}