From 275a5a0c14d99677d7576eef7e8c45aaca55d024 Mon Sep 17 00:00:00 2001
From: Manuel <moeri@puzzle.ch>
Date: Fri, 15 Nov 2024 09:00:35 +0100
Subject: [PATCH] Change font size

---
 .../keyresult/keyresult.component.html        |   4 +-
 .../custom/scoring/scoring.component.html     |   8 +-
 frontend/src/style/styles.scss                |  12 +-
 frontend/src/style/test.css                   | 130 ++++++++++++++++++
 4 files changed, 142 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/style/test.css

diff --git a/frontend/src/app/components/keyresult/keyresult.component.html b/frontend/src/app/components/keyresult/keyresult.component.html
index 4b03c588bc..b22ab565fd 100644
--- a/frontend/src/app/components/keyresult/keyresult.component.html
+++ b/frontend/src/app/components/keyresult/keyresult.component.html
@@ -9,14 +9,14 @@ <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">
-      <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"
diff --git a/frontend/src/app/shared/custom/scoring/scoring.component.html b/frontend/src/app/shared/custom/scoring/scoring.component.html
index 4d7af54310..6f9d1d77d9 100644
--- a/frontend/src/app/shared/custom/scoring/scoring.component.html
+++ b/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'"
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
index 130d3e4395..1899bb3d3b 100644
--- a/frontend/src/style/styles.scss
+++ b/frontend/src/style/styles.scss
@@ -14,12 +14,12 @@ body.okr {
   --bs-body-font-family: "Roboto", "Helvetica Neue", sans-serif;
 
   h1 {
-    font-size: 1.5rem;
+    font-size: 24px;
     font-weight: 600;
   }
 
   h2 {
-    font-size: 1.25rem;
+    font-size: 21.5px;
     font-weight: 600;
     word-wrap: anywhere;
     @extend .linebreak;
@@ -27,22 +27,22 @@ body.okr {
   }
 
   h3 {
-    font-size: 1rem;
+    font-size: 19px;
     font-weight: 600;
     word-wrap: anywhere;
     margin-bottom: 0;
   }
 
   h4 {
-    font-size: 0.875rem;
+    font-size: 16.5px;
     font-weight: 400;
     margin-bottom: 0;
   }
 
   h5 {
-    font-size: 0.875rem;
-    margin-bottom: 0;
+    font-size: 14px;
     font-weight: 400;
+    margin-bottom: 0;
   }
 
   p {
diff --git a/frontend/src/style/test.css b/frontend/src/style/test.css
new file mode 100644
index 0000000000..59878d6faf
--- /dev/null
+++ b/frontend/src/style/test.css
@@ -0,0 +1,130 @@
+/* Custom eye 1 ---------------------------------------------------------------------------*/
+h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  word-wrap: anywhere;
+  @extend .linebreak;
+  margin-bottom: 0;
+}
+
+h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  word-wrap: anywhere;
+  margin-bottom: 0;
+}
+
+h4 {
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin-bottom: 0;
+}
+
+h5 {
+  font-size: 0.875rem;
+  margin-bottom: 0;
+  font-weight: 400;
+}
+
+/* Custom eye 2 ---------------------------------------------------------------------------*/
+h1 {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  word-wrap: anywhere;
+  @extend .linebreak;
+  margin-bottom: 0;
+}
+
+h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  word-wrap: anywhere;
+  margin-bottom: 0;
+}
+
+h4 {
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin-bottom: 0;
+}
+
+h5 {
+  font-size: 0.875rem;
+  margin-bottom: 0;
+  font-weight: 400;
+}
+
+/*times 1.2x ---------------------------------------------------------------------------*/
+h1 {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 21.6px;
+  font-weight: 600;
+  word-wrap: anywhere;
+  @extend .linebreak;
+  margin-bottom: 0;
+}
+
+h3 {
+  font-size: 19.2px;
+  word-wrap: anywhere;
+  margin-bottom: 0;
+}
+
+h4 {
+  font-size: 16.8px;
+  font-weight: 400;
+  margin-bottom: 0;
+}
+
+h5 {
+  font-size: 12px;
+  margin-bottom: 0;
+  font-weight: 400;
+}
+
+/*Ladder: 2.5px ---------------------------------------------------------------------------*/
+h1 {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 21.5px;
+  font-weight: 600;
+  word-wrap: anywhere;
+  @extend .linebreak;
+  margin-bottom: 0;
+}
+
+h3 {
+  font-size: 19px;
+  font-weight: 600;
+  word-wrap: anywhere;
+  margin-bottom: 0;
+}
+
+h4 {
+  font-size: 16.5px;
+  font-weight: 400;
+  margin-bottom: 0;
+}
+
+h5 {
+  font-size: 14px;
+  font-weight: 400;
+  margin-bottom: 0;
+}