From 9db27cfd5053aaf25427fc5bc59532ed7aa31412 Mon Sep 17 00:00:00 2001 From: Cathy Sarisky <42299862+cathysarisky@users.noreply.github.com> Date: Tue, 24 Jan 2023 07:23:11 -0500 Subject: [PATCH] remove hardcoded values from Portal (#15661) Portal currently has a Globals.js file that spells out all the colors in use in Portal, which should make it easy to customize the portal colors to match the chosen theme. There are a bunch of hardcoded values and this PR deals with those. The final outcome of these changes is absolutely invisible. Co-authored-by: Peter Zimon --- ghost/portal/src/components/Frame.styles.js | 22 +++++++++---------- ghost/portal/src/components/Global.styles.js | 4 ++++ .../src/components/Notification.styles.js | 6 ++--- .../src/components/TriggerButton.styles.js | 8 +++---- .../src/components/common/ActionButton.js | 4 ++-- .../components/common/PopupNotification.js | 10 ++++----- .../src/components/common/ProductsSection.js | 14 +++++------- ghost/portal/src/components/common/Switch.js | 4 ++-- 8 files changed, 37 insertions(+), 35 deletions(-) diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js index 2c92096888..6006ac83b9 100644 --- a/ghost/portal/src/components/Frame.styles.js +++ b/ghost/portal/src/components/Frame.styles.js @@ -103,7 +103,7 @@ const FrameStyles = ` bottom: 0; margin: 0 0 -32px; padding: 32px 0 32px; - background: linear-gradient(0deg, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%); + background: linear-gradient(0deg, rgba(var(--whitergb),1) 75%, rgba(var(--whitergb),0) 100%); } .gh-portal-btn-container.sticky.m28 { @@ -255,7 +255,7 @@ const FrameStyles = ` bottom: 0; left: 0; animation: fadein 0.2s; - background: linear-gradient(315deg , rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%); + background: linear-gradient(315deg , rgba(var(--blackrgb),0.2) 0%, rgba(var(--blackrgb),0.1) 100%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-transform: translate3d(0, 0, 0); @@ -317,7 +317,7 @@ const FrameStyles = ` padding: 32px; transform: translateY(0px); border-radius: 10px; - box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1); + box-shadow: 0 3.8px 2.2px rgba(var(--blackrgb), 0.028), 0 9.2px 5.3px rgba(var(--blackrgb), 0.04), 0 17.3px 10px rgba(var(--blackrgb), 0.05), 0 30.8px 17.9px rgba(var(--blackrgb), 0.06), 0 57.7px 33.4px rgba(var(--blackrgb), 0.072), 0 138px 80px rgba(var(--blackrgb), 0.1); animation: popup 0.25s ease-in-out; z-index: 9999; } @@ -842,13 +842,13 @@ const MobileStyles = ` @media (min-width: 520px) { .gh-portal-popup-wrapper.full-size .gh-portal-popup-container.preview { box-shadow: - 0 0 0 1px rgba(0,0,0,0.02), - 0 2.8px 2.2px rgba(0, 0, 0, 0.02), - 0 6.7px 5.3px rgba(0, 0, 0, 0.028), - 0 12.5px 10px rgba(0, 0, 0, 0.035), - 0 22.3px 17.9px rgba(0, 0, 0, 0.042), - 0 41.8px 33.4px rgba(0, 0, 0, 0.05), - 0 100px 80px rgba(0, 0, 0, 0.07); + 0 0 0 1px rgba(var(--blackrgb),0.02), + 0 2.8px 2.2px rgba(var(--blackrgb), 0.02), + 0 6.7px 5.3px rgba(var(--blackrgb), 0.028), + 0 12.5px 10px rgba(var(--blackrgb), 0.035), + 0 22.3px 17.9px rgba(var(--blackrgb), 0.042), + 0 41.8px 33.4px rgba(var(--blackrgb), 0.05), + 0 100px 80px rgba(var(--blackrgb), 0.07); animation: none; margin: 32px; padding: 32px 32px 0; @@ -1001,7 +1001,7 @@ const MultipleProductsGlobalStyles = ` /* Multiple product signup/signin-only modifications! */ .gh-portal-popup-wrapper.multiple-products { background: #fff; - box-shadow: 0 3.8px 2.2px rgba(0, 0, 0, 0.028), 0 9.2px 5.3px rgba(0, 0, 0, 0.04), 0 17.3px 10px rgba(0, 0, 0, 0.05), 0 30.8px 17.9px rgba(0, 0, 0, 0.06), 0 57.7px 33.4px rgba(0, 0, 0, 0.072), 0 138px 80px rgba(0, 0, 0, 0.1); + box-shadow: 0 3.8px 2.2px rgba(var(--blackrgb), 0.028), 0 9.2px 5.3px rgba(var(--blackrgb), 0.04), 0 17.3px 10px rgba(var(--blackrgb), 0.05), 0 30.8px 17.9px rgba(var(--blackrgb), 0.06), 0 57.7px 33.4px rgba(var(--blackrgb), 0.072), 0 138px 80px rgba(var(--blackrgb), 0.1); padding: 0; border-radius: 5px; height: calc(100vh - 64px); diff --git a/ghost/portal/src/components/Global.styles.js b/ghost/portal/src/components/Global.styles.js index e792801eda..77c6cbec9a 100644 --- a/ghost/portal/src/components/Global.styles.js +++ b/ghost/portal/src/components/Global.styles.js @@ -3,8 +3,10 @@ export const GlobalStyles = ` /* ----------------------------------------------------- */ :root { --black: #000; + --blackrgb: 0,0,0; --grey0: #1d1d1d; --grey1: #333; + --grey1rgb: 33, 33, 33; --grey2: #3d3d3d; --grey3: #474747; --grey4: #515151; @@ -17,8 +19,10 @@ export const GlobalStyles = ` --grey11: #e1e1e1; --grey12: #eaeaea; --grey13: #f9f9f9; + --grey13rgb: 249,249,249; --grey14: #fbfbfb; --white: #fff; + --whitergb: 255,255,255; --red: #f02525; --darkerRed: #C50202; --yellow: #FFDC15; diff --git a/ghost/portal/src/components/Notification.styles.js b/ghost/portal/src/components/Notification.styles.js index 456a980b63..43bd634c74 100644 --- a/ghost/portal/src/components/Notification.styles.js +++ b/ghost/portal/src/components/Notification.styles.js @@ -20,11 +20,11 @@ const NotificationStyles = ` min-height: 66px; font-size: 1.3rem; letter-spacing: 0.2px; - background: rgba(33,33,33,0.95); + background: rgba(var(--grey1rgb),0.95); backdrop-filter: blur(8px); color: var(--white); border-radius: 7px; - box-shadow: 0 3.2px 3.6px rgba(0, 0, 0, 0.024), 0 8.8px 10px -5px rgba(0, 0, 0, 0.08); + box-shadow: 0 3.2px 3.6px rgba(var(--black), 0.024), 0 8.8px 10px -5px rgba(var(--black), 0.08); animation: notification-slidein 0.55s cubic-bezier(0.215, 0.610, 0.355, 1.000); } @@ -74,7 +74,7 @@ const NotificationStyles = ` } .gh-portal-notification-icon.error { - color: #FF2828; + color: var(--red); } .gh-portal-notification-closeicon { diff --git a/ghost/portal/src/components/TriggerButton.styles.js b/ghost/portal/src/components/TriggerButton.styles.js index f8eb6f31b9..ecd5337161 100644 --- a/ghost/portal/src/components/TriggerButton.styles.js +++ b/ghost/portal/src/components/TriggerButton.styles.js @@ -40,12 +40,12 @@ const TriggerButtonStyles = ` bottom: 0; left: 0; border-radius: 999px; - background: rgba(255, 255, 255, 0); + background: rgba(var(--whitergb), 0); transition: background 0.3s ease; } .gh-portal-triggerbtn-container:hover:before { - background: rgba(255, 255, 255, 0.08); + background: rgba(var(--whitergb), 0.08); } .gh-portal-triggerbtn-container.halo:before { @@ -53,7 +53,7 @@ const TriggerButtonStyles = ` right: -4px; bottom: -4px; left: -4px; - border: 4px solid rgba(255, 255, 255, 0.15); + border: 4px solid rgba(var(--whitergb), 0.15); } .gh-portal-triggerbtn-container.with-label { @@ -62,7 +62,7 @@ const TriggerButtonStyles = ` .gh-portal-triggerbtn-label { padding: 8px; - color: rgb(255, 255, 255); + color: var(--white); display: block; white-space: nowrap; max-width: 380px; diff --git a/ghost/portal/src/components/common/ActionButton.js b/ghost/portal/src/components/common/ActionButton.js index ea7ced1f05..81608cd6a6 100644 --- a/ghost/portal/src/components/common/ActionButton.js +++ b/ghost/portal/src/components/common/ActionButton.js @@ -47,12 +47,12 @@ export const ActionButtonStyles = ` .gh-portal-loadingicon path, .gh-portal-loadingicon rect { - fill: #fff; + fill: var(--white); } .gh-portal-loadingicon.dark path, .gh-portal-loadingicon.dark rect { - fill: #1d1d1d; + fill: var(--grey0); } `; diff --git a/ghost/portal/src/components/common/PopupNotification.js b/ghost/portal/src/components/common/PopupNotification.js index 85b32fc7ff..957dff5b4c 100644 --- a/ghost/portal/src/components/common/PopupNotification.js +++ b/ghost/portal/src/components/common/PopupNotification.js @@ -17,10 +17,10 @@ export const PopupNotificationStyles = ` z-index: 11000; border-radius: 5px; font-size: 1.5rem; - box-shadow: 0px 0.8151839971542358px 0.8151839971542358px 0px rgba(0,0,0,0.01), - 0px 2.2538793087005615px 2.2538793087005615px 0px rgba(0,0,0,0.02), - 0px 5.426473140716553px 5.426473140716553px 0px rgba(0,0,0,0.03), - 0px 18px 18px 0px rgba(0,0,0,0.04); + box-shadow: 0px 0.8151839971542358px 0.8151839971542358px 0px rgba(var(--blackrgb),0.01), + 0px 2.2538793087005615px 2.2538793087005615px 0px rgba(var(--blackrgb),0.02), + 0px 5.426473140716553px 5.426473140716553px 0px rgba(var(--blackrgb),0.03), + 0px 18px 18px 0px rgba(var(--blackrgb),0.04); animation: popupnotification-slidein 0.3s ease-in-out; } @@ -55,7 +55,7 @@ export const PopupNotificationStyles = ` } .gh-portal-popupnotification-icon.error { - color: #FF2828; + color: var(--red); } .gh-portal-popupnotification .closeicon { diff --git a/ghost/portal/src/components/common/ProductsSection.js b/ghost/portal/src/components/common/ProductsSection.js index 54ffea7c99..4017d8394b 100644 --- a/ghost/portal/src/components/common/ProductsSection.js +++ b/ghost/portal/src/components/common/ProductsSection.js @@ -34,8 +34,8 @@ export const ProductsSectionStyles = ({site}) => { top: 4px; bottom: 4px; right: 4px; - background: #fff; - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08); + background: var(--white); + box-shadow: 0px 1px 3px rgba(var(--blackrgb), 0.08); border-radius: 999px; transition: all 0.15s ease-in-out; } @@ -59,8 +59,6 @@ export const ProductsSectionStyles = ({site}) => { height: 100%; width: 50%; color: var(--grey0); - /*background: white; - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);*/ } .gh-portal-priceoption-label { @@ -99,7 +97,7 @@ export const ProductsSectionStyles = ({site}) => { flex-direction: column; align-items: flex-start; justify-content: stretch; - background: white; + background: var(--white); padding: 32px; border-radius: 7px; border: 1px solid var(--grey11); @@ -344,13 +342,13 @@ export const ProductsSectionStyles = ({site}) => { left: 0; right: 0; bottom: 0; - background: linear-gradient(0deg, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%); + background: linear-gradient(0deg, rgba(var(--whitergb),1) 60%, rgba(var(--whitergb),0) 100%); z-index: 800; } .gh-portal-btn-product .gh-portal-btn { background: var(--brandcolor); - color: #fff; + color: var(--white); border: none; width: 100%; z-index: 900; @@ -375,7 +373,7 @@ export const ProductsSectionStyles = ({site}) => { line-height: 1em; letter-spacing: 0.2px; font-weight: 500; - background: #f0f0f0; + background: var(--grey14); z-index: 900; } diff --git a/ghost/portal/src/components/common/Switch.js b/ghost/portal/src/components/common/Switch.js index c3b91ae3ee..d7b5c256c4 100644 --- a/ghost/portal/src/components/common/Switch.js +++ b/ghost/portal/src/components/common/Switch.js @@ -30,7 +30,7 @@ export const SwitchStyles = ` left: 0; right: 0; bottom: 0; - background: #e9e9e9; + background: var(--grey12); transition: .3s; width: 44px !important; height: 26px !important; @@ -51,7 +51,7 @@ export const SwitchStyles = ` left: 3px !important; height: 20px !important; width: 20px !important; - background-color: white; + background-color: var(--white); transition: .3s; border-radius: 999px; }