Feature/1014 font family and distances (#1109)

* Add styling to h tags and fix multiple css classes

* [FM] Automated formating frontend

* Change font size

* Fix a few classes and change fonts

* Delete test.scss since it is not needed anymore

* Restore styles.scss and delete the right file this time

---------

Co-authored-by: GitHub Actions <[email protected]>

frontend/.browserlistrc

@@ -0,0 +1,6 @@
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

frontend/package.json

@@ -50,6 +50,7 @@
     "@cypress/skip-test": "^2.6.1",
     "@types/jest": "^29.5.13",
     "@types/uuid": "^10.0.0",
+    "browserslist": "^4.24.2",
     "cypress": "^13.15.0",
     "cypress-real-events": "^1.13.0",
     "jest": "^29.7.0",

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,7 +83,7 @@ <h4 class="ordinal-zone-title">Stretch</h4>
           </ng-container>
         </section>
 
-        <section *ngIf="keyResult.lastCheckIn as checkIn" class="mt-4">
+        <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">
@@ -100,8 +100,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 +112,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,18 +5,18 @@
   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="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">
-      <h5 class="text-nowrap me-2">Letztes Check-in</h5>
+      <h4 class="text-nowrap me-2">Letztes Check-in</h4>
       <span class="keyResult-attribute-show">{{
         keyResult.lastCheckIn == null ? "Keines" : (keyResult!.lastCheckIn!.createdOn | date: DATE_FORMAT)
       }}</span>
     </div>
 
     <div class="d-flex align-items-center flex-wrap justify-content-end keyResult-overview-attribute">
-      <h5 class="me-2">Confidence</h5>
+      <h4 class="me-2">Confidence</h4>
       <app-confidence
         [edit]="false"
         [isDetail]="false"

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/custom/scoring/scoring.component.html

@@ -2,13 +2,13 @@
   <div class="scoring-container d-flex flex-row">
     <div class="flex-fill">
       <span class="okr-score-label">
-        <h4 class="text-center text-small">Fail</h4>
+        <h5 class="text-center text-small">Fail</h5>
       </span>
       <span class="okr-score-label okr-score-commit">
-        <h4 class="text-center text-small">Commit</h4>
+        <h5 class="text-center text-small">Commit</h5>
       </span>
       <span class="okr-score-label">
-        <h4 class="text-center text-small">Target</h4>
+        <h5 class="text-center text-small">Target</h5>
       </span>
       <div
         [ngStyle]="{ display: stretched ? 'none' : 'flex' }"
@@ -40,7 +40,7 @@ <h4 class="text-center text-small">Target</h4>
     </div>
 
     <div class="okr-stretch d-flex flex-column align-items-center">
-      <h4 class="text-center stretch-label">Stretch</h4>
+      <h5 class="text-center stretch-label">Stretch</h5>
       <img
         [src]="'assets/icons/star-' + iconPath + '-icon.svg'"
         [attr.data-testId]="'stretch'"

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-display: swap;
+  font-family: "Roboto";
   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-display: swap;
+  src:
+    url('./Roboto/RobotoFlex-Regular.woff2') format('woff2'),
+    url('./Roboto/RobotoFlex-Regular.woff') format('woff'),
+    url('./Roboto/RobotoFlex-Regular.ttf') format('truetype');
 }

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;