Merge pull request #483 from puzzle/bug/ux-error-font

Adjust global error color and font weight
puzzle · Oct 20, 2023 · 368078b · 368078b
2 parents c8b641d + 668833b
commit 368078b
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 31 deletions.
diff --git a/frontend/src/app/keyresult-type/keyresult-type.component.html b/frontend/src/app/keyresult-type/keyresult-type.component.html
@@ -45,7 +45,7 @@
               <input class="input-fields metric-fields" formControlName="baseline" [attr.data-testId]="'baseline'" />
               <div *ngIf="isTouchedOrDirty('baseline')">
                 <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('baseline')">
-                  {{ errorMessages[errorKey.toUpperCase()] }}
+                  {{ errorMessages[errorKey.toUpperCase().trim()] }}
                 </mat-error>
               </div>
             </div>
@@ -58,7 +58,7 @@
               />
               <div *ngIf="isTouchedOrDirty('stretchGoal')">
                 <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('stretchGoal')">
-                  {{ errorMessages[errorKey.toUpperCase()] }}
+                  {{ errorMessages[errorKey.toUpperCase().trim()] }}
                 </mat-error>
               </div>
             </div>
@@ -80,7 +80,7 @@
               <textarea class="input-fields" formControlName="commitZone" [attr.data-testId]="'commitZone'"></textarea>
               <div *ngIf="isTouchedOrDirty('commitZone')">
                 <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('commitZone')">
-                  {{ errorMessages[errorKey.toUpperCase()] }}
+                  {{ errorMessages[errorKey.toUpperCase().trim()] }}
                 </mat-error>
               </div>
             </div>
@@ -89,7 +89,7 @@
               <textarea class="input-fields" formControlName="targetZone" [attr.data-testId]="'targetZone'"></textarea>
               <div *ngIf="isTouchedOrDirty('targetZone')">
                 <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('targetZone')">
-                  {{ errorMessages[errorKey.toUpperCase()] }}
+                  {{ errorMessages[errorKey.toUpperCase().trim()] }}
                 </mat-error>
               </div>
             </div>
@@ -102,7 +102,7 @@
               ></textarea>
               <div *ngIf="isTouchedOrDirty('stretchZone')">
                 <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('stretchZone')">
-                  {{ errorMessages[errorKey.toUpperCase()] }}
+                  {{ errorMessages[errorKey.toUpperCase().trim()] }}
                 </mat-error>
               </div>
             </div>

diff --git a/...hared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html b/...hared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.html
@@ -4,8 +4,8 @@
   <mat-form-field appearance="outline">
     <textarea matInput class="w-100" formControlName="changeInfo"></textarea>
     <div *ngIf="isTouchedOrDirty('changeInfo')">
-      <mat-error class="fw-bold" *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
-        {{ getErrorMessage(errorKey) }}
+      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('changeInfo')">
+        {{ errorMessages[errorKey.toUpperCase().trim()] }}
       </mat-error>
     </div>
   </mat-form-field>
@@ -15,8 +15,8 @@
   <mat-form-field appearance="outline">
     <textarea matInput formControlName="initiatives"></textarea>
     <div *ngIf="isTouchedOrDirty('initiatives')">
-      <mat-error class="fw-bold" *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
-        {{ getErrorMessage(errorKey) }}
+      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('initiatives')">
+        {{ errorMessages[errorKey.toUpperCase().trim()] }}
       </mat-error>
     </div>
   </mat-form-field>

