Tweak gold plus icon expanded view SVG to make sure Plus is more cent…

…ered, with Vinnie's approval. Refactor Header#render for clarity

app/images/panel/gold-plus-icon-expanded-view.svg

@@ -1,15 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="27" height="28" viewBox="0 0 27 28">
-    <defs>
-        <linearGradient id="a" x1="0%" y1="0%" y2="100%">
-            <stop offset="0%" stop-color="#DEC852"/>
-            <stop offset="100%" stop-color="#BA9829"/>
-        </linearGradient>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <g fill="url(#a)" fill-rule="nonzero">
-            <path d="M13.5 4.748C8.362 4.748 4.18 8.898 4.18 14c0 5.1 4.182 9.249 9.318 9.249 5.14 0 9.318-4.15 9.318-9.249 0-5.103-4.179-9.252-9.318-9.252z"/>
-            <path d="M26.681 9.746c-.432-1.325-2.19-1.99-2.997-3.092-.816-1.114-.918-2.975-2.037-3.788-1.11-.802-2.922-.325-4.257-.754-1.287-.417-2.463-1.87-3.89-1.87-1.426 0-2.605 1.453-3.889 1.87-1.335.429-3.147-.048-4.257.754-1.122.812-1.22 2.674-2.037 3.788C2.51 7.757.75 8.421.317 9.746-.1 11.024.914 12.582.914 14c0 1.415-1.014 2.973-.597 4.25.432 1.326 2.193 1.99 3 3.096.816 1.11.915 2.976 2.037 3.786 1.11.801 2.922.324 4.257.756 1.284.414 2.463 1.871 3.888 1.871 1.428 0 2.604-1.457 3.891-1.87 1.335-.433 3.147.044 4.257-.757 1.12-.81 1.221-2.675 2.037-3.79.807-1.101 2.565-1.766 2.997-3.091.42-1.278-.597-2.836-.597-4.251 0-1.418 1.017-2.976.597-4.254zM13.5 23.88c-5.496 0-9.954-4.423-9.954-9.88 0-5.46 4.458-9.883 9.954-9.883 5.5 0 9.954 4.423 9.954 9.883 0 5.457-4.455 9.88-9.954 9.88z"/>
-        </g>
-        <path fill="#FFF" d="M8.701 11.92c-.365-.04-.57-.212-.677-.424-.054-.11-.033-.17.107-.18.893-.092 1.7-.515 2.43-.545.55-.02 1.022.14 1.28.836.226.605.044 1.19-.322 1.724-.538.786-1.7 1.542-3.108 1.793-.248.04-.484 0-.667-.1-.301.554-.624 1.22-1 2.056-.043.1-.097.1-.172.03-.15-.151-.258-.454-.097-.998.28-.917 1.29-2.812 2.226-4.192zm4.507 4.269c.021-.155.062-.315.118-.47.236-.665.785-1.653 1.484-2.57.086-.11.193-.1.28-.01.236.333.182.786-.205 1.36-.398.595-.613.998-.839 1.482-.226.494-.193.857.054.877.42.03 1.01-.675 1.592-1.552.677-1.028.99-1.723 1.333-2.157.108-.14.183-.161.27-.06.16.181.246.625-.012 1.128-.236.454-.774 1.21-1.021 1.724-.28.574-.237.998.15.977.34-.015.735-.396 1.089-.884-.065-.378.025-.777.288-.98.129-.1.215-.06.226.1.01.081.01.162.021.243.441-.565.925-1.22 1.237-1.734.054-.393.161-.584.387-.776.237-.201.484-.242.58-.151.108.1.055.212-.085.443-.043.06-.075.121-.118.192-.076.927.129 1.713.096 2.409-.021.393-.096.816-.484 1.058.72-.252 1.173-.857 1.441-1.401.054-.11.162-.08.205 0 .043.09.032.353-.15.665-.41.695-1.14 1.078-1.904 1.109-.606.02-1.192-.123-1.56-.704-.351.408-.868.724-1.366.724-.699 0-.978-.413-.892-.998-.377.474-.947.988-1.549.947-.356-.023-.55-.198-.633-.445-.324.247-.74.456-1.174.445-.742-.02-1.14-.504-.892-1.592.398-1.753 1.624-3.578 2.72-4.646.162-.161.313-.181.463-.05.312.262.377.635.247 1.108-.333 1.24-1.537 2.45-2.495 3.034-.43.987-.548 1.824-.064 1.864.34.027.78-.278 1.162-.71zm-5.152-1.73c.323-.564.624-1.028.903-1.491.301-.484.409-.837.409-1.109.71-.191 1.785-.715 2.011-.161.29.705-.914 2.338-3.323 2.761zm4.248.141c1.473-1.118 2.076-2.73 1.936-2.811-.14-.08-.936 1.038-1.678 2.328a5.283 5.283 0 0 0-.258.483zm6.947-.292c-.311.534-.71 1.089-1.118 1.633.161.584.473.998.828.897.495-.141.333-1.724.29-2.53z"/>
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="27" height="28" viewBox="0 0 27 28" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="a" x1="0" y1="0" y2="1" x2="1">
+      <stop offset="0" stop-color="#DEC852"/>
+      <stop offset="1" stop-color="#BA9829"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <g fill="url(#a)" fill-rule="nonzero">
+      <path d="M13.5 4.748C8.362 4.748 4.18 8.898 4.18 14c0 5.1 4.182 9.249 9.318 9.249 5.14 0 9.318-4.15 9.318-9.249 0-5.103-4.179-9.252-9.318-9.252z"/>
+      <path d="M26.681 9.746c-.432-1.325-2.19-1.99-2.997-3.092-.816-1.114-.918-2.975-2.037-3.788-1.11-.802-2.922-.325-4.257-.754-1.287-.417-2.463-1.87-3.89-1.87-1.426 0-2.605 1.453-3.889 1.87-1.335.429-3.147-.048-4.257.754-1.122.812-1.22 2.674-2.037 3.788C2.51 7.757.75 8.421.317 9.746-.1 11.024.914 12.582.914 14c0 1.415-1.014 2.973-.597 4.25.432 1.326 2.193 1.99 3 3.096.816 1.11.915 2.976 2.037 3.786 1.11.801 2.922.324 4.257.756 1.284.414 2.463 1.871 3.888 1.871 1.428 0 2.604-1.457 3.891-1.87 1.335-.433 3.147.044 4.257-.757 1.12-.81 1.221-2.675 2.037-3.79.807-1.101 2.565-1.766 2.997-3.091.42-1.278-.597-2.836-.597-4.251 0-1.418 1.017-2.976.597-4.254zM13.5 23.88c-5.496 0-9.954-4.423-9.954-9.88 0-5.46 4.458-9.883 9.954-9.883 5.5 0 9.954 4.423 9.954 9.883 0 5.457-4.455 9.88-9.954 9.88z"/>
     </g>
