Merge pull request #2975 from Automattic/add/support-user/masterbar-h…

…ighlight

Support User: Highlight Masterbar when active

client/layout/index.jsx

@@ -33,6 +33,7 @@ var abtest = require( 'lib/abtest' ).abtest,
 	Layout;
 
 import { isOffline } from 'state/application/selectors';
+import { isSupportUser } from 'state/support/selectors';
 
 if ( config.isEnabled( 'keyboard-shortcuts' ) ) {
 	KeyboardShortcutsMenu = require( 'lib/keyboard-shortcuts/menu' );
@@ -99,7 +100,13 @@ Layout = React.createClass( {
 	},
 
 	render: function() {
-		var sectionClass = 'wp layout is-section-' + this.props.section + ' focus-' + this.props.focus.getCurrent(),
+		var sectionClass = classnames(
+				'wp',
+				'layout',
+				`is-section-${this.props.section}`,
+				`focus-${this.props.focus.getCurrent()}`,
+				{ 'is-support-user': this.props.isSupportUser }
+			),
 			showWelcome = this.props.nuxWelcome.getWelcome(),
 			newestSite = this.newestSite(),
 			translatorInvitation = this.props.translatorInvitation,
@@ -145,6 +152,7 @@ export default connect(
 		const { isLoading, section, hasSidebar, chunkName } = state.ui;
 		return { 
 			isLoading,
+			isSupportUser: isSupportUser( state ),
 			section,
 			hasSidebar,
 			chunkName,

client/layout/masterbar/style.scss

@@ -17,6 +17,11 @@ $autobar-height: 20px;
 	z-index: z-index( 'root', '.masterbar' );
 	-webkit-font-smoothing: subpixel-antialiased;
 
+	.is-support-user & {
+		background: $orange-jazzy;
+		border-bottom: 1px solid darken( $orange-jazzy, 4% );
+	}
+
 	@include breakpoint( ">660px" ) {
 		backface-visibility: hidden;
 	}
@@ -57,6 +62,10 @@ $autobar-height: 20px;
 		background: $blue-dark;
 	}
 
+	.is-support-user &.is-active {
+		background: darken( $orange-jazzy, 10% );
+	}
+
 	@include breakpoint( "<480px" ) {
 		flex: 1 1 auto;
 
@@ -104,6 +113,17 @@ $autobar-height: 20px;
 		display: none;
 	}
 
+	.is-support-user &,
+	.is-support-user &:focus,
+	.is-support-user &:hover,
+	.is-support-user &:visited {
+		color: $orange-jazzy;
+	}
+
+	.is-support-user &.is-active {
+		color: $white;
+	}
+
 	@include breakpoint( ">480px" ) {
 		margin-left: auto;
 	}

client/state/support/selectors.js

@@ -1,3 +1,4 @@
 
 export const getSupportUser = ( state ) => state.support.supportUser;
 export const getSupportToken = ( state ) => state.support.supportToken;
+export const isSupportUser = ( state ) => !! ( getSupportUser( state ) && getSupportToken( state ) );