574 - Theme datatable

src/app/shared/components/data-table/data-table.component.html

@@ -18,13 +18,18 @@
       </tr>
       <tr>
         <th *ngFor="let col of columns" [ngSwitch]="col.type" class="data-table-filter">
-          <div *ngSwitchCase="fieldTypeString">
-            <mat-form-field style="width: 100%" appearance="fill" [floatLabel]="'never'">
-              <input #filter matInput (keyup)="onValueChange(col, $event.target.value)" [value]="getValue(col.field)">
+          <div *ngSwitchCase="fieldTypeString" class="filter-text">
+<!--            <mat-form-field style="width: 100%" [floatLabel]="'never'">-->
+<!--              <input #filter matInput (keyup)="onValueChange(col, $event.target.value)" [value]="getValue(col.field)">-->
+<!--              <button mat-button *ngIf="filter.value" matSuffix mat-icon-button aria-label="Clear" (click)="filter.value='';onValueChange(col, filter.value)">-->
+<!--                <fa-icon matSuffix icon="times"></fa-icon>-->
+<!--              </button>-->
+<!--            </mat-form-field>-->
+
+              <input type="text "#filter (keyup)="onValueChange(col, $event.target.value)" [value]="getValue(col.field)">
               <button mat-button *ngIf="filter.value" matSuffix mat-icon-button aria-label="Clear" (click)="filter.value='';onValueChange(col, filter.value)">
                 <fa-icon matSuffix icon="times"></fa-icon>
               </button>
-            </mat-form-field>
           </div>
         </th>
       </tr>

src/app/shared/components/data-table/data-table.component.scss

@@ -47,7 +47,7 @@ $stateErrorTextColor: #222222;
 
 //Hover State
 $stateHoverBorderColor: #0073ea;
-$stateHoverBgColor: $background-grey;
+$stateHoverBgColor: $contentBgColor;
 $stateHoverTextColor: $black;
 
 //Forms
@@ -57,24 +57,55 @@ $invalidInputBorderColor: #ff0084;
 $inputGroupTextColor: #444444;
 
 .data-table {
+
   .no-datas {
     text-align: center;
   }
 
-  .data-table-filter {
-    .mat-form-field-flex {
-      padding-top: 0 !important;
-    }
-
-    .mat-form-field-infix {
-      border: 0;
-    }
+  tbody tr:nth-child(odd) {
+    // Allow pyjama
+    background-color: $background-grey !important;
   }
 
   @import "~primeng/resources/themes/theme";
 
-  tbody tr:nth-child(odd) {
-    background-color: $background-grey !important;
+  // OVERRIDE RULE PRIME NG THEME BELOW
+
+  .ui-table .ui-sortable-column.ui-state-highlight {
+    background-color: $headerBgColor !important;
+  }
+
+  .ui-table .ui-sortable-column:not(.ui-state-highlight):hover {
+    background-color: $headerBgColor !important;
+    color: $headerTextColor !important;
+    text-decoration: underline;
+  }
+
+  .ui-table .ui-sortable-column:not(.ui-state-highlight):hover .ui-sortable-column-icon {
+    color: $headerTextColor !important;
+  }
+
+  .data-table-filter {
+    padding: 4px !important;
+
+    .filter-text {
+      position: relative;
+
+      input {
+        background-color: $primary-color-lighter !important;
+        border: 0;
+        border-radius: 5px;
+        padding: 6px 30px 6px 10px;
+        width: 100%;
+        color: white;
+      }
+
+      button {
+        position: absolute;
+        top: -6px;
+        right: -5px;
+      }
+    }
   }
 }
 

src/sass/abstracts/_variables.scss

 $primary-color: var(--primary-color);
+$primary-color-lighter: var(--primary-color-lighter);
 $accent-color: var(--accent-color);
 $background-grey: #f5f5f5;
 $white: #ffffff;

src/sass/themes/dlcm-theme.scss

@@ -18,5 +18,6 @@ $dlcm-theme: mat-light-theme(
   @include angular-material-theme($dlcm-theme);
   //$primary-palette: map-get($dlcm-theme, primary);
   //--primary-color: mat-color($primary-palette, default, 1.0);
-  --primary-color: #03A9F4;
+  --primary-color: #03A9F4; // Should be equal to $mat-yareta-primary : 500
+  --primary-color-lighter: #7dc9f4;
 }

src/sass/themes/yareta-theme.scss

@@ -92,4 +92,5 @@ $yareta-theme: mat-light-theme(
 .yareta-theme {
   @include angular-material-theme($yareta-theme);
   --primary-color: #a2c252; // Should be equal to $mat-yareta-primary : 500
+  --primary-color-lighter: #b5c787;
 }