From 417f0b4dbbe7e0c84710a314636e3fe3fb250f3e Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 22 Feb 2022 21:10:29 +0100
Subject: [PATCH] Improve page

---
 .../app/pages/portfolio/portfolio-page.html   | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.html b/apps/client/src/app/pages/portfolio/portfolio-page.html
index 6644e9340..79b613c49 100644
--- a/apps/client/src/app/pages/portfolio/portfolio-page.html
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.html
@@ -1,11 +1,14 @@
 <div class="container">
   <h3 class="d-flex justify-content-center mb-3" i18n>Portfolio</h3>
   <div class="row">
-    <div class="col-xs-12 col-md-6">
-      <mat-card class="mb-3">
+    <div class="col-xs-12 col-md-6 mb-3">
+      <mat-card class="d-flex flex-column h-100">
         <h4 i18n>Activities</h4>
-        <p class="mb-0">Manage your activities.</p>
-        <p class="text-right">
+        <div class="flex-grow-1">
+          Manage your activities: stocks, ETFs, cryptocurrencies, dividend, or
+          valuables.
+        </div>
+        <div class="mt-2 text-right">
           <a
             color="primary"
             mat-button
@@ -14,11 +17,11 @@
             <span i18n>Open Activities</span>
             <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
           </a>
-        </p>
+        </div>
       </mat-card>
     </div>
-    <div class="col-xs-12 col-md-6">
-      <mat-card class="mb-3">
+    <div class="col-xs-12 col-md-6 mb-3">
+      <mat-card class="d-flex flex-column h-100">
         <h4 class="align-items-center d-flex">
           <span i18n>Allocations</span>
           <ion-icon
@@ -27,8 +30,11 @@
             name="diamond-outline"
           ></ion-icon>
         </h4>
-        <p class="mb-0">Check the allocations of your portfolio.</p>
-        <p class="text-right">
+        <div class="flex-grow-1">
+          Check the allocations of your portfolio by account, asset class,
+          currency, sector and region.
+        </div>
+        <div class="mt-2 text-right">
           <a
             color="primary"
             mat-button
@@ -38,13 +44,11 @@
             <span i18n>Open Allocations</span>
             <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
           </a>
-        </p>
+        </div>
       </mat-card>
     </div>
-  </div>
-  <div class="row">
-    <div class="col-xs-12 col-md-6">
-      <mat-card class="mb-3">
+    <div class="col-xs-12 col-md-6 mb-3">
+      <mat-card class="d-flex flex-column h-100">
         <h4 class="align-items-center d-flex">
           <span i18n>Analysis</span>
           <ion-icon
@@ -53,8 +57,11 @@
             name="diamond-outline"
           ></ion-icon>
         </h4>
-        <p class="mb-0">Ghostfolio Analysis visualizes your portfolio.</p>
-        <p class="text-right">
+        <div class="flex-grow-1">
+          Ghostfolio Analysis visualizes your portfolio and shows your top and
+          bottom performers.
+        </div>
+        <div class="mt-2 text-right">
           <a
             color="primary"
             mat-button
@@ -64,11 +71,11 @@
             <span i18n>Open Analysis</span>
             <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
           </a>
-        </p>
+        </div>
       </mat-card>
     </div>
-    <div class="col-xs-12 col-md-6">
-      <mat-card class="mb-3">
+    <div class="col-xs-12 col-md-6 mb-3">
+      <mat-card class="d-flex flex-column h-100">
         <h4 class="align-items-center d-flex">
           <span i18n>X-ray</span>
           <ion-icon
@@ -77,11 +84,11 @@
             name="diamond-outline"
           ></ion-icon>
         </h4>
-        <p class="mb-0">
+        <div class="flex-grow-1">
           Ghostfolio X-ray uses static analysis to identify potential issues and
           risks in your portfolio.
-        </p>
-        <p class="text-right">
+        </div>
+        <div class="mt-2 text-right">
           <a
             color="primary"
             mat-button
@@ -91,7 +98,7 @@
             <span i18n>Open X-ray</span>
             <ion-icon class="ml-1" name="arrow-forward-outline"></ion-icon>
           </a>
-        </p>
+        </div>
       </mat-card>
     </div>
   </div>