From beb81c790d2ee5b2e09887eb9c644a61bd9b7e5c Mon Sep 17 00:00:00 2001
From: Stefan Hauke <s.hauke@intershop.de>
Date: Wed, 16 Dec 2020 15:21:19 +0100
Subject: [PATCH] small visual review fixes

---
 .../src/app/components/user-budget/user-budget.component.html | 4 ++++
 .../app/components/user-budget/user-budget.component.spec.ts  | 4 ++++
 .../requisition-buyer-approval.component.html                 | 4 +++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/projects/organization-management/src/app/components/user-budget/user-budget.component.html b/projects/organization-management/src/app/components/user-budget/user-budget.component.html
index b099f03481..d8455b06fd 100644
--- a/projects/organization-management/src/app/components/user-budget/user-budget.component.html
+++ b/projects/organization-management/src/app/components/user-budget/user-budget.component.html
@@ -14,6 +14,10 @@
       <dt class="col-7">{{ 'account.budget.type.' + budget.budgetPeriod + '.label' | translate }}</dt>
       <dd class="col-5 column-price font-weight-bold text-right">{{ budget.budget | ishPrice }}</dd>
     </dl>
+    <dl class="row dl-horizontal dl-separator">
+      <dt class="col-7">{{ 'account.budget.already_spent.label' | translate }}</dt>
+      <dd class="col-5 column-price font-weight-bold text-right">{{ usedBudget | ishPrice }}</dd>
+    </dl>
     <div [ngbPopover]="BudgetPopover" placement="top" data-testing-id="user-budget-popover">
       <div class="progress" [ngClass]="progressBarClass">
         <div
diff --git a/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts b/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts
index abbd4c19a2..ef53707eb6 100644
--- a/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts
+++ b/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts
@@ -71,6 +71,10 @@ describe('User Budget Component', () => {
           <dt class="col-7">account.budget.type.monthly.label</dt>
           <dd class="col-5 column-price font-weight-bold text-right">USD 5000</dd>
         </dl>
+        <dl class="row dl-horizontal dl-separator">
+          <dt class="col-7">account.budget.already_spent.label</dt>
+          <dd class="col-5 column-price font-weight-bold text-right">USD 2500</dd>
+        </dl>
         <div data-testing-id="user-budget-popover" placement="top" ng-reflect-placement="top">
           <div class="progress">
             <div class="progress-bar" role="progressbar" style="width: 50%">
diff --git a/projects/requisition-management/src/app/components/requisition-buyer-approval/requisition-buyer-approval.component.html b/projects/requisition-management/src/app/components/requisition-buyer-approval/requisition-buyer-approval.component.html
index 391ef39b5d..febbdc4695 100644
--- a/projects/requisition-management/src/app/components/requisition-buyer-approval/requisition-buyer-approval.component.html
+++ b/projects/requisition-management/src/app/components/requisition-buyer-approval/requisition-buyer-approval.component.html
@@ -42,7 +42,9 @@
         </dl>
         <dl *ngIf="requisition.userBudget?.spentBudget" class="row dl-horizontal dl-separator">
           <dt class="col-6">{{ 'account.budget.already_spent.label' | translate }}</dt>
-          <dd class="col-6">{{ requisition.userBudget.spentBudget | ishPrice }} ({{ spentPercentage | percent }})</dd>
+          <dd class="col-6" [ngClass]="{ 'text-danger': spentPercentage > 1 }">
+            {{ requisition.userBudget.spentBudget | ishPrice }} ({{ spentPercentage | percent }})
+          </dd>
         </dl>
         <dl
           *ngIf="requisition.approval.statusCode !== 'APPROVED'; else leftBudgetDisplay"