Feature/improve portfolio page (#721)

* Improve page

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Distinguished the labels _Other_ and _Unknown_ in the portfolio proportion chart component
+- Improved the portfolio entry page
 
 ## 1.119.0 - 21.02.2022
 

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">
+    <div class="col-xs-12 col-md-6 mb-3">
-      <mat-card class="mb-3">
+      <mat-card class="d-flex flex-column h-100">
         <h4 i18n>Activities</h4>
-        <p class="mb-0">Manage your activities.</p>
+        <div class="flex-grow-1">
-        <p class="text-right">
+          Manage your activities: stocks, ETFs, cryptocurrencies, dividend, and
+          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">
+    <div class="col-xs-12 col-md-6 mb-3">
-      <mat-card class="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>
+        <div class="flex-grow-1">
-        <p class="text-right">
+          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="col-xs-12 col-md-6 mb-3">
-  <div class="row">
+      <mat-card class="d-flex flex-column h-100">
-    <div class="col-xs-12 col-md-6">
-      <mat-card class="mb-3">
         <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>
+        <div class="flex-grow-1">
-        <p class="text-right">
+          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">
+    <div class="col-xs-12 col-md-6 mb-3">
-      <mat-card class="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>
+        </div>
-        <p class="text-right">
+        <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>