Skip to content

Apply colors to disabled buttons #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tomrndom wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Apply colors to disabled buttons #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d2ebb31
Apply colors to disabled buttons
tomrndom May 30, 2024
6059921
v5.8.38-beta.1
smarcet Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
6 changes: 3 additions & 3 deletions src/components/login/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,12 @@ const LoginComponent = ({
<input placeholder="youremail@example.com" value={email} onChange={e => setEmail(e.target.value)}
onKeyPress={(ev) => ev.key === 'Enter' ? loginCode() : null} data-testid="email-input" />
</div>
<div onClick={() => loginCode()} data-testid="email-button"
className={`${styles.button} ${styles.email_login_button} ${email === '' ? `${styles.pointerDisabled} ${styles.buttonDisabled}` : `${styles.primaryEmailButton}`}`}>
<button onClick={() => loginCode()} data-testid="email-button" disabled={!email}
className={`${styles.button} ${styles.primaryEmailButton}`}>
<EmailRoundedIcon style={{ fontSize: "20px" }} />
<span>Email me a single-use code</span>
<span></span>
</div>
</button>
{emailError && <span data-testid="email-error">Please enter a valid email address</span>}
<h2 className={styles.h2Styled}>or</h2>
</div>
Expand Down
26 changes: 11 additions & 15 deletions src/components/login/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Copy Markdown
Collaborator

@smarcet smarcet Aug 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tomrndom @gcutrini do we really wanna to rely on input_ vars ?
or we should define a new set of css vars just for buttons ?

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);
}
}
}

Expand Down
13 changes: 9 additions & 4 deletions src/components/promocode-input/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -58,6 +60,9 @@
height: 100%;
border: none;
background-color: transparent;
&:disabled {
color: var(--color_input_text_color_disabled);
}
}
}
.appliedCodeIcon {
Expand Down
8 changes: 8 additions & 0 deletions src/components/stripe-form/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}


Expand All @@ -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',
Expand Down
13 changes: 7 additions & 6 deletions src/components/ticket-type/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions src/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
4 changes: 3 additions & 1 deletion src/styles/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down