diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss
index f2b222d53..0c1186120 100644
--- a/ui-v2/app/styles/base/icons/base-variables.scss
+++ b/ui-v2/app/styles/base/icons/base-variables.scss
@@ -83,6 +83,7 @@ $queue-svg: url('data:image/svg+xml;charset=UTF-8,');
$run-svg: url('data:image/svg+xml;charset=UTF-8,');
$search-svg: url('data:image/svg+xml;charset=UTF-8,');
+$search-color-svg: url('data:image/svg+xml;charset=UTF-8,');
$service-identity-svg: url('data:image/svg+xml;charset=UTF-8,');
$settings-svg: url('data:image/svg+xml;charset=UTF-8,');
$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
diff --git a/ui-v2/app/styles/base/icons/icon-placeholders.scss b/ui-v2/app/styles/base/icons/icon-placeholders.scss
index 2e9e794df..b7bc145c2 100644
--- a/ui-v2/app/styles/base/icons/icon-placeholders.scss
+++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss
@@ -422,6 +422,10 @@
@extend %with-icon;
background-image: $search-svg;
}
+%with-search-color-icon {
+ @extend %with-icon;
+ background-image: $search-color-svg;
+}
%with-service-identity-icon {
@extend %with-icon;
diff --git a/ui-v2/app/styles/components/freetext-filter.scss b/ui-v2/app/styles/components/freetext-filter.scss
index 6f92dd58b..5b870ed58 100644
--- a/ui-v2/app/styles/components/freetext-filter.scss
+++ b/ui-v2/app/styles/components/freetext-filter.scss
@@ -4,5 +4,15 @@
@extend %freetext-filter;
}
%freetext-filter span {
- @extend %with-magnifier;
+ position: relative;
+}
+%freetext-filter span::before {
+ @extend %with-search-icon, %as-pseudo;
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: -8px !important;
+ margin-top: -8px !important;
}
diff --git a/ui-v2/app/styles/components/icons/index.scss b/ui-v2/app/styles/components/icons/index.scss
index 5f6aeec04..0b04361ef 100644
--- a/ui-v2/app/styles/components/icons/index.scss
+++ b/ui-v2/app/styles/components/icons/index.scss
@@ -119,36 +119,6 @@
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-color: $color-transparent;
}
-%with-magnifier {
- position: relative;
-}
-%with-magnifier::before {
- @extend %pseudo-icon;
- cursor: pointer; // autosearch
- top: 50%;
- left: 50%;
- margin-left: -0.2em;
- margin-top: -0.2em;
- font-size: 3em;
- width: 0.35em;
- height: 0.35em;
- border: 0.05em solid;
- border-radius: 0.35em;
- border-color: currentColor;
- background-color: $color-transparent;
-}
-%with-magnifier::after {
- @extend %pseudo-icon;
- font-size: 3em;
- top: 50%;
- left: 50%;
- margin-top: 0.13em;
- margin-left: 0.07em;
- border-width: 0;
- width: 0.18em;
- height: 0.05em;
- transform: rotate(45deg);
-}
%with-exit::after {
@extend %pseudo-icon-bg-img;
top: 3px;
diff --git a/ui-v2/app/styles/components/product.scss b/ui-v2/app/styles/components/product.scss
index 89d0bdeb7..ac501700a 100644
--- a/ui-v2/app/styles/components/product.scss
+++ b/ui-v2/app/styles/components/product.scss
@@ -40,12 +40,13 @@ html.template-loading main > div {
}
/* toggleable toolbar for short screens */
[for='toolbar-toggle'] {
- @extend %with-magnifier;
+ @extend %with-search-color-icon;
+ background-position: 0 4px;
+ display: inline-block;
+ width: 26px;
+ height: 26px;
+ cursor: pointer;
color: $blue-500;
- width: 20px;
- height: 20px;
- margin-left: 15px;
- top: -3px;
}
#toolbar-toggle {
display: none;