Feature/improve usage of value component (#1308)

* Improve usage of value component

* Update changelog

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

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

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"