Add and use mixin for button hover backgrounds in the hub

app/hub/Views/HomeView/HomeView.scss

@@ -16,14 +16,9 @@
 	padding-top: 45px;
 	padding-bottom: 25px;
 	color: $tundora;
+	// Foundation Overrides
 	.button {
-		&:not(.hollow):hover {
-			background-color: #0078CA;
-		}
-		&.hollow:hover {
-			color: #0078CA;
-			border-color: #0078CA;
-		}
+		@include button-hover-color-for($ghosty-blue-alt);
 	}
 }
 .HomeView--bolded {

app/hub/Views/SetupViews/SetupDoneView/SetupDoneView.scss

@@ -67,6 +67,10 @@
 }
 .SetupDone__featureButton {
 	margin: 20px 10px 10px;
+	// Foundation Overrides
+	&.button {
+		@include button-hover-color-for($ghosty-blue);
+	}
 }
 @media only screen and (max-width: 840px) {
 	.SetupDone__featureList {

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

@@ -381,6 +381,10 @@ section.home-template .section.section-pricing {
 			text-transform: none;
 			height: 38px;
 			line-height: 22px;
+			// Foundation Overrides
+			&.primary {
+				@include button-hover-color-for($price-blue);
+			}
 			&.already-protected {
 				@include breakpoint($medium-large-breakpoint down) {
 					margin-top: 45px;
@@ -550,10 +554,11 @@ 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;
+		// Foundation Overrides
+		&.primary {
+			@include button-hover-color-for($price-blue);
 		}
 	}
 

app/scss/partials/_hub_mixins.scss

@@ -17,3 +17,25 @@
 	     -o-transition: $transitions;
 	        transition: $transitions;
 }
+
+// Takes in the original button color ($ghosty-blue, $ghosty-blue-alt, $secondary, etc...) and sets a button hover color
+@mixin button-hover-color-for($button-color) {
+	@if $button-color == #1dafed or $button-color == #00AEF0 {
+		&:not(.hollow):hover {
+			background-color: #0078CA;
+		}
+		&.hollow:hover, &.hollow:focus {
+			border-color: #0078CA;
+			color: #0078CA;
+		}
+	} @else {
+		&:not(.hollow):hover, &:not(.hollow):focus {
+			background-color: scale-color($button-color, $lightness: -15%);
+			color: scale-color($button-color, $lightness: -15%);
+		}
+		&:hover, &:focus {
+			border-color: scale-color($button-color, $lightness: -15%);
+			color: scale-color($button-color, $lightness: -15%);
+		}
+	}
+}