From 7a9e2395efb8119cd10981b849629b091e84e2ee Mon Sep 17 00:00:00 2001
From: Marco Zeisler <marco.zeisler@kapsch.net>
Date: Sun, 21 Mar 2021 20:29:20 +0100
Subject: [PATCH] update styling

---
 .../component/landing/landing.component.html  |  2 +-
 .../app/component/login/login.component.css   | 24 ++++++++++++++++++
 .../app/component/login/login.component.html  | 25 +++++++++++++------
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/component/landing/landing.component.html b/frontend/src/app/component/landing/landing.component.html
index 7b2456e..6dfd8cc 100644
--- a/frontend/src/app/component/landing/landing.component.html
+++ b/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>
diff --git a/frontend/src/app/component/login/login.component.css b/frontend/src/app/component/login/login.component.css
index e69de29..9feb465 100644
--- a/frontend/src/app/component/login/login.component.css
+++ b/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;
+}
diff --git a/frontend/src/app/component/login/login.component.html b/frontend/src/app/component/login/login.component.html
index 87e6948..3d6dbd0 100644
--- a/frontend/src/app/component/login/login.component.html
+++ b/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>
-<br>
-<button (click)="gotoBackend()">Call Backend</button>
+<div *ngIf="parsedToken" id="userComp">
+  <span style="display: inline-grid">
+    <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>
+