From 92faefd88e749a54bee69625bcb566bc76329d11 Mon Sep 17 00:00:00 2001
From: Marcin Mazurek <marcin.mazurek@iohk.io>
Date: Tue, 18 Jan 2022 20:19:36 +0100
Subject: [PATCH] Add styles for Select in disabled state

---
 .../redeem-itn-rewards/Step1ConfigurationDialog.js    |  9 +--------
 .../components/widgets/DialogFullSizeOverride.scss    | 11 ++++++-----
 .../app/components/widgets/forms/ItemsDropdown.js     |  1 +
 .../app/components/widgets/forms/WalletsDropdown.js   |  3 +++
 source/renderer/app/themes/daedalus/cardano.js        |  2 ++
 source/renderer/app/themes/daedalus/dark-blue.js      |  2 ++
 source/renderer/app/themes/daedalus/dark-cardano.js   |  2 ++
 .../renderer/app/themes/daedalus/flight-candidate.js  |  2 ++
 .../app/themes/daedalus/incentivized-testnet.js       |  2 ++
 source/renderer/app/themes/daedalus/light-blue.js     |  2 ++
 .../renderer/app/themes/daedalus/shelley-testnet.js   |  2 ++
 source/renderer/app/themes/daedalus/white.js          |  2 ++
 source/renderer/app/themes/daedalus/yellow.js         |  2 ++
 13 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.js b/source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.js
index db1e682053..67be2a1931 100644
--- a/source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.js
+++ b/source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.js
@@ -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: [
@@ -371,7 +364,6 @@ export default class Step1ConfigurationDialog extends Component<Props> {
           />
           <div className={styles.walletsDropdownWrapper}>
             <WalletsDropdown
-              className={walletsDropdownClasses}
               {...walletsDropdownField.bind()}
               numberOfStakePools={4}
               wallets={wallets}
@@ -382,6 +374,7 @@ export default class Step1ConfigurationDialog extends Component<Props> {
               value={walletId}
               getStakePoolById={() => {}}
               errorPosition="bottom"
+              disabled={!recoveryPhraseField.isValid}
             />
           </div>
           <Checkbox
diff --git a/source/renderer/app/components/widgets/DialogFullSizeOverride.scss b/source/renderer/app/components/widgets/DialogFullSizeOverride.scss
index 158ba8f940..87fc133351 100644
--- a/source/renderer/app/components/widgets/DialogFullSizeOverride.scss
+++ b/source/renderer/app/components/widgets/DialogFullSizeOverride.scss
@@ -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;
     }
@@ -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,
diff --git a/source/renderer/app/components/widgets/forms/ItemsDropdown.js b/source/renderer/app/components/widgets/forms/ItemsDropdown.js
index 85ad563575..4f7338f04c 100644
--- a/source/renderer/app/components/widgets/forms/ItemsDropdown.js
+++ b/source/renderer/app/components/widgets/forms/ItemsDropdown.js
@@ -30,6 +30,7 @@ import globalMessages from '../../../i18n/global-messages';
  */
 export type ItemDropdownProps = {
   options: Array<ItemDropdown>,
+  disabled?: boolean,
   className?: string,
 };
 
diff --git a/source/renderer/app/components/widgets/forms/WalletsDropdown.js b/source/renderer/app/components/widgets/forms/WalletsDropdown.js
index d6b3fd0019..81133adc06 100644
--- a/source/renderer/app/components/widgets/forms/WalletsDropdown.js
+++ b/source/renderer/app/components/widgets/forms/WalletsDropdown.js
@@ -18,6 +18,7 @@ import ItemsDropdown from './ItemsDropdown';
  *
  */
 type Props = {
+  disabled?: boolean,
   className?: string,
   getStakePoolById: Function,
   numberOfStakePools: number,
@@ -42,6 +43,7 @@ function WalletsDropdown({
   numberOfStakePools,
   onSearch = onSearchWalletsDropdown,
   wallets = [],
+  disabled,
   ...props
 }: Props) {
   const discreetModeFeature = useDiscreetModeFeature();
@@ -79,6 +81,7 @@ function WalletsDropdown({
   });
   return (
     <ItemsDropdown
+      disabled={disabled}
       className={className}
       options={formattedOptions}
       {...itemsDropdownProps}
diff --git a/source/renderer/app/themes/daedalus/cardano.js b/source/renderer/app/themes/daedalus/cardano.js
index a7e0e556f3..88eb6bead3 100644
--- a/source/renderer/app/themes/daedalus/cardano.js
+++ b/source/renderer/app/themes/daedalus/cardano.js
@@ -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)',
   },
diff --git a/source/renderer/app/themes/daedalus/dark-blue.js b/source/renderer/app/themes/daedalus/dark-blue.js
index faedf936ad..a9797e4ba4 100644
--- a/source/renderer/app/themes/daedalus/dark-blue.js
+++ b/source/renderer/app/themes/daedalus/dark-blue.js
@@ -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)',
   },
diff --git a/source/renderer/app/themes/daedalus/dark-cardano.js b/source/renderer/app/themes/daedalus/dark-cardano.js
index 9f566bcfac..139a3ecd4d 100644
--- a/source/renderer/app/themes/daedalus/dark-cardano.js
+++ b/source/renderer/app/themes/daedalus/dark-cardano.js
@@ -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)',
   },
diff --git a/source/renderer/app/themes/daedalus/flight-candidate.js b/source/renderer/app/themes/daedalus/flight-candidate.js
index 5cfbefce95..a8cffebfe8 100644
--- a/source/renderer/app/themes/daedalus/flight-candidate.js
+++ b/source/renderer/app/themes/daedalus/flight-candidate.js
@@ -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)',
   },
diff --git a/source/renderer/app/themes/daedalus/incentivized-testnet.js b/source/renderer/app/themes/daedalus/incentivized-testnet.js
index f10d6177e7..48f506b5f0 100644
--- a/source/renderer/app/themes/daedalus/incentivized-testnet.js
+++ b/source/renderer/app/themes/daedalus/incentivized-testnet.js
@@ -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)',
   },
diff --git a/source/renderer/app/themes/daedalus/light-blue.js b/source/renderer/app/themes/daedalus/light-blue.js
index 2bd27b6352..8ba30d0317 100644
--- a/source/renderer/app/themes/daedalus/light-blue.js
+++ b/source/renderer/app/themes/daedalus/light-blue.js
@@ -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)',
   },
diff --git a/source/renderer/app/themes/daedalus/shelley-testnet.js b/source/renderer/app/themes/daedalus/shelley-testnet.js
index e195389d32..87cf36b2fe 100644
--- a/source/renderer/app/themes/daedalus/shelley-testnet.js
+++ b/source/renderer/app/themes/daedalus/shelley-testnet.js
@@ -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)',
   },
diff --git a/source/renderer/app/themes/daedalus/white.js b/source/renderer/app/themes/daedalus/white.js
index 65a910d97e..a51c72b151 100644
--- a/source/renderer/app/themes/daedalus/white.js
+++ b/source/renderer/app/themes/daedalus/white.js
@@ -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)',
   },
diff --git a/source/renderer/app/themes/daedalus/yellow.js b/source/renderer/app/themes/daedalus/yellow.js
index 4131b523cf..1bcf4dc0ee 100644
--- a/source/renderer/app/themes/daedalus/yellow.js
+++ b/source/renderer/app/themes/daedalus/yellow.js
@@ -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)',
   },