From 53ed56460c558d0f812cd153180d18e47177ca1f Mon Sep 17 00:00:00 2001
From: Spencer Ofwiti <maxspencer56@gmail.com>
Date: Wed, 21 Apr 2021 12:03:09 +0300
Subject: [PATCH] Fix form alignment.

---
 src/app/auth/auth.component.html | 30 ++++++++++++++++--------------
 src/styles.scss                  | 11 +++++++++++
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/app/auth/auth.component.html b/src/app/auth/auth.component.html
index fdf90e3..347abcf 100644
--- a/src/app/auth/auth.component.html
+++ b/src/app/auth/auth.component.html
@@ -37,23 +37,25 @@
             <h4 id="passwordState" class="text-dark-50 text-center font-weight-bold"></h4>
           </div>
 
-          <form [formGroup]="passwordForm" (ngSubmit)="onPasswordInput()">
+          <div class="center-items">
+            <form [formGroup]="passwordForm" (ngSubmit)="onPasswordInput()">
 
-            <mat-form-field appearance="outline">
-              <mat-label>Password</mat-label>
-              <input matInput type="password" formControlName="password" placeholder="Enter your private key password..."
-                        [errorStateMatcher]="matcher">
-              <div *ngIf="passwordForm && passwordFormStub.password.errors" class="invalid-feedback">
-                <mat-error *ngIf="passwordFormStub.password.errors.required">Private Key password is required.</mat-error>
-              </div>
-            </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Password</mat-label>
+                <input matInput type="password" formControlName="password" placeholder="Enter your private key password..."
+                          [errorStateMatcher]="matcher">
+                <div *ngIf="passwordForm && passwordFormStub.password.errors" class="invalid-feedback">
+                  <mat-error *ngIf="passwordFormStub.password.errors.required">Private Key password is required.</mat-error>
+                </div>
+              </mat-form-field>
 
-            <button mat-raised-button matRipple color="primary" type="submit" class="ml-3" [disabled]="passwordFormLoading">
-              <span *ngIf="passwordFormLoading" class="spinner-border spinner-border-sm mr-1"></span>
-              Login
-            </button>
+              <button id="passwordLoginButton" mat-raised-button matRipple color="primary" type="submit" class="ml-3" [disabled]="passwordFormLoading">
+                <span *ngIf="passwordFormLoading" class="spinner-border spinner-border-sm mr-1"></span>
+                Login
+              </button>
 
-          </form>
+            </form>
+          </div>
 
           <div class="row mt-3">
             <div class="col-12 text-center">
diff --git a/src/styles.scss b/src/styles.scss
index c0375e2..d729c53 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -29,6 +29,12 @@ a, a:hover, a:focus {
   perspective: 1500px;
 }
 
+.center-items {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 #sidebar {
   min-width: 250px;
   max-width: 250px;
@@ -211,6 +217,11 @@ a[data-toggle="collapse"] {
   overflow: initial;
 }
 
+#passwordLoginButton {
+  height: 3.0rem;
+  padding-top: 0.5rem;
+}
+
 button {
   height: 2.5rem;
 }