From 400d11e1855158153b7398efbe4ef66d38a8b26c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 14 Nov 2017 11:06:27 +0100
Subject: [PATCH] Popover: Adding a header for mobile popovers

---
 components/popover/index.js               |  8 +++++---
 components/popover/style.scss             | 17 +++++++++++++----
 editor/assets/stylesheets/_variables.scss |  2 +-
 editor/components/inserter/style.scss     |  4 ----
 editor/sidebar/style.scss                 |  4 ++--
 5 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/components/popover/index.js b/components/popover/index.js
index 76efb3b7ec32b1..f80026b2720c39 100644
--- a/components/popover/index.js
+++ b/components/popover/index.js
@@ -301,14 +301,16 @@ class Popover extends Component {
 					{ ...contentProps }
 					onKeyDown={ this.maybeClose }
 				>
+					{ this.state.isMobile && (
+						<div className="components-popover__header">
+							<IconButton className="components-popover__close" icon="no-alt" onClick={ onClose } />
+						</div>
+					) }
 					<div
 						ref={ this.bindNode( 'content' ) }
 						className="components-popover__content"
 						tabIndex="-1"
 					>
-						{ this.state.isMobile &&
-							<IconButton className="components-popover__close" icon="no-alt" onClick={ onClose } />
-						}
 						{ children }
 					</div>
 				</div>
diff --git a/components/popover/style.scss b/components/popover/style.scss
index 3a24bd463d65f7..48875747b41540 100644
--- a/components/popover/style.scss
+++ b/components/popover/style.scss
@@ -70,8 +70,9 @@
 	background: $white;
 	height: 100%;
 
-	&:focus {
-		box-shadow: $button-focus-style;
+	.components-popover.is-mobile & {
+		height: calc( 100% - #{ $panel-header-height } );
+		border-top: 0;
 	}
 
 	.components-popover:not(.is-mobile) & {
@@ -107,9 +108,17 @@
 	height: 100%;
 }
 
+.components-popover__header {
+	height: $panel-header-height;
+	background: $light-gray-300;
+	padding: 0 $panel-padding;
+	border: 1px solid $light-gray-500;
+	position: relative;
+}
+
 .components-popover__close.components-icon-button {
 	position: absolute;
-	top: 0;
-	right: 0;
+	top: 6px;
+	right: 6px;
 	z-index: z-index( '.components-popover__close' );
 }
diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss
index de66da7db1a329..c25ed3af3fd324 100644
--- a/editor/assets/stylesheets/_variables.scss
+++ b/editor/assets/stylesheets/_variables.scss
@@ -53,7 +53,7 @@ $header-height: 56px;
 $inserter-tabs-height: 36px;
 $block-toolbar-height: 37px;
 $sidebar-width: 280px;
-$sidebar-panel-header-height: 50px;
+$panel-header-height: 50px;
 $admin-bar-height: 32px;
 $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;
diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
index e9c31270235909..d0687ed5c441c7 100644
--- a/editor/components/inserter/style.scss
+++ b/editor/components/inserter/style.scss
@@ -49,10 +49,6 @@ input[type="search"].editor-inserter__search {
 	&:focus {
 		@include input-style__focus-active;
 	}
-
-	.components-popover.is-mobile & {
-		padding-right: 30px;
-	}
 }
 
 .editor-inserter__category-blocks {
diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
index 44c0ac2c009ea9..ff6e98254cb3e3 100644
--- a/editor/sidebar/style.scss
+++ b/editor/sidebar/style.scss
@@ -29,7 +29,7 @@
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 		height: 100%;
-		padding-top: $sidebar-panel-header-height;
+		padding-top: $panel-header-height;
 		margin-top: -1px;
 		margin-bottom: -1px;
 
@@ -46,7 +46,7 @@
 		top: 0;
 		left: 0;
 		right: 0;
-		height: $sidebar-panel-header-height;
+		height: $panel-header-height;
 
 		@include break-small() {
 			position: inherit;