Add styling to h tags and fix multiple css classes

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="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>
@@ -112,7 +114,7 @@ <h3>Action Plan</h3>
               <div *ngIf="action.isChecked">
                 <div class="action-list-checked-item break-word ms-4">
                   <img src="../../../assets/icons/checkmark.svg" alt="checkbox" class="action-checkbox me-1" />
-                  <span class="" [ngStyle]="{ 'text-decoration': 'line-through' }">{{ action.action }}</span>
+                  <span [ngStyle]="{ 'text-decoration': 'line-through' }">{{ action.action }}</span>
                 </div>
               </div>
               <div *ngIf="!action.isChecked">

frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss

@@ -90,3 +90,7 @@
 .action-list-checked-item {
   text-indent: -1.3rem;
 }
+
+.mb-2-rem {
+  margin-bottom: 2rem !important;
+}

frontend/src/app/components/keyresult/keyresult.component.html

@@ -5,7 +5,7 @@
   class="key-result rounded-2 p-3 w-100 focus-outline"
   tabindex="0"
 >
-  <h3 class="fw-normal linebreak mb-2">{{ keyResult.title }}</h3>
+  <h3 class="fw-normal linebreak mb-3">{{ keyResult.title }}</h3>
   <app-scoring [keyResult]="keyResult" [isDetail]="false" [attr.data-testId]="'scoring-component'"></app-scoring>
   <div class="d-flex justify-content-between mt-2">
     <div class="d-flex justify-content-center align-items-center flex-wrap">

frontend/src/app/components/keyresult/keyresult.component.scss

@@ -1,6 +1,6 @@
 @import "../style/variables";
 .key-result {
-  background-color: $dark-grey;
+  background-color: $soft-grey;
   border: 1px solid $dark-grey-border;
   word-wrap: break-word;
 

frontend/src/app/components/overview/overview.component.html

@@ -7,7 +7,7 @@
   </app-team>
   <div *ngIf="(overviewEntities$ | async)?.length == 0" class="d-flex align-items-center flex-column pt-5 gap-5">
     <p>Kein Team ausgewählt</p>
-    <img src="{{ this.backgroundLogoSrc$ | async }}" alt="" width="242" class="puzzle-logo" />
+    <img src="{{ this.backgroundLogoSrc$ | async }}" alt="Greyed out company logo" width="242" class="puzzle-logo" />
   </div>
 </div>
 <router-outlet></router-outlet>

frontend/src/app/shared/sidepanel/sidepanel.component.scss

@@ -1,6 +1,6 @@
 @import "../style/variables";
 .sidebar__content {
-  padding: 18px;
+  padding: 32px;
 }
 
 .sidepanel {

frontend/src/assets/fonts/Roboto.scss

@@ -1,9 +1,9 @@
 @font-face {
-  font-family: Roboto, sans-serif;
+  font-family: Roboto;
   font-display: swap;
   font-style: normal;
-  font-weight: 300;
-  src: url('./Roboto/Roboto-Regular.ttf') format('ttf'),
-  url('./Roboto/Roboto-Regular.woff2') format('woff2'),
-  url('./Roboto/Roboto-Regular.woff') format('woff');
+  font-weight: 400;
+  src: url('./Roboto/RobotoFlex-Regular.ttf') format('ttf'),
+  url('./Roboto/RobotoFlex-Regular.woff2') format('woff2'),
+  url('./Roboto/RobotoFlex-Regular.woff') format('woff');
 }

frontend/src/style/_variables.scss

@@ -5,6 +5,7 @@ $error: #ba3838;
 $eggshell: #f6f7f8;
 
 $light-grey: #f8f8f8;
+$soft-grey: #f5f5f5;
 $dark-grey: #e5e8eb;
 $dark-grey-border: #5d6974;
 

frontend/src/style/styles.scss

@@ -10,8 +10,8 @@ body.okr {
   margin: 0;
   padding: 0;
   background-color: $overview-bg;
-  font-family: Roboto, sans-serif;
-  --bs-body-font-family: Roboto, "Helvetica Neue", sans-serif;
+  font-family: "Roboto", sans-serif;
+  --bs-body-font-family: "Roboto", "Helvetica Neue", sans-serif;
 
   h1 {
     font-size: 1.5rem;