Update modal styling to be more consistent with WP core (#5)

* Updated modal and button styling.

* Update readme and screenshot

* Update and reorder styles.

* Fix device preview downdown position styling

* Fix linting error

Author: ndiego

.wordpress-org/screenshot-1.png

@@ -2,7 +2,7 @@
 
 [![License](https://img.shields.io/badge/license-GPL--2.0%2B-green.svg)](https://github.com/wpengine/block-pattern-explorer/blob/master/LICENSE.txt)
 
-![Block Pattern Explorer](https://user-images.githubusercontent.com/4832319/149374997-381c41de-6608-4997-91df-d72c7e273e2e.png)
+![Block Pattern Explorer](https://user-images.githubusercontent.com/4832319/149385531-404f1d6f-4401-4786-9bfe-50b0be212adc.png)
 
 The Block Pattern Explorer is an experimental WordPress plugin based **heavily** on the work currently being done in [Gutenberg](https://github.com/WordPress/gutenberg).
 

README.md

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-primitives'), 'version' => '6e96279ccef5c66a8125afa3f907e9d0');
+<?php return array('dependencies' => array('lodash', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-primitives'), 'version' => '115b3b0890a69f01d2ca8b9e5921294e');

build/block-pattern-explorer-editor.asset.php

@@ -54,7 +54,8 @@ Stay up-to-date on the Block Pattern Explorer, and Gutenberg development, using
 
 **Changed**
 
-* Minor updates to modal styling.
+* Replaced custom search component with core version.
+* Updated modal styling to match core pattern explorer.
 * Updated screenshots.
 
 **Fixed**

build/block-pattern-explorer-editor.js

@@ -7,15 +7,17 @@ import { Icon, blockDefault } from '@wordpress/icons';
 function InserterNoResults( { icon, label } ) {
 	return (
 		<div className="block-editor-inserter__no-results">
-			<Icon
-				className="block-editor-inserter__no-results-icon"
-				icon={ icon ? icon : blockDefault }
-			/>
-			<p>
-				{ label
-					? label
-					: __( 'No results found.', 'block-pattern-explorer' ) }
-			</p>
+			<div>
+				<Icon
+					className="block-editor-inserter__no-results-icon"
+					icon={ icon ? icon : blockDefault }
+				/>
+				<p>
+					{ label
+						? label
+						: __( 'No results found.', 'block-pattern-explorer' ) }
+				</p>
+			</div>
 		</div>
 	);
 }

build/style-block-pattern-explorer-editor-styles.css

@@ -151,14 +151,14 @@ function HeaderToolbarButton() {
 				icon={ layout }
 				label={ __( 'Explore Patterns', 'block-pattern-explorer' ) }
 				onClick={ () => setIsModalOpen( true ) }
-				disabled={ allCategoryTypes === 'fetching' }
 			/>
 			{ isModalOpen && (
 				<Modal
 					title={ __( 'Patterns', 'block-pattern-explorer' ) }
 					closeLabel={ __( 'Close', 'block-pattern-explorer' ) }
 					onRequestClose={ () => setIsModalOpen( false ) }
 					className="block-pattern-explorer__modal"
+					isFullScreen
 				>
 					<PatternExplorer
 						allPatterns={ allPatterns }