Adjust login css

rossa-tech-cli/src/app/components/loginPage/login.component.html

@@ -1,6 +1,6 @@
 <div class="login-form-wrapper">
 
-  <mat-card>
+  <mat-card class="login-card">
     <mat-card-content>
       <form [formGroup]="loginForm" (ngSubmit)="login()">
         <h2>Log In</h2>
@@ -16,7 +16,10 @@
             Please provide a valid password
           </mat-error>
         </mat-form-field>
+        <div class="button-wrapper">
           <button mat-raised-button color="primary" [disabled]="!loginForm.valid">Login</button>
+
+        </div>
       </form>
     </mat-card-content>
   </mat-card>

rossa-tech-cli/src/app/components/loginPage/login.component.scss

@@ -1,17 +1,30 @@
-mat-card {
+mat-card.login-card {
-  max-width: 400px;
+  width: 400px;
-  margin: 2em auto;
+  margin: auto;
-  text-align: center;
+  // text-align: center;
   color: #333333;
+  border-radius: 0;
+
+  .mat-mdc-card-content {
+    padding: 25px;
+    h2 {
+      margin-top: 0;
+    }
+  }
+
+  .button-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+  }
 }
 
 mat-form-field {
   display: block;
 }
 
-login-form-wrapper {
+.login-form-wrapper {
+  height: 100%;
   display: flex;
-  flex-direction: column;
+  align-content: space-around;
-  width: 100%;
-  justify-content: center;
 }

rossa-tech-cli/src/styles.scss

@@ -13,7 +13,7 @@ html.cdk-global-scrollblock {
 
 body {
   // margin: 0;
-  font-family: "Open Sans", sans-serif;
+  font-family: 'Open Sans', sans-serif;
   // height: 100vh;
   margin: 0;
   padding: 0;
@@ -51,3 +51,7 @@ div.mat-grid-tile-content {
   overflow-y: auto;
   overflow-x: hidden;
 }
+
+button {
+  border-radius: 0;
+}