WEB-35 Make htmlhint pass with no warnings (#2311)

src/app/shared/dropdown/dropdown.component.html

@@ -1,4 +1,4 @@
-<mat-form-field fxFlex fxFlex="28%">
+<mat-form-field fxFlex="28%">
   <mat-label>{{ getLabelText() }}</mat-label>
   <mat-select placeholder="{{ getPlaceHolderText() }}" formControlName="controlSelect">
     <mat-option *ngFor="let option of selectOptions" [value]="option.id">

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.html

@@ -7,16 +7,16 @@
       <div fxFlexFill fxFlex="50%">
         <span fxFlex="50%">
           <span *ngIf="item.ctrlKey">
-            <span class="modifierKey">{{ 'labels.inputs.Ctrl' | translate }}</span> +
+            <span class="modifier-key">{{ 'labels.inputs.Ctrl' | translate }}</span> +
           </span>
           <span *ngIf="item.shiftKey">
-            <span class="modifierKey">{{ 'labels.inputs.Shift' | translate }}</span> +
+            <span class="modifier-key">{{ 'labels.inputs.Shift' | translate }}</span> +
           </span>
           <span *ngIf="item.altKey">
-            <span class="modifierKey">{{ 'labels.inputs.Alt' | translate }}</span> +
+            <span class="modifier-key">{{ 'labels.inputs.Alt' | translate }}</span> +
           </span>
           <span *ngIf="item.key">
-            <span class="modifierKey">{{ item.key }}</span></span
+            <span class="modifier-key">{{ item.key }}</span></span
           >
         </span>
         <span fxFlex="50%">{{ item.title }}</span>

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.scss

@@ -1,4 +1,4 @@
-.modifierKey {
+.modifier-key {
   border: 1px solid #0000004d;
   padding: 0.3rem;
   background: #f8f8f8;

src/app/shared/notifications-tray/notifications-tray.component.html

@@ -13,8 +13,13 @@
 </button>
 
 <mat-menu class="mifosx-notifications-menu" #notificationsMenu="matMenu" [overlapTrigger]="false">
-  <div *ngIf="unreadNotifications.length === 0" fxLayout="column" fxLayoutAlign="center center" style="padding: 16px">
-    <mat-icon style="font-size: 24px; opacity: 0.8">
+  <div
+    *ngIf="unreadNotifications.length === 0"
+    fxLayout="column"
+    fxLayoutAlign="center center"
+    class="no-notifications"
+  >
+    <mat-icon class="no-notifications-icon">
       <span class="material-icons">{{ 'labels.menus.Notifications' | translate }}</span>
     </mat-icon>
     <p>{{ 'labels.text.No notifications' | translate }}</p>

src/app/shared/notifications-tray/notifications-tray.component.scss

@@ -2,6 +2,15 @@
   max-height: 20rem !important;
   width: 12.5rem !important;
 
+  .no-notifications {
+    padding: 16px;
+  }
+
+  .notification-icon {
+    font-size: 24px;
+    opacity: 0.8;
+  }
+
   .mat-menu-content {
     padding: 0 !important;
   }

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -49,7 +49,7 @@
           cdkTextareaAutosize="true"
           cdkAutosizeMaxRows="20"
           cdkAutosizeMinRows="1"
-          style="width: 100%; height: 100%"
+          class="json-textarea"
           [innerHTML]="dataObject.data[0].row[i].value | prettyPrint"
         >
         </textarea>

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.scss

@@ -33,3 +33,8 @@
   width: 30px;
   height: 30px;
 }
+
+.json-textarea {
+  width: 100%;
+  height: 100%;
+}