diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index c5ca4b9b9..e5fadd4ac 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -4,10 +4,10 @@
[(ngModel)]="search" (ngModelChange)="onSearchChange()" (keydown)="handleKey($event)"
aria-label="Search" autocomplete="off"
>
-
+
+
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index b96853400..ff43abd4e 100644
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -12,16 +12,21 @@
}
}
-.icon-search {
- @include icon(25px);
- @include margin-left(-35px);
-
- height: 18px;
-
- // yolo
+.search-button {
+ display: inline-flex;
+ align-self: center;
position: absolute;
- margin-top: 3.5px;
- right: 10px;
+ right: 5px;
+
+ &:hover {
+ opacity: 0.8;
+ }
+
+ my-global-icon {
+ @include icon(18px);
+
+ display: inline-flex;
+ }
}
.jump-to-suggestions {
@@ -52,7 +57,7 @@ li.suggestion {
#typeahead-help,
#typeahead-instructions {
- margin-top: 10px;
+ margin-top: 9px;
width: 100%;
padding: .5rem 1rem;
white-space: normal;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 9cf2a053d..e22a9f255 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -18,6 +18,12 @@
@use './class-helpers/index.scss';
+/* clears the ‘X’ from Chrome */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration { display: none; }
+
body {
/*** theme ***/
// now beware sass requires interpolation