Optimize style for login & sign-up

static/src/app/login/login.component.html

@@ -1,6 +1,6 @@
 <form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
   <div class="row">
-    <h2 class="form-signin-heading">{{'login.headline' | translate}}</h2>
+    <h2>{{'login.headline' | translate}}</h2>
 
     <label for="inputEmail" class="sr-only">{{'login.username' | translate}}</label>
     <input #userName id="inputEmail" class="form-control"
@@ -11,12 +11,10 @@
     <input #password type="password" id="inputPassword" class="form-control"
            placeholder="{{'login.password' | translate}}" required="">
 
-    <div class="form-group">
+    <button mat-stroked-button type="submit">
-      <button mat-stroked-button type="submit">
+      <span *ngIf="!loading">{{'login.submit' | translate}}</span>
-        <span *ngIf="!loading">{{'login.submit' | translate}}</span>
+      <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
-        <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </button>
-      </button>
-    </div>
   </div>
 </form>
 

static/src/app/login/login.component.scss

@@ -2,53 +2,31 @@
   width: 100%;
   padding: 15px;
   margin: 0 auto;
-}
 
-.form-signin > .row {
+  & > .row {
-  max-width: 400px;
+    max-width: 400px;
-  margin: auto;
+    margin: auto;
-}
 
-.form-signin-heading {
+    & > h2 {
-  text-align: center;
+      text-align: center
-}
+    }
 
-.form-signin .form-signin-heading, .form-signin .checkbox, #inputEmail {
+    input.form-control {
-  margin-bottom: 10px;
+      margin-bottom: 10px;
-}
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      font-size: 16px;
+      height: auto;
+      padding: 10px;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
 
-.form-signin .checkbox {
+    button {
-  font-weight: normal;
+      width: 100%;
-}
+    }
-
+  }
-.form-signin .form-control {
-  position: relative;
-  font-size: 16px;
-  height: auto;
-  padding: 10px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.form-signin .form-control:focus {
-  z-index: 2;
-}
-
-.form-signin input[type="text"] {
-  margin-bottom: 5px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.form-signin input[type="password"] {
-  margin-bottom: 10px;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-button {
-  width: 100%;
 }
 
 /* Loading Animation */

static/src/app/login/signup.component.html

@@ -1,26 +1,27 @@
 <form class="form-signin" (ngSubmit)="signup(userName.value, password.value, secret.value)">
 
-  <div class="row" style="position: absolute;width: 500px;left: 40%;">
+  <div class="row">
-    <h2 style="text-align: center;" class="form-signin-heading">{{'signup.headline' | translate}}</h2>
+    <h2>{{'signup.headline' | translate}}</h2>
 
     <p [innerHtml]="'signup.description' | translate"></p>
 
     <label for="inputEmail" class="sr-only">{{'signup.username' | translate}}</label>
-    <input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required="" autofocus="">
+    <input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required=""
+           autofocus="">
 
     <label for="inputPassword" class="sr-only">{{'signup.password' | translate}}</label>
-    <input #password type="password" id="inputPassword" class="form-control" placeholder="{{'signup.password' | translate}}" required="">
+    <input #password type="password" id="inputPassword" class="form-control"
+           placeholder="{{'signup.password' | translate}}" required="">
 
     <label for="inputSecret" class="sr-only">{{'signup.secret' | translate}}</label>
-    <input #secret type="text" id="inputSecret" class="form-control" placeholder="{{'signup.secret.placeholder' | translate}}"
+    <input #secret type="text" id="inputSecret" class="form-control"
+           placeholder="{{'signup.secret.placeholder' | translate}}"
            required="">
 
-    <div class="form-group">
+    <button mat-stroked-button type="submit">
-      <button type="submit" class="btn btn-lg btn-block btn-primary">
+      <span *ngIf="!loading">{{'signup.submit' | translate}}</span>
-        <span *ngIf="!loading">{{'signup.submit' | translate}}</span>
+      <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
-        <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
+    </button>
-      </button>
-    </div>
   </div>
 </form>