Support User: Highlight Masterbar when active

Automattic · Feb 2, 2016 · adea312 · adea312
1 parent 9932ff0
commit adea312
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/client/layout/index.jsx b/client/layout/index.jsx
@@ -94,7 +94,8 @@ Layout = React.createClass( {
 			<MasterbarLoggedIn
 				user={ this.props.user }
 				section={ this.props.section }
-				sites={ this.props.sites } />
+				sites={ this.props.sites }
+				isSupportUser={ config.isEnabled( 'support-user' ) && this.props.isSupportUser } />
 		);
 	},
 
@@ -143,8 +144,10 @@ Layout = React.createClass( {
 export default connect(
 	( state ) => {
 		const { isLoading, section, hasSidebar, chunkName } = state.ui;
+		const isSupportUser = state.support.isSupportUser;
 		return { 
 			isLoading,
+			isSupportUser,
 			section,
 			hasSidebar,
 			chunkName,

diff --git a/client/layout/masterbar/logged-in.jsx b/client/layout/masterbar/logged-in.jsx
@@ -61,7 +61,7 @@ export default React.createClass( {
 
 	render() {
 		return (
-			<Masterbar>
+			<Masterbar className={ this.props.isSupportUser ? 'masterbar__support-user' : null }>
 				<Stats
 					icon={ this.wordpressIcon() }
 					onClick={ this.clickMySites }

diff --git a/client/layout/masterbar/masterbar.jsx b/client/layout/masterbar/masterbar.jsx
@@ -4,9 +4,10 @@
  * External dependencies
  */
 import React from 'react';
+import classNames from 'classnames';
 
-const Masterbar = ( { children } ) => (
-	<header id="header" className="masterbar">
+const Masterbar = ( { children, className } ) => (
+	<header id="header" className={ classNames( 'masterbar', className ) }>
 		{ children }
 	</header>
 );

diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
@@ -188,6 +188,14 @@ $autobar-height: 20px;
 	}
 }
 
+.masterbar__support-user {
+	background-color: $orange-jazzy;
+
+	.masterbar__item.is-active {
+		background-color: darken( $orange-jazzy, 10% );
+	}
+}
+
 @keyframes bubble-unread-indication {
 	30% {
 		transform: scale(1.5);

diff --git a/client/state/support/reducer.js b/client/state/support/reducer.js
@@ -9,6 +9,16 @@ import {
 	SUPPORT_USER_RESTORE,
 } from 'state/action-types';
 
+export function isSupportUser( state = false, action ) {
+	switch ( action.type ) {
+		case SUPPORT_USER_TOKEN_SET:
+			return !! ( action.supportUser && action.supportToken );
+		case SUPPORT_USER_RESTORE:
+			return false;
+	}
+	return state;
+}
+
 export function supportUser( state = '', action ) {
 	switch ( action.type ) {
 		case SUPPORT_USER_TOKEN_SET:
@@ -30,6 +40,7 @@ export function supportToken( state = '', action ) {
 }
 
 export default combineReducers( {
+	isSupportUser,
 	supportUser,
 	supportToken,
 } );