From f0c651701924770f401d9eee66bfed7549f883b7 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 26 Jul 2021 21:36:52 +0200
Subject: [PATCH] Improve tabs layout (#232)

---
 apps/client/src/app/pages/home/home-page.html | 12 +++++++++---
 apps/client/src/app/pages/home/home-page.scss |  1 +
 apps/client/src/app/pages/zen/zen-page.html   |  7 +++++--
 apps/client/src/app/pages/zen/zen-page.scss   |  1 +
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/app/pages/home/home-page.html b/apps/client/src/app/pages/home/home-page.html
index 7931fdb6e..bdfd6e7db 100644
--- a/apps/client/src/app/pages/home/home-page.html
+++ b/apps/client/src/app/pages/home/home-page.html
@@ -17,7 +17,6 @@
         h-100
         justify-content-center
         overview
-        p-3
         position-relative
       "
     >
@@ -78,7 +77,14 @@
     <ng-template mat-tab-label>
       <ion-icon name="wallet-outline" size="large"></ion-icon>
     </ng-template>
-    <div class="container justify-content-center p-3 positions">
+    <div class="container justify-content-center pb-3 px-3 positions">
+      <h3
+        *ngIf="hasPositions === true"
+        class="d-flex justify-content-center mb-3"
+        i18n
+      >
+        Positions
+      </h3>
       <div class="row">
         <div class="align-items-center col">
           <mat-card *ngIf="hasPositions === true" class="p-0">
@@ -106,7 +112,7 @@
     <ng-template mat-tab-label>
       <ion-icon name="reader-outline" size="large"></ion-icon>
     </ng-template>
-    <div class="container p-3 positions">
+    <div class="container pb-3 px-3 positions">
       <div class="row">
         <div class="col-xs-12 col-md-6 mb-3">
           <mat-card class="h-100">
diff --git a/apps/client/src/app/pages/home/home-page.scss b/apps/client/src/app/pages/home/home-page.scss
index 1429dd586..56d11f268 100644
--- a/apps/client/src/app/pages/home/home-page.scss
+++ b/apps/client/src/app/pages/home/home-page.scss
@@ -68,6 +68,7 @@
 
         .mat-tab-label-active {
           color: rgba(var(--palette-primary-500), 1);
+          opacity: 1;
         }
       }
     }
diff --git a/apps/client/src/app/pages/zen/zen-page.html b/apps/client/src/app/pages/zen/zen-page.html
index 0f0762de5..ab3309cfc 100644
--- a/apps/client/src/app/pages/zen/zen-page.html
+++ b/apps/client/src/app/pages/zen/zen-page.html
@@ -16,7 +16,6 @@
         h-100
         justify-content-center
         overview
-        p-3
         position-relative
       "
     >
@@ -59,7 +58,11 @@
     <ng-template mat-tab-label>
       <ion-icon name="wallet-outline" size="large"></ion-icon>
     </ng-template>
-    <div class="container justify-content-center p-3 positions">
+    <div
+      *ngIf="hasPositions === true"
+      class="container justify-content-center pb-3 px-3 positions"
+    >
+      <h3 class="d-flex justify-content-center mb-3" i18n>Positions</h3>
       <div class="row">
         <div class="align-items-center col">
           <mat-card *ngIf="hasPositions === true" class="p-0">
diff --git a/apps/client/src/app/pages/zen/zen-page.scss b/apps/client/src/app/pages/zen/zen-page.scss
index b07cccffb..2b8093bab 100644
--- a/apps/client/src/app/pages/zen/zen-page.scss
+++ b/apps/client/src/app/pages/zen/zen-page.scss
@@ -63,6 +63,7 @@
 
         .mat-tab-label-active {
           color: rgba(var(--palette-primary-500), 1);
+          opacity: 1;
         }
       }
     }