diff --git a/.../shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts b/.../shared/dialog/checkin/check-in-base-informations/check-in-base-informations.component.ts
@@ -10,6 +10,7 @@ import errorMessages from '../../../../../assets/errors/error-messages.json';
 export class CheckInBaseInformationsComponent {
   @Input()
   dialogForm!: FormGroup;
+  protected readonly errorMessages: any = errorMessages;
 
   isTouchedOrDirty(name: string) {
     return this.dialogForm.get(name)?.dirty || this.dialogForm.get(name)?.touched;
@@ -19,10 +20,4 @@ export class CheckInBaseInformationsComponent {
     const errors = this.dialogForm.get(name)?.errors;
     return errors == null ? [] : Object.keys(errors);
   }
-
-  getErrorMessage(key: string) {
-    return errorMessages[key.toUpperCase() as keyof typeof errorMessages];
-  }
-
-  protected readonly errorMessages = errorMessages;
 }
diff --git a/...nd/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html b/...nd/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.html
@@ -15,8 +15,8 @@
         (focusin)="resetValue()"
       ></app-custom-input>
       <div *ngIf="isTouchedOrDirty('value')">
-        <mat-error class="fw-bold error-font" *ngFor="let errorKey of getErrorKeysOfFormField('value')">
-          {{ errorMessages[errorKey.toUpperCase()] }}
+        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('value')">
+          {{ errorMessages[errorKey.toUpperCase().trim()] }}
         </mat-error>
       </div>
     </div>

diff --git a/...nd/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.scss b/...nd/src/app/shared/dialog/checkin/check-in-form-metric/check-in-form-metric.component.scss
@@ -1,7 +1,3 @@
-.error-font {
-  font-size: 13px;
-}
-
 .custom-input {
   margin-top: 3px;
 }

diff --git a/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html b/frontend/src/app/shared/dialog/example-dialog/example-dialog.component.html
@@ -5,8 +5,8 @@ <h1 mat-dialog-title class="d-flex justify-content-center">This is an example di
       <mat-label>Name</mat-label>
       <input matInput formControlName="name" placeholder="Ex. Tom" />
       <div *ngIf="isTouchedOrDirty('name')">
-        <mat-error class="fw-bold" *ngFor="let errorKey of getErrorKeysOfFormField('name')">
-          {{ errorMessages[errorKey.toUpperCase()] }}
+        <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('name')">
+          {{ errorMessages[errorKey.toUpperCase().trim()] }}
         </mat-error>
       </div>
     </mat-form-field>
@@ -17,8 +17,8 @@ <h1 mat-dialog-title class="d-flex justify-content-center">This is an example di
       <mat-radio-button value="other">Other</mat-radio-button>
     </mat-radio-group>
     <div *ngIf="isTouchedOrDirty('gender')">
-      <mat-error class="fw-bold" *ngFor="let errorKey of getErrorKeysOfFormField('gender')">
-        {{ errorMessages[errorKey.toUpperCase()] }}
+      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('gender')">
+        {{ errorMessages[errorKey.toUpperCase().trim()] }}
       </mat-error>
     </div>
 
@@ -29,8 +29,8 @@ <h1 mat-dialog-title class="d-flex justify-content-center">This is an example di
       </mat-select>
     </mat-form-field>
     <div *ngIf="isTouchedOrDirty('hobby')">
-      <mat-error class="fw-bold" *ngFor="let errorKey of getErrorKeysOfFormField('hobby')">
-        {{ errorMessages[errorKey.toUpperCase()] }}
+      <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('hobby')">
+        {{ errorMessages[errorKey.toUpperCase().trim()] }}
       </mat-error>
     </div>
 

diff --git a/frontend/src/app/shared/dialog/key-result-dialog/key-result-dialog.component.html b/frontend/src/app/shared/dialog/key-result-dialog/key-result-dialog.component.html
@@ -12,7 +12,7 @@
       <textarea [attr.data-testId]="'titleInput'" class="input-fields" formControlName="title" id="title"></textarea>
       <div *ngIf="isTouchedOrDirty('title')">
         <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('title')">
-          {{ errorMessages[errorKey.toUpperCase()] }}
+          {{ errorMessages[errorKey.toUpperCase().trim()] }}
         </mat-error>
       </div>
     </div>
@@ -44,7 +44,7 @@
       <textarea [attr.data-testId]="'descriptionInput'" class="input-fields" formControlName="description"></textarea>
       <div *ngIf="isTouchedOrDirty('description')">
         <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('description')">
-          {{ errorMessages[errorKey.toUpperCase()] }}
+          {{ errorMessages[errorKey.toUpperCase().trim()] }}
         </mat-error>
       </div>
     </div>

diff --git a/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html b/frontend/src/app/shared/dialog/objective-dialog/objective-form.component.html
@@ -16,7 +16,7 @@
         <textarea cdkFocusInitial formControlName="title" id="title" matInput placeholder="Objective Title"></textarea>
         <span *ngIf="isTouchedOrDirty('title')">
           <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('title')">
-            {{ errorMessages[errorKey.toUpperCase()] }}
+            {{ errorMessages[errorKey.toUpperCase().trim()] }}
           </mat-error>
         </span>
       </mat-form-field>
@@ -28,7 +28,7 @@
         <textarea formControlName="description" matInput placeholder="Objective Beschreibung"></textarea>
         <span *ngIf="isTouchedOrDirty('description')">
           <mat-error *ngFor="let errorKey of getErrorKeysOfFormField('description')">
-            {{ errorMessages[errorKey.toUpperCase()] }}
+            {{ errorMessages[errorKey.toUpperCase().trim()] }}
           </mat-error>
         </span>
       </mat-form-field>

diff --git a/frontend/src/style/styles.scss b/frontend/src/style/styles.scss
@@ -99,3 +99,7 @@ body pzsh-backdrop {
   border: none;
   padding: 0;
 }
+
+.mat-mdc-form-field-error {
+  color: #b3261b;
+}