Skip to content

Commit 125092b

Browse files
przemyslaw-wlodekprzemyslaw-wlodek
authored
DDW-981 Fix incorrect design of disabled inputs (#2891)
1 parent 767c9ef commit 125092b

File tree

16 files changed

+37
-63
lines changed

16 files changed

+37
-63
lines changed

‎CHANGELOG.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@
7272

7373
### Fixes
7474

75-
- Fixed styling of the incentivized testnet rewards wallet dropdown ([PR 2816](https://github.com/input-output-hk/daedalus/pull/2816/files))
7675
- Fixed blockchain verification progress text ([PR 2840](https://github.com/input-output-hk/daedalus/pull/2840))
7776

7877
## 4.7.0

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@
249249
"react-intl": "2.7.2",
250250
"react-lottie": "1.2.3",
251251
"react-markdown": "4.3.1",
252-
"react-polymorph": "1.0.3",
252+
"react-polymorph": "1.0.2",
253253
"react-router": "5.2.0",
254254
"react-router-dom": "5.2.0",
255255
"react-svg-inline": "2.1.1",

‎source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,20 @@
3838
margin-bottom: 17px;
3939
}
4040

41+
.walletsDropdown {
42+
&.disabled {
43+
pointer-events: none;
44+
:global {
45+
.SelectOverrides_selectInput:after {
46+
opacity: 0.5;
47+
}
48+
.SimpleFormField_inputWrapper {
49+
opacity: 0.5;
50+
}
51+
}
52+
}
53+
}
54+
4155
.checkbox {
4256
margin-bottom: 20px;
4357

‎source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.tsx‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -143,10 +143,6 @@ type Props = {
143143
wallets: Array<Wallet>;
144144
};
145145

146-
type State = {
147-
wasRecoveryPhraseValidAtLeastOnce: boolean;
148-
};
149-
150146
interface FormFields {
151147
checkboxAcceptance1: string;
152148
checkboxAcceptance2: string;
@@ -155,19 +151,14 @@ interface FormFields {
155151
}
156152

157153
@observer
158-
class Step1ConfigurationDialog extends Component<Props, State> {
154+
class Step1ConfigurationDialog extends Component<Props> {
159155
static contextTypes = {
160156
intl: intlShape.isRequired,
161157
};
162158
static defaultProps = {
163159
error: null,
164160
recoveryPhrase: [],
165161
};
166-
167-
state = {
168-
wasRecoveryPhraseValidAtLeastOnce: false,
169-
};
170-
171162
recoveryPhraseAutocomplete: Autocomplete;
172163
form = new ReactToolboxMobxForm<FormFields>(
173164
{
@@ -187,16 +178,6 @@ class Step1ConfigurationDialog extends Component<Props, State> {
187178
this.context.intl.formatMessage(messages.invalidRecoveryPhrase),
188179
],
189180
}),
190-
hooks: {
191-
onChange: (field) => {
192-
if (
193-
this.state.wasRecoveryPhraseValidAtLeastOnce === false &&
194-
field.isValid
195-
) {
196-
this.setState({ wasRecoveryPhraseValidAtLeastOnce: true });
197-
}
198-
},
199-
},
200181
},
201182
walletsDropdown: {
202183
type: 'select',
@@ -296,15 +277,15 @@ class Step1ConfigurationDialog extends Component<Props, State> {
296277
const checkboxAcceptance1Field = form.$('checkboxAcceptance1');
297278
const checkboxAcceptance2Field = form.$('checkboxAcceptance2');
298279
const walletId = get(wallet, 'id', null);
299-
const walletsDropdownDisabled = !(
300-
recoveryPhraseField.isValid ||
301-
this.state.wasRecoveryPhraseValidAtLeastOnce
302-
);
280+
const validRecoveryPhase = recoveryPhraseField.isValid;
303281
const buttonClasses = classnames([
304282
'primary',
305283
isCalculatingReedemFees ? styles.isSubmitting : null,
306284
]);
307-
285+
const walletsDropdownClasses = classnames([
286+
styles.walletsDropdown,
287+
!validRecoveryPhase ? styles.disabled : null,
288+
]);
308289
const actions = {
309290
direction: 'column',
310291
items: [
@@ -389,6 +370,7 @@ class Step1ConfigurationDialog extends Component<Props, State> {
389370
/>
390371
<div className={styles.walletsDropdownWrapper}>
391372
<WalletsDropdown
373+
className={walletsDropdownClasses}
392374
{...walletsDropdownField.bind()}
393375
numberOfStakePools={4}
394376
wallets={wallets}
@@ -399,7 +381,6 @@ class Step1ConfigurationDialog extends Component<Props, State> {
399381
value={walletId}
400382
getStakePoolById={() => {}}
401383
errorPosition="bottom"
402-
disabled={walletsDropdownDisabled}
403384
/>
404385
</div>
405386
<Checkbox

‎source/renderer/app/components/widgets/DialogFullSizeOverride.scss‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
.AutocompleteOverrides_autocompleteContent,
2020
.SimpleInput_customValueBlock,
2121
.SimpleInput_customValueWrapper,
22-
.SimpleInput_input:not(.SimpleInput_disabled),
23-
.SimpleInput_input:focus:not(.SimpleInput_disabled),
24-
.SimpleInput_input:hover:not(.SimpleInput_disabled),
22+
.SimpleInput_input,
23+
.SimpleInput_input:focus,
24+
.SimpleInput_input:hover,
2525
.SimpleLink_root {
2626
background-color: transparent !important;
2727
}
@@ -106,10 +106,9 @@
106106

107107
// Border Color
108108
.AutocompleteOverrides_autocompleteContent:not(.SimpleAutocomplete_errored),
109-
.SelectOverrides_selectInput input:not(.SimpleInput_disabled),
109+
.SelectOverrides_selectInput input,
110110
.SimpleInput_customValueBlock,
111-
.SimpleInput_customValueWrapper
112-
.SimpleInput_input:not(.SimpleInput_disabled),
111+
.SimpleInput_customValueWrapper .SimpleInput_input,
113112
.SimpleInput_input:focus:not(.SimpleInput_errored),
114113
.SimpleInput_input:hover:not(.SimpleInput_errored),
115114
.SimpleOptions_option:after {

‎source/renderer/app/components/widgets/forms/ItemsDropdown.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ import globalMessages from '../../../i18n/global-messages';
3131
export type ItemDropdownProps = {
3232
options: Array<ItemDropdown>;
3333
className?: string;
34-
disabled?: boolean;
3534
};
3635
export const onSearchItemsDropdown = (
3736
searchValue: string,

‎source/renderer/app/themes/daedalus/cardano.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -638,9 +638,9 @@ export const CARDANO_THEME_OUTPUT = {
638638
},
639639
rpInput: {
640640
'--rp-input-bg-color': '#ffffff',
641-
'--rp-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
641+
'--rp-input-bg-color-disabled': 'rgba(94, 96, 102, 0.05)',
642642
'--rp-input-border-color': 'rgba(94, 96, 102, 0.3)',
643-
'--rp-input-border-color-disabled': 'transparent',
643+
'--rp-input-border-color-disabled': 'rgba(94, 96, 102, 0.05)',
644644
'--rp-input-border-color-errored': '#ea4c5b',
645645
'--rp-input-border-color-focus': 'rgba(94, 96, 102, 0.7)',
646646
'--rp-input-line-height': '22px',
@@ -700,10 +700,8 @@ export const CARDANO_THEME_OUTPUT = {
700700
'--rp-select-arrow-bg-color': 'rgba(94, 96, 102, 0.3)',
701701
'--rp-select-arrow-bg-color-open': 'rgba(94, 96, 102, 0.7)',
702702
'--rp-select-input-bg-color': 'transparent',
703-
'--rp-select-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
704703
'--rp-select-input-border-color': 'rgba(94, 96, 102, 0.3)',
705704
'--rp-select-input-border-color-focus': 'rgba(94, 96, 102, 0.7)',
706-
'--rp-select-input-border-color-disabled': 'transparent',
707705
'--rp-select-input-text-color': '#5e6066',
708706
'--rp-select-input-placeholder-color': 'rgba(94, 96, 102, 0.5)',
709707
},

‎source/renderer/app/themes/daedalus/dark-blue.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -702,10 +702,8 @@ export const DARK_BLUE_THEME_OUTPUT = {
702702
'--rp-select-arrow-bg-color': 'rgba(233, 244, 254, 0.3)',
703703
'--rp-select-arrow-bg-color-open': 'rgba(233, 244, 254, 1)',
704704
'--rp-select-input-bg-color': 'transparent',
705-
'--rp-select-input-bg-color-disabled': 'rgba(233, 244, 254, 0.05)',
706705
'--rp-select-input-border-color': 'rgba(233, 244, 254, 0.3)',
707706
'--rp-select-input-border-color-focus': 'rgba(233, 244, 254, 0.7)',
708-
'--rp-select-input-border-color-disabled': 'transparent',
709707
'--rp-select-input-text-color': 'rgba(233, 244, 254, 1)',
710708
'--rp-select-input-placeholder-color': 'rgba(233, 244, 254, 0.5)',
711709
},

‎source/renderer/app/themes/daedalus/dark-cardano.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -686,10 +686,8 @@ export const DARK_CARDANO_THEME_OUTPUT = {
686686
'--rp-select-arrow-bg-color': 'rgba(255, 255, 255, 0.3)',
687687
'--rp-select-arrow-bg-color-open': 'rgba(255, 255, 255, 0.7)',
688688
'--rp-select-input-bg-color': 'transparent',
689-
'--rp-select-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
690689
'--rp-select-input-border-color': 'rgba(255, 255, 255, 0.3)',
691690
'--rp-select-input-border-color-focus': 'rgba(255, 255, 255, 0.7)',
692-
'--rp-select-input-border-color-disabled': 'transparent',
693691
'--rp-select-input-text-color': '#ffffff',
694692
'--rp-select-input-placeholder-color': 'rgba(255, 255, 255, 0.5)',
695693
},

‎source/renderer/app/themes/daedalus/flight-candidate.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -684,10 +684,8 @@ export const FLIGHT_CANDIDATE_THEME_OUTPUT = {
684684
'--rp-select-arrow-bg-color': 'rgba(255, 255, 255, 0.3)',
685685
'--rp-select-arrow-bg-color-open': 'rgba(255, 255, 255, 0.7)',
686686
'--rp-select-input-bg-color': 'transparent',
687-
'--rp-select-input-bg-color-disabled': 'rgba(255, 255, 255, 0.05)',
688687
'--rp-select-input-border-color': 'rgba(255, 255, 255, 0.3)',
689688
'--rp-select-input-border-color-focus': 'rgba(255, 255, 255, 0.7)',
690-
'--rp-select-input-border-color-disabled': 'transparent',
691689
'--rp-select-input-text-color': '#ffffff',
692690
'--rp-select-input-placeholder-color': 'rgba(255, 255, 255, 0.5)',
693691
},

0 commit comments

Comments
 (0)