From 5464824f3719ebddb303ee1b82161638d870a288 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Fri, 30 Apr 2021 12:08:58 -0400
Subject: [PATCH] fix(styling): add a better search filter magnify glass icon
 as placeholder - by using directly the unicode character we can make it
 monochrome instead of having a completely different styling between browsers
 (chrome was gray while firefox was previously colored, now they both look
 exactly the same monochrome icon)

---
 packages/common/src/global-grid-options.ts            |  2 +-
 packages/common/src/styles/_variables.scss            |  1 +
 packages/common/src/styles/slick-plugins.scss         | 11 +++++++++++
 .../src/salesforce-global-grid-options.ts             |  1 -
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
index 166952561..d363a2065 100644
--- a/packages/common/src/global-grid-options.ts
+++ b/packages/common/src/global-grid-options.ts
@@ -97,7 +97,7 @@ export const GlobalGridOptions: GridOption = {
   defaultFilter: Filters.input,
   defaultBackendServiceFilterTypingDebounce: 500,
   enableFilterTrimWhiteSpace: false, // do we want to trim white spaces on all Filters?
-  defaultFilterPlaceholder: '&#128269;',
+  defaultFilterPlaceholder: '🔎︎',
   defaultFilterRangeOperator: OperatorType.rangeInclusive,
   defaultColumnSortFieldId: 'id',
   defaultComponentEventPrefix: '',
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
index 1d2c05691..b018ec9ed 100644
--- a/packages/common/src/styles/_variables.scss
+++ b/packages/common/src/styles/_variables.scss
@@ -499,6 +499,7 @@ $checkbox-selector-opacity:                           0.15 !default;
 $checkbox-selector-opacity-hover:                     0.35 !default;
 
 /* Editors */
+$editor-placeholder-color:                            #c9c9c9 !default;
 $editor-input-border-radius:                          3px !default;
 $editor-input-disabled-color:                         #ececec !default;
 $editor-input-height:                                 24px !default;
diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
index 7c16c98e5..27d6d4453 100644
--- a/packages/common/src/styles/slick-plugins.scss
+++ b/packages/common/src/styles/slick-plugins.scss
@@ -573,6 +573,7 @@
   .placeholder {
     font-family: $multiselect-placeholder-font-family;
     font-size: $header-font-size;
+    color: $editor-placeholder-color !important;
   }
 }
 .ms-filter.search-filter {
@@ -741,6 +742,9 @@ input.search-filter {
     &.compound-input {
       border-radius: $compound-filter-border-radius !important;
       border-left: none;
+      &::placeholder {
+        color: $editor-placeholder-color;
+      }
     }
   }
   input.compound-slider {
@@ -769,6 +773,9 @@ input.search-filter {
 .search-filter .flatpickr {
   input.form-control {
     border-left: none;
+    &::placeholder {
+      color: $editor-placeholder-color;
+    }
   }
 }
 .search-filter.flatpickr,
@@ -1000,6 +1007,10 @@ input.slider-filter-input[type=range] {
 .search-filter {
   height: $header-input-height;
 
+  &::placeholder {
+    color: $editor-placeholder-color;
+  }
+
   .slider-value {
     padding: 0;
     height: 100%;
diff --git a/packages/vanilla-bundle/src/salesforce-global-grid-options.ts b/packages/vanilla-bundle/src/salesforce-global-grid-options.ts
index c49c3995c..aef3a8cff 100644
--- a/packages/vanilla-bundle/src/salesforce-global-grid-options.ts
+++ b/packages/vanilla-bundle/src/salesforce-global-grid-options.ts
@@ -14,7 +14,6 @@ export const SalesforceGlobalGridOptions = {
     resetFormButtonIconCssClass: 'mdi mdi-refresh mdi-16px mdi-flip-h mdi-v-align-text-top'
   },
   datasetIdPropertyName: 'Id',
-  defaultFilterPlaceholder: '',
   emptyDataWarning: {
     message: `<span class="mdi mdi-alert color-warning"></span> No data to display.`,
   },