-</svg>
+    <path fill="#FFF" d="M 8.177 11.443 C 7.812 11.403 7.607 11.231 7.5 11.019 C 7.446 10.909 7.467 10.849 7.607 10.839 C 8.5 10.747 9.307 10.324 10.037 10.294 C 10.587 10.274 11.059 10.434 11.317 11.13 C 11.543 11.735 11.361 12.32 10.995 12.854 C 10.457 13.64 9.295 14.396 7.887 14.647 C 7.639 14.687 7.403 14.647 7.22 14.547 C 6.919 15.101 6.596 15.767 6.22 16.603 C 6.177 16.703 6.123 16.703 6.048 16.633 C 5.898 16.482 5.79 16.179 5.951 15.635 C 6.231 14.718 7.241 12.823 8.177 11.443 Z M 12.684 15.712 C 12.705 15.557 12.746 15.397 12.802 15.242 C 13.038 14.577 13.587 13.589 14.286 12.672 C 14.372 12.562 14.479 12.572 14.566 12.662 C 14.802 12.995 14.748 13.448 14.361 14.022 C 13.963 14.617 13.748 15.02 13.522 15.504 C 13.296 15.998 13.329 16.361 13.576 16.381 C 13.996 16.411 14.586 15.706 15.168 14.829 C 15.845 13.801 16.158 13.106 16.501 12.672 C 16.609 12.532 16.684 12.511 16.771 12.612 C 16.931 12.793 17.017 13.237 16.759 13.74 C 16.523 14.194 15.985 14.95 15.738 15.464 C 15.458 16.038 15.501 16.462 15.888 16.441 C 16.228 16.426 16.623 16.045 16.977 15.557 C 16.912 15.179 17.002 14.78 17.265 14.577 C 17.394 14.477 17.48 14.517 17.491 14.677 C 17.501 14.758 17.501 14.839 17.512 14.92 C 17.953 14.355 18.437 13.7 18.749 13.186 C 18.803 12.793 18.91 12.602 19.136 12.41 C 19.373 12.209 19.62 12.168 19.716 12.259 C 19.824 12.359 19.771 12.471 19.631 12.702 C 19.588 12.762 19.556 12.823 19.513 12.894 C 19.437 13.821 19.642 14.607 19.609 15.303 C 19.588 15.696 19.513 16.119 19.125 16.361 C 19.845 16.109 20.298 15.504 20.566 14.96 C 20.62 14.85 20.728 14.88 20.771 14.96 C 20.814 15.05 20.803 15.313 20.621 15.625 C 20.211 16.32 19.481 16.703 18.717 16.734 C 18.111 16.754 17.525 16.611 17.157 16.03 C 16.806 16.438 16.289 16.754 15.791 16.754 C 15.092 16.754 14.813 16.341 14.899 15.756 C 14.522 16.23 13.952 16.744 13.35 16.703 C 12.994 16.68 12.8 16.505 12.717 16.258 C 12.393 16.505 11.977 16.714 11.543 16.703 C 10.801 16.683 10.403 16.199 10.651 15.111 C 11.049 13.358 12.275 11.533 13.371 10.465 C 13.533 10.304 13.684 10.284 13.834 10.415 C 14.146 10.677 14.211 11.05 14.081 11.523 C 13.748 12.763 12.544 13.973 11.586 14.557 C 11.156 15.544 11.038 16.381 11.522 16.421 C 11.862 16.448 12.302 16.143 12.684 15.711 Z M 7.532 13.982 C 7.855 13.418 8.156 12.954 8.435 12.491 C 8.736 12.007 8.844 11.654 8.844 11.382 C 9.554 11.191 10.629 10.667 10.855 11.221 C 11.145 11.926 9.941 13.559 7.532 13.982 Z M 11.78 14.123 C 13.253 13.005 13.856 11.393 13.716 11.312 C 13.576 11.232 12.78 12.35 12.038 13.64 C 11.944 13.796 11.857 13.958 11.78 14.123 Z M 18.727 13.831 C 18.416 14.365 18.017 14.92 17.609 15.464 C 17.77 16.048 18.082 16.462 18.437 16.361 C 18.932 16.22 18.77 14.637 18.727 13.831 Z"/>
+  </g>
+</svg>

