Refactor logo component inputs

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'"
+        [label]="pageTitle"
-        [name]="pageTitle"
+        [showLabel]="currentRoute !== 'register'"
       ></gf-logo>
     </a>
     <span class="spacer"></span>

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>

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
 >

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;
-  }
 }

libs/ui/src/lib/logo/logo.component.stories.ts

@@ -24,7 +24,7 @@ Large.args = {
   size: 'large'
 };
 
-export const NoName = Template.bind({});
+export const NoLabel = Template.bind({});
-NoName.args = {
+NoLabel.args = {
-  hideName: true
+  showLabel: false
 };

libs/ui/src/lib/logo/logo.component.ts

@@ -2,8 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   HostBinding,
-  Input,
+  Input
-  OnInit
 } 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() label: string;
-  @Input() name: string;
+  @Input() showLabel = true;
 
   public constructor() {}
-
-  public ngOnInit() {
-    this.hideName = this.hideName ?? false;
-  }
 }

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>