fix(dock-manager): make the UI readable in dark mode

- add missing modules
- change the background color of the selected columns in grids
- change display density of select components to compact

Author: viktorkombov

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html

@@ -9,7 +9,7 @@
         </div>
         <div class="actionItem">
             <!-- Change volume -->
-            <igx-select [(ngModel)]="dataVolume" (ngModelChange)="paramsChanged()" [overlaySettings]="customOverlaySettings">
+            <igx-select [(ngModel)]="dataVolume" (ngModelChange)="paramsChanged()" [overlaySettings]="customOverlaySettings" [displayDensity]="'compact'">
                 <label igxLabel>Change data volume</label>
                 <igx-prefix>
                     <igx-icon>view_list</igx-icon>
@@ -21,7 +21,7 @@
         </div>
         <div class="actionItem">
             <!-- Change frequency -->
-            <igx-select [(ngModel)]="frequency" (ngModelChange)="paramsChanged()" [overlaySettings]="freqOverlaySettings" #freq>
+            <igx-select [(ngModel)]="frequency" (ngModelChange)="paramsChanged()" [overlaySettings]="freqOverlaySettings" [displayDensity]="'compact'" #freq>
                 <label igxLabel>Change update frequency</label>
                 <igx-prefix>
                     <igx-icon>cell_wifi</igx-icon>

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss

@@ -127,6 +127,12 @@
 	}
 }
 
+.dark-theme {
+    --igx-grid-row-selected-background: #084d8d;
+    --igx-grid-row-selected-hover-background: #0d78db;
+    --igx-grid-header-selected-background: #0d78db;
+}
+
 :host ::ng-deep {
 	.grid-area {
 		margin-block-start: 1rem;

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.module.ts

@@ -2,7 +2,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { IgxButtonModule, IgxDialogModule, IgxDividerModule, IgxGridModule, IgxSliderModule,
+import { IgxButtonModule, IgxDialogModule, IgxDividerModule, IgxGridModule, IgxIconModule, IgxSelectModule, IgxSliderModule,
     IgxSwitchModule, IgxTabsModule, IgxToggleModule } from 'igniteui-angular';
 import { GridFinJSDockManagerRoutingModule } from './grid-finjs-dock-manager-routing.module';
 import { GridFinJSDockManagerComponent } from './grid-finjs-dock-manager.component';
@@ -27,7 +27,9 @@ import { IgxPreventDocumentScrollModule } from '../../../../../src/app/directive
         IgxDialogModule,
         IgxDividerModule,
         IgxTabsModule,
-        IgxToggleModule
+        IgxToggleModule,
+        IgxSelectModule,
+        IgxIconModule
     ],
     providers: [],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]