Bug/1163 implement open sans as font (#1200)

* implement open sans as font - write fontface which supports different font weights * Fix font test, keyresult detail order and distance in keyresult detail * Fix a few mistakes with the font size and weight * Fix small mistake with height of ordinal zones * Fix font weight of buttons * Align mehr / weniger button to the team chips * Enforce opensans to everything and write todo for implementing a better solution once angular 19 is implemented * Remove unwanted class * Delete unused file and style, implement font faces for each font and fix test * Format code * Add styling to mobile header * Fix styling after adding a class to the wrong attribute * Remove unwanted important * Apply consistent spacing to objective detail view * Reset unwanted change --------- Co-authored-by: peggimann <[email protected]> Co-authored-by: Manuel <[email protected]>
puzzle · Nov 27, 2024 · 2254f96 · 2254f96
1 parent 066eb4f
commit 2254f96
Show file tree

Hide file tree

Showing 59 changed files with 353 additions and 69 deletions.
diff --git a/frontend/cypress/e2e/overview.cy.ts b/frontend/cypress/e2e/overview.cy.ts
@@ -21,7 +21,7 @@ describe('OKR Overview', () => {
   });
 
   it('Check font ', () => {
-    cy.get('.team-title').first().invoke('css', 'font-family').should('eq', 'Roboto, sans-serif');
+    cy.get('.team-title').first().invoke('css', 'font-family').should('eq', 'OpenSans, sans-serif');
     cy.get('.team-title').first().invoke('css', 'font-weight').should('eq', '600');
   });
 });
diff --git a/frontend/src/app/components/application-banner/application-banner.component.html b/frontend/src/app/components/application-banner/application-banner.component.html
@@ -22,9 +22,12 @@
             id="header-accordion"
             class="content-center"
           >
-            <mat-expansion-panel-header class="d-flex gap-2 mx-3" [attr.data-testId]="'expansion-panel-header'">
+            <mat-expansion-panel-header
+              class="d-flex justify-content-center gap-2 mx-3"
+              [attr.data-testId]="'expansion-panel-header'"
+            >
               <mat-panel-title>
-                <div class="w-100 d-flex justify-content-between">
+                <div class="w-100 d-flex justify-content-between expansion-panel-title">
                   <span *ngIf="!panelOpenState; else openedPanel">{{
                     (quarterLabel$ | async) || quarterLabel$.getValue()
                   }}</span>

