Feature/1227 Fontsize and weight (#1239)

* Fix mistakes mentioned in story * Fix font size of action point * Fix styling in check-in history component * Fix overlapping in check-in history * Resovle conversations from peer review
puzzle · Dec 18, 2024 · 3f71626 · 3f71626
1 parent 5f6a068
commit 3f71626
Show file tree

Hide file tree

Showing 14 changed files with 31 additions and 28 deletions.
diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html
@@ -18,7 +18,7 @@
               <img ngSrc="assets/icons/edit.svg" alt="edit check-in" width="24" height="24" />
             </button>
           </div>
-          <div class="okr-form-row row-cols-4">
+          <div class="okr-form-row row-cols-4 mb-1">
             <h4 class="col-auto">Wert:</h4>
             <span class="col">
               <ng-container *ngIf="keyResult.keyResultType === 'metric' && getCheckInMetric(checkIn) as metricCheckIn">
@@ -34,14 +34,14 @@ <h4 class="col-auto">Confidence:</h4>
             <span class="col">{{ checkIn.confidence }} / 10</span>
           </div>
 
-          <div class="okr-form-row justify-content-between" *ngIf="checkIn.changeInfo !== ''">
+          <div class="okr-form-row justify-content-between mb-1" *ngIf="checkIn.changeInfo !== ''">
             <h4 class="col-3">Veränderungen:</h4>
             <span class="col linebreak">{{ checkIn.changeInfo }}</span>
           </div>
 
-          <div class="okr-form-row justify-content-between row-cols-2" *ngIf="checkIn.initiatives !== ''">
+          <div class="okr-form-row justify-content-between mb-1" *ngIf="checkIn.initiatives !== ''">
             <h4 class="col-3">Massnahmen:</h4>
-            <span class="col flex-fill linebreak">{{ checkIn.initiatives }}</span>
+            <span class="col linebreak">{{ checkIn.initiatives }}</span>
           </div>
         </div>
       </div>

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
@@ -0,0 +1,3 @@
+h4 {
+  font-style: italic;
+}
diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.ts b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.ts
@@ -15,6 +15,7 @@ import { CheckInOrdinalMin } from '../../shared/types/model/CheckInOrdinalMin';
 @Component({
   selector: 'app-check-in-history-dialog',
   templateUrl: './check-in-history-dialog.component.html',
+  styleUrls: ['./check-in-history-dialog.component.scss'],
 })
 export class CheckInHistoryDialogComponent implements OnInit {
   keyResult!: KeyResult;

diff --git a/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html b/frontend/src/app/components/checkin/check-in-form-metric/check-in-form-metric.component.html
@@ -26,7 +26,7 @@
 
   <div class="col">
     <div *ngIf="getCheckInMetric() as metricCheckIn" class="okr-form-row okr-form-label-input-container">
-      <p class="okr-form-label okr-form-col">Letzter Wert</p>
+      <label class="okr-form-label okr-form-col">Letzter Wert</label>
       <div class="okr-form-col text-black">
         <div class="dialog-data-show dialog-form-field py-2">{{ metricCheckIn.value }}{{ generateUnitLabel() }}</div>
       </div>

diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
@@ -2,14 +2,14 @@
   <ng-container content>
     <form [formGroup]="dialogForm">
       <div class="okr-form-row okr-form-label-input-container">
-        <h3 class="okr-form-label okr-form-col">Key Result</h3>
+        <label class="okr-form-label okr-form-col">Key Result</label>
         <span class="okr-form-col">
           <p class="dialog-data-show">{{ keyResult.title }}</p>
         </span>
       </div>
 
       <div *ngIf="getActions().length > 0" class="okr-form-row okr-form-label-input-container">
-        <p class="okr-form-label okr-form-col">Action Plan:</p>
+        <label class="okr-form-label okr-form-col">Action Plan:</label>
         <div class="col">
           <span *ngFor="let action of getActions(); let i = index" class="okr-form-row">
             <mat-checkbox #checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked" class="col-auto">
@@ -72,13 +72,13 @@ <h3 class="okr-form-label okr-form-col">Key Result</h3>
       </div>
 
       <div class="okr-form-row okr-form-label-input-container">
-        <p class="okr-form-label okr-form-col confidence-label">
+        <label class="okr-form-label okr-form-col confidence-label">
           Confidence um Target Zone
           <span *ngIf="keyResult.keyResultType === 'metric' && getKeyResultMetric() as kr">
             ({{ calculateTarget(kr) | unitTransformation: kr.unit }})
           </span>
           zu erreichen:
-        </p>
+        </label>
         <app-confidence [checkIn]="checkIn" [edit]="true"></app-confidence>
       </div>
     </form>

diff --git a/frontend/src/app/components/confidence/confidence.component.html b/frontend/src/app/components/confidence/confidence.component.html
@@ -6,9 +6,7 @@
     class="bg-inherit d-flex justify-content-center align-items-center w-auto"
     [ngClass]="[edit ? 'keyResult-attribute-edit' : 'keyResult-attribute-show', isDetail ? 'height' : '']"
   >
-    <p class="fw-normal text-black sub-title-keyresult p-0" data-testid="confidence">
-      {{ checkIn.confidence }}/{{ max }}
-    </p>
+    <p class="fw-normal text-black p-0" data-testid="confidence">{{ checkIn.confidence }}/{{ max }}</p>
   </div>
 
   <mat-slider

diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
@@ -91,7 +91,7 @@ <h3 class="mb-1">Beschrieb</h3>
           </div>
 
           <div *ngIf="keyResult.actionList?.length != 0" class="mb-2-rem">
-            <h3>Action Plan</h3>
+            <h3 class="mb-1">Action Plan</h3>
             <div *ngFor="let action of keyResult.actionList">
               <div *ngIf="action.isChecked">
                 <div class="action-list-checked-item break-word ms-4">

diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss
@@ -4,6 +4,10 @@
   flex: 1;
 }
 
+h3 {
+  font-variation-settings: "wght" 600 !important;
+}
+
 .keyResult-detail-attribute-show {
   background-color: $display-element;
   height: auto;
@@ -79,6 +83,7 @@
 }
 
 .action-list-checked-item {
+  font-size: 14px;
   text-indent: -1.3rem;
 }
 

diff --git a/frontend/src/app/components/objective-detail/objective-detail.component.scss b/frontend/src/app/components/objective-detail/objective-detail.component.scss
@@ -1,3 +1,7 @@
 :host {
   width: 100%;
 }
+
+h3 {
+  font-variation-settings: "wght" 600 !important;
+}
diff --git a/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html b/frontend/src/app/shared/dialog/complete-dialog/complete-dialog.component.html
@@ -1,15 +1,15 @@
 <app-dialog-template-core [title]="'Objective abschliessen'">
   <ng-container content>
     <div class="okr-form-row">
-      <h4 class="okr-form-label okr-form-col">Objective</h4>
+      <label class="okr-form-label okr-form-col">Objective</label>
       <span class="okr-form-col">
         <p class="dialog-data-show">{{ data.objectiveTitle }}</p>
       </span>
     </div>
 
     <form [formGroup]="completeForm">
       <div class="okr-form-row okr-form-label-input-container">
-        <p class="okr-form-label okr-form-col">Bewertung</p>
+        <label class="okr-form-label okr-form-col">Bewertung</label>
         <div class="okr-form-row mx-0">
           <button
             class="col successful valuation-card card-hover-successful"

diff --git a/frontend/src/app/team-management/add-user-team/add-user-team.component.html b/frontend/src/app/team-management/add-user-team/add-user-team.component.html
@@ -13,7 +13,7 @@
       color="primary"
       mat-button
     >
-      <span class="d-flex align-items-center fw-bold add-text">
+      <span class="d-flex align-items-center add-text">
         <img
           [src]="
             addButtonDisabled(selectableAdminTeams)

diff --git a/frontend/src/app/team-management/delete-user/delete-user.component.html b/frontend/src/app/team-management/delete-user/delete-user.component.html
@@ -7,7 +7,7 @@
     color="primary"
     mat-button
   >
-    <span class="d-flex align-items-center fw-bold add-text">
+    <span class="d-flex align-items-center add-text">
       <img alt="Delete user button" class="add-cross-button" src="/assets/icons/delete-blue-icon.svg" />
       {{ getFullNameFromUser(this.user) }} l&ouml;schen
     </span>

diff --git a/frontend/src/app/team-management/member-list/member-list.component.html b/frontend/src/app/team-management/member-list/member-list.component.html
@@ -26,7 +26,7 @@ <h2 *ngIf="!selectedTeam$.value">Alle Teams</h2>
         color="primary"
         mat-button
       >
-        <span class="d-flex align-items-center fw-bold add-text">
+        <span class="d-flex align-items-center add-text">
           <img alt="Add key-result button" class="add-cross-button" src="/assets/icons/new-icon.svg" />
           Member hinzufügen
         </span>

diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
@@ -39,15 +39,15 @@ body.okr {
   h4 {
     font-family: Roboto, "sans-serif";
     font-size: 0.875rem;
-    font-weight: 400;
+    font-variation-settings: "wght" 400;
     margin-bottom: 0;
   }
 
   h5 {
     font-family: Roboto, "sans-serif";
     font-size: 0.875rem;
+    font-variation-settings: "wght" 400;
     margin-bottom: 0;
-    font-weight: 400;
   }
 
   p {
@@ -75,7 +75,6 @@ body.okr {
     color: $pz-dark-blue;
     text-decoration: none;
     font-size: 0.875rem;
-    font-weight: 700;
   }
 
   .font-size-14 {
@@ -261,12 +260,6 @@ mat-form-field.quarter-filter .mat-mdc-text-field-wrapper {
   margin-bottom: 1rem;
 }
 
-.sub-title-keyresult {
-  font-family: Roboto, "sans-serif";
-  font-variation-settings: "wght" 400;
-  font-size: 0.9rem !important;
-}
-
 * {
   line-height: 115% !important;
 }
@@ -278,7 +271,6 @@ img.add-cross-button {
 
 .add-text {
   font-family: Roboto, "sans-serif";
-  font-variation-settings: "wght" 500;
   margin-top: 1px;
   height: 2rem;
 }