adjust filter style and add filter to device list

src/app/lists/device-list/device-list.component.html

@@ -1,3 +1,7 @@
+<mat-form-field>
+  <mat-label>Filter</mat-label>
+  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date">
+</mat-form-field>
 <table mat-table class="full-width-table" matSort aria-label="Elements">
   <!-- Id Column -->
   <ng-container matColumnDef="id">
@@ -21,6 +25,6 @@
   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
 
-<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
+<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="25"
   [pageSizeOptions]="[25, 50, 100, 250]">
 </mat-paginator>

src/app/lists/device-list/device-list.component.scss

@@ -1,3 +1,8 @@
 .full-width-table {
   width: 100%;
 }
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}

src/app/lists/device-list/device-list.component.ts

@@ -22,6 +22,11 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
 
   constructor(private systemConfigService: SystemConfigService) { };
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
   ngOnInit() {
     this.dataSource = new MatTableDataSource();
     this.dataSource.data = [];

src/app/lists/folder-list/folder-list.component.html

@@ -1,6 +1,6 @@
 <mat-form-field>
     <mat-label>Filter</mat-label>
-    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium">
+    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Up to Date">
 </mat-form-field>
 <table mat-table class="full-width-table" matSort aria-label="Elements">
     <!-- Id Column -->
@@ -31,6 +31,6 @@
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
 
-<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="50"
+<mat-paginator #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="25"
     [pageSizeOptions]="[25, 50, 100, 250]">
 </mat-paginator>

src/app/lists/folder-list/folder-list.component.scss

@@ -1,3 +1,8 @@
 .full-width-table {
     width: 100%;
 }
+  
+.mat-form-field {
+    font-size: 14px;
+    width: 100%;
+}

src/app/lists/folder-list/folder-list.component.ts

@@ -17,16 +17,16 @@ export class FolderListComponent implements AfterViewInit, OnInit {
   @ViewChild(MatTable) table: MatTable<Folder>;
   dataSource: MatTableDataSource<Folder>;
 
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    this.dataSource.filter = filterValue.trim().toLowerCase();
-  }
-
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['id', 'label', 'path', 'state'];
 
   constructor(private systemConfigService: SystemConfigService) { };
 
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
   ngOnInit() {
     this.dataSource = new MatTableDataSource();
     this.dataSource.data = [];

src/app/lists/status-list/status-list.component.ts

@@ -13,7 +13,6 @@ export class StatusListComponent implements OnInit {
   listType = Type; // used in html
   elevation: string = cardElevation;
   title: string = 'Status';
-  folderList: Type = Type.Folder;
 
   constructor() { }
 

src/styles.scss

@@ -1,32 +1,6 @@
-// Chart.js styles
-#chartjs-tooltip {
-    /* max z-index value */
-    z-index: 2147483647;
-    opacity: 0;
-    position: absolute;
-    background: rgba(0, 0, 0, .7);
-    color: white;
-    border-radius: 3px;
-    -webkit-transition: opacity .3s ease;
-    transition: opacity .3s ease;
-    pointer-events: none;
-    -webkit-transform: translate(-50%, 0);
-    transform: translate(-50%, 0);
-}
-
-.chartjs-tooltip-key {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    margin-right: 10px;
-}
-
-
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
 @import '~@angular/material/theming';
-// Plus imports for other components in your app.
-
 
 // Custom typography
 $tech-ui-typography: mat-typography-config(
@@ -55,8 +29,42 @@ $tech-ui-typography: mat-typography-config(
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$tech-ui-primary: mat-palette($mat-blue);
+$tech-ui-red: #EB5757;
-$tech-ui-accent: mat-palette($mat-blue, A200, A100, A400);
+$tech-ui-blue: (
+  50: #0891D1,
+  100: #0891D1,
+  200: #0891D1,
+  300: #0891D1,
+  400: #0891D1,
+  500: #0891D1,
+  600: #0891D1,
+  700: #0891D1,
+  800: #0891D1,
+  900: #0891D1,
+  A100: #0891D1,
+  A200: #0891D1,
+  A400: #0891D1,
+  A700: #0891D1,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $light-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text,
+  )
+);
+
+$tech-ui-primary: mat-palette($tech-ui-blue);
+$tech-ui-accent: mat-palette($tech-ui-blue, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
 $tech-ui-warn: mat-palette($mat-red);
@@ -87,7 +95,7 @@ html, body {
 .tui-card-title {
     padding: 16px 16px 0 16px;
     font-size: mat-font-size($tech-ui-typography, subheading-2);
-    color: #0891D1;
+    color: mat-color($tech-ui-primary);
 }
 
 .tui-card-content {
@@ -97,3 +105,26 @@ html, body {
 .tui-button-toggle .mat-button-toggle-appearance-standard .mat-button-toggle-label-content  {
     line-height: 34px;
 }
+
+// Chart.js styles
+#chartjs-tooltip {
+    /* max z-index value */
+    z-index: 2147483647;
+    opacity: 0;
+    position: absolute;
+    background: rgba(0, 0, 0, .7);
+    color: white;
+    border-radius: 3px;
+    -webkit-transition: opacity .3s ease;
+    transition: opacity .3s ease;
+    pointer-events: none;
+    -webkit-transform: translate(-50%, 0);
+    transform: translate(-50%, 0);
+}
+
+.chartjs-tooltip-key {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 10px;
+}