Improve tabs layout (#232)

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">

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

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">

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