From f5a0e6f251c516f593c2cec19a10b02193afa51b Mon Sep 17 00:00:00 2001
From: rubikscraft <contact@rubikscraft.nl>
Date: Mon, 28 Mar 2022 16:47:07 +0200
Subject: [PATCH] refactor loose components

---
 .../components/copyfield/copyfield.component.ts   |  2 +-
 .../app/components/footer/footer.component.html   |  1 +
 .../src/app/components/footer/footer.component.ts |  2 +-
 .../app/components/header/header.component.html   | 15 ++++++++-------
 .../app/components/header/header.component.scss   | 11 ++++-------
 .../src/app/components/header/header.component.ts |  2 --
 6 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/frontend/src/app/components/copyfield/copyfield.component.ts b/frontend/src/app/components/copyfield/copyfield.component.ts
index 3e8ee20..c520c8f 100644
--- a/frontend/src/app/components/copyfield/copyfield.component.ts
+++ b/frontend/src/app/components/copyfield/copyfield.component.ts
@@ -9,7 +9,7 @@ import { UtilService } from 'src/app/util/util.service';
   styleUrls: ['./copyfield.component.scss'],
 })
 export class CopyFieldComponent {
-  // Two paramets: name, value
+  // Two parameters: name, value
   @Input() label: string = 'Loading...';
   @Input() value: string = 'Loading...';
 
diff --git a/frontend/src/app/components/footer/footer.component.html b/frontend/src/app/components/footer/footer.component.html
index 4231676..c36f6dc 100644
--- a/frontend/src/app/components/footer/footer.component.html
+++ b/frontend/src/app/components/footer/footer.component.html
@@ -1,5 +1,6 @@
 <footer class="container">
   <p>
+    <!-- Made into two spans, make sure browsers break at the right point -->
     <span class="line">
       Made with
       <span class="material-icons-outlined heart"> favorite_border </span>
diff --git a/frontend/src/app/components/footer/footer.component.ts b/frontend/src/app/components/footer/footer.component.ts
index f215b3b..d31a84e 100644
--- a/frontend/src/app/components/footer/footer.component.ts
+++ b/frontend/src/app/components/footer/footer.component.ts
@@ -11,7 +11,7 @@ export class FooterComponent implements OnInit {
   constructor(private infoService: InfoService) {}
 
   isDemo: boolean = false;
-  version: string = 'V0.0.0';
+  version: string = 'Unkown Version';
 
   ngOnInit(): void {
     this.subscribeInfo();
diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html
index 2e2e873..6b672ea 100644
--- a/frontend/src/app/components/header/header.component.html
+++ b/frontend/src/app/components/header/header.component.html
@@ -1,18 +1,19 @@
 <mat-toolbar color="primary">
   <button
     *ngIf="enableHamburger"
-    class="hamburger"
+    class="me-3"
     mat-icon-button
     (click)="onHamburgerClick.emit()"
   >
     <mat-icon>menu</mat-icon>
   </button>
 
-  <a [routerLink]="['/']" class="svg-logo">
-    <img src="/assets/image/logo/picsur.svg" alt="Picsur" />
-  </a>
-  <a [routerLink]="['/']" class="text-link d-none d-sm-block">
-    <span>Picsur</span>
+  <a [routerLink]="['/']" class="logo text-link">
+    <div class="svg-logo">
+      <img src="/assets/image/logo/picsur.svg" alt="Picsur" />
+    </div>
+
+    <span class="ms-3 d-none d-sm-block">Picsur</span>
   </a>
 
   <span class="spacer"></span>
@@ -25,7 +26,7 @@
     Login
   </button>
 
-  <span *ngIf="isLoggedIn" class="username d-none d-sm-block">
+  <span *ngIf="isLoggedIn" class="me-3 d-none d-sm-block">
     {{ user?.username }}
   </span>
   <button *ngIf="isLoggedIn" mat-icon-button [matMenuTriggerFor]="menu">
diff --git a/frontend/src/app/components/header/header.component.scss b/frontend/src/app/components/header/header.component.scss
index fc707d5..8d32af8 100644
--- a/frontend/src/app/components/header/header.component.scss
+++ b/frontend/src/app/components/header/header.component.scss
@@ -1,19 +1,16 @@
-.hamburger {
-  margin-right: 1rem;
+.logo {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .svg-logo {
-  margin-right: 1rem;
   height: 100%;
 
   display: flex;
   align-items: center;
 }
 
-.username {
-  margin-right: 1rem;
-}
-
 .mat-menu-item[disabled] {
   color: inherit;
 }
diff --git a/frontend/src/app/components/header/header.component.ts b/frontend/src/app/components/header/header.component.ts
index 7806590..b60f375 100644
--- a/frontend/src/app/components/header/header.component.ts
+++ b/frontend/src/app/components/header/header.component.ts
@@ -15,8 +15,6 @@ import { UtilService } from 'src/app/util/util.service';
   styleUrls: ['./header.component.scss'],
 })
 export class HeaderComponent implements OnInit {
-  private readonly logger = console;
-
   @Input('enableHamburger') enableHamburger: boolean = false;
   @Output('onHamburgerClick') onHamburgerClick = new EventEmitter<void>();