From a6186c23e268666c0ee6189ae0f07633cd25ec42 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 1 Oct 2022 13:53:43 +0200
Subject: [PATCH] Feature/improve usage of value component (#1308)

* Improve usage of value component

* Update changelog
---
 CHANGELOG.md                                  | 10 +++++++++
 .../admin-overview/admin-overview.html        | 21 ++++++++++++++-----
 .../allocations/allocations-page.html         |  6 +++---
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 716692095..df7830ce7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the usage of the value component in the admin control panel
+
+### Fixed
+
+- Fixed the usage of the value component on the allocations page
+
 ## 1.200.0 - 01.10.2022
 
 ### Added
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index 768a14937..97be48141 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -5,15 +5,26 @@
         <mat-card-content>
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Count</div>
-            <div class="w-50">{{ userCount }}</div>
+            <div class="w-50">
+              <gf-value
+                precision="0"
+                [locale]="user?.settings?.locale"
+                [value]="userCount"
+              ></gf-value>
+            </div>
           </div>
           <div class="d-flex my-3">
             <div class="w-50" i18n>Activity Count</div>
             <div class="w-50">
-              <ng-container *ngIf="transactionCount">
-                {{ transactionCount }} ({{ transactionCount / userCount | number
-                : '1.2-2' }} <span i18n>per User</span>)
-              </ng-container>
+              <gf-value
+                precision="0"
+                [locale]="user?.settings?.locale"
+                [value]="transactionCount"
+              ></gf-value>
+              <div *ngIf="transactionCount && userCount">
+                {{ transactionCount / userCount | number : '1.2-2' }}
+                <span i18n>per User</span>
+              </div>
             </div>
           </div>
           <div class="d-flex my-3">
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
index 36e98011c..0265d4d71 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
@@ -13,12 +13,12 @@
   <div class="row">
     <div class="col">
       <mat-card class="mb-3">
-        <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n
+        <mat-card-header class="mb-2 overflow-hidden w-100">
+          <mat-card-title class="m-0 text-truncate" i18n
             >Proportion of Net Worth</mat-card-title
           >
           <gf-value
-            class="align-items-end flex-grow-1 ml-2"
+            class="flex-grow-1 justify-content-end l-2"
             size="medium"
             [isPercent]="true"
             [value]="isLoading ? undefined : portfolioDetails?.filteredValueInPercentage"