Add purple border for non-premium users

app/hub/Views/HomeView/HomeView.jsx

@@ -34,7 +34,7 @@ const HomeView = (props) => {
 		enable_metrics,
 		changeMetrics,
 		email,
-		isPlus,
+		isPremium
 	} = props;
 	const accountHref = globals.ACCOUNT_BASE_URL;
 
@@ -61,6 +61,9 @@ const HomeView = (props) => {
 	const setupButtonClassNames = ClassNames('HomeView__featureButton button primary', {
 		hollow: setup_complete,
 	});
+	const upgradeContainerClassNames = ClassNames('HomeView__upgradeContainer row align-center-middle', {
+		'purple-border': !isPremium
+	});
 
 	return (
 		<div className="HomeView row align-center">
@@ -141,14 +144,14 @@ const HomeView = (props) => {
 						</NavLink>
 					</div>
 				</div>
-				<div className="HomeView__upgrade row align-center-middle">
+				<div className={upgradeContainerClassNames}>
 					<div className="HomeView__upgradeIcon" />
 					<div className="HomeView__upgradeText">
 						{t('hub_home_plus_upgrade_text')}
 					</div>
 					<div className="HomeView__buttonContainer columns flex-container">
 						<NavLink to="/upgrade" className="HomeView__featureButton button primary">
-							{isPlus ? t('hub_home_plus_full_protection') : t('hub_home_plus_upgrade_button_text')}
+							{isPremium ? t('hub_home_plus_full_protection') : t('hub_home_plus_upgrade_button_text')}
 						</NavLink>
 					</div>
 
@@ -166,7 +169,7 @@ HomeView.propTypes = {
 	enable_metrics: PropTypes.bool.isRequired,
 	changeMetrics: PropTypes.func.isRequired,
 	email: PropTypes.string.isRequired,
-	isPlus: PropTypes.bool.isRequired,
+	isPremium: PropTypes.bool.isRequired,
 };
 
 export default HomeView;

app/hub/Views/HomeView/HomeView.scss

@@ -73,14 +73,17 @@
 	padding: 0;
 	background-color: #979797;
 }
-.HomeView__upgrade {
+.HomeView__upgradeContainer {
 	display: flex;
 	margin-top: 22px;
 	padding: 22px 12px;
 	background-color: #f0f3f4;
-	box-shadow: 0 0 8px 5px #920094;
-	border: solid 1.6px #920094;
 	border-radius: 4px;
+
+	&.purple-border {
+		box-shadow: 0 0 8px 5px #920094;
+		border: solid 1.6px #920094;
+	}
 }
 .HomeView__upgradeIcon {
 	background-image: upgradeShieldIcon(#DAF4FF, #4a4a4a);
@@ -150,7 +153,7 @@
 	.HomeView__onboardingFeature.feature-setup-complete {
 		margin: 35px 0 15px;
 	}
-	.HomeView__upgrade {
+	.HomeView__upgradeContainer {
 		flex-direction: column;
 	}
 	.HomeView__upgradeIcon {

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -121,22 +121,22 @@ class HomeViewContainer extends Component {
 			enable_metrics,
 			changeMetrics: this._handleToggleMetrics,
 			email: user ? user.email : '',
-			isPlus,
+			isPremium,
 		};
 
 		const showPromoModal = !premium_promo_modal_shown && !isPremium;
 
 		return (
 			<div className="full-height">
-				{/* <PromoModal
+				<PromoModal
 					type={PREMIUM}
 					show={showPromoModal}
 					isPlus={isPlus}
 					location="hub"
 					handleKeepBasicClick={this._handleKeepBasicClick}
 					handleGetPlusClick={this._handleGetPlusClick}
 					handleTryMidnightClick={this._handleTryMidnightClick}
-				/> */}
+				/>
 				<HomeView {...childProps} />
 			</div>
 		);