GH-2105: Sync button hover states in the hub

app/hub/Views/HomeView/HomeView.scss

@@ -16,15 +16,6 @@
 	padding-top: 45px;
 	padding-bottom: 25px;
 	color: $tundora;
-	.button {
-		&:not(.hollow):hover {
-			background-color: #0078CA;
-		}
-		&.hollow:hover {
-			color: #0078CA;
-			border-color: #0078CA;
-		}
-	}
 }
 .HomeView--bolded {
 	font-weight: 700;

app/hub/Views/UpgradePlanView/UpgradePlanView.jsx

@@ -89,7 +89,7 @@ const basicCard = () => (
 			<div className="price">
 				<p className="price-blue-alt font-size-36">{t('hub_upgrade_plan_free')}</p>
 			</div>
-			<NavLink className="button already-protected" to="/home" title="Already Protected">
+			<NavLink className="button primary already-protected" to="/home" title="Already Protected">
 				{t('hub_upgrade_already_protected')}
 			</NavLink>
 			<p className="card-sub-header"><strong>{t('hub_upgrade_basic_protection')}</strong></p>
@@ -405,7 +405,7 @@ const UpgradePlanView = (props) => {
 									<tr>
 										<td />
 										<td className="default">
-											<NavLink className="button already-protected" to="/home" title="Already Protected">
+											<NavLink className="button primary already-protected" to="/home" title="Already Protected">
 												{t('hub_upgrade_already_protected')}
 											</NavLink>
 										</td>
@@ -487,7 +487,7 @@ const UpgradePlanView = (props) => {
 					<div className="row align-center footer-buttons">
 						<div className="small-12 text-center columns">
 							<span className="col-free">
-								<NavLink className="button already-protected" to="/home" title="Already Protected">
+								<NavLink className="button primary already-protected" to="/home" title="Already Protected">
 									{t('hub_upgrade_already_protected')}
 								</NavLink>
 							</span>

app/hub/Views/UpgradePlanView/UpgradePlanView.scss

@@ -550,11 +550,8 @@ section.home-template .section.section-pricing {
 		text-transform: none;
 		white-space: nowrap;
 		font-family: 'Open Sans';
-		background-color: $price-blue;
 		font-weight: 600;
-		&:hover {
-			background-color: $price-blue-hover;
-		}
+		background-color: $price-blue;
 	}
 
 	.button-gold {

app/scss/hub.scss

@@ -11,6 +11,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
+// Import Global Partials
+@import './partials/colors';
+
 html, body, #root {
 	height: 100%;
 	width: 100%;
@@ -41,6 +44,15 @@ html, body, #root {
 	line-height: 1.3;
 	text-transform: uppercase;
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+	&.primary {
+		&:not(.hollow):hover {
+			background-color: $dark-ghosty-blue;
+		}
+		&.hollow:hover, &.hollow:focus {
+			border-color: $dark-ghosty-blue;
+			color: $dark-ghosty-blue;
+		}
+	}
 }
 
 // Helper Classes

app/scss/partials/_colors.scss

@@ -41,6 +41,7 @@ $link-blue:					#2092BF; //primary-color
 $button-primary:			#3AA2CF;
 $dark-cyan-blue: 			#325e97; //insights modal border
 $baby-blue:					#DAF4FF; //plus-upgrade icon
+$dark-ghosty-blue: 			#0078CA; //button primary hover color in the hub
 
 /*  GREENS  */
 $spring-green:				#6aa103;