Update tab on change

apps/client/src/app/app.component.scss

@@ -9,7 +9,7 @@
     padding-top: 5rem;
 
     .create-account-container {
-      height: 2.5rem;
+      height: 3.5rem;
       margin-top: -0.5rem;
 
       .create-account-box {

apps/client/src/app/pages/home/home-page.component.ts

@@ -67,7 +67,6 @@ export class HomePageComponent implements AfterViewInit, OnDestroy, OnInit {
   public performance: PortfolioPerformance;
   public positions: { [symbol: string]: PortfolioPosition };
   public routeQueryParams: Subscription;
-  public showPositionsButton: boolean;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -163,6 +162,10 @@ export class HomePageComponent implements AfterViewInit, OnDestroy, OnInit {
     this.update();
   }
 
+  public onTabChanged() {
+    this.update();
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
@@ -234,7 +237,6 @@ export class HomePageComponent implements AfterViewInit, OnDestroy, OnInit {
         this.positions = response;
         this.hasPositions =
           this.positions && Object.keys(this.positions).length > 1;
-        this.showPositionsButton = this.hasPositions;
 
         this.changeDetectorRef.markForCheck();
       });

apps/client/src/app/pages/home/home-page.html

@@ -3,6 +3,7 @@
   class="position-absolute"
   headerPosition="below"
   mat-align-tabs="center"
+  (selectedTabChange)="onTabChanged()"
 >
   <mat-tab>
     <ng-template mat-tab-label>
@@ -79,7 +80,7 @@
     </ng-template>
     <div class="container justify-content-center pb-3 px-3 positions">
       <h3
-        *ngIf="hasPositions === true"
+        *ngIf="hasPositions !== false"
         class="d-flex justify-content-center mb-3"
         i18n
       >

apps/client/src/app/pages/home/home-page.scss

@@ -7,7 +7,7 @@
   position: relative;
 
   &.with-create-account-container {
-    min-height: calc(100vh - 5rem - 2.5rem);
+    min-height: calc(100vh - 5rem - 3.5rem);
   }
 
   .mat-tab-group {

apps/client/src/app/pages/zen/zen-page.component.ts

@@ -41,7 +41,6 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
   public isLoadingPerformance = true;
   public performance: PortfolioPerformance;
   public positions: { [symbol: string]: PortfolioPosition };
-  public showPositionsButton: boolean;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -93,6 +92,10 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
       .subscribe((fragment) => this.viewportScroller.scrollToAnchor(fragment));
   }
 
+  public onTabChanged() {
+    this.update();
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
@@ -132,7 +135,6 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
         this.positions = response;
         this.hasPositions =
           this.positions && Object.keys(this.positions).length > 1;
-        this.showPositionsButton = this.hasPositions;
 
         this.changeDetectorRef.markForCheck();
       });

apps/client/src/app/pages/zen/zen-page.html

@@ -3,6 +3,7 @@
   class="position-absolute"
   headerPosition="below"
   mat-align-tabs="center"
+  (selectedTabChange)="onTabChanged()"
 >
   <mat-tab>
     <ng-template mat-tab-label>
@@ -58,11 +59,14 @@
     <ng-template mat-tab-label>
       <ion-icon name="wallet-outline" size="large"></ion-icon>
     </ng-template>
-    <div
+    <div class="container justify-content-center pb-3 px-3 positions">
-      *ngIf="hasPositions === true"
+      <h3
-      class="container justify-content-center pb-3 px-3 positions"
+        *ngIf="hasPositions !== false"
-    >
+        class="d-flex justify-content-center mb-3"
-      <h3 class="d-flex justify-content-center mb-3" i18n>Positions</h3>
+        i18n
+      >
+        Positions
+      </h3>
       <div class="row">
         <div class="align-items-center col">
           <mat-card *ngIf="hasPositions === true" class="p-0">