From 8a5d6c51fdde0b4947277e83afdc8493bdc19ec4 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 1 Jan 2023 09:21:23 +0100
Subject: [PATCH] Refactor logo component inputs

---
 .../components/header/header.component.html   |  6 ++---
 .../src/app/pages/landing/landing-page.html   |  2 +-
 libs/ui/src/lib/logo/logo.component.html      |  2 +-
 libs/ui/src/lib/logo/logo.component.scss      | 24 +++++++++----------
 .../ui/src/lib/logo/logo.component.stories.ts |  6 ++---
 libs/ui/src/lib/logo/logo.component.ts        | 13 ++++------
 .../no-transactions-info.component.html       |  6 ++---
 7 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index e136384e0..5e060972b 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -5,7 +5,7 @@
       mat-button
       [routerLink]="['/']"
     >
-      <gf-logo [name]="pageTitle"></gf-logo>
+      <gf-logo [label]="pageTitle"></gf-logo>
     </a>
     <span class="spacer"></span>
     <a
@@ -232,8 +232,8 @@
       [routerLink]="['/']"
     >
       <gf-logo
-        [hideName]="currentRoute === 'register'"
-        [name]="pageTitle"
+        [label]="pageTitle"
+        [showLabel]="currentRoute !== 'register'"
       ></gf-logo>
     </a>
     <span class="spacer"></span>
diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index 48b448dca..0c8f20bce 100644
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/apps/client/src/app/pages/landing/landing-page.html
@@ -256,7 +256,7 @@
           <gf-logo
             class="mr-3 mt-2 pt-1"
             size="medium"
-            [hideName]="true"
+            [showLabel]="false"
           ></gf-logo>
         </div>
         <div>
diff --git a/libs/ui/src/lib/logo/logo.component.html b/libs/ui/src/lib/logo/logo.component.html
index a43b67a2d..313a16c79 100644
--- a/libs/ui/src/lib/logo/logo.component.html
+++ b/libs/ui/src/lib/logo/logo.component.html
@@ -1,4 +1,4 @@
 <span class="align-items-center d-flex"
   ><span class="d-inline-block logo mr-1"></span>
-  <span *ngIf="!hideName" class="name">{{ name ?? 'Ghostfolio' }}</span></span
+  <span *ngIf="showLabel" class="label">{{ label ?? 'Ghostfolio' }}</span></span
 >
diff --git a/libs/ui/src/lib/logo/logo.component.scss b/libs/ui/src/lib/logo/logo.component.scss
index 85315c55d..176f46126 100644
--- a/libs/ui/src/lib/logo/logo.component.scss
+++ b/libs/ui/src/lib/logo/logo.component.scss
@@ -1,12 +1,12 @@
 :host {
+  .label {
+    font-weight: 600;
+  }
+
   .logo {
     background-color: rgba(var(--dark-primary-text));
     mask: url('/assets/ghost.svg') no-repeat center;
   }
-
-  .name {
-    font-weight: 600;
-  }
 }
 
 :host-context(.is-dark-theme) {
@@ -16,23 +16,23 @@
 }
 
 :host-context(.large) {
+  .label {
+    font-size: 3rem;
+  }
+
   .logo {
     height: 2.5rem;
     width: 2.5rem;
   }
-
-  .name {
-    font-size: 3rem;
-  }
 }
 
 :host-context(.medium) {
+  .label {
+    font-size: 1.5rem;
+  }
+
   .logo {
     height: 1.5rem;
     width: 1.5rem;
   }
-
-  .name {
-    font-size: 1.5rem;
-  }
 }
diff --git a/libs/ui/src/lib/logo/logo.component.stories.ts b/libs/ui/src/lib/logo/logo.component.stories.ts
index ca9530eb8..196043eb3 100644
--- a/libs/ui/src/lib/logo/logo.component.stories.ts
+++ b/libs/ui/src/lib/logo/logo.component.stories.ts
@@ -24,7 +24,7 @@ Large.args = {
   size: 'large'
 };
 
-export const NoName = Template.bind({});
-NoName.args = {
-  hideName: true
+export const NoLabel = Template.bind({});
+NoLabel.args = {
+  showLabel: false
 };
diff --git a/libs/ui/src/lib/logo/logo.component.ts b/libs/ui/src/lib/logo/logo.component.ts
index 35adc3ee7..ecb3885dc 100644
--- a/libs/ui/src/lib/logo/logo.component.ts
+++ b/libs/ui/src/lib/logo/logo.component.ts
@@ -2,8 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   HostBinding,
-  Input,
-  OnInit
+  Input
 } from '@angular/core';
 
 @Component({
@@ -12,14 +11,10 @@ import {
   templateUrl: './logo.component.html',
   styleUrls: ['./logo.component.scss']
 })
-export class LogoComponent implements OnInit {
+export class LogoComponent {
   @HostBinding('class') @Input() size: 'large' | 'medium' = 'medium';
-  @Input() hideName = false;
-  @Input() name: string;
+  @Input() label: string;
+  @Input() showLabel = true;
 
   public constructor() {}
-
-  public ngOnInit() {
-    this.hideName = this.hideName ?? false;
-  }
 }
diff --git a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html
index 9f30d437a..103b21078 100644
--- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html
+++ b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html
@@ -1,13 +1,13 @@
 <div class="p-3">
   <div class="d-flex justify-content-center mb-1">
-    <gf-logo size="large" [hideName]="true"></gf-logo>
+    <gf-logo size="large" [showLabel]="false"></gf-logo>
   </div>
   <a
     class="align-items-center justify-content-center"
     color="primary"
-    [routerLink]="['/portfolio', 'activities']"
-    [queryParams]="{ createDialog: true }"
     mat-button
+    [queryParams]="{ createDialog: true }"
+    [routerLink]="['/portfolio', 'activities']"
   >
     <span i18n>Time to add your first activity.</span>
   </a>