UI: Improve filled text field style. Improve scrollbar style.

ui-ngx/src/styles.scss

@@ -568,10 +568,16 @@ mat-label {
   .mat-toolbar.mat-mdc-table-toolbar .mat-mdc-form-field.mat-form-field-appearance-fill,
   .mat-mdc-form-field.mat-form-field-appearance-fill.tb-appearance-transparent {
     .mdc-text-field--filled {
+      &:before {
+        content: none;
+      }
       background-color: transparent;
       padding: 0;
     }
     .mat-mdc-form-field-focus-overlay {
+      &:before {
+        content: none;
+      }
       background-color: transparent;
     }
     .mat-mdc-select-arrow-wrapper {

ui-ngx/src/theme-overwrites.scss

@@ -22,13 +22,43 @@
 @mixin _mat-form-field-overwrites($primary, $config-or-theme) {
   .mat-mdc-form-field.mat-form-field-appearance-fill {
     .mdc-text-field--filled {
-      background-color: rgba(mat.get-color-from-palette($primary), 0.03);
+      &:before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        background-color: mat.get-color-from-palette($primary);
+        opacity: 0.03;
+      }
+      background-color: transparent;
       &:not(.mdc-text-field--disabled) {
-        background-color: rgba(mat.get-color-from-palette($primary), 0.06);
+        &:before {
+          content: "";
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          background-color: mat.get-color-from-palette($primary);
+          opacity: 0.06;
+        }
+        background-color: transparent;
       }
     }
     .mat-mdc-form-field-focus-overlay {
-      background-color: rgba(mat.get-color-from-palette($primary), 0.87);
+      &:before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        background-color: mat.get-color-from-palette($primary);
+        opacity: 0.87;
+      }
+      background-color: transparent;
     }
   }
 }

ui-ngx/src/theme.scss

@@ -243,6 +243,22 @@ $tb-dark-theme: map_merge($tb-dark-theme, $color);
   div.tb-dashboard-page.mobile-app {
     @include mat-fab-toolbar-inverse-theme($tb-theme);
   }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(203, 203, 203, 0.8);
+    &:hover {
+      background: rgba(165, 165, 165, 0.65);
+    }
+  }
 }
 
 .tb-default {