update styling

frontend/src/app/component/landing/landing.component.html

@@ -1,2 +1,2 @@
-<h1>Bsp 1 Gruppe 4</h1>
+<h1 style="text-align: center; margin-top: 1em">Bsp 1 Gruppe 4</h1>
 <app-login></app-login>

frontend/src/app/component/login/login.component.css

@@ -0,0 +1,24 @@
+#userComp {
+  position: fixed;
+  top: 2em;
+  right: 8em;
+}
+
+#loginBtnWrapper {
+  width: 100%;
+  text-align: center;
+  display: block;
+  margin-top: 10em;
+}
+
+#loginBtnWrapper > button {
+  font-size: 2em;
+  width: 8em;
+  height: 2em;
+}
+
+#logoutBtn {
+  position: fixed;
+  right: 2em;
+  top: 4.5em;
+}

frontend/src/app/component/login/login.component.html

@@ -1,11 +1,20 @@
-<button (click)="login()">Login</button>
+<button mat-raised-button (click)="gotoBackend()">Call Backend</button>
+<span id="loginBtnWrapper">
+  <button *ngIf="!parsedToken"
+          mat-raised-button color="primary"
+          (click)="login()">Login</button>
+</span>
 <br>
-<button (click)="logout()">Logout</button>
+<div *ngIf="parsedToken" id="userComp">
-<br>
+  <span style="display: inline-grid">
-<button (click)="gotoBackend()">Call Backend</button>
+    <img alt="Profile picture" [src]="parsedToken.picture" style="height:100px;">
+    <span style="margin: auto">{{parsedToken.given_name}} {{parsedToken.family_name}}</span>
+  </span>
+  <button mat-raised-button color="warn" id="logoutBtn"
+          (click)="logout()">Logout</button>
+
+</div>
+
 <br>
 <p *ngIf="errorMessage">Error on login: {{errorMessage}}</p>
-<div *ngIf="parsedToken">
+
-  {{parsedToken.given_name}} {{parsedToken.family_name}}
-  <img alt="Profile picture" [src]="parsedToken.picture" style="height:100px;">
-</div>