Show premium subscribers a premium badge in simple/detailed views, he…

…ader, and settings panel

_locales/en/messages.json

@@ -2207,6 +2207,9 @@
 	"ghostery_plus": {
 		"message": "Ghostery Plus"
 	},
+	"ghostery_premium": {
+		"message": "Ghostery Premium"
+	},
 	"dollar_sign": {
 		"message": "$"
 	},

app/images/panel/premium-badge-icon-expanded-view.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="28"><defs><linearGradient id="a" x1="18.685%" x2="90.162%" y1="17.559%" y2="90.625%"><stop offset="0%" stop-color="#D4AF37"/><stop offset="100%" stop-color="#920094"/></linearGradient><linearGradient id="b" x1="18.685%" x2="90.162%" y1="13.852%" y2="95.268%"><stop offset="0%" stop-color="#D4AF37"/><stop offset="100%" stop-color="#920094"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" d="M14.737 0l1.455 1.716L18.016.348l1.013 1.977 2.102-.953.519 2.14 2.275-.488v2.194h2.334l-.52 2.14 2.275.488-1.012 1.978 2.102.952-1.454 1.715 1.824 1.369-1.824 1.368 1.454 1.716-2.102.952 1.012 1.977-2.275.488.52 2.14h-2.334v2.195l-2.275-.489-.519 2.14-2.102-.952-1.013 1.977-1.824-1.368-1.455 1.715-1.455-1.715-1.824 1.368-1.013-1.977-2.102.952-.519-2.14-2.275.489v-2.195H3.215l.519-2.14-2.275-.488 1.013-1.977-2.102-.952 1.454-1.716L0 13.86l1.824-1.369L.37 10.776l2.102-.952-1.013-1.978 2.275-.488-.519-2.14h2.334V3.024l2.275.488.519-2.14 2.102.953L11.458.348l1.824 1.368z"/><path fill="url(#b)" fill-rule="nonzero" stroke="#FFF" stroke-width=".75" d="M14.454 23.764c-5.496 0-9.954-4.424-9.954-9.88C4.5 8.423 8.958 4 14.454 4c5.499 0 9.954 4.423 9.954 9.883 0 5.457-4.455 9.88-9.954 9.88z"/><path d="M15.013 15.997c-1.781-.002-3.224-1.565-3.226-3.494 0-.113-.084-.203-.187-.203s-.187.09-.187.203c-.003 1.929-1.445 3.492-3.226 3.494-.104 0-.187.091-.187.203 0 .112.084.203.187.203 1.781.002 3.224 1.565 3.226 3.494 0 .112.084.203.187.203s.187-.09.187-.203c.002-1.929 1.445-3.492 3.226-3.494.104 0 .187-.091.187-.203 0-.112-.084-.203-.187-.203zm6.662-2.337c-1.187-.002-2.149-1.084-2.15-2.42 0-.078-.056-.14-.125-.14s-.125.063-.125.14c-.001 1.336-.963 2.418-2.15 2.42-.07 0-.125.063-.125.14 0 .078.056.14.125.14 1.187.002 2.149 1.084 2.15 2.42 0 .078.056.14.125.14s.125-.063.125-.14c.001-1.336.963-2.418 2.15-2.42.07 0 .125-.063.125-.14 0-.078-.056-.14-.125-.14zm-4.753-4.738a1.346 1.346 0 01-1.344-1.344.078.078 0 00-.156 0 1.346 1.346 0 01-1.344 1.344.078.078 0 000 .156 1.346 1.346 0 011.344 1.344.078.078 0 00.156 0 1.346 1.346 0 011.344-1.344.078.078 0 000-.156z" fill="#FFF" fill-rule="nonzero"/></g></svg>

app/images/panel/premium-badge-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="35"><defs><linearGradient id="a" x1="18.685%" x2="90.162%" y1="17.559%" y2="90.625%"><stop offset="0%" stop-color="#D4AF37"/><stop offset="100%" stop-color="#920094"/></linearGradient><linearGradient id="b" x1="18.685%" x2="90.162%" y1="13.852%" y2="95.268%"><stop offset="0%" stop-color="#D4AF37"/><stop offset="100%" stop-color="#920094"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" d="M18.421 0l1.819 2.145 2.28-1.71 1.266 2.471 2.628-1.19.649 2.674 2.843-.61v2.743h2.918l-.65 2.674 2.844.611-1.265 2.471 2.627 1.191-1.818 2.144 2.28 1.711-2.28 1.71 1.818 2.145-2.627 1.19 1.265 2.472-2.844.61.65 2.674h-2.918v2.744l-2.843-.611-.649 2.675-2.628-1.191-1.266 2.472-2.28-1.71-1.819 2.144-1.819-2.144-2.28 1.71-1.265-2.472-2.629 1.191-.648-2.675-2.844.611v-2.744H4.019l.649-2.674-2.844-.61L3.09 22.37.462 21.18l1.818-2.145L0 17.325l2.28-1.711L.462 13.47l2.628-1.191-1.266-2.471 2.844-.611-.649-2.674h2.917V3.78l2.844.61.648-2.674 2.629 1.19L14.322.435l2.28 1.71z"/><path fill="url(#b)" fill-rule="nonzero" stroke="#FFF" stroke-width=".938" d="M18.067 29.705c-6.87 0-12.442-5.53-12.442-12.35C5.625 10.528 11.197 5 18.067 5c6.874 0 12.443 5.53 12.443 12.354 0 6.822-5.569 12.35-12.443 12.35z"/><path d="M18.766 19.996c-2.226-.002-4.03-1.956-4.032-4.368 0-.14-.105-.253-.234-.253s-.234.113-.234.253c-.002 2.412-1.806 4.366-4.032 4.369-.13 0-.234.114-.234.254s.105.254.234.254c2.226.002 4.03 1.956 4.032 4.367 0 .14.105.254.234.254s.234-.113.234-.254c.002-2.41 1.806-4.364 4.032-4.367.13 0 .234-.114.234-.254s-.105-.254-.234-.254zm8.328-2.921c-1.484-.001-2.687-1.354-2.688-3.023 0-.098-.07-.176-.156-.176s-.156.079-.156.176c-.002 1.669-1.204 3.022-2.688 3.023-.086 0-.156.08-.156.176 0 .098.07.175.156.175 1.484.002 2.686 1.355 2.688 3.024 0 .098.07.176.156.176s.156-.079.156-.175c.002-1.67 1.204-3.023 2.688-3.024.086 0 .156-.08.156-.176 0-.098-.07-.176-.156-.176zm-5.942-5.921a1.684 1.684 0 01-1.68-1.68.095.095 0 00-.096-.099.098.098 0 00-.098.098c0 .927-.752 1.678-1.68 1.68a.097.097 0 10.001.194 1.684 1.684 0 011.68 1.68.097.097 0 10.195 0c0-.927.752-1.678 1.68-1.68a.097.097 0 10-.001-.194z" fill="#FFF" fill-rule="nonzero"/></g></svg>

app/panel/components/Header.jsx

@@ -149,8 +149,8 @@ class Header extends React.Component {
 		// TODO check whether this is the message we want to be sending now
 		sendMessage('ping', 'plus_panel_from_badge');
 		const { user } = this.props;
-		const subscriber = user && user.subscriptionsPlus;
-		this.props.history.push(subscriber ? '/subscription/info' : `/subscribe/${!!user}`);
+		const plusSubscriber = user && user.subscriptionsPlus;
+		this.props.history.push(plusSubscriber ? '/subscription/info' : `/subscribe/${!!user}`);
 	}
 
 	/**
@@ -176,11 +176,12 @@ class Header extends React.Component {
 		const tabDetailedClassNames = ClassNames('header-tab', {
 			active: is_expert,
 		});
-		const subscriber = user && user.subscriptionsPlus;
+		const premiumSubscriber = user && user.scopes && user.scopes.includes('subscriptions:premium');
+		const plusSubscriber = user && user.subscriptionsPlus;
 		const accountLogolink = this.generateAccountLogo();
 		const badgeClasses = ClassNames('columns', 'shrink', {
-			'non-subscriber-badge': !subscriber,
-			'gold-subscriber-badge': subscriber
+			'non-subscriber-badge': !(plusSubscriber || premiumSubscriber),
+			'gold-subscriber-badge': plusSubscriber || premiumSubscriber
 		});
 
 		const simpleTab = (
@@ -215,11 +216,17 @@ class Header extends React.Component {
 			</span>
 		);
 
-		const plusUpgradeBannerOrSubscriberBadgeLogolink = (
+		let subscriberType;
+		if (premiumSubscriber) {
+			subscriberType = 'premium';
+		} else if (plusSubscriber) {
+			subscriberType = 'plus';
+		}
+		const upgradeBannerOrSubscriberBadgeLogolink = (
 			<div className={badgeClasses} onClick={this.clickUpgradeBannerOrGoldPlusIcon}>
 				{
-					(subscriber && <ReactSVG src="/app/images/panel/gold-plus-icon-expanded-view.svg" />) ||
-					<ReactSVG src="/app/images/panel/green-upgrade-banner-expanded-view.svg" />
+					((premiumSubscriber || plusSubscriber) && <ReactSVG src={`/app/images/panel/${subscriberType}-badge-icon-expanded-view.svg`} />)
+					|| <ReactSVG src="/app/images/panel/green-upgrade-banner-expanded-view.svg" />
 				}
 			</div>
 		);
@@ -237,7 +244,7 @@ class Header extends React.Component {
 		const headerMenu = (
 			<HeaderMenu
 				loggedIn={loggedIn}
-				subscriber={subscriber}
+				subscriberType={subscriberType}
 				email={user && user.email}
 				language={this.props.language}
 				tab_id={this.props.tab_id}
@@ -259,7 +266,7 @@ class Header extends React.Component {
 							<div className="columns shrink">
 								{accountLogolink}
 							</div>
-							{((is_expert && is_expanded) || !showTabs) && plusUpgradeBannerOrSubscriberBadgeLogolink }
+							{((is_expert && is_expanded) || !showTabs) && upgradeBannerOrSubscriberBadgeLogolink }
 							{headerMenuKebab}
 						</div>
 						{ this.state.dropdownOpen && headerMenu }

app/panel/components/HeaderMenu.jsx

@@ -154,17 +154,21 @@ class HeaderMenu extends React.Component {
 	clickSubscriber = () => {
 		sendMessage('ping', 'plus_panel_from_menu');
 		this.props.toggleDropdown();
-		this.props.history.push(this.props.subscriber ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`);
+		this.props.history.push(this.props.subscriberType ? '/subscription/info' : `/subscribe/${this.props.loggedIn}`);
 	}
 
 	/**
 	 * Render drop-down menu.
 	 * @return {ReactComponent}   ReactComponent instance
 	 */
 	render() {
-		const { loggedIn, email } = this.props;
-		const optionClasses = ClassNames({ 'menu-option': this.props.subscriber, 'menu-option-non-subscriber': !this.props.subscriber });
-		const iconClasses = ClassNames('menu-icon-container', { subscriber: this.props.subscriber }, { 'non-subscriber': !this.props.subscriber });
+		const { loggedIn, email, subscriberType } = this.props;
+		const optionClasses = ClassNames({ 'menu-option': this.props.subscriberType, 'menu-option-non-subscriber': !this.props.subscriberType });
+		const iconClasses = ClassNames('menu-icon-container', {
+			premiumSubscriber: subscriberType === 'premium',
+			plusSubscriber: subscriberType === 'plus',
+			'non-subscriber': !subscriberType
+		});
 		return (
 			<ClickOutside onClickOutside={this.handleClickOutside} excludeEl={this.props.kebab}>
 				<div className="dropdown-pane" id="header-dropdown">
@@ -230,13 +234,27 @@ class HeaderMenu extends React.Component {
 						</li>
 						<li className={optionClasses} onClick={this.clickSubscriber}>
 							<div>
-								<svg className={iconClasses} width="84" height="77" viewBox="0 0 84 77">
-									<g className="about-icon" fill="none">
-										<path d="M79.858 74.75L43.1 57.9c-.579-.315-1.447-.315-2.026 0L4.604 74.75c-.867.472-2.604 0-2.604-.63V2.786C2 2.315 2.579 2 3.447 2h76.99c.868 0 1.447.315 1.447.787V74.12c.58.63-1.157 1.103-2.026.63z" />
-										<path className="text" d="M47.156 37.256c-1.186 1.592-2.981 3.32-4.879 3.184-2.405-.169-2.473-2.676-1.728-4.912.746-2.237 2.474-5.557 4.676-8.64.271-.373.61-.34.88-.034.746 1.118.577 2.642-.643 4.574-1.254 1.999-1.931 3.354-2.643 4.98-.711 1.66-.61 2.88.17 2.948 1.321.102 3.185-2.27 5.014-5.218 2.135-3.456 3.117-5.794 4.202-7.25.339-.475.576-.543.847-.204.508.61.78 2.1-.034 3.795-.746 1.525-2.44 4.066-3.219 5.794-.88 1.931-.745 3.354.474 3.287 1.423-.068 3.151-2.304 4.473-4.676.17-.305.474-.34.61-.034.135.27.17 1.186-.305 2.134-.983 1.898-3.083 3.626-5.083 3.626-2.202 0-3.083-1.39-2.812-3.354z M25.98 22.754c-1.152-.136-1.796-.712-2.135-1.423-.17-.373-.101-.576.339-.61 2.812-.305 5.353-1.728 7.657-1.83 1.728-.067 3.22.475 4.032 2.813.712 2.032.136 3.998-1.016 5.793-1.694 2.643-5.353 5.184-9.792 6.031-.78.136-1.525 0-2.1-.338-.95 1.863-1.966 4.1-3.152 6.912-.135.338-.305.338-.542.101-.474-.508-.813-1.524-.305-3.354.881-3.083 4.066-9.453 7.014-14.095zm-2.033 8.538c7.59-1.423 11.384-6.912 10.47-9.284-.712-1.863-4.1-.101-6.337.543 0 .914-.338 2.1-1.287 3.727-.881 1.558-1.83 3.117-2.846 5.014zm12.773 1.932c-1.355 3.32-1.728 6.132-.203 6.268 1.627.135 3.998-2.304 5.32-4.913.237-.44.61-.475.745 0 .17.542.034 1.287-.339 2.1-.474 1.017-2.947 3.83-5.658 3.761-2.338-.067-3.592-1.694-2.812-5.353 1.253-5.895 5.116-12.028 8.572-15.62.508-.542.983-.61 1.457-.17.982.882 1.186 2.135.78 3.728-1.051 4.167-4.846 8.233-7.862 10.199zm.61-1.457c4.642-3.761 6.54-9.183 6.1-9.454-.441-.27-2.949 3.49-5.286 7.827a18.192 18.192 0 0 0-.814 1.627zm18.06 2.676c1.389-1.897 2.914-4.1 3.896-5.827.17-1.322.508-1.966 1.22-2.61.745-.677 1.525-.813 1.83-.508.338.34.169.712-.272 1.491-.135.203-.237.407-.372.644-.237 3.117.406 5.76.305 8.098-.068 1.321-.305 2.744-1.525 3.557 2.27-.847 3.693-2.88 4.54-4.71.17-.372.508-.27.644 0 .136.306.102 1.187-.474 2.237a7.139 7.139 0 0 1-5.998 3.727c-1.965.068-3.862-.44-5.014-2.541-.813-1.525-.712-3.761.44-4.71.407-.339.678-.203.712.34.034.27.034.541.068.812zm3.828-3.659c-.982 1.796-2.236 3.66-3.523 5.489.508 1.965 1.49 3.354 2.609 3.015 1.558-.474 1.05-5.793.914-8.504z" />
-									</g>
-								</svg>
-								<span>{ t('ghostery_plus') }</span>
+								{/* Upselling plus for users who are not logged in */}
+								{subscriberType !== 'premium' && (
+									<svg className={iconClasses} width="84" height="77" viewBox="0 0 84 77">
+										<g className="about-icon" fill="none">
+											<path d="M79.858 74.75L43.1 57.9c-.579-.315-1.447-.315-2.026 0L4.604 74.75c-.867.472-2.604 0-2.604-.63V2.786C2 2.315 2.579 2 3.447 2h76.99c.868 0 1.447.315 1.447.787V74.12c.58.63-1.157 1.103-2.026.63z" />
+											<path className="text" d="M47.156 37.256c-1.186 1.592-2.981 3.32-4.879 3.184-2.405-.169-2.473-2.676-1.728-4.912.746-2.237 2.474-5.557 4.676-8.64.271-.373.61-.34.88-.034.746 1.118.577 2.642-.643 4.574-1.254 1.999-1.931 3.354-2.643 4.98-.711 1.66-.61 2.88.17 2.948 1.321.102 3.185-2.27 5.014-5.218 2.135-3.456 3.117-5.794 4.202-7.25.339-.475.576-.543.847-.204.508.61.78 2.1-.034 3.795-.746 1.525-2.44 4.066-3.219 5.794-.88 1.931-.745 3.354.474 3.287 1.423-.068 3.151-2.304 4.473-4.676.17-.305.474-.34.61-.034.135.27.17 1.186-.305 2.134-.983 1.898-3.083 3.626-5.083 3.626-2.202 0-3.083-1.39-2.812-3.354z M25.98 22.754c-1.152-.136-1.796-.712-2.135-1.423-.17-.373-.101-.576.339-.61 2.812-.305 5.353-1.728 7.657-1.83 1.728-.067 3.22.475 4.032 2.813.712 2.032.136 3.998-1.016 5.793-1.694 2.643-5.353 5.184-9.792 6.031-.78.136-1.525 0-2.1-.338-.95 1.863-1.966 4.1-3.152 6.912-.135.338-.305.338-.542.101-.474-.508-.813-1.524-.305-3.354.881-3.083 4.066-9.453 7.014-14.095zm-2.033 8.538c7.59-1.423 11.384-6.912 10.47-9.284-.712-1.863-4.1-.101-6.337.543 0 .914-.338 2.1-1.287 3.727-.881 1.558-1.83 3.117-2.846 5.014zm12.773 1.932c-1.355 3.32-1.728 6.132-.203 6.268 1.627.135 3.998-2.304 5.32-4.913.237-.44.61-.475.745 0 .17.542.034 1.287-.339 2.1-.474 1.017-2.947 3.83-5.658 3.761-2.338-.067-3.592-1.694-2.812-5.353 1.253-5.895 5.116-12.028 8.572-15.62.508-.542.983-.61 1.457-.17.982.882 1.186 2.135.78 3.728-1.051 4.167-4.846 8.233-7.862 10.199zm.61-1.457c4.642-3.761 6.54-9.183 6.1-9.454-.441-.27-2.949 3.49-5.286 7.827a18.192 18.192 0 0 0-.814 1.627zm18.06 2.676c1.389-1.897 2.914-4.1 3.896-5.827.17-1.322.508-1.966 1.22-2.61.745-.677 1.525-.813 1.83-.508.338.34.169.712-.272 1.491-.135.203-.237.407-.372.644-.237 3.117.406 5.76.305 8.098-.068 1.321-.305 2.744-1.525 3.557 2.27-.847 3.693-2.88 4.54-4.71.17-.372.508-.27.644 0 .136.306.102 1.187-.474 2.237a7.139 7.139 0 0 1-5.998 3.727c-1.965.068-3.862-.44-5.014-2.541-.813-1.525-.712-3.761.44-4.71.407-.339.678-.203.712.34.034.27.034.541.068.812zm3.828-3.659c-.982 1.796-2.236 3.66-3.523 5.489.508 1.965 1.49 3.354 2.609 3.015 1.558-.474 1.05-5.793.914-8.504z" />
+										</g>
+									</svg>
+								)}
+								{subscriberType === 'premium' && (
+									<svg className={iconClasses} width="27" height="25" viewBox="0 0 27 25">
+										<g fill="none" fillRule="evenodd">
+											<g fill="#DEDEDE">
+												<path d="M13.263 0L14.573 1.544 16.214 0.313 17.126 2.092 19.018 1.235 19.485 3.161 21.533 2.721 21.533 4.697 23.633 4.697 23.165 6.622 25.213 7.061 24.302 8.841 26.194 9.698 24.885 11.242 26.526 12.474 24.885 13.705 26.194 15.249 24.302 16.106 25.213 17.886 23.165 18.325 23.633 20.251 21.533 20.251 21.533 22.226 19.485 21.787 19.018 23.712 17.126 22.855 16.214 24.635 14.573 23.403 13.263 24.947 11.954 23.403 10.312 24.635 9.401 22.855 7.508 23.712 7.041 21.787 4.994 22.226 4.994 20.251 2.894 20.251 3.361 18.325 1.313 17.886 2.225 16.106 0.333 15.249 1.642 13.705 0 12.474 1.642 11.242 0.333 9.698 2.225 8.841 1.313 7.061 3.361 6.622 2.894 4.697 4.994 4.697 4.994 2.721 7.041 3.161 7.508 1.235 9.401 2.092 10.312 0.313 11.954 1.544z" />
+												<path fillRule="nonzero" stroke="#4A4A4A" strokeWidth=".675" d="M13.009 21.387c-4.947 0-8.959-3.98-8.959-8.892 0-4.914 4.012-8.895 8.959-8.895 4.949 0 8.958 3.981 8.958 8.895 0 4.911-4.01 8.892-8.958 8.892z" />
+											</g>
+											<path fill="#4A4A4A" fillRule="nonzero" d="M13.512 14.397c-1.603-.001-2.902-1.408-2.904-3.144 0-.102-.075-.183-.168-.183-.093 0-.168.082-.168.183-.002 1.736-1.3 3.142-2.904 3.144-.093 0-.168.083-.168.183 0 .1.076.183.168.183 1.603.001 2.902 1.408 2.904 3.144 0 .101.075.183.168.183.093 0 .168-.082.168-.183.002-1.736 1.3-3.142 2.904-3.144.093 0 .168-.083.168-.183 0-.1-.076-.183-.168-.183zm5.996-2.103c-1.069-.001-1.935-.976-1.936-2.178 0-.07-.05-.126-.112-.126s-.112.057-.112.126c-.001 1.202-.867 2.177-1.936 2.178-.062 0-.112.056-.112.126s.05.126.112.126c1.069.001 1.935.976 1.936 2.178 0 .07.05.126.112.126s.112-.057.112-.126c.001-1.202.867-2.177 1.936-2.178.062 0 .112-.056.112-.126s-.05-.126-.112-.126zM15.23 8.03c-.668-.001-1.209-.542-1.21-1.21 0-.039-.031-.07-.07-.07-.039 0-.07.031-.07.07-.001.668-.542 1.209-1.21 1.21-.039 0-.07.031-.07.07 0 .039.031.07.07.07.668.001 1.209.542 1.21 1.21 0 .039.031.07.07.07.039 0 .07-.031.07-.07.001-.668.542-1.209 1.21-1.21.039 0 .07-.031.07-.07 0-.039-.031-.07-.07-.07z" />
+										</g>
+									</svg>
+								)}
+								<span>{subscriberType === 'premium' ? t('ghostery_premium') : t('ghostery_plus')}</span>
 							</div>
 						</li>
 					</ul>

app/panel/components/Summary.jsx

@@ -312,6 +312,11 @@ class Summary extends React.Component {
 		return user && user.subscriptionsPlus;
 	}
 
+	_isPremiumSubscriber() {
+		const { user } = this.props;
+		return user && user.scopes && user.scopes.includes('subscriptions:premium');
+	}
+
 	_pageHost() {
 		return this.props.pageHost || 'page_host';
 	}
@@ -748,23 +753,30 @@ class Summary extends React.Component {
 	_renderPlusUpgradeBannerOrSubscriberIcon() {
 		const { is_expert, current_theme } = this.props;
 
+		const isPremiumSubscriber = this._isPremiumSubscriber();
 		const isPlusSubscriber = this._isPlusSubscriber();
 		const upgradeBannerClassNames = ClassNames('UpgradeBanner', {
 			'UpgradeBanner--normal': !is_expert,
 			'UpgradeBanner--small': is_expert,
 		});
+		let subscriberType;
+		if (isPremiumSubscriber) {
+			subscriberType = 'premium';
+		} else if (isPlusSubscriber) {
+			subscriberType = 'plus';
+		}
 
 		return (
 			<div onClick={this.clickUpgradeBannerOrGoldPlusIcon}>
-				{isPlusSubscriber && (
+				{(isPremiumSubscriber || isPlusSubscriber) && (
 					<div className="Summary__subscriberBadgeContainer">
 						<div className={`SubscriberBadge ${current_theme}`}>
-							<ReactSVG src="/app/images/panel/gold-plus-icon.svg" className="gold-plus-icon" />
+							<ReactSVG src={`/app/images/panel/${subscriberType}-badge-icon.svg`} className="gold-plus-icon" />
 						</div>
 					</div>
 				)}
 
-				{!isPlusSubscriber && (
+				{(!isPremiumSubscriber && !isPlusSubscriber) && (
 					<div className="Summary__upgradeBannerContainer">
 						<div className={upgradeBannerClassNames}>
 							<span className="UpgradeBanner__text">{t('subscription_upgrade_to')}</span>

app/scss/partials/_header.scss

@@ -148,12 +148,15 @@
 
 		.menu-option {
 			@extend .menu-option-base;
-			.subscriber {
+			.plusSubscriber {
 				width: 18px;
 				height: 16px;
 				path {fill: $light-gray;}
 				path.text {fill: #4a4a4a;}
 			}
+			.premiumSubscriber {
+				margin-left: -4px;
+			}
 			&:hover {
 				span {color: $ghosty-blue}
 				.menu-icon {fill: $ghosty-blue; stroke: none;}