app/panel/components/Header.jsx

@@ -95,7 +95,7 @@ class Header extends React.Component {
 		});
 	}
 
-	generateLink = () => {
+	generateAccountLogo = () => {
 		const { loggedIn, user } = this.props;
 
 		let text = '';
@@ -177,13 +177,45 @@ class Header extends React.Component {
 			active: is_expert,
 		});
 		const subscriber = user && user.subscriptionsPlus;
-		const rightLink = this.generateLink();
+		const accountLogolink = this.generateAccountLogo();
 		const badgeClasses = ClassNames('columns', 'shrink', {
 			'non-subscriber-badge': !subscriber,
 			'subscriber-badge': subscriber
 		});
 
-		const upgradeBannerOrGoldPlusIcon = (
+		const simpleTab = (
+			<div className={tabSimpleClassNames} onClick={this.clickSimpleTab}>
+				<span className="header-tab-text">
+					{t('panel_header_simple_view')}
+				</span>
+			</div>
+		);
+
+		const detailedTab = (
+			<div className={tabDetailedClassNames} onClick={this.clickDetailedTab}>
+				<span className="header-tab-text">
+					{t('panel_header_detailed_view')}
+				</span>
+			</div>
+		);
+
+		const tabs = (
+			<div className="header-tab-group flex-container align-bottom">
+				{simpleTab}
+				{detailedTab}
+			</div>
+		);
+
+		const backArrowAndGhostieLogo = (
+			<span className="header-logo">
+				<Link to={this.determineBackPath()}>
+					<ReactSVG path="/app/images/panel/header-back-arrow.svg" className={headerArrowClasses} />
+				</Link>
+				<ReactSVG path="/app/images/panel/header-logo-icon.svg" className="logo-icon" />
+			</span>
+		);
+
+		const plusUpgradeBannerOrSubscriberBadgeLogolink = (
 			<div className={badgeClasses} onClick={this.clickUpgradeBannerOrGoldPlusIcon}>
 				{
 					(subscriber && <ReactSVG path="/app/images/panel/gold-plus-icon-expanded-view.svg" />) ||
@@ -192,7 +224,7 @@ class Header extends React.Component {
 			</div>
 		);
 
-		const kebab = (
+		const headerMenuKebab = (
 			<div className="header-kebab shrink columns" onClick={this.toggleDropdown} ref={(node) => { this.kebab = node; }}>
 				<svg width="4" height="16" viewBox="0 0 4 16">
 					<g fill="#FFF" fillRule="evenodd">
@@ -202,51 +234,35 @@ class Header extends React.Component {
 			</div>
 		);
 
+		const headerMenu = (
+			<HeaderMenu
+				loggedIn={loggedIn}
+				subscriber={subscriber}
+				email={user && user.email}
+				language={this.props.language}
+				tab_id={this.props.tab_id}
+				location={location}
+				history={this.props.history}
+				actions={this.props.actions}
+				toggleDropdown={this.toggleDropdown}
+				kebab={this.kebab}
+			/>
+		);
+
 		return (
 			<header id="ghostery-header">
-				{ showTabs && (
-					<div className="header-tab-group flex-container align-bottom">
-						<div className={tabSimpleClassNames} onClick={this.clickSimpleTab}>
-							<span className="header-tab-text">
-								{t('panel_header_simple_view')}
-							</span>
-						</div>
-						<div className={tabDetailedClassNames} onClick={this.clickDetailedTab}>
-							<span className="header-tab-text">
-								{t('panel_header_detailed_view')}
-							</span>
-						</div>
-					</div>
-				)}
+				{ showTabs && tabs }
 				<div className="top-bar">
-					<span className="header-logo">
-						<Link to={this.determineBackPath()}>
-							<ReactSVG path="/app/images/panel/header-back-arrow.svg" className={headerArrowClasses} />
-						</Link>
-						<ReactSVG path="/app/images/panel/header-logo-icon.svg" className="logo-icon" />
-					</span>
+					{ backArrowAndGhostieLogo }
 					<div>
 						<div className="row align-middle collapse">
 							<div className="columns shrink">
-								{rightLink}
+								{accountLogolink}
 							</div>
-							{(is_expert && is_expanded) && upgradeBannerOrGoldPlusIcon }
-							{kebab}
+							{(is_expert && is_expanded) && plusUpgradeBannerOrSubscriberBadgeLogolink }
+							{headerMenuKebab}
 						</div>
-						{ this.state.dropdownOpen &&
-							<HeaderMenu
-								loggedIn={loggedIn}
-								subscriber={subscriber}
-								email={user && user.email}
-								language={this.props.language}
-								tab_id={this.props.tab_id}
-								location={location}
-								history={this.props.history}
-								actions={this.props.actions}
-								toggleDropdown={this.toggleDropdown}
-								kebab={this.kebab}
-							/>
-						}
+						{ this.state.dropdownOpen && headerMenu }
 					</div>
 				</div>
 			</header>