From 4237441c1fc9c03958781142081f292765142b11 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 22 Sep 2020 01:31:24 -0400 Subject: [PATCH 1/3] Add and use mixin for button hover backgrounds in the hub --- app/hub/Views/HomeView/HomeView.scss | 9 ++------ .../SetupDoneView/SetupDoneView.scss | 4 ++++ .../Views/UpgradePlanView/UpgradePlanView.jsx | 6 ++--- .../UpgradePlanView/UpgradePlanView.scss | 11 +++++++--- app/scss/partials/_hub_mixins.scss | 22 +++++++++++++++++++ 5 files changed, 39 insertions(+), 13 deletions(-) diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index fd556f407..ebaea1880 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/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 { diff --git a/app/hub/Views/SetupViews/SetupDoneView/SetupDoneView.scss b/app/hub/Views/SetupViews/SetupDoneView/SetupDoneView.scss index f0836c739..5bda60f48 100644 --- a/app/hub/Views/SetupViews/SetupDoneView/SetupDoneView.scss +++ b/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 { diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx index 3a3608965..0a226c0c9 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.jsx @@ -89,7 +89,7 @@ const basicCard = () => (

{t('hub_upgrade_plan_free')}

- + {t('hub_upgrade_already_protected')}

{t('hub_upgrade_basic_protection')}

@@ -405,7 +405,7 @@ const UpgradePlanView = (props) => { - + {t('hub_upgrade_already_protected')} @@ -487,7 +487,7 @@ const UpgradePlanView = (props) => {
- + {t('hub_upgrade_already_protected')} diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss index 58d6fda86..3751fa2ae 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss +++ b/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); } } diff --git a/app/scss/partials/_hub_mixins.scss b/app/scss/partials/_hub_mixins.scss index 1b67b5886..72fb0d5c3 100644 --- a/app/scss/partials/_hub_mixins.scss +++ b/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%); + } + } +} From 9f294a38a9638d9c922097dd687c3bf0900db14f Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 22 Sep 2020 10:29:01 -0400 Subject: [PATCH 2/3] Remove mixin...Use sass --- app/hub/Views/HomeView/HomeView.scss | 4 ---- .../SetupDoneView/SetupDoneView.scss | 4 ---- .../UpgradePlanView/UpgradePlanView.scss | 8 ------- app/scss/hub.scss | 9 ++++++++ app/scss/partials/_hub_mixins.scss | 22 ------------------- 5 files changed, 9 insertions(+), 38 deletions(-) diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss index ebaea1880..1e0d4a1fc 100644 --- a/app/hub/Views/HomeView/HomeView.scss +++ b/app/hub/Views/HomeView/HomeView.scss @@ -16,10 +16,6 @@ padding-top: 45px; padding-bottom: 25px; color: $tundora; - // Foundation Overrides - .button { - @include button-hover-color-for($ghosty-blue-alt); - } } .HomeView--bolded { font-weight: 700; diff --git a/app/hub/Views/SetupViews/SetupDoneView/SetupDoneView.scss b/app/hub/Views/SetupViews/SetupDoneView/SetupDoneView.scss index 5bda60f48..f0836c739 100644 --- a/app/hub/Views/SetupViews/SetupDoneView/SetupDoneView.scss +++ b/app/hub/Views/SetupViews/SetupDoneView/SetupDoneView.scss @@ -67,10 +67,6 @@ } .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 { diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss index 3751fa2ae..0d75ecd9e 100644 --- a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss +++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss @@ -381,10 +381,6 @@ 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; @@ -556,10 +552,6 @@ section.home-template .section.section-pricing { font-family: 'Open Sans'; font-weight: 600; background-color: $price-blue; - // Foundation Overrides - &.primary { - @include button-hover-color-for($price-blue); - } } .button-gold { diff --git a/app/scss/hub.scss b/app/scss/hub.scss index 3cd030117..3ea8fa376 100644 --- a/app/scss/hub.scss +++ b/app/scss/hub.scss @@ -41,6 +41,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: #0078CA; + } + &.hollow:hover, &.hollow:focus { + border-color: #0078CA; + color: #0078CA; + } + } } // Helper Classes diff --git a/app/scss/partials/_hub_mixins.scss b/app/scss/partials/_hub_mixins.scss index 72fb0d5c3..1b67b5886 100644 --- a/app/scss/partials/_hub_mixins.scss +++ b/app/scss/partials/_hub_mixins.scss @@ -17,25 +17,3 @@ -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%); - } - } -} From 25e9a230c189cb8595e17bd7e5b006e2f51feef0 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 22 Sep 2020 10:57:06 -0400 Subject: [PATCH 3/3] Use color variable in hub --- app/scss/hub.scss | 9 ++++++--- app/scss/partials/_colors.scss | 1 + 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/app/scss/hub.scss b/app/scss/hub.scss index 3ea8fa376..b25b44a08 100644 --- a/app/scss/hub.scss +++ b/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%; @@ -43,11 +46,11 @@ html, body, #root { 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: #0078CA; + background-color: $dark-ghosty-blue; } &.hollow:hover, &.hollow:focus { - border-color: #0078CA; - color: #0078CA; + border-color: $dark-ghosty-blue; + color: $dark-ghosty-blue; } } } diff --git a/app/scss/partials/_colors.scss b/app/scss/partials/_colors.scss index c9152e37d..cd15e484b 100644 --- a/app/scss/partials/_colors.scss +++ b/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;