Store: Update header area to remove duplicate site info (#23705)

* Redesign the header/site information area to remove duplicate info * Link the site icon and title back to the main site * Fix margins on the action buttons * Address site link feedback
Automattic · Apr 20, 2018 · 2f7c752 · 2f7c752
1 parent 6eed7fb
commit 2f7c752
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 32 deletions.
diff --git a/client/extensions/woocommerce/components/action-header/index.js b/client/extensions/woocommerce/components/action-header/index.js
@@ -53,7 +53,9 @@ class ActionHeader extends React.Component {
 					<Gridicon icon="chevron-left" />
 				</Button>
 				<div className="action-header__content">
-					<SiteIcon site={ site } />
+					<a href={ site.URL } aria-label={ site.title }>
+						<SiteIcon site={ site } />
+					</a>
 					<div className="action-header__details">
 						{ site && <p className="action-header__site-title">{ site.title }</p> }
 						{ this.renderBreadcrumbs() }

diff --git a/client/extensions/woocommerce/components/action-header/style.scss b/client/extensions/woocommerce/components/action-header/style.scss
@@ -11,47 +11,31 @@
 	color: $gray-dark;
 	background: $white;
 	border-bottom: 1px solid $gray-lighten-20;
+	position: fixed;
+	z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' );
+	top: 47px;
+	left: 0px;
 
 	@include breakpoint( ">480px" ) {
 		padding: 8px 24px 8px 0;
 	}
 
 	@include breakpoint( ">660px" ) {
 		padding: 5px 16px;
+		padding-left: 0;
 		margin: 0;
-	}
+		margin-left: 40px;
 
-	@include breakpoint( ">960px" ) {
-		position: fixed;
-		z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' );
-		width: calc(100% - 273px);
-		top: 47px;
-		left: 273px;
-	}
-	@include breakpoint( "660px-960px" ) {
-		position: fixed;
-		z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' );
-		width: calc(100% - 229px);
-		top: 47px;
-		left: 229px;
-	}
-
-	@include breakpoint( "<660px" ) {
-		position: fixed;
-		z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' );
-		width: 100%;
-		top: 47px;
+		.gridicons-chevron-left {
+			display: none;
+		}
 	}
 }
 
 .action-header__back-to-sidebar {
 	flex-grow: 0;
 	flex-shrink: 0;
 	min-width: 40px;
-
-	@include breakpoint( ">660px" ) {
-		display: none;
-	}
 }
 
 .action-header__content {
@@ -60,6 +44,10 @@
 	display: flex;
 	justify-content: flex-start;
 
+	@include breakpoint( ">660px" ) {
+		margin-left: -32px;
+	}
+
 	.site-icon {
 		margin-right: 8px;
 	}
@@ -68,6 +56,10 @@
 		font-size: 10px;
 		color: $gray-darken-10;
 		margin: 2px 0 -3px;
+
+		a, a:hover {
+			color: $gray-darken-10;
+		}
 	}
 
 	.action-header__breadcrumbs {
@@ -92,6 +84,10 @@
 	overflow: hidden;
 	text-align: right;
 
+	@include breakpoint( ">660px" ) {
+		margin-right: 40px;
+	}
+
 	.action-header__actions-list {
 		display: flex;
 		justify-content: flex-end;

diff --git a/client/extensions/woocommerce/store-sidebar/store-ground-control.js b/client/extensions/woocommerce/store-sidebar/store-ground-control.js
@@ -28,10 +28,10 @@ const StoreGroundControl = ( { site, translate } ) => {
 				href={ backLink }
 				aria-label={ translate( 'Go back' ) }
 			>
-				<Gridicon icon="arrow-left" />
+				<Gridicon icon="chevron-left" />
 			</Button>
 			<div className="store-sidebar__ground-control-site">
-				<Site compact site={ site } indicator={ false } homeLink externalLink />
+				<Site site={ site } indicator={ false } homeLink externalLink />
 			</div>
 		</div>
 	);

diff --git a/client/extensions/woocommerce/style.scss b/client/extensions/woocommerce/style.scss
@@ -117,7 +117,6 @@
 
 	.store-sidebar__ground-control {
 		align-items: center;
-		border-bottom: 1px solid darken( $sidebar-bg-color, 10% );
 		background-color: $white;
 		display: flex;
 		width: 100%;
@@ -126,19 +125,60 @@
 	.store-sidebar__ground-control-back {
 		flex: 0 0 auto;
 		margin-left: 7px;
-		margin-right: 7px;
 	}
 
 	.store-sidebar__ground-control-site {
-		border-left: 1px solid darken( $sidebar-bg-color, 10% );
 		display: inline-block;
 		flex-grow: 1;
-		min-height: 46px;
+		max-height: 60px;
+
+		.site__content {
+			padding: 12px;
+			padding-left: 8px;
+		}
+	}
+
+	@include breakpoint( ">660px" ) {
+		margin-top: 47px;
+		padding-top: 4px;
+
+		.store-sidebar__ground-control-site {
+			display: none;
+		}
+
+		.store-sidebar__ground-control {
+			padding-left: 7px;
+			position: fixed;
+			width: 100%;
+			top: 47px;
+			left: 0px;
+			min-height: 46px;
+			z-index: z-index( 'root', '.sticky-panel.is-sticky .sticky-panel__content' );
+			background: $white;
+			border-bottom: 1px solid $gray-lighten-20;
+		}
+	}
+
+	@include breakpoint( "<660px" ) {
+		.site__title {
+			margin-top: 8px;
+		}
+		.site__domain {
+			display: none;
+		}
 	}
 
 	.sidebar__menu {
 		margin-top: 0;
 
+		@include breakpoint( "<660px" ) {
+			border-top: 1px solid darken( $sidebar-bg-color, 10% );
+		}
+
+		@include breakpoint( ">660px" ) {
+			margin-top: -4px;
+		}
+
 		ul {
 			li:first-child {
 				border-top-width: 0;