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
puzzle · Nov 15, 2024 · 1d1b705 · 1d1b705
1 parent 5a4b752
commit 1d1b705
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }