From d2ebb317bf734814211decf95ad15e38c32a736c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= Date: Thu, 30 May 2024 18:03:25 -0300 Subject: [PATCH 1/2] Apply colors to disabled buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Tomás Castillo --- src/components/login/index.js | 6 ++--- src/components/login/index.module.scss | 26 ++++++++----------- .../promocode-input/index.module.scss | 13 +++++++--- src/components/stripe-form/index.js | 8 ++++++ src/components/ticket-type/index.module.scss | 13 +++++----- src/index.ejs | 3 +++ src/styles/button.scss | 4 ++- 7 files changed, 44 insertions(+), 29 deletions(-) diff --git a/src/components/login/index.js b/src/components/login/index.js index d4267bd..cf2522d 100644 --- a/src/components/login/index.js +++ b/src/components/login/index.js @@ -55,12 +55,12 @@ const LoginComponent = ({ setEmail(e.target.value)} onKeyPress={(ev) => ev.key === 'Enter' ? loginCode() : null} data-testid="email-input" /> -
loginCode()} data-testid="email-button" - className={`${styles.button} ${styles.email_login_button} ${email === '' ? `${styles.pointerDisabled} ${styles.buttonDisabled}` : `${styles.primaryEmailButton}`}`}> +
+ {emailError && Please enter a valid email address}

or

diff --git a/src/components/login/index.module.scss b/src/components/login/index.module.scss index c432463..1ec1247 100644 --- a/src/components/login/index.module.scss +++ b/src/components/login/index.module.scss @@ -54,28 +54,24 @@ } .primaryEmailButton { - background-color: var(--color_input_background_color); - border: 1px solid var(--color_input_border_color); - color: var(--color_input_text_color); -} - -.buttonDisabled { - background-color: var(--color_secondary_contrast); - color: var(--color_input_text_color_disabled); -} - -.pointerDisabled { - pointer-events: none; -} - -.email_login_button { display: flex; justify-content: space-between; padding: 10px 9px; width: 100%; + background-color: var(--color_input_background_color); + border: 1px solid var(--color_input_border_color); span { padding: 0 0 0 8px; margin: 0; + color: var(--color_input_text_color); + } + &:disabled { + cursor: not-allowed; + background-color: var(--color_input_background_color_disabled); + border: 1px solid var(--color_input_border_color_disabled); + span { + color: var(--color_input_text_color_disabled); + } } } diff --git a/src/components/promocode-input/index.module.scss b/src/components/promocode-input/index.module.scss index fc9e649..4f42db7 100644 --- a/src/components/promocode-input/index.module.scss +++ b/src/components/promocode-input/index.module.scss @@ -41,14 +41,16 @@ align-items: center; width: 30%; height: 100%; - background-color: #818181; + background-color: var(--color_input_background_color); + border: 1px solid var(--color_input_border_color); border-radius: 0px 4px 4px 0px; &.noCode { - background-color: #CFCFCF; + background-color: var(--color_input_background_color_disabled); + border: 1px solid var(--color_input_border_color_disabled); cursor: not-allowed; } - button { - color: #fff; + button { + color: var(--color_input_text_color); font-size: 14px; font-style: normal; font-weight: 600; @@ -58,6 +60,9 @@ height: 100%; border: none; background-color: transparent; + &:disabled { + color: var(--color_input_text_color_disabled); + } } } .appliedCodeIcon { diff --git a/src/components/stripe-form/index.js b/src/components/stripe-form/index.js index 7296c3f..8340908 100644 --- a/src/components/stripe-form/index.js +++ b/src/components/stripe-form/index.js @@ -77,12 +77,16 @@ const StripeForm = ({ reservation, payTicket, userProfile, stripeOptions, provid let bgColor = DefaultBGColor; let textColor = DefaultTextColor; let hintColor = DefaultHintColor; + let disabledBgColor = DefaultBGColor; + let disabledTextColor = DefaultBGColor; if(document && document.documentElement) { const documentStyles = getComputedStyle(document.documentElement); bgColor = documentStyles.getPropertyValue('--color_input_background_color'); textColor = documentStyles.getPropertyValue('--color_input_text_color'); hintColor = documentStyles.getPropertyValue('--color_text_input_hints'); + disabledBgColor = documentStyles.getPropertyValue('--color_input_background_color_disabled'); + disabledTextColor = documentStyles.getPropertyValue('--color_input_text_color_disabled'); } @@ -102,6 +106,10 @@ const StripeForm = ({ reservation, payTicket, userProfile, stripeOptions, provid "-webkit-text-fill-color": textColor, "-webkit-box-shadow:": `0 0 0px 1000px ${bgColor} inset` }, + ':disabled': { + color: disabledTextColor, + backgroundColor: disabledBgColor + } }, invalid: { color: '#e5424d', diff --git a/src/components/ticket-type/index.module.scss b/src/components/ticket-type/index.module.scss index 541404b..5f9247e 100644 --- a/src/components/ticket-type/index.module.scss +++ b/src/components/ticket-type/index.module.scss @@ -71,8 +71,8 @@ height: 36px; text-align: center; border: 1px solid var(--color_input_border_color); - // color: var(--color_input_text_color); - // background-color: var(--color_input_background_color); + color: var(--color_input_text_color); + background-color: var(--color_input_background_color); } input { @@ -92,11 +92,12 @@ align-items: center; &:disabled { - &, + background-color: var(--color_input_background_color_disabled); + border: 1px solid var(--color_input_border_color_disabled); + color: var(--color_input_text_color_disabled); + cursor: not-allowed; &:hover { - opacity: 0.65; - background: #dedede; - border-color: #bebebe; + opacity: 0.65; } } } diff --git a/src/index.ejs b/src/index.ejs index ffb7a68..46b1e6e 100644 --- a/src/index.ejs +++ b/src/index.ejs @@ -33,6 +33,9 @@ --color_input_text_color_disabled: #fff; --color_input_background_color: #fff; --color_input_border_color: #dbdbdb; + --color_input_text_color_disabled: #fff; + --color_input_background_color_disabled: #CFCFCF; + --color_input_border_color_disabled: #dbdbdb; --color_button_background_color: #ffffff; --color_button_color: #000000; /* END LIGHT MODE */ diff --git a/src/styles/button.scss b/src/styles/button.scss index 20d9723..d681380 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -1,6 +1,8 @@ .button { &[disabled] { - background-color: var(--color_secondary_contrast)!important; + background-color: var(--color_input_background_color_disabled)!important; + border: 1px solid var(--color_input_border_color_disabled)!important; + color: var(--color_input_text_color_disabled)!important; } font-weight: bold!important; font-size: 1em!important; From 6059921b0920dc94f36ffe8286677643d0a04a42 Mon Sep 17 00:00:00 2001 From: smarcet Date: Wed, 9 Oct 2024 09:43:40 -0300 Subject: [PATCH 2/2] v5.8.38-beta.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1a23940..f4430bf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "summit-registration-lite", - "version": "5.0.37", + "version": "5.8.38-beta.1", "description": "Summit Registration Lite", "main": "index.js", "scripts": {