Skip to content

Commit

Permalink
Add styles for Select in disabled state
Browse files Browse the repository at this point in the history
  • Loading branch information
Marcin Mazurek committed Jan 18, 2022
1 parent bfbce6e commit 92faefd
Show file tree
Hide file tree
Showing 13 changed files with 29 additions and 13 deletions.
9 changes: 1 addition & 8 deletions source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.js
View file
Expand Up @@ -273,18 +273,11 @@ export default class Step1ConfigurationDialog extends Component<Props> {
const checkboxAcceptance2Field = form.$('checkboxAcceptance2');
const walletId = get(wallet, 'id', null);

const validRecoveryPhase = recoveryPhraseField.isValid;

const buttonClasses = classnames([
'primary',
isCalculatingReedemFees ? styles.isSubmitting : null,
]);

const walletsDropdownClasses = classnames([
styles.walletsDropdown,
!validRecoveryPhase ? styles.disabled : null,
]);

const actions = {
direction: 'column',
items: [
Expand Down Expand Up @@ -371,7 +364,6 @@ export default class Step1ConfigurationDialog extends Component<Props> {
/>
<div className={styles.walletsDropdownWrapper}>
<WalletsDropdown
className={walletsDropdownClasses}
{...walletsDropdownField.bind()}
numberOfStakePools={4}
wallets={wallets}
Expand All @@ -382,6 +374,7 @@ export default class Step1ConfigurationDialog extends Component<Props> {
value={walletId}
getStakePoolById={() => {}}
errorPosition="bottom"
disabled={!recoveryPhraseField.isValid}
/>
</div>
<Checkbox
Expand Down
11 changes: 6 additions & 5 deletions source/renderer/app/components/widgets/DialogFullSizeOverride.scss
View file
Expand Up @@ -19,9 +19,9 @@
.AutocompleteOverrides_autocompleteContent,
.SimpleInput_customValueBlock,
.SimpleInput_customValueWrapper,
.SimpleInput_input,
.SimpleInput_input:focus,
.SimpleInput_input:hover,
.SimpleInput_input:not(.SimpleInput_disabled),
.SimpleInput_input:focus:not(.SimpleInput_disabled),
.SimpleInput_input:hover:not(.SimpleInput_disabled),
.SimpleLink_root {
background-color: transparent !important;
}
Expand Down Expand Up @@ -108,9 +108,10 @@

// Border Color
.AutocompleteOverrides_autocompleteContent:not(.SimpleAutocomplete_errored),
.SelectOverrides_selectInput input,
.SelectOverrides_selectInput input:not(.SimpleInput_disabled),
.SimpleInput_customValueBlock,
.SimpleInput_customValueWrapper .SimpleInput_input,
.SimpleInput_customValueWrapper
.SimpleInput_input:not(.SimpleInput_disabled),
.SimpleInput_input:focus:not(.SimpleInput_errored),
.SimpleInput_input:hover:not(.SimpleInput_errored),
.SimpleLink_root,
Expand Down
1 change: 1 addition & 0 deletions source/renderer/app/components/widgets/forms/ItemsDropdown.js
View file
Expand Up @@ -30,6 +30,7 @@ import globalMessages from '../../../i18n/global-messages';
*/
export type ItemDropdownProps = {
options: Array<ItemDropdown>,
disabled?: boolean,
className?: string,
};

Expand Down
3 changes: 3 additions & 0 deletions source/renderer/app/components/widgets/forms/WalletsDropdown.js
View file
Expand Up @@ -18,6 +18,7 @@ import ItemsDropdown from './ItemsDropdown';
*
*/
type Props = {
disabled?: boolean,
className?: string,
getStakePoolById: Function,
numberOfStakePools: number,
Expand All @@ -42,6 +43,7 @@ function WalletsDropdown({
numberOfStakePools,
onSearch = onSearchWalletsDropdown,
wallets = [],
disabled,
...props
}: Props) {
const discreetModeFeature = useDiscreetModeFeature();
Expand Down Expand Up @@ -79,6 +81,7 @@ function WalletsDropdown({
});
return (
<ItemsDropdown
disabled={disabled}
className={className}
options={formattedOptions}
{...itemsDropdownProps}
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/themes/daedalus/cardano.js
View file
Expand Up @@ -700,8 +700,10 @@ export const CARDANO_THEME_OUTPUT = {
'--rp-select-arrow-bg-color': 'rgba(94, 96, 102, 0.3)',
'--rp-select-arrow-bg-color-open': 'rgba(94, 96, 102, 0.7)',
'--rp-select-input-bg-color': 'transparent',
'--rp-select-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
'--rp-select-input-border-color': 'rgba(94, 96, 102, 0.3)',
'--rp-select-input-border-color-focus': 'rgba(94, 96, 102, 0.7)',
'--rp-select-input-border-color-disabled': 'transparent',
'--rp-select-input-text-color': '#5e6066',
'--rp-select-input-placeholder-color': 'rgba(94, 96, 102, 0.5)',
},
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/themes/daedalus/dark-blue.js
View file
Expand Up @@ -702,8 +702,10 @@ export const DARK_BLUE_THEME_OUTPUT = {
'--rp-select-arrow-bg-color': 'rgba(233, 244, 254, 0.3)',
'--rp-select-arrow-bg-color-open': 'rgba(233, 244, 254, 1)',
'--rp-select-input-bg-color': 'transparent',
'--rp-select-input-bg-color-disabled': 'rgba(233, 244, 254, 0.05)',
'--rp-select-input-border-color': 'rgba(233, 244, 254, 0.3)',
'--rp-select-input-border-color-focus': 'rgba(233, 244, 254, 0.7)',
'--rp-select-input-border-color-disabled': 'transparent',
'--rp-select-input-text-color': 'rgba(233, 244, 254, 1)',
'--rp-select-input-placeholder-color': 'rgba(233, 244, 254, 0.5)',
},
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/themes/daedalus/dark-cardano.js
View file
Expand Up @@ -686,8 +686,10 @@ export const DARK_CARDANO_THEME_OUTPUT = {
'--rp-select-arrow-bg-color': 'rgba(255, 255, 255, 0.3)',
'--rp-select-arrow-bg-color-open': 'rgba(255, 255, 255, 0.7)',
'--rp-select-input-bg-color': 'transparent',
'--rp-select-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
'--rp-select-input-border-color': 'rgba(255, 255, 255, 0.3)',
'--rp-select-input-border-color-focus': 'rgba(255, 255, 255, 0.7)',
'--rp-select-input-border-color-disabled': 'transparent',
'--rp-select-input-text-color': '#ffffff',
'--rp-select-input-placeholder-color': 'rgba(255, 255, 255, 0.5)',
},
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/themes/daedalus/flight-candidate.js
View file
Expand Up @@ -684,8 +684,10 @@ export const FLIGHT_CANDIDATE_THEME_OUTPUT = {
'--rp-select-arrow-bg-color': 'rgba(255, 255, 255, 0.3)',
'--rp-select-arrow-bg-color-open': 'rgba(255, 255, 255, 0.7)',
'--rp-select-input-bg-color': 'transparent',
'--rp-select-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
'--rp-select-input-border-color': 'rgba(255, 255, 255, 0.3)',
'--rp-select-input-border-color-focus': 'rgba(255, 255, 255, 0.7)',
'--rp-select-input-border-color-disabled': 'transparent',
'--rp-select-input-text-color': '#ffffff',
'--rp-select-input-placeholder-color': 'rgba(255, 255, 255, 0.5)',
},
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/themes/daedalus/incentivized-testnet.js
View file
Expand Up @@ -684,8 +684,10 @@ export const INCENTIVIZED_TESTNET_THEME_OUTPUT = {
'--rp-select-arrow-bg-color': 'rgba(255, 255, 255, 0.3)',
'--rp-select-arrow-bg-color-open': 'rgba(255, 255, 255, 0.7)',
'--rp-select-input-bg-color': 'transparent',
'--rp-select-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
'--rp-select-input-border-color': 'rgba(255, 255, 255, 0.3)',
'--rp-select-input-border-color-focus': 'rgba(255, 255, 255, 0.7)',
'--rp-select-input-border-color-disabled': 'transparent',
'--rp-select-input-text-color': '#ffffff',
'--rp-select-input-placeholder-color': 'rgba(255, 255, 255, 0.5)',
},
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/themes/daedalus/light-blue.js
View file
Expand Up @@ -696,9 +696,11 @@ export const LIGHT_BLUE_THEME_OUTPUT = {
rpSelect: {
'--rp-select-arrow-bg-color': 'rgba(94, 96, 102, 0.3)',
'--rp-select-arrow-bg-color-open': 'rgba(94, 96, 102, 0.7)',
'--rp-select-input-bg-color-disabled': 'rgba(250, 251, 252, 0.05)',
'--rp-select-input-bg-color': 'transparent',
'--rp-select-input-border-color': 'rgba(94, 96, 102, 0.3)',
'--rp-select-input-border-color-focus': 'rgba(94, 96, 102, 0.7)',
'--rp-select-input-border-color-disabled': 'transparent',
'--rp-select-input-text-color': '#5e6066',
'--rp-select-input-placeholder-color': 'rgba(94, 96, 102, 0.5)',
},
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/themes/daedalus/shelley-testnet.js
View file
Expand Up @@ -684,9 +684,11 @@ export const SHELLEY_TESTNET_THEME_OUTPUT = {
rpSelect: {
'--rp-select-arrow-bg-color': 'rgba(255, 255, 255, 0.3)',
'--rp-select-arrow-bg-color-open': 'rgba(255, 255, 255, 0.7)',
'--rp-select-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
'--rp-select-input-bg-color': 'transparent',
'--rp-select-input-border-color': 'rgba(255, 255, 255, 0.3)',
'--rp-select-input-border-color-focus': 'rgba(255, 255, 255, 0.7)',
'--rp-select-input-border-color-disabled': 'transparent',
'--rp-select-input-text-color': '#ffffff',
'--rp-select-input-placeholder-color': 'rgba(255, 255, 255, 0.5)',
},
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/themes/daedalus/white.js
View file
Expand Up @@ -687,8 +687,10 @@ export const WHITE_THEME_OUTPUT = {
'--rp-select-arrow-bg-color': 'rgba(45, 45, 45, 0.3)',
'--rp-select-arrow-bg-color-open': 'rgba(45, 45, 45, 0.7)',
'--rp-select-input-bg-color': 'transparent',
'--rp-select-input-bg-color-disabled': 'rgba(45, 45, 45, 0.05)',
'--rp-select-input-border-color': 'rgba(45, 45, 45, 0.3)',
'--rp-select-input-border-color-focus': 'rgba(45, 45, 45, 0.7)',
'--rp-select-input-border-color-disabled': 'transparent',
'--rp-select-input-text-color': '#2d2d2d',
'--rp-select-input-placeholder-color': 'rgba(45, 45, 45, 0.5)',
},
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/themes/daedalus/yellow.js
View file
Expand Up @@ -682,8 +682,10 @@ export const YELLOW_THEME_OUTPUT = {
'--rp-select-arrow-bg-color': 'rgba(45, 45, 45, 0.2)',
'--rp-select-arrow-bg-color-open': '#2d2d2d',
'--rp-select-input-bg-color': 'transparent',
'--rp-select-input-bg-color-disabled': 'rgba(45, 45, 45, 0.05)',
'--rp-select-input-border-color': 'rgba(45, 45, 45, 0.3)',
'--rp-select-input-border-color-focus': 'rgba(45, 45, 45, 0.7)',
'--rp-select-input-border-color-disabled': 'transparent',
'--rp-select-input-text-color': '#2d2d2d',
'--rp-select-input-placeholder-color': 'rgba(45, 45, 45, 0.5)',
},
Expand Down

0 comments on commit 92faefd

Please sign in to comment.