WEB-563 feat(login): modernize login UI with Material Design 3 and production mode (#3061)

improve

improve

improve

src/app/login/login-form/login-form.component.scss

@@ -21,7 +21,7 @@
 #login-form {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.5rem;
   animation: slide-in 0.4s ease-out;
   flex: 1;
 }
@@ -71,7 +71,7 @@
       }
 
       .mat-mdc-form-field-icon-prefix {
-        padding-right: 0.75rem;
+        padding: 0 0.75rem 0 0.5rem;
         color: var(--md-sys-color-on-surface-variant, #44474e);
 
         fa-icon {
@@ -122,7 +122,8 @@
       font-size: 1rem;
       font-weight: 400;
       color: var(--md-sys-color-on-surface, #1a1c1e);
-      padding: 0.875rem 0.75rem;
+      padding: 0.875rem 0;
+      margin-left: 0;
 
       &::placeholder {
         color: var(--md-sys-color-on-surface-variant, #44474e);
@@ -134,11 +135,12 @@
     .mat-mdc-floating-label {
       font-size: 1rem;
       color: var(--md-sys-color-on-surface-variant, #44474e);
+      left: 0 !important;
     }
 
     // Prefix icon
     .mat-mdc-form-field-icon-prefix {
-      padding-right: 0.75rem;
+      padding: 0 0.75rem 0 0.5rem;
       color: var(--md-sys-color-on-surface-variant, #44474e);
 
       fa-icon {
@@ -147,6 +149,11 @@
       }
     }
 
+    // Form field infix - align label with input
+    .mat-mdc-form-field-infix {
+      padding-left: 0;
+    }
+
     // Suffix button (password toggle)
     .mat-mdc-form-field-icon-suffix {
       button {
@@ -216,33 +223,6 @@
   }
 }
 
-// ===== Login Actions =====
-.login-actions {
-  display: flex;
-  justify-content: center;
-  margin-top: 0.5rem;
-}
-
-.forgot-password-link {
-  font-size: 0.875rem;
-  color: var(--md-sys-color-primary, #1074b9);
-  text-decoration: none;
-  font-weight: 500;
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: #1074b914;
-    text-decoration: underline;
-  }
-
-  &:focus {
-    outline: 2px solid var(--md-sys-color-primary, #1074b9);
-    outline-offset: 2px;
-  }
-}
-
 // ===== OIDC Login =====
 .oidc-login-container {
   width: 100%;
@@ -370,14 +350,6 @@
     }
   }
 
-  .forgot-password-link {
-    color: var(--md-sys-color-primary, #5ba2ec);
-
-    &:hover {
-      background: #5ba2ec1f;
-    }
-  }
-
   .oidc-description {
     color: var(--md-sys-color-on-surface-variant, #c4c6d0);
   }
@@ -444,7 +416,7 @@
       }
 
       .mat-mdc-form-field-icon-prefix {
-        padding-right: 0.5rem;
+        padding: 0 0.5rem 0 0.35rem;
       }
     }
   }
@@ -454,15 +426,6 @@
     margin-top: 0.4rem;
   }
 
-  .login-actions {
-    margin-top: 0.4rem;
-  }
-
-  .forgot-password-link {
-    font-size: 0.8125rem;
-    padding: 0.35rem 0.65rem;
-  }
-
   .oidc-actions {
     flex-direction: column;