From 6c0e45409d3cc953fad4eedf54d42aa03fd358b7 Mon Sep 17 00:00:00 2001
From: Manuel <moeri@puzzle.ch>
Date: Fri, 8 Nov 2024 08:54:14 +0100
Subject: [PATCH] Add correct margin to key-result detail view and remove a non
 global h4 styling

---
 .../check-in-history-dialog.component.scss       |  4 ----
 .../keyresult-detail.component.html              | 16 +++++++++-------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss
index c2c8998c4f..e69de29bb2 100644
--- a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss
+++ b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss
@@ -1,4 +0,0 @@
-//TODO: Just Temporarily so the application look decent
-h4 {
-  font-size: 1rem;
-}
diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
index 67d9551242..a42e372e30 100644
--- a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
+++ b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
@@ -8,7 +8,7 @@ <h2 class="title">{{ keyResult.title }}</h2>
         </button>
       </div>
       <div class="me-3">
-        <section class="d-flex justify-content-between mb-3">
+        <section class="d-flex justify-content-between mb-2-rem">
           <h4>
             {{ "KEY_RESULT_TYPE." + keyResult.keyResultType | translate }}
           </h4>
@@ -19,7 +19,7 @@ <h4 *ngIf="keyResult.owner as owner">{{ owner.firstname }} {{ owner.lastname }}<
           <h4 *ngIf="keyResult?.objective?.quarter as quarter">{{ quarter.label }}</h4>
         </section>
 
-        <section class="scoring-section">
+        <section class="scoring-section mb-2-rem">
           <app-scoring class="scoring-detail" [keyResult]="keyResult" [isDetail]="true"></app-scoring>
           <span class="text-small d-flex align-items-center flex-column mb-2 ms-3 confidence-container">
             <h4>Confidence</h4>
@@ -31,7 +31,7 @@ <h4>Confidence</h4>
           </span>
         </section>
 
-        <section class="d-flex gap-4 flex-row mt-2">
+        <section class="d-flex gap-4 flex-row mb-2-rem">
           <ng-container *ngIf="keyResult.keyResultType == 'metric' && castToMetric(keyResult) as keyResultMetric">
             <div class="d-flex justify-content-start w-100 metric-label-div">
               <p class="keyResult-detail-attribute-show rounded-5 p-2 d-flex justify-content-center metric-col">
@@ -83,8 +83,10 @@ <h4 class="ordinal-zone-title">Stretch</h4>
           </ng-container>
         </section>
 
-        <section *ngIf="keyResult.lastCheckIn as checkIn" class="mt-4">
-          <h3 class="mb-1">Letztes Check-in ({{ checkIn.createdOn | date: DATE_FORMAT }})</h3>
+        <section *ngIf="keyResult.lastCheckIn as checkIn" class="mb-2-rem">
+          <h3 class="sub-title-keyresult-detail fw-bold mb-1">
+            Letztes Check-in ({{ checkIn.createdOn | date: DATE_FORMAT }})
+          </h3>
           <p class="linebreak" *ngIf="checkIn.changeInfo">{{ checkIn.changeInfo }}</p>
           <span class="d-flex justify-content-start">
             <button
@@ -100,8 +102,8 @@ <h3 class="mb-1">Letztes Check-in ({{ checkIn.createdOn | date: DATE_FORMAT }})<
           </span>
         </section>
 
-        <section>
-          <div class="mt-3 mb-4">
+        <section class="mb-2-rem">
+          <div>
             <h3 class="mb-1">Beschrieb</h3>
             <p class="linebreak">{{ keyResult.description || "-" }}</p>
           </div>