From fa2aed13cd967dfe4e969239f52164a5ac44c207 Mon Sep 17 00:00:00 2001 From: Dave Ryan <0aveRyan@users.noreply.github.com> Date: Fri, 13 Nov 2020 10:38:21 -0700 Subject: [PATCH 1/3] Button Component: Unify frontend styles --- .../components/atoms/bwa-button/style.scss | 28 ++++++++++++------- src/app/config.scss | 2 +- src/app/pages/help/index.js | 7 +---- src/app/pages/help/style.scss | 2 -- 4 files changed, 20 insertions(+), 19 deletions(-) diff --git a/src/app/components/atoms/bwa-button/style.scss b/src/app/components/atoms/bwa-button/style.scss index a2dc026ff..79bb40d97 100644 --- a/src/app/components/atoms/bwa-button/style.scss +++ b/src/app/components/atoms/bwa-button/style.scss @@ -1,15 +1,17 @@ @import "@app/config.scss"; -body .components-button.bluehost { +body *.components-button.bluehost { padding: 0.5rem 1rem; border: 0; - text-shadow: none; - box-shadow: none; + text-shadow: none !important; + box-shadow: none !important; height: auto; font-size: 16px; - font-weight: 600; + font-weight: 600 !important; text-decoration: none; margin-left: 8px; + -webkit-transition: all 0.08s ease; + transition: all 0.08s ease; &[disabled] { pointer-events: none; @@ -20,21 +22,28 @@ body .components-button.bluehost { background: $color-primary; box-shadow: none; color: #fff; - &:hover, &:active, &:visited, &:focus, &:not(:disabled):not([aria-disabled=true]):hover { + &:visited, &:focus, &:not(:disabled):not([aria-disabled=true]):hover { background: $color-primary; color: #fff; } + &:hover, &:active, &:focus { + background: $color-dark-blue !important; + } } &.is-secondary { border: 1px solid $color-primary; - background: transparent; + background: transparent !important; box-shadow: none; color: $color-primary; - &:hover, &:active, &:visited, &:focus, &:not(:disabled):not([aria-disabled=true]):hover { + &:visited, &:focus, &:not(:disabled):not([aria-disabled=true]):hover { color: $color-primary; border-color: $color-primary; } + &:hover, &:active, &:focus { + background-color: $color-primary !important; + color: $color-white !important; + } } &.is-link { @@ -42,8 +51,8 @@ body .components-button.bluehost { color: $color-primary; &:hover { - color: $color-primary; - text-decoration: underline; + color: $color-dark-blue !important; + text-decoration: none !important; } } @@ -51,7 +60,6 @@ body .components-button.bluehost { background: transparent; border: 1px solid $color-primary; color: $color-primary; - box-shadow: none; &:hover { background: $color-primary; diff --git a/src/app/config.scss b/src/app/config.scss index b9ce61a0b..67f479a50 100644 --- a/src/app/config.scss +++ b/src/app/config.scss @@ -4,7 +4,7 @@ $font: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxyge // Colors $colors: ( blue: #2C6CC9, - dark-blue: #16325b, + dark-blue: #2A5DA8, green: #17b212, orange: #f89c24, yellow: #f89c24, diff --git a/src/app/pages/help/index.js b/src/app/pages/help/index.js index 8adc60643..27244e5ec 100644 --- a/src/app/pages/help/index.js +++ b/src/app/pages/help/index.js @@ -16,7 +16,6 @@ const Help = () => { diff --git a/src/app/pages/help/style.scss b/src/app/pages/help/style.scss index 681012e7a..eed6f9633 100644 --- a/src/app/pages/help/style.scss +++ b/src/app/pages/help/style.scss @@ -78,8 +78,6 @@ } .chat-button { - color: white !important; - text-shadow: none !important; border-radius: 26px; margin-left: auto; } From 78d29fa9821f0401b5ce04bcbe24579af71e4bb0 Mon Sep 17 00:00:00 2001 From: Dave Ryan <0aveRyan@users.noreply.github.com> Date: Fri, 13 Nov 2020 10:43:18 -0700 Subject: [PATCH 2/3] patch theme preview buttons --- assets/admin-global.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/assets/admin-global.css b/assets/admin-global.css index c2fc4f6ef..84630964c 100644 --- a/assets/admin-global.css +++ b/assets/admin-global.css @@ -7,7 +7,7 @@ body.admin_page_mojo-theme-preview .wp-full-overlay-sidebar{ } .components-button.bluehost { - padding: 0.5rem 1rem; + padding: 8px 16px !important; border: 0; text-shadow: none; box-shadow: none; @@ -17,10 +17,9 @@ body.admin_page_mojo-theme-preview .wp-full-overlay-sidebar{ text-decoration: none; } .components-button.bluehost.is-primary { border-color: #006a95 #00648c #00648c; - box-shadow: inset 0 -1px 0 #00648c; color: #fff; text-decoration: none; - text-shadow: 0 -1px 1px #005d82, 1px 0 1px #005d82, 0 1px 1px #005d82, -1px 0 1px #005d82; + text-shadow: none !important; border: 1px solid transparent; background: #3575d3; } .components-button.bluehost.is-primary:visited { From fd9902b579bb4a53dc05a9fa51d80d2743e03123 Mon Sep 17 00:00:00 2001 From: Dave Ryan <0aveRyan@users.noreply.github.com> Date: Fri, 13 Nov 2020 15:45:37 -0700 Subject: [PATCH 3/3] remove isLink prop from Blue Sky buttons --- src/app/pages/blue-sky/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/pages/blue-sky/index.js b/src/app/pages/blue-sky/index.js index e47087fc1..f4a5543d9 100644 --- a/src/app/pages/blue-sky/index.js +++ b/src/app/pages/blue-sky/index.js @@ -43,7 +43,7 @@ const BlueSky = () => { { __('We understand that WordPress can be challenging, but with professional help in your pocket, you will learn how to build, grow, and maintain your new WordPress website with friendly and professional guidance every step of the way.', 'bluehost-wordpress-plugin') }

- @@ -62,7 +62,7 @@ const BlueSky = () => { { __('Get unstuck with fast answers and recommendations.', 'bluehost-wordpress-plugin') }
-
@@ -89,7 +89,7 @@ const BlueSky = () => { { __('Learn more WordPress skills and solve problems faster.', 'bluehost-wordpress-plugin') }
-
@@ -122,7 +122,7 @@ const BlueSky = () => { { __('Build and Maintain with advanced features and improve as you go.', 'bluehost-wordpress-plugin') }
-
@@ -396,7 +396,7 @@ const BlueSky = () => { } } /> -