diff --git a/frontend/src/app/components/application-banner/application-banner.component.scss b/frontend/src/app/components/application-banner/application-banner.component.scss
@@ -11,3 +11,7 @@ p.mb-2 {
 .filters {
   flex: 1;
 }
+
+.expansion-panel-title {
+  margin-top: 0.2rem;
+}
diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.html
@@ -20,16 +20,16 @@
           </div>
           <div class="okr-form-row row-cols-4">
             <h4 class="col-auto">Wert:</h4>
-            <div class="col">
+            <span class="col">
               <ng-container *ngIf="keyResult.keyResultType === 'metric'">
                 {{ +checkIn.value! | unitTransformation: getMetricKeyResult().unit }}
               </ng-container>
               <ng-container *ngIf="keyResult.keyResultType === 'ordinal'">
                 {{ checkIn.value }}
               </ng-container>
-            </div>
+            </span>
             <h4 class="col-auto">Confidence:</h4>
-            <div class="col">{{ checkIn.confidence }} / 10</div>
+            <span class="col">{{ checkIn.confidence }} / 10</span>
           </div>
 
           <div class="okr-form-row justify-content-between" *ngIf="checkIn.changeInfo !== ''">

diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.scss
diff --git a/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.ts b/frontend/src/app/components/check-in-history-dialog/check-in-history-dialog.component.ts
@@ -13,7 +13,6 @@ import { DialogService } from '../../services/dialog.service';
 @Component({
   selector: 'app-check-in-history-dialog',
   templateUrl: './check-in-history-dialog.component.html',
-  styleUrls: ['./check-in-history-dialog.component.scss'],
 })
 export class CheckInHistoryDialogComponent implements OnInit {
   keyResult!: KeyResult;

diff --git a/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html b/frontend/src/app/components/checkin/check-in-form/check-in-form.component.html
@@ -2,7 +2,7 @@
   <ng-container content>
     <form [formGroup]="dialogForm">
       <div class="okr-form-row okr-form-label-input-container">
-        <h4 class="okr-form-label okr-form-col">Key Result</h4>
+        <h3 class="okr-form-label okr-form-col">Key Result</h3>
         <span class="okr-form-col">
           <p class="dialog-data-show">{{ keyResult.title }}</p>
         </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
@@ -59,51 +59,34 @@ <h4>Confidence</h4>
           <ng-container *ngIf="keyResult.keyResultType == 'ordinal' && castToOrdinal(keyResult) as keyResultOrdinal">
             <div class="d-flex justify-content-between w-100 ordinal-div mb-4">
               <div class="ordinal-col h-auto">
-                <h4 class="ordinal-zone-title">Commit</h4>
-                <p class="keyResult-detail-attribute-show ordinal-box p-3">
+                <h4>Commit</h4>
+                <p class="keyResult-detail-attribute-show ordinal-box p-3 h-100">
                   {{ keyResultOrdinal.commitZone }}
                 </p>
               </div>
               <div class="ordinal-col h-auto">
-                <h4 class="ordinal-zone-title">Target</h4>
-                <p class="keyResult-detail-attribute-show ordinal-box p-3">
+                <h4>Target</h4>
+                <p class="keyResult-detail-attribute-show ordinal-box p-3 h-100">
                   {{ keyResultOrdinal.targetZone }}
                 </p>
               </div>
               <div class="ordinal-col h-auto">
-                <h4 class="ordinal-zone-title">Stretch</h4>
-                <p class="keyResult-detail-attribute-show ordinal-box p-3">
+                <h4>Stretch</h4>
+                <p class="keyResult-detail-attribute-show ordinal-box p-3 h-100">
                   {{ keyResultOrdinal.stretchZone }}
                 </p>
               </div>
             </div>
           </ng-container>
         </section>
 
-        <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">
-            <button
-              (click)="checkInHistory()"
-              class="px-2 dialog-detail-button"
-              color="primary"
-              disableRipple="true"
-              mat-button
-              [attr.data-testId]="'show-all-checkins'"
-            >
-              Alle Check-ins anzeigen
-            </button>
-          </span>
-        </section>
-
         <section class="mb-2-rem">
-          <div>
+          <div class="mb-2-rem">
             <h3 class="mb-1">Beschrieb</h3>
             <p class="linebreak">{{ keyResult.description || "-" }}</p>
           </div>
 
-          <div *ngIf="keyResult.actionList?.length != 0" class="mt-3 mb-4">
+          <div *ngIf="keyResult.actionList?.length != 0" class="mb-2-rem">
             <h3>Action Plan</h3>
             <div *ngFor="let action of keyResult.actionList">
               <div *ngIf="action.isChecked">
@@ -119,6 +102,23 @@ <h3>Action Plan</h3>
           </div>
         </section>
 
+        <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 all-checkins-button">
+            <button
+              (click)="checkInHistory()"
+              class="px-2 dialog-detail-button"
+              color="primary"
+              disableRipple="true"
+              mat-button
+              [attr.data-testId]="'show-all-checkins'"
+            >
+              Alle Check-ins anzeigen
+            </button>
+          </span>
+        </section>
+
         <div class="d-flex align-items-center flex-row justify-content-start">
           <button
             *ngIf="!isComplete && keyResult.writeable"

diff --git a/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss b/frontend/src/app/components/keyresult-detail/keyresult-detail.component.scss
@@ -6,12 +6,7 @@
 
 .keyResult-detail-attribute-show {
   background-color: $display-element;
-  height: 100%;
-  font-size: 0.85rem;
-}
-
-.ordinal-zone-title {
-  font-size: 1.1rem;
+  height: auto;
 }
 
 .scoring-detail {
@@ -71,10 +66,6 @@
     width: 100%;
   }
 
-  .keyResult-detail-attribute-show {
-    height: auto;
-  }
-
   .confidence-container {
     display: flex;
     flex-direction: column;
@@ -91,6 +82,6 @@
   text-indent: -1.3rem;
 }
 
-.mb-2-rem {
-  margin-bottom: 2rem !important;
+.all-checkins-button {
+  height: 25px;
 }
diff --git a/frontend/src/app/components/objective-detail/objective-detail.component.html b/frontend/src/app/components/objective-detail/objective-detail.component.html
@@ -16,12 +16,12 @@ <h2 class="title" [attr.data-testId]="'objective-title'">{{ objective.title }}</
       <section class="me-3">
         <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">
+        <div *ngIf="objective.description !== ''" [attr.data-testId]="'description'" class="linebreak mb-2-rem">
           <p>{{ objective.description }}</p>
         </div>
 
         <div
-          class="d-flex align-items-center flex-row justify-content-start mt-4"
+          class="d-flex align-items-center flex-row justify-content-start"
           *ngIf="objective.state.toUpperCase() != 'SUCCESSFUL' && objective.state.toUpperCase() != 'NOTSUCCESSFUL'"
         >
           <button

diff --git a/frontend/src/app/components/team-filter/team-filter.component.html b/frontend/src/app/components/team-filter/team-filter.component.html
@@ -1,10 +1,11 @@
 <mat-chip-listbox class="chip-list overflow-hidden w-100 d-grid">
-  <button (click)="toggleAll()" class="icon-button team-button focus-outline mt-1 me-1">
+  <button (click)="toggleAll()" class="icon-button focus-outline mt-1 me-1">
     <mat-chip
       [attr.data-testId]="'team-filter-alle'"
       [highlighted]="activeTeams.length == (this.teams$ | async)?.length"
       color="primary"
-      >Alle
+    >
+      <p>Alle</p>
     </mat-chip>
   </button>
   <button
@@ -27,7 +28,7 @@
     *ngIf="(teams$ | async)!.length > 6"
     (click)="showMoreTeams = !showMoreTeams"
     id="toggle-show-more-teams"
-    class="icon-button focus-outline m-1 d-block d-md-none"
+    class="icon-button focus-outline mt-1 ms-1 d-block d-md-none"
   >
     <a class="primary-a-tag">{{ showMoreTeams ? "Weniger" : "Mehr" }}</a>
   </button>

diff --git a/frontend/src/app/components/team/team.component.html b/frontend/src/app/components/team/team.component.html
@@ -11,7 +11,7 @@ <h1 class="team-title">{{ OVEntity.team.name }}</h1>
       color="primary"
       mat-button
     >
-      <span class="d-flex align-items-center fw-bold add-text">
+      <span class="d-flex align-items-center add-text">
         <img alt="Add key-result button" class="add-cross-button" src="../../../assets/icons/new-icon.svg" />
         Objective hinzufügen
       </span>

diff --git a/frontend/src/app/team-management/member-list/member-list.component.html b/frontend/src/app/team-management/member-list/member-list.component.html
@@ -39,7 +39,7 @@ <h2 *ngIf="!selectedTeam$.value">Alle Teams</h2>
         color="primary"
         mat-button
       >
-        <span class="d-flex align-items-center fw-bold add-text">
+        <span class="d-flex align-items-center add-text">
           <img alt="Add key-result button" class="add-cross-button" src="/assets/icons/new-icon.svg" />
           Member registrieren
         </span>

diff --git a/...tend/src/app/team-management/team-management-banner/team-management-banner.component.html b/...tend/src/app/team-management/team-management-banner/team-management-banner.component.html
@@ -19,7 +19,7 @@ <h1>Teamverwaltung</h1>
         color="primary"
         mat-button
       >
-        <span class="d-flex align-items-center fw-bold add-text">
+        <span class="d-flex align-items-center add-text">
           <img alt="Add key-result button" class="add-cross-button" src="/assets/icons/new-icon.svg" />
           Team erfassen
         </span>