diff --git a/modules/search/instant-search/components/gridicon/index.jsx b/modules/search/instant-search/components/gridicon/index.jsx
index 4674aeb38da11..3e71d4e985f15 100644
--- a/modules/search/instant-search/components/gridicon/index.jsx
+++ b/modules/search/instant-search/components/gridicon/index.jsx
@@ -42,6 +42,8 @@ class Gridicon extends Component {
return
{ __( 'Is a product.' ) };
case 'gridicons-comment':
return { __( 'Matching comment.' ) };
+ case 'gridicons-cross':
+ return { __( 'Close search overlay' ) };
case 'gridicons-folder':
return { __( 'Category' ) };
case 'gridicons-image-multiple':
@@ -90,6 +92,12 @@ class Gridicon extends Component {
);
+ case 'gridicons-cross':
+ return (
+
+
+
+ );
case 'gridicons-folder':
return (
diff --git a/modules/search/instant-search/components/overlay.jsx b/modules/search/instant-search/components/overlay.jsx
index 1d8a1eb64a36b..a01ecb412c4fe 100644
--- a/modules/search/instant-search/components/overlay.jsx
+++ b/modules/search/instant-search/components/overlay.jsx
@@ -5,7 +5,11 @@
*/
import { h } from 'preact';
import { useEffect } from 'preact/hooks';
-import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Gridicon from './gridicon';
const closeOnEscapeKey = callback => event => {
event.key === 'Escape' && callback();
@@ -34,7 +38,7 @@ const Overlay = ( { children, closeColor, closeOverlay, colorTheme, isVisible, o
onClick={ closeOverlay }
style={ { background: closeColor } }
>
- { __( 'Close', 'jetpack' ) }
+
{ children }
diff --git a/modules/search/instant-search/components/overlay.scss b/modules/search/instant-search/components/overlay.scss
index 3e50ade106506..c9ff2b65fd1a8 100644
--- a/modules/search/instant-search/components/overlay.scss
+++ b/modules/search/instant-search/components/overlay.scss
@@ -1,15 +1,15 @@
.jetpack-instant-search__overlay {
+ position: fixed;
top: 0;
left: 0;
+ z-index: 9999999999999;
width: 100vw;
height: 100vh;
- opacity: 0.975;
- transition: opacity 0.5s linear, 0.25s transform ease-in-out;
- position: fixed;
padding: 3em 1em;
+ background: rgba(255, 255, 255, 0.975);
overflow-y: auto;
overflow-x: hidden;
- z-index: 9999999999999;
+ transition: opacity 0.5s linear, 0.25s transform ease-in-out;
&.is-hidden {
transform: translateX( 100vw );
@@ -25,6 +25,17 @@
}
.jetpack-instant-search__overlay-close {
- position: absolute;
- right: 2em;
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 20;
+ width: 44px;
+ height: 44px;
+ padding: 0;
+ line-height: 1;
+
+ @include break-medium() {
+ width: 64px;
+ height: 64px;
+ }
}
diff --git a/modules/search/instant-search/components/search-box.scss b/modules/search/instant-search/components/search-box.scss
index a52d968c1955a..8692194b13311 100644
--- a/modules/search/instant-search/components/search-box.scss
+++ b/modules/search/instant-search/components/search-box.scss
@@ -5,11 +5,10 @@
}
.jetpack-instant-search__box-filter-icon {
- margin-left: 8px;
+ margin: 0 16px;
cursor: pointer;
- // TODO: To be updated to break-medium
- @include break-small() {
+ @include break-medium() {
display: none;
}
}
diff --git a/modules/search/instant-search/components/search-form.jsx b/modules/search/instant-search/components/search-form.jsx
index a6eb9e6dbd782..586f33f3da8c3 100644
--- a/modules/search/instant-search/components/search-form.jsx
+++ b/modules/search/instant-search/components/search-form.jsx
@@ -62,6 +62,7 @@ class SearchForm extends Component {
{ this.state.showFilters && (
+
{ this.props.widgets.map( widget => (