Merge pull request #2674 from shubhamkumar9199/feature/update-css-login-page--

WEB-318 - Feature/update css login page

Author: alberto-art3ch

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

@@ -33,13 +33,14 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-checkbox *ngIf="enableRememberMe" formControlName="remember" class="m-t-10 flex-align-center">{{
-      'labels.inputs.Remember me' | translate
-    }}</mat-checkbox>
-
     <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
 
-    <button mat-raised-button color="primary" class="login-button flex-align-center" [disabled]="!loginForm.valid">
+    <button
+      mat-raised-button
+      color="primary"
+      class="login-button-first flex-align-center"
+      [disabled]="!loginForm.valid"
+    >
       {{ 'labels.buttons.Login' | translate }}
       <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
     </button>

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

@@ -1,12 +1,24 @@
 #login-form {
   .login-input {
     width: 14rem;
-    margin-bottom: 0.6rem;
+    margin-bottom: 0.1rem;
   }
 
-  .login-button {
+  [matPrefix] fa-icon {
+    font-size: 16px;
+    position: absolute;
+    top: 50%;
+    left: 190px;
+    transform: translateY(-50%);
+  }
+
+  .login-button-first {
     width: 14rem;
-    margin-top: 1rem;
+    margin-top: 0.8rem;
+    background-color: #1976d2;
+    color: white;
+    border-radius: 8px;
+    margin-bottom: 0.5rem;
   }
 
   mat-spinner {
@@ -22,4 +34,6 @@
 .container-margin {
   margin-top: 8rem;
   margin-bottom: 8rem;
+  border-radius: 50px;
+  border: solid 1px black;
 }

src/app/login/login.component.html

@@ -51,22 +51,26 @@ <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate }}</h1>
       <img src="assets/images/mifos_lg-logo.png" alt="{{ 'APP_NAME' | translate }} Logo" class="img-container" />
     </div>
 
-    <!-- Tenant Identifier Name -->
-    <mifosx-tenant-selector *ngIf="displayTenantSelector()"></mifosx-tenant-selector>
+    <!-- Form Section -->
+    <div class="layout-column align-center-center">
+      <!-- Tenant Identifier Name -->
+      <mifosx-tenant-selector *ngIf="displayTenantSelector()"></mifosx-tenant-selector>
 
-    <!--
-      Type of Form:
-        Login
-        Reset Password
-        Two Factor Authentication
-        Forgot Password (TODO: Decision to be taken on providing this feature.)
-    -->
-    <mifosx-login-form *ngIf="!resetPassword && !twoFactorAuthenticationRequired"></mifosx-login-form>
+      <!--
+        Type of Form:
+          Login
+          Reset Password
+          Two Factor Authentication
+          Forgot Password (TODO: Decision to be taken on providing this feature.)
+      -->
+      <mifosx-login-form *ngIf="!resetPassword && !twoFactorAuthenticationRequired"></mifosx-login-form>
 
-    <div class="layout-row">
-      <mifosx-reset-password *ngIf="resetPassword"></mifosx-reset-password>
-      <mifosx-two-factor-authentication *ngIf="twoFactorAuthenticationRequired"></mifosx-two-factor-authentication>
+      <div class="layout-row">
+        <mifosx-reset-password *ngIf="resetPassword"></mifosx-reset-password>
+        <mifosx-two-factor-authentication *ngIf="twoFactorAuthenticationRequired"></mifosx-two-factor-authentication>
+      </div>
     </div>
+
     <div class="layout-row">
       <!-- Contact Information/Resources (hidden on smaller screens) -->
       <mat-list class="information-list align-items-center custom-horizontal-list hide-lt-lg">

src/app/login/login.component.scss

@@ -3,6 +3,34 @@ mifosx-server-selector {
   width: 40%;
 }
 
+.mat-mdc-form-field-infix {
+  width: 144px !important;
+}
+
+mifosx-tenant-selector {
+  border-radius: 8px;
+  width: 14rem;
+  margin-bottom: 0.1rem;
+
+  ::ng-deep .mat-mdc-form-field {
+    width: 14rem;
+  }
+
+  ::ng-deep .mat-mdc-form-field-infix {
+    width: 144px !important;
+    border-radius: 8px;
+  }
+
+  ::ng-deep [matPrefix] fa-icon {
+    font-size: 16px;
+    position: absolute;
+    left: 190px;
+    border-radius: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
 .cover {
   background: url('../../assets/images/cover_image_resized.webp') no-repeat center center;
   background-size: cover;
@@ -60,9 +88,12 @@ mifosx-server-selector {
   height: 100vh;
   width: 100%;
   min-width: 21.5rem;
+  padding: 0.5rem 1rem;
 
   .img-container {
     max-width: 18rem;
+    margin-bottom: 2rem;
+    gap: 20px;
   }
 }
 
@@ -77,7 +108,7 @@ mifosx-server-selector {
   flex-direction: row !important;
   justify-content: center;
   align-items: center;
-  gap: 1.5rem; // space between items
+  gap: 1.5rem;
 
   mat-list-item {
     width: auto !important;
@@ -90,10 +121,6 @@ mifosx-server-selector {
   }
 }
 
-.mat-mdc-form-field-infix {
-  width: 144px !important;
-}
-
 .p-t-10 {
   padding-top: 0;
 }