Add correct margin to key-result detail view and remove a non global …

…h4 styling
puzzle · Nov 8, 2024 · 6c0e454 · 6c0e454
1 parent 93cb5c0
commit 6c0e454
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 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
@@ -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
@@ -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>