Add styling to headings and fix obvious mistakes

puzzle · Nov 8, 2024 · a0a9267 · a0a9267
1 parent f9f4f26
commit a0a9267
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 40 deletions.
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"
 >
@@ -22,4 +22,4 @@
   >
     <input matSliderThumb [(ngModel)]="checkIn.confidence" />
   </mat-slider>
-</div>
+</span>
diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.html
@@ -82,9 +82,7 @@ <h4 class="ordinal-zone-title">Stretch</h4>
         </section>
 
         <section *ngIf="keyResult.lastCheckIn as checkIn" class="mt-4">
-          <h3 class="sub-title-keyresult-detail fw-bold mb-1">
-            Letztes Check-in ({{ checkIn.createdOn | date: DATE_FORMAT }})
-          </h3>
+          <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
@@ -102,12 +100,12 @@ <h3 class="sub-title-keyresult-detail fw-bold mb-1">
 
         <section>
           <div class="mt-3 mb-4">
-            <h3 class="sub-title-keyresult-detail fw-bold mb-1">Beschrieb</h3>
+            <h3 class="mb-1">Beschrieb</h3>
             <p class="linebreak">{{ keyResult.description || "-" }}</p>
           </div>
 
           <div *ngIf="keyResult.actionList?.length != 0" class="mt-3 mb-4">
-            <h3 class="sub-title-keyresult-detail fw-bold">Action Plan</h3>
+            <h3>Action Plan</h3>
             <div *ngFor="let action of keyResult.actionList">
               <div *ngIf="action.isChecked">
                 <div class="action-list-checked-item break-word ms-4">

diff --git a/frontend/src/app/components/keyresult/keyresult.component.html b/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="keyresult-title linebreak mb-2">{{ keyResult.title }}</h3>
+  <h3 class="fw-normal linebreak mb-2">{{ keyResult.title }}</h3>
   <app-scoring [keyResult]="keyResult" [isDetail]="false" [attr.data-testId]="'scoring-component'"></app-scoring>
   <div class="d-flex justify-content-between mt-1">
     <div class="d-flex justify-content-center align-items-center flex-wrap">
-      <h5 class="me-1 text-nowrap me-2">Letztes Check-in</h5>
+      <h5 class="text-nowrap me-2">Letztes Check-in</h5>
       <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>Confidence</h5>
+      <h5 class="me-2">Confidence</h5>
       <app-confidence
         [edit]="false"
         [isDetail]="false"

diff --git a/frontend/src/app/components/keyresult/keyresult.component.scss b/frontend/src/app/components/keyresult/keyresult.component.scss
@@ -15,10 +15,3 @@
     cursor: pointer;
   }
 }
-
-.keyresult-title {
-  font-size: 1rem;
-  font-weight: normal;
-  word-wrap: anywhere;
-  color: black;
-}
diff --git a/frontend/src/app/components/objective-detail/objective-detail.component.html b/frontend/src/app/components/objective-detail/objective-detail.component.html
@@ -14,7 +14,7 @@ <h2 class="title" [attr.data-testId]="'objective-title'">{{ objective.title }}</
       </section>
 
       <section class="me-3">
-        <h3 class="sub-title-objective fw-bold mb-1">Beschrieb</h3>
+        <h3 class="mb-1">Beschrieb</h3>
         <div class="linebreak" *ngIf="objective.description === ''"><p>-</p></div>
         <div *ngIf="objective.description !== ''" [attr.data-testId]="'description'" class="linebreak">
           <p>{{ objective.description }}</p>

diff --git a/frontend/src/app/components/objective-detail/objective-detail.component.scss b/frontend/src/app/components/objective-detail/objective-detail.component.scss
@@ -1,7 +1,3 @@
 :host {
   width: 100%;
 }
-
-.sub-title-objective {
-  font-size: 1rem;
-}
diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
@@ -15,16 +15,43 @@ body.okr {
 
   h1 {
     font-size: 1.5rem;
-    font-weight: bold;
+    font-weight: 600;
   }
 
   h2 {
     font-size: 1.25rem;
-    font-weight: bold;
+    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;
   }
 
   p {
     margin: 0;
+    font-size: 14px;
+  }
+
+  span {
+    font-size: 14px;
   }
 
   a {
@@ -43,26 +70,10 @@ body.okr {
   white-space: pre-wrap;
 }
 
-.title {
-  font-size: 1.25rem;
-  font-weight: bold;
-  word-wrap: anywhere;
-  color: black;
-  @extend .linebreak;
-}
-
 .fit-content {
   width: fit-content;
 }
 
-.sub-title {
-  font-size: 0.8rem;
-}
-
-.detail-view-subtitle {
-  font-size: 1rem;
-}
-
 .keyResult-attribute-show {
   background-color: $keyResult-attribute-bg;
   padding: 0.25em 0.75rem;
@@ -381,4 +392,5 @@ table.okr-table {
 }
 
 .okr-form-label-input-container {
+  @extend .py-1;
 }