From 492bc5e17bd67ea54b1be91329faa5eff647a79f Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 16 Dec 2023 14:41:50 +0100
Subject: [PATCH] Feature/improve font weight in value component (#2747)

* Improve font weight

* Update changelog
---
 CHANGELOG.md                               |  3 ++-
 libs/ui/src/lib/value/value.component.html | 15 ++++++++++++---
 libs/ui/src/lib/value/value.component.scss |  1 +
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07078424f..c4383a828 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,8 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Upgraded to _Inter_ 4 font family
+- Improved the font weight in the value component
 - Improved the language localization for Türkçe (`tr`)
+- Upgraded to _Inter_ 4 font family
 
 ### Fixed
 
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index 61e6ecd5e..bcefeac85 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -16,14 +16,20 @@
         <div
           *ngIf="isPercent"
           class="mb-0 value"
-          [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
+          [ngClass]="{
+            'font-weight-bold h2': size === 'large',
+            h4: size === 'medium'
+          }"
         >
           {{ formattedValue }}%
         </div>
         <div
           *ngIf="!isPercent"
           class="mb-0 value"
-          [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
+          [ngClass]="{
+            'font-weight-bold h2': size === 'large',
+            h4: size === 'medium'
+          }"
         >
           <ng-container *ngIf="value === null">
             <span class="text-monospace text-muted">***</span>
@@ -42,7 +48,10 @@
       <ng-container *ngIf="isString">
         <div
           class="mb-0 text-truncate value"
-          [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
+          [ngClass]="{
+            'font-weight-bold h2': size === 'large',
+            h4: size === 'medium'
+          }"
         >
           {{ formattedValue }}
         </div>
diff --git a/libs/ui/src/lib/value/value.component.scss b/libs/ui/src/lib/value/value.component.scss
index f690dc46c..087bf31e1 100644
--- a/libs/ui/src/lib/value/value.component.scss
+++ b/libs/ui/src/lib/value/value.component.scss
@@ -4,6 +4,7 @@
   font-variant-numeric: tabular-nums;
 
   .h2 {
+    font-variant-numeric: initial;
     line-height: 1;
   }
 }