From 1d1b705cd52e6a93a961986ecc86e4f31476f1c1 Mon Sep 17 00:00:00 2001
From: Manuel <109959820+ManuelMoeri@users.noreply.github.com>
Date: Fri, 8 Nov 2024 14:52:59 +0100
Subject: [PATCH] Feature/977 HTML structure (#1040)

* Implement html structure and fix tests

* Shorten logic in component

* Remove unwanted styling that broke every dialog

* Add styling to headings and fix obvious mistakes

* Fix font size in banner and alignment of stretch star

* Fix e2e test

* Remove files that do not belong to my PR
---
 .../components/action-plan/action-plan.component.html  |  2 +-
 .../components/confidence/confidence.component.html    |  2 +-
 .../keyresult-detail/keyresult-detail.component.html   |  2 +-
 .../app/components/objective/objective.component.html  |  8 ++++----
 frontend/src/style/styles.scss                         | 10 ++++++++++
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/components/action-plan/action-plan.component.html b/frontend/src/app/components/action-plan/action-plan.component.html
index 0dc3ac9c45..68388cea32 100644
--- a/frontend/src/app/components/action-plan/action-plan.component.html
+++ b/frontend/src/app/components/action-plan/action-plan.component.html
@@ -42,7 +42,7 @@
     </div>
   </div>
 
-  <section class="okr-form-row mx-0">
+  <div class="okr-form-row mx-0">
     <button
       mat-button
       color="primary"
diff --git a/frontend/src/app/components/confidence/confidence.component.html b/frontend/src/app/components/confidence/confidence.component.html
index 87c300b8aa..fa587720f9 100644
--- a/frontend/src/app/components/confidence/confidence.component.html
+++ b/frontend/src/app/components/confidence/confidence.component.html
@@ -1,4 +1,4 @@
-<div
+<span
   class="okr-form-row bg-inherit flex-nowrap align-items-center mx-0"
   *ngIf="checkIn.confidence || checkIn.confidence === 0"
 >
diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
index b31b83d0bd..67d9551242 100644
--- a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
+++ b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
@@ -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>
+                  <p [ngStyle]="{ 'text-decoration': 'line-through' }">{{ action.action }}</p>
                 </div>
               </div>
               <div *ngIf="!action.isChecked">
diff --git a/frontend/src/app/components/objective/objective.component.html b/frontend/src/app/components/objective/objective.component.html
index 71cd720191..fcf84893a2 100644
--- a/frontend/src/app/components/objective/objective.component.html
+++ b/frontend/src/app/components/objective/objective.component.html
@@ -8,7 +8,7 @@
   >
     <div class="row mx-1">
       <section class="d-flex mb-3 mt-3 justify-content-between pe-0">
-        <section class="d-flex gap-2 align-items-start fit-content objective-title">
+        <div class="d-flex gap-2 align-items-start fit-content objective-title">
           <img
             (click)="$event.stopPropagation()"
             [attr.data-testId]="'objective-state'"
@@ -19,7 +19,7 @@
             matTooltipPosition="above"
           />
           <h2 class="title fit-content">{{ objective.title }}</h2>
-        </section>
+        </div>
         <button
           #menuButton
           *ngIf="isWritable"
@@ -33,7 +33,7 @@ <h2 class="title fit-content">{{ objective.title }}</h2>
         </button>
       </section>
 
-      <div class="d-flex px-3 gap-3 flex-column">
+      <section class="d-flex px-3 gap-3 flex-column">
         <app-keyresult
           *ngFor="let keyResult of objective.keyResults; trackBy: trackByFn"
           class="border-0 p-0"
@@ -42,7 +42,7 @@ <h2 class="title fit-content">{{ objective.title }}</h2>
           [keyResult]="keyResult"
           [attr.data-testId]="'keyresult'"
         ></app-keyresult>
-      </div>
+      </section>
 
       <section class="p-0 py-2 m-0">
         <button
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
index fd1cd5ccac..6ebff4ac77 100644
--- a/frontend/src/style/styles.scss
+++ b/frontend/src/style/styles.scss
@@ -47,6 +47,15 @@ body.okr {
 
   p {
     margin: 0;
+    font-size: 14px;
+  }
+
+  span {
+    font-size: 14px;
+  }
+
+  .quarter-filter-text span {
+    font-size: 16px;
   }
 
   a {
@@ -387,4 +396,5 @@ table.okr-table {
 }
 
 .okr-form-label-input-container {
+  @extend .py-1;
 }