From ea1df7663084aeec5ff3cc58bb7eff228c289a0d Mon Sep 17 00:00:00 2001
From: sebastiengllmt <sebastiengllmt@gmail.com>
Date: Fri, 28 Dec 2018 08:34:29 +0900
Subject: [PATCH 1/4] upgrade react-polymorph to v0.7.2

---
 app/App.js                                    |  6 +--
 .../LanguageSelectionForm.js                  | 12 +++---
 .../profile/terms-of-use/TermsOfUseForm.js    | 12 +++---
 .../settings/categories/GeneralSettings.js    |  6 +--
 app/components/transfer/ErrorPage.js          |  6 +--
 .../transfer/TransferInstructionsPage.js      |  8 ++--
 .../transfer/TransferMnemonicPage.js          | 14 +++----
 .../transfer/TransferSummaryPage.js           |  8 ++--
 app/components/wallet/WalletAdd.js            | 10 ++---
 app/components/wallet/WalletCreateDialog.js   | 12 +++---
 app/components/wallet/WalletReceive.js        |  6 +--
 app/components/wallet/WalletRestoreDialog.js  | 16 ++++----
 .../wallet/backup-recovery/MnemonicWord.js    | 20 +++++-----
 .../wallet/backup-recovery/MnemonicWord.scss  | 24 ++++++------
 .../WalletBackupPrivacyWarningDialog.js       |  6 +--
 .../WalletRecoveryPhraseEntryDialog.js        | 30 ++++++++-------
 .../send/WalletSendConfirmationDialog.js      |  6 +--
 app/components/wallet/send/WalletSendForm.js  | 16 ++++----
 .../settings/ChangeWalletPasswordDialog.js    | 10 ++---
 .../wallet/skins/AmountInputSkin.js           |  2 +-
 .../transactions/WalletTransactionsList.js    |  6 +--
 .../wallet/trezorConnect/SaveDialog.js        |  6 +--
 app/components/widgets/Dialog.js              | 12 +++---
 .../widgets/forms/InlineEditingInput.js       | 11 +++---
 .../widgets/forms/InlineEditingInput.scss     | 19 ++--------
 app/components/widgets/forms/ReadOnlyInput.js |  8 ++--
 .../widgets/forms/ReadOnlyInput.scss          | 19 ++--------
 app/themes/prebuilt/yoroi.js                  | 35 +++++++++--------
 app/themes/simple/SimpleSelect.scss           |  2 +
 app/themes/simple/_config.scss                |  7 +++-
 app/themes/yoroi.js                           | 21 +++++++---
 features/step_definitions/common-steps.js     |  6 ++-
 .../step_definitions/select-language-steps.js |  2 +-
 .../step_definitions/transactions-steps.js    |  4 +-
 features/step_definitions/tx-history-steps.js |  5 ++-
 .../step_definitions/wallet-creation-steps.js |  2 +-
 .../wallet-restoration-steps.js               |  2 +-
 features/support/mockDataBuilder.js           | 19 +++++++---
 features/support/mockServer.js                | 15 ++++++--
 package-lock.json                             | 38 +++++++++++++++----
 package.json                                  |  2 +-
 41 files changed, 261 insertions(+), 210 deletions(-)

diff --git a/app/App.js b/app/App.js
index 0c3a07a9c5..b7834c5182 100644
--- a/app/App.js
+++ b/app/App.js
@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-import { ThemeProvider } from 'react-css-themr';
+import { ThemeProvider } from 'react-polymorph/lib/components/ThemeProvider';
 import { Router } from 'react-router-dom';
 import { addLocaleData, IntlProvider } from 'react-intl';
 import en from 'react-intl/locale-data/en';
@@ -48,13 +48,13 @@ class App extends Component<{
     const mergedMessages = Object.assign({}, translations['en-US'], translations[locale]);
 
     const currentTheme = 'yoroi';
-    const theme = require(`./themes/prebuilt/${currentTheme}.js`); // eslint-disable-line
+    const themeVars = require(`./themes/prebuilt/${currentTheme}.js`); // eslint-disable-line
 
     const mobxDevTools = this.mobxDevToolsInstanceIfDevEnv();
 
     return (
       <div style={{ height: '100%' }}>
-        <ThemeManager variables={theme} />
+        <ThemeManager variables={themeVars} />
         {/* Automatically pass a theme prop to all componenets in this subtree. */}
         <ThemeProvider theme={yoroiTheme}>
           <IntlProvider {...{ locale, key: locale, messages: mergedMessages }}>
diff --git a/app/components/profile/language-selection/LanguageSelectionForm.js b/app/components/profile/language-selection/LanguageSelectionForm.js
index 870c4f0394..47249fd990 100644
--- a/app/components/profile/language-selection/LanguageSelectionForm.js
+++ b/app/components/profile/language-selection/LanguageSelectionForm.js
@@ -2,10 +2,10 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import Select from 'react-polymorph/lib/components/Select';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
-import SelectSkin from 'react-polymorph/lib/skins/simple/raw/SelectSkin';
+import { Select } from 'react-polymorph/lib/components/Select';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { SelectSkin } from 'react-polymorph/lib/skins/simple/SelectSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import LocalizableError from '../../../i18n/LocalizableError';
@@ -87,7 +87,7 @@ export default class LanguageSelectionForm extends Component<Props> {
             className={styles.languageSelect}
             options={languageOptions}
             {...languageId.bind()}
-            skin={<SelectSkin />}
+            skin={SelectSkin}
           />
 
           {error && <p className={styles.error}>{intl.formatMessage(error)}</p>}
@@ -96,7 +96,7 @@ export default class LanguageSelectionForm extends Component<Props> {
             className={buttonClasses}
             label={intl.formatMessage(messages.submitLabel)}
             onMouseUp={this.submit}
-            skin={<SimpleButtonSkin />}
+            skin={ButtonSkin}
           />
 
         </div>
diff --git a/app/components/profile/terms-of-use/TermsOfUseForm.js b/app/components/profile/terms-of-use/TermsOfUseForm.js
index 9f8598c426..70685c6595 100644
--- a/app/components/profile/terms-of-use/TermsOfUseForm.js
+++ b/app/components/profile/terms-of-use/TermsOfUseForm.js
@@ -2,11 +2,11 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import { defineMessages, intlShape } from 'react-intl';
-import Checkbox from 'react-polymorph/lib/components/Checkbox';
-import SimpleCheckboxSkin from 'react-polymorph/lib/skins/simple/raw/CheckboxSkin';
+import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
+import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
 import LocalizableError from '../../../i18n/LocalizableError';
 import TermsOfUseText from './TermsOfUseText';
 import styles from './TermsOfUseForm.scss';
@@ -79,7 +79,7 @@ export default class TermsOfUseForm extends Component<Props, State> {
               label={intl.formatMessage(messages[checkboxLabel])}
               onChange={this.toggleAcceptance.bind(this)}
               checked={areTermsOfUseAccepted}
-              skin={<SimpleCheckboxSkin />}
+              skin={CheckboxSkin}
             />
           </div>
 
@@ -90,7 +90,7 @@ export default class TermsOfUseForm extends Component<Props, State> {
             label={intl.formatMessage(messages.submitLabel)}
             onMouseUp={this.submit}
             disabled={!areTermsOfUseAccepted}
-            skin={<SimpleButtonSkin />}
+            skin={ButtonSkin}
           />
 
         </div>
diff --git a/app/components/settings/categories/GeneralSettings.js b/app/components/settings/categories/GeneralSettings.js
index 9a33dec385..2a42335359 100644
--- a/app/components/settings/categories/GeneralSettings.js
+++ b/app/components/settings/categories/GeneralSettings.js
@@ -2,8 +2,8 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classNames from 'classnames';
-import Select from 'react-polymorph/lib/components/Select';
-import SelectSkin from 'react-polymorph/lib/skins/simple/raw/SelectSkin';
+import { Select } from 'react-polymorph/lib/components/Select';
+import { SelectSkin } from 'react-polymorph/lib/skins/simple/SelectSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import LocalizableError from '../../../i18n/LocalizableError';
@@ -75,7 +75,7 @@ export default class GeneralSettings extends Component<Props> {
           options={languageOptions}
           {...languageId.bind()}
           onChange={this.selectLanguage}
-          skin={<SelectSkin />}
+          skin={SelectSkin}
         />
 
         {error && <p className={styles.error}>{error}</p>}
diff --git a/app/components/transfer/ErrorPage.js b/app/components/transfer/ErrorPage.js
index 645fbc0897..9826a25f06 100644
--- a/app/components/transfer/ErrorPage.js
+++ b/app/components/transfer/ErrorPage.js
@@ -3,8 +3,8 @@ import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { intlShape } from 'react-intl';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import LocalizableError from '../../i18n/LocalizableError';
 import styles from './ErrorPage.scss';
 
@@ -50,7 +50,7 @@ export default class ErrorPage extends Component<Props> {
                 className={backButtonClasses}
                 label={backButtonLabel}
                 onClick={onCancel}
-                skin={<SimpleButtonSkin />}
+                skin={ButtonSkin}
               />
             </div>
 
diff --git a/app/components/transfer/TransferInstructionsPage.js b/app/components/transfer/TransferInstructionsPage.js
index 05280edfb8..fe1f3fedca 100644
--- a/app/components/transfer/TransferInstructionsPage.js
+++ b/app/components/transfer/TransferInstructionsPage.js
@@ -2,8 +2,8 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import BorderedBox from '../widgets/BorderedBox';
 import globalMessages from '../../i18n/global-messages';
@@ -94,7 +94,7 @@ export default class TransferInstructionsPage extends Component<Props> {
                 label={intl.formatMessage(messages.instructionsButton)}
                 onClick={onFollowInstructionsPrerequisites}
                 disabled={!disableTransferFunds}
-                skin={<SimpleButtonSkin />}
+                skin={ButtonSkin}
               />
 
             </div>
@@ -123,7 +123,7 @@ export default class TransferInstructionsPage extends Component<Props> {
                 label={confirmationText}
                 onClick={onConfirm}
                 disabled={disableTransferFunds}
-                skin={<SimpleButtonSkin />}
+                skin={ButtonSkin}
               />
 
             </div>
diff --git a/app/components/transfer/TransferMnemonicPage.js b/app/components/transfer/TransferMnemonicPage.js
index 44d165a673..58f35a33e6 100644
--- a/app/components/transfer/TransferMnemonicPage.js
+++ b/app/components/transfer/TransferMnemonicPage.js
@@ -3,10 +3,10 @@ import React, { Component } from 'react';
 import { join } from 'lodash';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Autocomplete from 'react-polymorph/lib/components/Autocomplete';
-import SimpleAutocompleteSkin from 'react-polymorph/lib/skins/simple/raw/AutocompleteSkin';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Autocomplete } from 'react-polymorph/lib/components/Autocomplete';
+import { AutocompleteSkin } from 'react-polymorph/lib/skins/simple/AutocompleteSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../utils/ReactToolboxMobxForm';
 import BorderedBox from '../widgets/BorderedBox';
@@ -157,7 +157,7 @@ export default class TransferMnemonicPage extends Component<Props> {
               error={recoveryPhraseField.error}
               maxVisibleOptions={5}
               noResultsMessage={intl.formatMessage(messages.recoveryPhraseNoResults)}
-              skin={<SimpleAutocompleteSkin />}
+              skin={AutocompleteSkin}
             />
 
             <div className={styles.buttonsWrapper}>
@@ -165,14 +165,14 @@ export default class TransferMnemonicPage extends Component<Props> {
                 className={nextButtonClasses}
                 label={intl.formatMessage(messages.nextButtonLabel)}
                 onClick={this.submit}
-                skin={<SimpleButtonSkin />}
+                skin={ButtonSkin}
               />
 
               <Button
                 className={backButtonClasses}
                 label={intl.formatMessage(messages.backButtonLabel)}
                 onClick={onBack}
-                skin={<SimpleButtonSkin />}
+                skin={ButtonSkin}
               />
             </div>
 
diff --git a/app/components/transfer/TransferSummaryPage.js b/app/components/transfer/TransferSummaryPage.js
index c97430c5d6..677e8b880c 100644
--- a/app/components/transfer/TransferSummaryPage.js
+++ b/app/components/transfer/TransferSummaryPage.js
@@ -2,8 +2,8 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import BorderedBox from '../widgets/BorderedBox';
 import styles from './TransferSummaryPage.scss';
@@ -166,7 +166,7 @@ export default class TransferSummaryPage extends Component<Props> {
                 label={intl.formatMessage(messages.cancelTransferButtonLabel)}
                 onClick={this.props.onCancel}
                 disabled={isSubmitting}
-                skin={<SimpleButtonSkin />}
+                skin={ButtonSkin}
               />
 
               <Button
@@ -174,7 +174,7 @@ export default class TransferSummaryPage extends Component<Props> {
                 label={intl.formatMessage(messages.transferButtonLabel)}
                 onClick={this.props.onSubmit}
                 disabled={isSubmitting}
-                skin={<SimpleButtonSkin />}
+                skin={ButtonSkin}
               />
             </div>
 
diff --git a/app/components/wallet/WalletAdd.js b/app/components/wallet/WalletAdd.js
index 112d331ab4..b608274d91 100644
--- a/app/components/wallet/WalletAdd.js
+++ b/app/components/wallet/WalletAdd.js
@@ -1,8 +1,8 @@
 // @flow
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import classnames from 'classnames';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import styles from './WalletAdd.scss';
@@ -82,19 +82,19 @@ export default class WalletAdd extends Component<Props> {
             className="primary trezorWalletButton"
             label={intl.formatMessage(messages.useTrezorDescription)}
             onMouseUp={onTrezor}
-            skin={<SimpleButtonSkin />}
+            skin={ButtonSkin}
           />
           <Button
             className="primary createWalletButton"
             label={intl.formatMessage(messages.createDescription)}
             onMouseUp={onCreate}
-            skin={<SimpleButtonSkin />}
+            skin={ButtonSkin}
           />
           <Button
             className="primary restoreWalletButton"
             label={intl.formatMessage(messages.restoreDescription)}
             onMouseUp={onRestore}
-            skin={<SimpleButtonSkin />}
+            skin={ButtonSkin}
           />
           {activeNotification ? (
             <div className={styles.notification}>
diff --git a/app/components/wallet/WalletCreateDialog.js b/app/components/wallet/WalletCreateDialog.js
index 73bb16b355..34b49aec30 100644
--- a/app/components/wallet/WalletCreateDialog.js
+++ b/app/components/wallet/WalletCreateDialog.js
@@ -2,8 +2,8 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Input from 'react-polymorph/lib/components/Input';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
+import { Input } from 'react-polymorph/lib/components/Input';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../utils/ReactToolboxMobxForm';
 import DialogCloseButton from '../widgets/DialogCloseButton';
@@ -71,7 +71,7 @@ export default class WalletCreateDialog extends Component<Props, State> {
   };
 
   componentDidMount() {
-    setTimeout(() => { this.walletNameInput.focus(); });
+    setTimeout(() => { this.walletNameInput.getRef().focus(); });
   }
 
   walletNameInput: Input;
@@ -193,7 +193,7 @@ export default class WalletCreateDialog extends Component<Props, State> {
           ref={(input) => { this.walletNameInput = input; }}
           {...walletNameField.bind()}
           error={walletNameField.error}
-          skin={<SimpleInputSkin />}
+          skin={InputSkin}
         />
 
         <div className={styles.walletPassword}>
@@ -202,13 +202,13 @@ export default class WalletCreateDialog extends Component<Props, State> {
               className="walletPassword"
               {...walletPasswordField.bind()}
               error={walletPasswordField.error}
-              skin={<SimpleInputSkin />}
+              skin={InputSkin}
             />
             <Input
               className="repeatedPassword"
               {...repeatedPasswordField.bind()}
               error={repeatedPasswordField.error}
-              skin={<SimpleInputSkin />}
+              skin={InputSkin}
             />
             <p className={styles.passwordInstructions}>
               {intl.formatMessage(globalMessages.passwordInstructions)}
diff --git a/app/components/wallet/WalletReceive.js b/app/components/wallet/WalletReceive.js
index 86af4c9601..73deaa0c4e 100644
--- a/app/components/wallet/WalletReceive.js
+++ b/app/components/wallet/WalletReceive.js
@@ -6,8 +6,8 @@ import SvgInline from 'react-svg-inline';
 import classnames from 'classnames';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import QRCode from 'qrcode.react';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import BorderedBox from '../widgets/BorderedBox';
 import iconCopy from '../../assets/images/clipboard-ic.inline.svg';
 import WalletAddress from '../../domain/WalletAddress';
@@ -120,7 +120,7 @@ export default class WalletReceive extends Component<Props, State> {
         className={generateAddressButtonClasses}
         label={intl.formatMessage(messages.generateNewAddressButtonLabel)}
         onMouseUp={this.submit}
-        skin={<SimpleButtonSkin />}
+        skin={ButtonSkin}
       />
     );
 
diff --git a/app/components/wallet/WalletRestoreDialog.js b/app/components/wallet/WalletRestoreDialog.js
index d5b1c9fe6b..6d9af21659 100644
--- a/app/components/wallet/WalletRestoreDialog.js
+++ b/app/components/wallet/WalletRestoreDialog.js
@@ -3,10 +3,10 @@ import React, { Component } from 'react';
 import { join } from 'lodash';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Input from 'react-polymorph/lib/components/Input';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
-import Autocomplete from 'react-polymorph/lib/components/Autocomplete';
-import SimpleAutocompleteSkin from 'react-polymorph/lib/skins/simple/raw/AutocompleteSkin';
+import { Input } from 'react-polymorph/lib/components/Input';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
+import { Autocomplete } from 'react-polymorph/lib/components/Autocomplete';
+import { AutocompleteSkin } from 'react-polymorph/lib/skins/simple/AutocompleteSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../utils/ReactToolboxMobxForm';
 import DialogCloseButton from '../widgets/DialogCloseButton';
@@ -223,7 +223,7 @@ export default class WalletRestoreDialog extends Component<Props> {
           className={walletNameFieldClasses}
           {...walletNameField.bind()}
           error={walletNameField.error}
-          skin={<SimpleInputSkin />}
+          skin={InputSkin}
         />
 
         <Autocomplete
@@ -233,7 +233,7 @@ export default class WalletRestoreDialog extends Component<Props> {
           error={recoveryPhraseField.error}
           maxVisibleOptions={5}
           noResultsMessage={intl.formatMessage(messages.recoveryPhraseNoResults)}
-          skin={<SimpleAutocompleteSkin />}
+          skin={AutocompleteSkin}
         />
 
         <div className={styles.walletPassword}>
@@ -242,13 +242,13 @@ export default class WalletRestoreDialog extends Component<Props> {
               className="walletPassword"
               {...walletPasswordField.bind()}
               error={walletPasswordField.error}
-              skin={<SimpleInputSkin />}
+              skin={InputSkin}
             />
             <Input
               className="repeatedPassword"
               {...repeatedPasswordField.bind()}
               error={repeatedPasswordField.error}
-              skin={<SimpleInputSkin />}
+              skin={InputSkin}
             />
             <p className={styles.passwordInstructions}>
               {intl.formatMessage(globalMessages.passwordInstructions)}
diff --git a/app/components/wallet/backup-recovery/MnemonicWord.js b/app/components/wallet/backup-recovery/MnemonicWord.js
index ed0d99ff18..b75620e4fe 100644
--- a/app/components/wallet/backup-recovery/MnemonicWord.js
+++ b/app/components/wallet/backup-recovery/MnemonicWord.js
@@ -1,9 +1,8 @@
 // @flow
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import styles from './MnemonicWord.scss';
 
 type Props = {
@@ -18,17 +17,16 @@ export default class MnemonicWord extends Component<Props> {
 
   render() {
     const { word, index, isActive, onClick } = this.props;
-    const componentClassNames = classnames([
-      'flat',
-      styles.component,
-      isActive ? styles.active : styles.inactive
-    ]);
+    const handleClick = onClick.bind(null, { word, index });
+
     return (
       <Button
-        className={componentClassNames}
+        className="flat"
+        themeOverrides={styles}
+        disabled={!isActive}
         label={word}
-        onClick={() => onClick({ word, index })}
-        skin={<SimpleButtonSkin />}
+        onClick={handleClick}
+        skin={ButtonSkin}
       />
     );
   }
diff --git a/app/components/wallet/backup-recovery/MnemonicWord.scss b/app/components/wallet/backup-recovery/MnemonicWord.scss
index b3cb89fbd9..a6be686543 100644
--- a/app/components/wallet/backup-recovery/MnemonicWord.scss
+++ b/app/components/wallet/backup-recovery/MnemonicWord.scss
@@ -1,20 +1,22 @@
-.component {
-  background-color: var(--theme-mnemonic-background-color) !important;
+.root {
+  background-color: var(--theme-mnemonic-background-color);
   font-size: 15px !important;
   margin: 5px 0;
   height: 40px;
   padding: 10px 20px;
   width: 140px !important;
-}
 
-.inactive {
-  cursor: default !important;
-  opacity: 0.3;
-}
+  &.disabled {
+    cursor: default !important;
+    opacity: 0.3;
+  }
 
-.active {
-  cursor: pointer;
-  &:hover {
-    background-color: var(--theme-mnemonic-background-color-hover) !important;
+  &:not(.disabled) {
+    &:active {
+      cursor: pointer;
+      &:hover {
+        background-color: var(--theme-mnemonic-background-color-hover) !important;
+      }
+    }
   }
 }
diff --git a/app/components/wallet/backup-recovery/WalletBackupPrivacyWarningDialog.js b/app/components/wallet/backup-recovery/WalletBackupPrivacyWarningDialog.js
index 1fa3d2beae..10cb3b71b1 100644
--- a/app/components/wallet/backup-recovery/WalletBackupPrivacyWarningDialog.js
+++ b/app/components/wallet/backup-recovery/WalletBackupPrivacyWarningDialog.js
@@ -2,8 +2,8 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Checkbox from 'react-polymorph/lib/components/Checkbox';
-import SimpleCheckboxSkin from 'react-polymorph/lib/skins/simple/raw/CheckboxSkin';
+import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
+import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import Dialog from '../../widgets/Dialog';
 import DialogCloseButton from '../../widgets/DialogCloseButton';
@@ -89,7 +89,7 @@ export default class WalletBackupPrivacyWarningDialog extends Component<Props> {
             label={intl.formatMessage(messages.termNobodyWatching)}
             onChange={onAcceptPrivacyNotice}
             checked={isPrivacyNoticeAccepted}
-            skin={<SimpleCheckboxSkin />}
+            skin={CheckboxSkin}
           />
         </div>
       </Dialog>
diff --git a/app/components/wallet/backup-recovery/WalletRecoveryPhraseEntryDialog.js b/app/components/wallet/backup-recovery/WalletRecoveryPhraseEntryDialog.js
index e2a6859766..112227dc70 100644
--- a/app/components/wallet/backup-recovery/WalletRecoveryPhraseEntryDialog.js
+++ b/app/components/wallet/backup-recovery/WalletRecoveryPhraseEntryDialog.js
@@ -2,8 +2,8 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Checkbox from 'react-polymorph/lib/components/Checkbox';
-import SimpleCheckboxSkin from 'react-polymorph/lib/skins/simple/raw/CheckboxSkin';
+import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
+import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import WalletRecoveryPhraseMnemonic from './WalletRecoveryPhraseMnemonic';
 import DialogCloseButton from '../../widgets/DialogCloseButton';
@@ -130,15 +130,19 @@ export default class WalletRecoveryPhraseEntryDialog extends Component<Props> {
 
         {!isValid && (
           <div className={styles.words}>
-            {recoveryPhraseSorted.map(({ word, isActive }, index) => (
-              <MnemonicWord
-                key={index} // eslint-disable-line react/no-array-index-key
-                word={word}
-                index={index}
-                isActive={isActive}
-                onClick={(value) => isActive && onAddWord(value)}
-              />
-            ))}
+            {recoveryPhraseSorted.map(({ word, isActive }, index) => {
+              const handleClick = value => isActive && onAddWord(value);
+
+              return (
+                <MnemonicWord
+                  key={index} // eslint-disable-line react/no-array-index-key
+                  word={word}
+                  index={index}
+                  isActive={isActive}
+                  onClick={handleClick}
+                />
+              );
+            })}
           </div>
         )}
 
@@ -149,7 +153,7 @@ export default class WalletRecoveryPhraseEntryDialog extends Component<Props> {
                 label={<FormattedHTMLMessage {...messages.termDevice} />}
                 onChange={onAcceptTermDevice}
                 checked={isTermDeviceAccepted}
-                skin={<SimpleCheckboxSkin />}
+                skin={CheckboxSkin}
               />
             </div>
             <div className={styles.checkbox}>
@@ -157,7 +161,7 @@ export default class WalletRecoveryPhraseEntryDialog extends Component<Props> {
                 label={intl.formatMessage(messages.termRecovery)}
                 onChange={onAcceptTermRecovery}
                 checked={isTermRecoveryAccepted}
-                skin={<SimpleCheckboxSkin />}
+                skin={CheckboxSkin}
               />
             </div>
           </div>
diff --git a/app/components/wallet/send/WalletSendConfirmationDialog.js b/app/components/wallet/send/WalletSendConfirmationDialog.js
index fb7cc44600..8c3ff6d1aa 100644
--- a/app/components/wallet/send/WalletSendConfirmationDialog.js
+++ b/app/components/wallet/send/WalletSendConfirmationDialog.js
@@ -5,8 +5,8 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Input from 'react-polymorph/lib/components/Input';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
+import { Input } from 'react-polymorph/lib/components/Input';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import Dialog from '../../widgets/Dialog';
@@ -179,7 +179,7 @@ export default class WalletSendConfirmationDialog extends Component<Props> {
               className={styles.walletPassword}
               {...walletPasswordField.bind()}
               error={walletPasswordField.error}
-              skin={<SimpleInputSkin />}
+              skin={InputSkin}
             />
           }
         </div>
diff --git a/app/components/wallet/send/WalletSendForm.js b/app/components/wallet/send/WalletSendForm.js
index 66172ea65b..c4ef5e1d07 100755
--- a/app/components/wallet/send/WalletSendForm.js
+++ b/app/components/wallet/send/WalletSendForm.js
@@ -3,11 +3,11 @@ import React, { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
-import Input from 'react-polymorph/lib/components/Input';
-import NumericInput from 'react-polymorph/lib/components/NumericInput';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Input } from 'react-polymorph/lib/components/Input';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
+import { NumericInput } from 'react-polymorph/lib/components/NumericInput';
 import { defineMessages, intlShape } from 'react-intl';
 import BigNumber from 'bignumber.js';
 import SvgInline from 'react-svg-inline';
@@ -254,7 +254,7 @@ export default class WalletSendForm extends Component<Props, State> {
               className="receiver"
               {...receiverField.bind()}
               error={receiverField.error}
-              skin={<SimpleInputSkin />}
+              skin={InputSkin}
             />
           </div>
 
@@ -270,7 +270,7 @@ export default class WalletSendForm extends Component<Props, State> {
               currency={currencyUnit}
               fees={transactionFee.toFormat(currencyMaxFractionalDigits)}
               total={totalAmount.toFormat(currencyMaxFractionalDigits)}
-              skin={<AmountInputSkin />}
+              skin={AmountInputSkin}
             />
           </div>
 
@@ -322,7 +322,7 @@ export default class WalletSendForm extends Component<Props, State> {
         /** Next Action can't be performed in case transaction fees are not calculated
           * or there's a transaction waiting to be confirmed (pending) */
         disabled={!isTransactionFeeCalculated || hasAnyPending}
-        skin={<SimpleButtonSkin />}
+        skin={ButtonSkin}
       />);
   }
 
diff --git a/app/components/wallet/settings/ChangeWalletPasswordDialog.js b/app/components/wallet/settings/ChangeWalletPasswordDialog.js
index f61ec1da5a..e7abb9da01 100644
--- a/app/components/wallet/settings/ChangeWalletPasswordDialog.js
+++ b/app/components/wallet/settings/ChangeWalletPasswordDialog.js
@@ -2,8 +2,8 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Input from 'react-polymorph/lib/components/Input';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
+import { Input } from 'react-polymorph/lib/components/Input';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import DialogCloseButton from '../../widgets/DialogCloseButton';
@@ -206,7 +206,7 @@ export default class ChangeWalletPasswordDialog extends Component<Props> {
             onChange={(value) => this.handleDataChange('currentPasswordValue', value)}
             {...currentPasswordField.bind()}
             error={currentPasswordField.error}
-            skin={<SimpleInputSkin />}
+            skin={InputSkin}
           />
         </div>
 
@@ -218,7 +218,7 @@ export default class ChangeWalletPasswordDialog extends Component<Props> {
             onChange={(value) => this.handleDataChange('newPasswordValue', value)}
             {...newPasswordField.bind()}
             error={newPasswordField.error}
-            skin={<SimpleInputSkin />}
+            skin={InputSkin}
           />
 
           <Input
@@ -228,7 +228,7 @@ export default class ChangeWalletPasswordDialog extends Component<Props> {
             onChange={(value) => this.handleDataChange('repeatedPasswordValue', value)}
             {...repeatedPasswordField.bind()}
             error={repeatedPasswordField.error}
-            skin={<SimpleInputSkin />}
+            skin={InputSkin}
           />
 
           <p className={styles.passwordInstructions}>
diff --git a/app/components/wallet/skins/AmountInputSkin.js b/app/components/wallet/skins/AmountInputSkin.js
index 2f1ca86dbe..38085ccfdf 100644
--- a/app/components/wallet/skins/AmountInputSkin.js
+++ b/app/components/wallet/skins/AmountInputSkin.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { defineMessages, intlShape } from 'react-intl';
 import BigNumber from 'bignumber.js';
-import InputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import styles from './AmountInputSkin.scss';
 
 export const messages = defineMessages({
diff --git a/app/components/wallet/transactions/WalletTransactionsList.js b/app/components/wallet/transactions/WalletTransactionsList.js
index dcd8131c69..c2d94f0efd 100644
--- a/app/components/wallet/transactions/WalletTransactionsList.js
+++ b/app/components/wallet/transactions/WalletTransactionsList.js
@@ -3,8 +3,8 @@ import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import classnames from 'classnames';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import moment from 'moment';
 import styles from './WalletTransactionsList.scss';
 import Transaction from './Transaction';
@@ -151,7 +151,7 @@ export default class WalletTransactionsList extends Component<Props> {
             className={buttonClasses}
             label={intl.formatMessage(messages.showMoreTransactionsButtonLabel)}
             onClick={onLoadMore}
-            skin={<SimpleButtonSkin />}
+            skin={ButtonSkin}
           />
         }
       </div>
diff --git a/app/components/wallet/trezorConnect/SaveDialog.js b/app/components/wallet/trezorConnect/SaveDialog.js
index d872226975..bafc52fa01 100644
--- a/app/components/wallet/trezorConnect/SaveDialog.js
+++ b/app/components/wallet/trezorConnect/SaveDialog.js
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import classnames from 'classnames';
 import SvgInline from 'react-svg-inline';
-import Input from 'react-polymorph/lib/components/Input';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
+import { Input } from 'react-polymorph/lib/components/Input';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 
 import globalMessages from '../../../i18n/global-messages';
 import LocalizableError from '../../../i18n/LocalizableError';
@@ -114,7 +114,7 @@ export default class SaveDialog extends Component<Props> {
           className={walletNameFieldClasses}
           {...walletNameField.bind()}
           error={walletNameField.error}
-          skin={<SimpleInputSkin />}
+          skin={InputSkin}
         />
         <span>{intl.formatMessage(messages.saveWalletNameInputBottomInfo)}</span>
       </div>);
diff --git a/app/components/widgets/Dialog.js b/app/components/widgets/Dialog.js
index 863ea876f8..a59bdeeb51 100644
--- a/app/components/widgets/Dialog.js
+++ b/app/components/widgets/Dialog.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 import classnames from 'classnames';
 import type { Node } from 'react';
-import Modal from 'react-polymorph/lib/components/Modal';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
-import SimpleModalSkin from 'react-polymorph/lib/skins/simple/raw/ModalSkin';
+import { Modal } from 'react-polymorph/lib/components/Modal';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { ModalSkin } from 'react-polymorph/lib/skins/simple/ModalSkin';
 import styles from './Dialog.scss';
 
 type Props = {
@@ -48,7 +48,7 @@ export default class Dialog extends Component<Props> {
         isOpen
         triggerCloseOnOverlayClick={closeOnOverlayClick}
         onClose={onClose}
-        skin={<SimpleModalSkin />}
+        skin={ModalSkin}
       >
 
         <div className={classnames([styles.dialogWrapper, className])}>
@@ -78,7 +78,7 @@ export default class Dialog extends Component<Props> {
                     label={action.label}
                     onClick={action.onClick}
                     disabled={action.disabled}
-                    skin={<SimpleButtonSkin />}
+                    skin={ButtonSkin}
                   />
                 );
               })}
diff --git a/app/components/widgets/forms/InlineEditingInput.js b/app/components/widgets/forms/InlineEditingInput.js
index 698cb9330a..20612c459c 100644
--- a/app/components/widgets/forms/InlineEditingInput.js
+++ b/app/components/widgets/forms/InlineEditingInput.js
@@ -3,8 +3,8 @@ import React, { Component, } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import classnames from 'classnames';
-import Input from 'react-polymorph/lib/components/Input';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
+import { Input } from 'react-polymorph/lib/components/Input';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import styles from './InlineEditingInput.scss';
 
@@ -120,8 +120,8 @@ export default class InlineEditingInput extends Component<Props, State> {
   };
 
   componentDidUpdate() {
-    if (this.props.isActive) {
-      this.inputField.focus();
+    if (this.props.isActive && this.inputField) {
+      this.inputField.getRef().focus();
     }
   }
 
@@ -159,6 +159,7 @@ export default class InlineEditingInput extends Component<Props, State> {
 
         <Input
           className={inputStyles}
+          themeOverrides={styles}
           type="text"
           label={inputFieldLabel}
           value={isActive ? inputField.value : inputFieldValue}
@@ -169,7 +170,7 @@ export default class InlineEditingInput extends Component<Props, State> {
           error={isActive ? inputField.error : null}
           disabled={!isActive}
           ref={(input) => { this.inputField = input; }}
-          skin={<SimpleInputSkin />}
+          skin={InputSkin}
         />
 
         {isActive && (
diff --git a/app/components/widgets/forms/InlineEditingInput.scss b/app/components/widgets/forms/InlineEditingInput.scss
index 04a7ae2537..ae00b3eff0 100644
--- a/app/components/widgets/forms/InlineEditingInput.scss
+++ b/app/components/widgets/forms/InlineEditingInput.scss
@@ -2,21 +2,10 @@
   margin-bottom: 20px;
   position: relative;
 
-  :global {
-    .SimpleFormField_root {
-      .SimpleFormField_label {
-        color: var(--theme-input-label-color);
-      }
-    }
-
-    .SimpleInput_disabled {
-      background: none;
-      & .SimpleInput_input {
-        background-color: var(--theme-input-background-color);
-        border-color: var(--theme-input-border-color);
-        color: var(--theme-input-text-color) !important;
-      }
-    }
+  .disabled {
+    background-color: var(--theme-input-background-color);
+    border-color: var(--theme-input-border-color);
+    color: var(--theme-input-text-color);
   }
 
   &.inactive {
diff --git a/app/components/widgets/forms/ReadOnlyInput.js b/app/components/widgets/forms/ReadOnlyInput.js
index d9e98c0043..f8ee193587 100644
--- a/app/components/widgets/forms/ReadOnlyInput.js
+++ b/app/components/widgets/forms/ReadOnlyInput.js
@@ -3,8 +3,8 @@ import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { intlShape } from 'react-intl';
-import Input from 'react-polymorph/lib/components/Input';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
+import { Input } from 'react-polymorph/lib/components/Input';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import globalMessages from '../../../i18n/global-messages';
 import styles from './ReadOnlyInput.scss';
 
@@ -41,12 +41,12 @@ export default class ReadOnlyInput extends Component<Props> {
       <div className={mainClasses}>
 
         <Input
-          className={styles.input}
+          themeOverrides={styles}
           type="text"
           label={label}
           value={value}
           disabled
-          skin={<SimpleInputSkin />}
+          skin={InputSkin}
         />
 
         <button
diff --git a/app/components/widgets/forms/ReadOnlyInput.scss b/app/components/widgets/forms/ReadOnlyInput.scss
index 95ccb9bc5d..ddca102468 100644
--- a/app/components/widgets/forms/ReadOnlyInput.scss
+++ b/app/components/widgets/forms/ReadOnlyInput.scss
@@ -2,21 +2,10 @@
   margin-bottom: 32px;
   position: relative;
 
-  :global {
-    .SimpleFormField_root {
-      .SimpleFormField_label {
-        color: var(--theme-input-label-color);
-      }
-    }
-
-    .SimpleInput_disabled {
-      background: none;
-      & .SimpleInput_input {
-        background-color: var(--theme-input-background-color);
-        border-color: var(--theme-input-border-color);
-        color: var(--theme-input-text-color) !important;
-      }
-    }
+  .disabled {
+    background-color: var(--theme-input-background-color);
+    border-color: var(--theme-input-border-color);
+    color: var(--theme-input-text-color);
   }
 
   .button {
diff --git a/app/themes/prebuilt/yoroi.js b/app/themes/prebuilt/yoroi.js
index 202b8c1fb9..c09492c518 100644
--- a/app/themes/prebuilt/yoroi.js
+++ b/app/themes/prebuilt/yoroi.js
@@ -23,7 +23,7 @@ export default {
   '--theme-autocomplete-search-color': '#121327',
   '--theme-autocomplete-placeholder-color': 'rgba(94, 96, 102, 0.5)',
   '--theme-autocomplete-selected-word-text-color': '#fafbfc',
-  '--theme-autocomplete-selected-word-box-background-color': 'rgba(218, 164, 154, 1)',
+  '--theme-autocomplete-selected-word-box-background-color': 'rgba(218, 164, 154, 1)', // #DAA49A
   '--theme-autocomplete-suggestions-list-border-color': '#c6cdd6',
   '--theme-autocomplete-suggestions-list-item-bg-color': '#fafbfc',
   '--theme-autocomplete-suggestions-list-item-font-color': '#121327',
@@ -36,19 +36,21 @@ export default {
   '--theme-button-primary-background-color': '#daa49a',
   '--theme-button-primary-background-color-hover': '#edb3a8',
   '--theme-button-primary-background-color-active': '#c4948b',
-  '--theme-button-primary-background-color-disabled': 'rgba(218, 164, 154, 0.3)',
+  '--theme-button-primary-background-color-disabled': 'rgba(218, 164, 154, 0.3)', // #DAA49A
   '--theme-button-primary-text-color-disabled': '#fafbfc',
   '--theme-button-primary-text-color': '#fafbfc',
 
-  '--theme-button-flat-background-color': 'rgba(218, 164, 154, 0.1)',
-  '--theme-button-flat-background-color-hover': 'rgba(242, 183, 172, 0.1)',
-  '--theme-button-flat-background-color-active': 'rgba(191, 144, 136, 0.1)',
-  '--theme-button-flat-background-color-disabled': 'rgba(240, 243, 245, 0.3)',
+  '--theme-button-flat-background-color': 'rgba(218, 164, 154, 0.1)', // #DAA49A
+  '--theme-button-flat-background-color-hover': 'rgba(242, 183, 172, 0.1)', // #F2B7AC
+  '--theme-button-flat-background-color-active': 'rgba(191, 144, 136, 0.1)', // #BF9088
+  '--theme-button-flat-background-color-disabled': 'rgba(240, 243, 245, 0.3)', // #F0F3F5
   '--theme-button-flat-text-color-disabled': '#121327',
   '--theme-button-flat-text-color': '#121327',
 
   '--theme-checkbox-label-color': '#121327',
+  '--theme-checkbox-label-disabled-color': 'rgba(18, 19, 39, 0.3)', // #121327
   '--theme-checkbox-border-color': '#daa49a',
+  '--theme-checkbox-border-disabled-color': 'rgba(218, 164, 154, 0.2)', // #DAA49A
   '--theme-checkbox-background-color-checked': '#daa49a',
 
   '--theme-select-arrow-color': '#c6cdd6',
@@ -58,6 +60,7 @@ export default {
   '--theme-select-option-text-color': '#121327',
   '--theme-select-options-border-color': '#c6cdd6',
   '--theme-select-options-shadow': 'none',
+  '--theme-select-options-checkmark-color': '#121327',
 
   '--theme-choice-tabs-text-color': '#121327',
   '--theme-choice-tabs-text-color-active': '#121327',
@@ -75,8 +78,8 @@ export default {
   '--theme-input-border-color': '#c6cdd6',
   '--theme-input-label-color': '#121327',
   '--theme-input-text-color': '#121327',
-  '--theme-input-right-floating-text-color': 'rgba(94, 96, 102, 0.5)',
-  '--theme-input-placeholder-color': 'rgba(94, 96, 102, 0.5)',
+  '--theme-input-right-floating-text-color': 'rgba(94, 96, 102, 0.5)', // #5E6066
+  '--theme-input-placeholder-color': 'rgba(94, 96, 102, 0.5)', // #5E6066
   '--theme-input-error-color': '#ea4c5b',
   '--theme-input-remove-color-dark': '#d34452',
   '--theme-input-remove-color-light': '#ea4c5b',
@@ -89,16 +92,16 @@ export default {
   '--theme-main-body-background-color': '#ffffff',
   '--theme-main-body-messages-color': '#121327',
 
-  '--theme-modal-overlay-background-color': 'rgba(0, 0, 0, 0.4)',
+  '--theme-modal-overlay-background-color': 'rgba(0, 0, 0, 0.4)', // #000000
   '--theme-modal-background-color': '#fafbfc',
 
   '--theme-nav-item-background-color': '#f3f3f5',
   '--theme-nav-item-background-color-hover': '#f9f9fa',
   '--theme-nav-item-background-color-active': '#fff',
-  '--theme-nav-item-text-color': 'rgba(18, 19, 39, 0.6)',
+  '--theme-nav-item-text-color': 'rgba(18, 19, 39, 0.6)', // #121327
   '--theme-nav-item-text-color-active': '#121327',
 
-  '--theme-notification-message-background-color': 'rgba(218, 164, 154, 0.8)',
+  '--theme-notification-message-background-color': 'rgba(218, 164, 154, 0.8)', // #DAA49A
   '--theme-notification-message-text-color': '#fafbfc',
 
   '--theme-receive-qr-code-background-color': 'transparent',
@@ -126,7 +129,7 @@ export default {
   '--theme-switch-label-color': '#121327',
 
   '--theme-system-error-overlay-attention-icon-color': '#fafbfc',
-  '--theme-system-error-overlay-background-color': 'rgba(171, 23, 0, 0.94)',
+  '--theme-system-error-overlay-background-color': 'rgba(171, 23, 0, 0.94)', // #AB1700
   '--theme-system-error-overlay-button-background-color': '#ab1700',
   '--theme-system-error-overlay-button-background-color-hover': '#fafbfc',
   '--theme-system-error-overlay-button-border-color': '#fafbfc',
@@ -153,7 +156,7 @@ export default {
   '--theme-transactions-state-failed-text-color': '#bdc5ce',
   '--theme-transactions-state-pending-background-color': '#bdc5ce',
   '--theme-transactions-state-pending-stripes-color': '#b2bac2',
-  '--theme-transactions-priority-color': 'rgba(18, 19, 39, 0.6)',
+  '--theme-transactions-priority-color': 'rgba(18, 19, 39, 0.6)', // #121327
   '--theme-transactions-priority-low-background-color': '#e8abbb',
   '--theme-transactions-priority-medium-background-color': '#e7d5a3',
   '--theme-transactions-priority-heigh-background-color': '#afdac2',
@@ -165,7 +168,7 @@ export default {
   '--theme-transactions-sent-color': '#eb6d7a',
   '--theme-transactions-received-color': '#54ca87',
 
-  '--theme-icon-nav-color': 'rgba(18, 19, 39, 0.6)',
+  '--theme-icon-nav-color': 'rgba(18, 19, 39, 0.6)', // #121327
   '--theme-icon-nav-color-active': '#ffffff',
   '--theme-icon-topbar-color': '#fafbfc',
   '--theme-icon-toggle-menu-color': '#fafbfc',
@@ -188,8 +191,8 @@ export default {
 
   '--theme-loading-background-color': '#fafbfc',
 
-  '--theme-mnemonic-background-color': 'rgba(218, 164, 154, 0.12)',
-  '--theme-mnemonic-background-color-hover': 'rgba(242, 183, 172, 0.12)',
+  '--theme-mnemonic-background-color': 'rgba(218, 164, 154, 0.12)', // #DAA49A
+  '--theme-mnemonic-background-color-hover': 'rgba(242, 183, 172, 0.12)', // #F2B7AC
 
   '--theme-separation-border-color': '#dfe4e8',
 
diff --git a/app/themes/simple/SimpleSelect.scss b/app/themes/simple/SimpleSelect.scss
index 229ae5821f..23fd04c289 100644
--- a/app/themes/simple/SimpleSelect.scss
+++ b/app/themes/simple/SimpleSelect.scss
@@ -2,6 +2,8 @@
 // Theme config overrides go here …
 @import "~react-polymorph/lib/themes/simple/SimpleSelect";
 // Css module overrides go here …
+$select-arrow-color: var(--theme-select-arrow-color);
+$select-open-arrow-color: var(--theme-select-arrow-color-open);
 
 .selectInput {
   &::after {
diff --git a/app/themes/simple/_config.scss b/app/themes/simple/_config.scss
index 87e810a54d..01bcf46ff7 100644
--- a/app/themes/simple/_config.scss
+++ b/app/themes/simple/_config.scss
@@ -1,6 +1,5 @@
 // THEME CONFIGURATION
 
-$path: "react-polymorph/lib/themes/simple/";
 $theme-assets-path: "react-polymorph/lib/themes/simple/assets";
 
 $theme-font-thin: var(--font-thin);
@@ -50,6 +49,7 @@ $option-bg-color: var(--theme-select-background-color);
 $option-font-color: var(--theme-select-option-text-color);
 $option-border-color: var(--theme-select-options-border-color);
 $option-highlight-color: var(--theme-select-option-highlight-color);
+$option-checkmark-color: var(--theme-select-options-checkmark-color);
 
 // BUBBLE
 
@@ -57,6 +57,11 @@ $bubble-bg-color: var(--theme-select-background-color);
 $bubble-border-color: var(--theme-select-options-border-color);
 $bubble-border-radius: 2px;
 
+// CHECKBOX
+
+$checkbox-border-disabled-color: var(--theme-checkbox-border-disabled-color);
+$checkbox-label-disabled-color: var(--theme-checkbox-label-disabled-color);
+
 // SWITCH
 
 $switch-on-accent-color: var(--theme-switch-background-color-checked);
diff --git a/app/themes/yoroi.js b/app/themes/yoroi.js
index 992a14d527..a5ecef5f33 100644
--- a/app/themes/yoroi.js
+++ b/app/themes/yoroi.js
@@ -1,8 +1,3 @@
-import {
-  SELECT, INPUT, FORM_FIELD, CHECKBOX, SWITCH, MODAL,
-  BUTTON, TEXT_AREA, AUTOCOMPLETE, OPTIONS, BUBBLE
-} from 'react-polymorph/lib/skins/simple/identifiers';
-
 // react-polymorph components
 import SimpleFormField from './simple/SimpleFormField.scss';
 import SimpleInput from './simple/SimpleInput.scss';
@@ -16,6 +11,22 @@ import SimpleBubble from './simple/SimpleBubble.scss';
 import SimpleOptions from './simple/SimpleOptions.scss';
 import SimpleSelect from './simple/SimpleSelect.scss';
 
+import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
+
+const {
+  AUTOCOMPLETE,
+  BUBBLE,
+  BUTTON,
+  CHECKBOX,
+  FORM_FIELD,
+  INPUT,
+  MODAL,
+  OPTIONS,
+  SELECT,
+  SWITCH,
+  TEXT_AREA,
+} = IDENTIFIERS;
+
 // package all our overrides into one theme
 export const yoroiTheme = {
   [FORM_FIELD]: SimpleFormField,
diff --git a/features/step_definitions/common-steps.js b/features/step_definitions/common-steps.js
index 9243195327..914c533c42 100644
--- a/features/step_definitions/common-steps.js
+++ b/features/step_definitions/common-steps.js
@@ -68,7 +68,11 @@ function refreshWallet(client) {
 }
 
 async function storeWallet(client, walletName) {
-  const { masterKey, wallet, cryptoAccount, adaAddresses, walletInitialData } = getFeatureData();
+  const featureData = getFeatureData();
+  if (!featureData) {
+    return;
+  }
+  const { masterKey, wallet, cryptoAccount, adaAddresses, walletInitialData } = featureData;
   if (wallet === undefined) {
     return;
   }
diff --git a/features/step_definitions/select-language-steps.js b/features/step_definitions/select-language-steps.js
index 9c403db90f..9705f606ad 100644
--- a/features/step_definitions/select-language-steps.js
+++ b/features/step_definitions/select-language-steps.js
@@ -20,7 +20,7 @@ When(/^I open language selection dropdown$/, async function () {
 });
 
 When(/^I select Japanese language$/, async function () {
-  await this.click('//li[contains(text(), "日本語")]', By.xpath);
+  return this.click('//*[@class="SimpleOptions_label"][contains(text(), "日本語")]', By.xpath);
 });
 
 When(/^I submit the language selection form$/, async function () {
diff --git a/features/step_definitions/transactions-steps.js b/features/step_definitions/transactions-steps.js
index 6985ea0788..58e4e849de 100644
--- a/features/step_definitions/transactions-steps.js
+++ b/features/step_definitions/transactions-steps.js
@@ -62,7 +62,7 @@ When(/^I fill the receiver as "([^"]*)"$/, async function (receiver) {
 });
 
 When(/^The transaction fees are "([^"]*)"$/, async function (fee) {
-  await this.waitForElement(`//label[contains(text(), 'Amount')]//following::span[contains(text(), '+ ${fee} of fees')]`, By.xpath);
+  await this.waitUntilText('.AmountInputSkin_fees', `+ ${fee} of fees`);
 });
 
 When(/^I click on the next button in the wallet send form$/, async function () {
@@ -87,7 +87,7 @@ Then(/^I should see the summary screen$/, async function () {
 });
 
 Then(/^I should see an invalid address error$/, async function () {
-  await this.waitForElement('.receiver.SimpleInput_errored');
+  await this.waitForElement('.receiver .SimpleInput_errored');
 });
 
 Then(/^I should see a not enough ada error$/, async function () {
diff --git a/features/step_definitions/tx-history-steps.js b/features/step_definitions/tx-history-steps.js
index 87efbbaaef..870c7439b3 100644
--- a/features/step_definitions/tx-history-steps.js
+++ b/features/step_definitions/tx-history-steps.js
@@ -35,7 +35,10 @@ function mapPendingTxFields(txExpectedStatus, pendingTxFields) {
 }
 
 Given(/^There are transactions already stored$/, async function () {
-  const storedTxs = getFeatureData().lovefieldStoredTxs;
+  const featureData = getFeatureData();
+  const storedTxs = featureData
+    ? featureData.lovefieldStoredTxs
+    : undefined;
   chai.assert(storedTxs !== undefined);
   // refine type
   if (storedTxs === undefined) return;
diff --git a/features/step_definitions/wallet-creation-steps.js b/features/step_definitions/wallet-creation-steps.js
index d4429929b6..11b2e7f015 100644
--- a/features/step_definitions/wallet-creation-steps.js
+++ b/features/step_definitions/wallet-creation-steps.js
@@ -43,7 +43,7 @@ When(/^I copy and enter the displayed mnemonic phrase$/, async function () {
   const recoveryPhrase = mnemonic.split(' ');
   for (let i = 0; i < recoveryPhrase.length; i++) {
     const word = recoveryPhrase[i];
-    await this.click(`(//button[contains(@class, 'MnemonicWord_active') and @label = '${word}'])[1]`, By.xpath);
+    await this.click(`(//button[contains(@class, 'MnemonicWord_root') and @label = '${word}'])[1]`, By.xpath);
   }
   const checkboxes = await this.driver.findElements(By.css('.SimpleCheckbox_check'));
   checkboxes.forEach((box) => box.click());
diff --git a/features/step_definitions/wallet-restoration-steps.js b/features/step_definitions/wallet-restoration-steps.js
index 5aed507c0e..a0e16b5863 100644
--- a/features/step_definitions/wallet-restoration-steps.js
+++ b/features/step_definitions/wallet-restoration-steps.js
@@ -68,7 +68,7 @@ Then(/^I delete recovery phrase by pressing "x" signs$/, async function () {
 
 Then(/^I should see an "Invalid recovery phrase" error message:$/, async function (data) {
   const error = data.hashes()[0];
-  const errorSelector = '.SimpleAutocomplete_errored .SimpleFormField_error';
+  const errorSelector = '.SimpleAutocomplete_autocompleteWrapper .SimpleFormField_error';
   await checkErrorByTranslationId(this, errorSelector, error);
 });
 
diff --git a/features/support/mockDataBuilder.js b/features/support/mockDataBuilder.js
index 4e8c71b601..703ff054db 100644
--- a/features/support/mockDataBuilder.js
+++ b/features/support/mockDataBuilder.js
@@ -12,7 +12,7 @@ import type {
 
 let builtMockData: FeatureData;
 
-export function getFeatureData(): FeatureData {
+export function getFeatureData(): ?FeatureData {
   return builtMockData;
 }
 
@@ -40,7 +40,11 @@ export function getFakeAddresses(
 export function getLovefieldTxs(
   walletName: string
 ): Array<LovefieldShownWalletTx> {
-  const { walletInitialData, lovefieldShownTxs } = getFeatureData();
+  const featureData = getFeatureData();
+  if (!featureData) {
+    return [];
+  }
+  const { walletInitialData, lovefieldShownTxs } = featureData;
   if (walletInitialData === undefined || lovefieldShownTxs === undefined) {
     return [];
   }
@@ -92,7 +96,7 @@ function _getTxs(
     .slice(0, txsNumber + pendingTxsNumber)
     .map((txHash, index) => {
       const featureData = getFeatureData();
-      const currentTime = featureData.currentDateExample === undefined
+      const currentTime = (!featureData || !featureData.currentDateExample)
         ? new Date(0)
         : new Date(featureData.currentDateExample);
       const txTime = currentTime.setDate(currentTime.getDate() + index);
@@ -129,8 +133,7 @@ function _getLovefieldTxs(
   return listOfHashesReversed
     .map((txHash, index) => {
       const featureData = getFeatureData();
-
-      const currentTime = featureData.currentDateExample === undefined
+      const currentTime = (!featureData || !featureData.currentDateExample)
         ? new Date(0)
         : new Date(featureData.currentDateExample);
       const txTime = currentTime.setDate(currentTime.getDate() + index);
@@ -153,7 +156,11 @@ function _getLovefieldTxs(
 function _getWallet(
   addressesStartingWith: string
 ): ?InitialData {
-  const initialData = getFeatureData().walletInitialData;
+  const featureData = getFeatureData();
+  if (!featureData) {
+    return undefined;
+  }
+  const initialData = featureData.walletInitialData;
   if (!initialData) {
     return undefined;
   }
diff --git a/features/support/mockServer.js b/features/support/mockServer.js
index 397f7005b1..3bde7727c4 100644
--- a/features/support/mockServer.js
+++ b/features/support/mockServer.js
@@ -75,7 +75,10 @@ export function getMockServer(
       },
       res: { send(arg: UtxoForAddressesResponse): any }
     ): void => {
-      const { utxos } = getFeatureData();
+      const featureData = getFeatureData();
+      const utxos = featureData
+        ? featureData.utxos
+        : undefined;
       const filteredUtxos = utxos
         ? utxos.filter(utxo => req.body.addresses.includes(utxo.receiver))
         : [];
@@ -89,7 +92,10 @@ export function getMockServer(
       res: { send(arg: UtxoSumForAddressesResponse): any }
     ): void => {
       chai.assert.isTrue(_validateAddressesReq(req.body));
-      const utxos = getFeatureData().utxos;
+      const featureData = getFeatureData();
+      const utxos = featureData
+        ? featureData.utxos
+        : undefined;
       const sumUtxos = !utxos ? 0 : utxos.reduce((sum, utxo) => {
         if (req.body.addresses.includes(utxo.receiver)) {
           return new BigNumber(utxo.amount).plus(sum);
@@ -127,7 +133,10 @@ export function getMockServer(
       },
       res: { send(arg: FilterUsedResponse): any }
     ): void => {
-      const usedAddresses = getFeatureData().usedAddresses;
+      const featureData = getFeatureData();
+      const usedAddresses = featureData
+        ? featureData.usedAddresses
+        : undefined;
       const filteredAddresses = usedAddresses
         ? usedAddresses.filter((address) => (
           req.body.addresses.includes(address)
diff --git a/package-lock.json b/package-lock.json
index e78d3dd663..f1e13bc2a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3592,6 +3592,23 @@
         "sha.js": "2.4.10"
       }
     },
+    "create-react-context": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
+      "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
+      "requires": {
+        "fbjs": "0.8.16",
+        "gud": "1.0.0"
+      }
+    },
+    "create-react-ref": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/create-react-ref/-/create-react-ref-0.1.0.tgz",
+      "integrity": "sha512-w/DDeTaFSaDVtlfLs4q9FVFcFq1jPZ62dBUAV24OKXrobtDlnXeJ5EsnK+z98Kmh9Zyxv24Edc26z8f7APVUYg==",
+      "requires": {
+        "fbjs": "0.8.16"
+      }
+    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -6254,6 +6271,11 @@
       "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
       "dev": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -11345,9 +11367,9 @@
       }
     },
     "postinstall-build": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postinstall-build/-/postinstall-build-5.0.0.tgz",
-      "integrity": "sha1-daGNzQn3UkXdaeogl0jX4Ll3k+s="
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/postinstall-build/-/postinstall-build-5.0.1.tgz",
+      "integrity": "sha1-uRepB5smF42aJK9aXNjLSpkdEbk="
     },
     "prelude-ls": {
       "version": "1.1.2",
@@ -11860,12 +11882,14 @@
       }
     },
     "react-polymorph": {
-      "version": "0.6.5",
-      "resolved": "http://registry.npmjs.org/react-polymorph/-/react-polymorph-0.6.5.tgz",
-      "integrity": "sha512-G7ob7pfniCz9nDLCX/n2jts0vnW4aslTzUvkh6XijCnuOjhFqJdXtWUO4q6nHKoBMRQqneRbIHKEJ2C3e2oGbw==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/react-polymorph/-/react-polymorph-0.7.2.tgz",
+      "integrity": "sha512-cow4PxXICHdLrPHkfP14n628q8DiXlkkr0unUyxKa0aqzxioBpCXMYWt/mQBQLk+qniOWUm+mDUJFQPV5K30gQ==",
       "requires": {
+        "create-react-context": "0.2.2",
+        "create-react-ref": "0.1.0",
         "filter-react-dom-props": "0.0.2",
-        "postinstall-build": "5.0.0",
+        "postinstall-build": "5.0.1",
         "react-modal": "3.1.12"
       }
     },
diff --git a/package.json b/package.json
index 0ec3253908..3910b4b423 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "react-hot-loader": "4.3.12",
     "react-intl": "2.7.2",
     "react-markdown": "2.5.0",
-    "react-polymorph": "0.6.5",
+    "react-polymorph": "0.7.2",
     "react-router": "4.1.2",
     "react-router-dom": "4.1.2",
     "react-svg-inline": "2.1.1",

From af2ebb92b533be9b7759e0f42660ea203c566b1e Mon Sep 17 00:00:00 2001
From: sebastiengllmt <sebastiengllmt@gmail.com>
Date: Sat, 29 Dec 2018 21:30:16 +0900
Subject: [PATCH 2/4] v0.8.0

---
 app/App.js                                    |   3 +-
 app/themes/mixins/error-message.scss          |   2 +-
 .../AutocompleteOverrides.scss}               |   3 -
 .../ButtonOverrides.scss}                     |  12 +-
 app/themes/overrides/CheckboxOverrides.scss   |   1 +
 .../FormFieldOverrides.scss}                  |   6 -
 app/themes/overrides/InputOverrides.scss      |   1 +
 .../ModalOverrides.scss}                      |   4 -
 app/themes/overrides/OptionsOverrides.scss    |   1 +
 app/themes/overrides/SelectOverrides.scss     |  12 ++
 app/themes/overrides/SwitchOverrides.scss     |  10 +
 app/themes/overrides/index.js                 |  34 +++
 app/themes/prebuilt/yoroi.js                  | 204 ++++++++++++++----
 app/themes/simple/SimpleBubble.scss           |   4 -
 app/themes/simple/SimpleCheckbox.scss         |  23 --
 app/themes/simple/SimpleInput.scss            |  15 --
 app/themes/simple/SimpleOptions.scss          |  24 ---
 app/themes/simple/SimpleSelect.scss           |  18 --
 app/themes/simple/SimpleSwitch.scss           |  21 --
 app/themes/simple/SimpleTextArea.scss         |   9 -
 app/themes/simple/_config.scss                |  83 -------
 app/themes/yoroi.js                           |  37 ++--
 .../wallet-restoration-steps.js               |   8 +-
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 25 files changed, 249 insertions(+), 294 deletions(-)
 rename app/themes/{simple/SimpleAutocomplete.scss => overrides/AutocompleteOverrides.scss} (82%)
 rename app/themes/{simple/SimpleButton.scss => overrides/ButtonOverrides.scss} (82%)
 create mode 100644 app/themes/overrides/CheckboxOverrides.scss
 rename app/themes/{simple/SimpleFormField.scss => overrides/FormFieldOverrides.scss} (51%)
 create mode 100644 app/themes/overrides/InputOverrides.scss
 rename app/themes/{simple/SimpleModal.scss => overrides/ModalOverrides.scss} (83%)
 create mode 100644 app/themes/overrides/OptionsOverrides.scss
 create mode 100644 app/themes/overrides/SelectOverrides.scss
 create mode 100644 app/themes/overrides/SwitchOverrides.scss
 create mode 100644 app/themes/overrides/index.js
 delete mode 100644 app/themes/simple/SimpleBubble.scss
 delete mode 100644 app/themes/simple/SimpleCheckbox.scss
 delete mode 100644 app/themes/simple/SimpleInput.scss
 delete mode 100644 app/themes/simple/SimpleOptions.scss
 delete mode 100644 app/themes/simple/SimpleSelect.scss
 delete mode 100644 app/themes/simple/SimpleSwitch.scss
 delete mode 100644 app/themes/simple/SimpleTextArea.scss
 delete mode 100644 app/themes/simple/_config.scss

diff --git a/app/App.js b/app/App.js
index b7834c5182..137d2a442a 100644
--- a/app/App.js
+++ b/app/App.js
@@ -11,6 +11,7 @@ import zh from 'react-intl/locale-data/zh';
 import ru from 'react-intl/locale-data/ru';
 import { Routes } from './Routes';
 import { yoroiTheme } from './themes/yoroi';
+import { themeOverrides } from './themes/overrides/index.js';
 import translations from './i18n/translations';
 import type { StoresMap } from './stores/index';
 import type { ActionsMap } from './actions/index';
@@ -56,7 +57,7 @@ class App extends Component<{
       <div style={{ height: '100%' }}>
         <ThemeManager variables={themeVars} />
         {/* Automatically pass a theme prop to all componenets in this subtree. */}
-        <ThemeProvider theme={yoroiTheme}>
+        <ThemeProvider theme={yoroiTheme} themeOverrides={themeOverrides}>
           <IntlProvider {...{ locale, key: locale, messages: mergedMessages }}>
             <Router history={history}>
               {Routes(stores, actions)}
diff --git a/app/themes/mixins/error-message.scss b/app/themes/mixins/error-message.scss
index e0966fc11b..25e36d0bb1 100644
--- a/app/themes/mixins/error-message.scss
+++ b/app/themes/mixins/error-message.scss
@@ -1,5 +1,5 @@
 @mixin error-message {
-  color: var(--theme-error-color);
+  color: var(--theme-color-error);
   font-family: var(--font-regular);
   font-size: 14px;
   line-height: 1.5em;
diff --git a/app/themes/simple/SimpleAutocomplete.scss b/app/themes/overrides/AutocompleteOverrides.scss
similarity index 82%
rename from app/themes/simple/SimpleAutocomplete.scss
rename to app/themes/overrides/AutocompleteOverrides.scss
index 814137ae96..82f222517b 100644
--- a/app/themes/simple/SimpleAutocomplete.scss
+++ b/app/themes/overrides/AutocompleteOverrides.scss
@@ -1,6 +1,3 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleAutocomplete";
 // Css module overrides go here …
 
 .autocompleteWrapper  {
diff --git a/app/themes/simple/SimpleButton.scss b/app/themes/overrides/ButtonOverrides.scss
similarity index 82%
rename from app/themes/simple/SimpleButton.scss
rename to app/themes/overrides/ButtonOverrides.scss
index f53631ff67..417e1a425f 100644
--- a/app/themes/simple/SimpleButton.scss
+++ b/app/themes/overrides/ButtonOverrides.scss
@@ -1,18 +1,8 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleButton";
 // Css module overrides go here …
 
 .root {
-  background: var(--theme-button-primary-background-color);
   border-radius: 0;
-  font-size: 14px;
-  font-family: var(--font-medium);
-  height: 40px;
-  padding: 12px 20px;
   position: relative;
-  text-transform: none;
-  width: 400px;
 }
 
 :global {
@@ -60,4 +50,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/themes/overrides/CheckboxOverrides.scss b/app/themes/overrides/CheckboxOverrides.scss
new file mode 100644
index 0000000000..39b34ca9e0
--- /dev/null
+++ b/app/themes/overrides/CheckboxOverrides.scss
@@ -0,0 +1 @@
+// Css module overrides go here …
diff --git a/app/themes/simple/SimpleFormField.scss b/app/themes/overrides/FormFieldOverrides.scss
similarity index 51%
rename from app/themes/simple/SimpleFormField.scss
rename to app/themes/overrides/FormFieldOverrides.scss
index 812c8d770a..01182e3b30 100644
--- a/app/themes/simple/SimpleFormField.scss
+++ b/app/themes/overrides/FormFieldOverrides.scss
@@ -1,18 +1,12 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleFormField";
 // Css module overrides go here …
 
 .error {
-  color: var(--theme-input-error-color);
   font-size: 11px;
   line-height: 1.38;
   margin: 0 10px 6px;
-  opacity: 0.75;
 }
 
 .label {
-  color: var(--theme-input-label-color);
   font-size: 11px;
   font-weight: 600;
   margin-bottom: 6px;
diff --git a/app/themes/overrides/InputOverrides.scss b/app/themes/overrides/InputOverrides.scss
new file mode 100644
index 0000000000..39b34ca9e0
--- /dev/null
+++ b/app/themes/overrides/InputOverrides.scss
@@ -0,0 +1 @@
+// Css module overrides go here …
diff --git a/app/themes/simple/SimpleModal.scss b/app/themes/overrides/ModalOverrides.scss
similarity index 83%
rename from app/themes/simple/SimpleModal.scss
rename to app/themes/overrides/ModalOverrides.scss
index 3dd0d0d3a1..9759669eba 100644
--- a/app/themes/simple/SimpleModal.scss
+++ b/app/themes/overrides/ModalOverrides.scss
@@ -1,6 +1,3 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleModal";
 // Css module overrides go here …
 
 .overlay {
@@ -11,7 +8,6 @@
   border-radius: 5px;
   display: flex;
   flex-direction: column;
-  max-height: 90%;
   max-width: 785px;
 
   :global {
diff --git a/app/themes/overrides/OptionsOverrides.scss b/app/themes/overrides/OptionsOverrides.scss
new file mode 100644
index 0000000000..39b34ca9e0
--- /dev/null
+++ b/app/themes/overrides/OptionsOverrides.scss
@@ -0,0 +1 @@
+// Css module overrides go here …
diff --git a/app/themes/overrides/SelectOverrides.scss b/app/themes/overrides/SelectOverrides.scss
new file mode 100644
index 0000000000..3354eb31c5
--- /dev/null
+++ b/app/themes/overrides/SelectOverrides.scss
@@ -0,0 +1,12 @@
+// Css module overrides go here …
+
+.selectInput {
+  &::after {
+    bottom: 16px;
+    left: calc(100% - 22px);
+  }
+
+  input {
+    background: none;
+  }
+}
diff --git a/app/themes/overrides/SwitchOverrides.scss b/app/themes/overrides/SwitchOverrides.scss
new file mode 100644
index 0000000000..24ec17e161
--- /dev/null
+++ b/app/themes/overrides/SwitchOverrides.scss
@@ -0,0 +1,10 @@
+// Css module overrides go here …
+
+.root {
+  flex-direction: row-reverse;
+  &:not(.checked) {
+    .switch {
+      box-shadow: 0 2px 0 -1px transparent; // fix for cut-off bottom
+    }
+  }
+}
diff --git a/app/themes/overrides/index.js b/app/themes/overrides/index.js
new file mode 100644
index 0000000000..e937b3f7a8
--- /dev/null
+++ b/app/themes/overrides/index.js
@@ -0,0 +1,34 @@
+import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
+import AutocompleteOverrides from './AutocompleteOverrides.scss';
+import ButtonOverrides from './ButtonOverrides.scss';
+import CheckboxOverrides from './CheckboxOverrides.scss';
+import FormFieldOverrides from './FormFieldOverrides.scss';
+import InputOverrides from './InputOverrides.scss';
+import ModalOverrides from './ModalOverrides.scss';
+import OptionsOverrides from './OptionsOverrides.scss';
+import SelectOverrides from './SelectOverrides.scss';
+import SwitchOverrides from './SwitchOverrides.scss';
+
+const {
+  AUTOCOMPLETE,
+  BUTTON,
+  CHECKBOX,
+  FORM_FIELD,
+  INPUT,
+  MODAL,
+  OPTIONS,
+  SELECT,
+  SWITCH
+} = IDENTIFIERS;
+
+export const themeOverrides = {
+  [AUTOCOMPLETE]: AutocompleteOverrides,
+  [BUTTON]: ButtonOverrides,
+  [CHECKBOX]: CheckboxOverrides,
+  [FORM_FIELD]: FormFieldOverrides,
+  [INPUT]: InputOverrides,
+  [MODAL]: ModalOverrides,
+  [OPTIONS]: OptionsOverrides,
+  [SELECT]: SelectOverrides,
+  [SWITCH]: SwitchOverrides,
+};
diff --git a/app/themes/prebuilt/yoroi.js b/app/themes/prebuilt/yoroi.js
index c09492c518..7ccd47c06d 100644
--- a/app/themes/prebuilt/yoroi.js
+++ b/app/themes/prebuilt/yoroi.js
@@ -1,6 +1,164 @@
 //  ==== Theme: Yoroi === //
 
+// FONTS
+const rpFonts = {
+  '--rp-theme-font-thin': 'SFUIDisplay-Thin',
+  '--rp-theme-font-light': 'SFUIDisplay-Light',
+  '--rp-theme-font-medium': 'SFUIDisplay-Medium',
+  '--rp-theme-font-regular': 'SFUIDisplay-Regular',
+  '--rp-theme-font-bold': 'SFUIDisplay-Bold',
+};
+
+// AUTOCOMPLETE
+const rpAutocomplete = {
+  '--rp-autocomplete-bg-color': '#f3f3f5',
+  '--rp-autocomplete-border': '1px solid #c6cdd6',
+  '--rp-autocomplete-border-color-opened': '#121327',
+  '--rp-autocomplete-input-text-color': '#121327',
+  '--rp-autocomplete-placeholder-color': 'rgba(94, 96, 102, 0.5)', // #5E6066
+  '--rp-autocomplete-selected-word-box-bg-color': 'rgba(218, 164, 154, 1)', // #DAA49A
+  '--rp-autocomplete-selected-word-text-color': '#fafbfc',
+};
+
+// BUBBLE
+const rpBubble = {
+  '--rp-bubble-bg-color': '#f3f3f5',
+  '--rp-bubble-border-color': '#c6cdd6',
+  '--rp-bubble-border-radius': '2px',
+};
+
+// BUTTON
+const rpButton = {
+  '--rp-button-bg-color': '#daa49a',
+  '--rp-button-bg-color-active': '#c4948b',
+  '--rp-button-bg-color-disabled': 'rgba(218, 164, 154, 0.3)', // #DAA49A
+  '--rp-button-bg-color-hover': '#edb3a8',
+  '--rp-button-font-family': rpFonts['--rp-theme-font-medium'],
+  '--rp-button-font-size': '14px',
+  '--rp-button-height': '40px',
+  '--rp-button-line-height': '20px',
+  '--rp-button-padding': '12px 20px',
+  '--rp-button-text-color': '#fafbfc',
+  '--rp-button-text-transform': 'none',
+  '--rp-button-width': '400px',
+};
+
+// CHECKBOX
+const rpCheckbox = {
+  '--rp-checkbox-border': '1px solid #daa49a',
+  '--rp-checkbox-border-color-disabled': 'rgba(218, 164, 154, 0.2)', // #DAA49A
+  '--rp-checkbox-check-bg-color': '#daa49a',
+  '--rp-checkbox-label-text-color': '#121327',
+  '--rp-checkbox-label-text-color-disabled': 'rgba(18, 19, 39, 0.3)', // #121327
+};
+
+// COLORS
+const rpColors = {
+  '--rp-theme-color-error': '#ea4c5b',
+};
+
+// FORMFIELD
+const rpFormfield = {
+  '--rp-formfield-bg-color-disabled': 'none',
+  '--rp-formfield-label-text-color': '#121327',
+  '--rp-formfield-label-text-color-disabled': '#121327',
+  '--rp-formfield-error-text-color': '#ea4c5b',
+  '--rp-formfield-error-text-opacity': '0.75',
+};
+
+// INPUT
+const rpInput = {
+  '--rp-input-bg-color': '#f3f3f5',
+  '--rp-input-bg-color-disabled': 'rgba(207, 207, 207, 0.05)', // #cfcfcf
+  '--rp-input-border-color': '#c6cdd6',
+  '--rp-input-border-color-disabled': 'rgba(207, 207, 207, 0.05)', // #cfcfcf
+  '--rp-input-border-color-errored': '#ea4c5b',
+  '--rp-input-border-color-focus': '#121327',
+  '--rp-input-line-height': '22px',
+  '--rp-input-padding': '10px',
+  '--rp-input-placeholder-color': 'rgba(94, 96, 102, 0.5)', // #5E6066
+  '--rp-input-placeholder-color-disabled': 'rgba(94, 96, 102, 0.5)', // #5E6066
+  '--rp-input-text-color': '#121327',
+  '--rp-input-text-color-disabled': 'rgba(94, 96, 102, 0.5)', // #5E6066
+  '--rp-input-font-family': rpFonts['--rp-theme-font-light'],
+};
+
+// MODAL
+const rpModal = {
+  '--rp-modal-bg-color': '#fafbfc',
+  '--rp-modal-max-height': '90%',
+  '--rp-modal-overlay-bg-color': 'rgba(0, 0, 0, 0.4)', // #000000
+};
+
+// OPTIONS
+const rpOptions = {
+  '--rp-option-bg-color': '#fafbfc',
+  '--rp-option-bg-color-highlighted': '#edeeef',
+  '--rp-option-border-color': '#c6cdd6',
+  '--rp-option-checkmark-color': '#121327',
+  '--rp-option-line-height': '22px',
+  '--rp-option-text-color': '#121327',
+  '--rp-options-border-color': '#c6cdd6',
+  '--rp-options-shadow': 'none',
+};
+
+// SELECT
+const rpSelect = {
+  '--rp-select-arrow-bg-color': '#c6cdd6',
+  '--rp-select-arrow-bg-color-open': '#121327',
+  '--rp-select-input-bg-color': '#fafbfc',
+  '--rp-select-input-border-color': '#c6cdd6',
+  '--rp-select-input-border-color-focus': '#121327',
+  '--rp-select-input-text-color': '#121327',
+};
+
+// SWITCH
+const rpSwitch = {
+  '--rp-switch-bg-color-off': '#daa49a',
+  '--rp-switch-bg-color-on': '#daa49a',
+  '--rp-switch-label-margin': '0 30px 0 0',
+  '--rp-switch-label-opacity': '0.5',
+  '--rp-switch-label-text-color': '#c6cdd6',
+  '--rp-switch-label-width': '100%',
+  '--rp-switch-opacity-off': '0.3',
+  '--rp-switch-root-margin': '0 0 30px 0',
+  '--rp-switch-thumb-bg-color': '#fff',
+};
+
+// TEXTAREA
+const rpTextArea = {
+  '--rp-textarea-bg-color': '#fafbfc',
+  '--rp-textarea-bg-color-disabled': 'rgba(94, 96, 102, 0.05)', // #5E6066
+  '--rp-textarea-border': '1px solid #c6cdd6',
+  '--rp-textarea-border-color-disabled': 'rgba(94, 96, 102, 0.05)', // #5E6066
+  '--rp-textarea-border-color-errored': '#ea4c5b',
+  '--rp-textarea-border-color-focus': '#121327',
+  '--rp-textarea-border-radius': '2px',
+  '--rp-textarea-line-height': '20px',
+  '--rp-textarea-placeholder-color': 'rgba(94, 96, 102, 0.5)', // #5E6066
+  '--rp-textarea-resize': 'none',
+  '--rp-textarea-text-color': '#121327',
+};
+
+const rpYoroiTheme = {
+  ...rpAutocomplete,
+  ...rpBubble,
+  ...rpButton,
+  ...rpCheckbox,
+  ...rpColors,
+  ...rpFonts,
+  ...rpFormfield,
+  ...rpInput,
+  ...rpModal,
+  ...rpOptions,
+  ...rpSelect,
+  ...rpSwitch,
+  ...rpTextArea,
+};
+
+
 export default {
+  ...rpYoroiTheme,
   '--preferred-font': '"Times New Roman", serif',
 
   '--font-ultralight': 'SFUIDisplay-Ultralight',
@@ -17,18 +175,6 @@ export default {
 
   '--theme-scrollbar-thumb-background': '#c8ccce',
 
-  '--theme-autocomplete-bg-color': '#f3f3f5',
-  '--theme-autocomplete-border': '1px solid #c6cdd6',
-  '--theme-autocomplete-border-focus-color': '#121327',
-  '--theme-autocomplete-search-color': '#121327',
-  '--theme-autocomplete-placeholder-color': 'rgba(94, 96, 102, 0.5)',
-  '--theme-autocomplete-selected-word-text-color': '#fafbfc',
-  '--theme-autocomplete-selected-word-box-background-color': 'rgba(218, 164, 154, 1)', // #DAA49A
-  '--theme-autocomplete-suggestions-list-border-color': '#c6cdd6',
-  '--theme-autocomplete-suggestions-list-item-bg-color': '#fafbfc',
-  '--theme-autocomplete-suggestions-list-item-font-color': '#121327',
-  '--theme-autocomplete-suggestions-list-item-highlight-color': '#edeeef',
-
   '--theme-bordered-box-background-color': '#f3f3f5',
   '--theme-bordered-box-border': '1px solid #f3f3f5',
   '--theme-bordered-box-text-color': '#121327',
@@ -47,21 +193,6 @@ export default {
   '--theme-button-flat-text-color-disabled': '#121327',
   '--theme-button-flat-text-color': '#121327',
 
-  '--theme-checkbox-label-color': '#121327',
-  '--theme-checkbox-label-disabled-color': 'rgba(18, 19, 39, 0.3)', // #121327
-  '--theme-checkbox-border-color': '#daa49a',
-  '--theme-checkbox-border-disabled-color': 'rgba(218, 164, 154, 0.2)', // #DAA49A
-  '--theme-checkbox-background-color-checked': '#daa49a',
-
-  '--theme-select-arrow-color': '#c6cdd6',
-  '--theme-select-arrow-color-open': '#121327',
-  '--theme-select-background-color': '#fafbfc',
-  '--theme-select-option-highlight-color': '#edeeef',
-  '--theme-select-option-text-color': '#121327',
-  '--theme-select-options-border-color': '#c6cdd6',
-  '--theme-select-options-shadow': 'none',
-  '--theme-select-options-checkmark-color': '#121327',
-
   '--theme-choice-tabs-text-color': '#121327',
   '--theme-choice-tabs-text-color-active': '#121327',
   '--theme-choice-tabs-bottom-border-color-active': '#121327',
@@ -76,25 +207,14 @@ export default {
   '--theme-dialog-title-color': '#121327',
 
   '--theme-input-border-color': '#c6cdd6',
-  '--theme-input-label-color': '#121327',
   '--theme-input-text-color': '#121327',
-  '--theme-input-right-floating-text-color': 'rgba(94, 96, 102, 0.5)', // #5E6066
-  '--theme-input-placeholder-color': 'rgba(94, 96, 102, 0.5)', // #5E6066
-  '--theme-input-error-color': '#ea4c5b',
-  '--theme-input-remove-color-dark': '#d34452',
+  '--theme-input-right-floating-text-color': 'rgba(94, 96, 102, 0.5)',
   '--theme-input-remove-color-light': '#ea4c5b',
-  '--theme-input-remove-color-lighter': '#ec5d6b',
-  '--theme-input-remove-color-lightest': '#fac8ce',
   '--theme-input-background-color': '#f3f3f5',
-  '--theme-input-disabled-background-color': '#cfcfcf',
-  '--theme-input-focus-border-color': '#121327',
 
   '--theme-main-body-background-color': '#ffffff',
   '--theme-main-body-messages-color': '#121327',
 
-  '--theme-modal-overlay-background-color': 'rgba(0, 0, 0, 0.4)', // #000000
-  '--theme-modal-background-color': '#fafbfc',
-
   '--theme-nav-item-background-color': '#f3f3f5',
   '--theme-nav-item-background-color-hover': '#f9f9fa',
   '--theme-nav-item-background-color-active': '#fff',
@@ -123,11 +243,6 @@ export default {
   '--theme-settings-menu-item-left-border-color-active': '#daa49a',
   '--theme-settings-theme-select-title-color': '#121327',
 
-  '--theme-switch-background-color': '#daa49a',
-  '--theme-switch-background-color-checked': '#daa49a',
-  '--theme-switch-thumb-color-checked': '#fff',
-  '--theme-switch-label-color': '#121327',
-
   '--theme-system-error-overlay-attention-icon-color': '#fafbfc',
   '--theme-system-error-overlay-background-color': 'rgba(171, 23, 0, 0.94)', // #AB1700
   '--theme-system-error-overlay-button-background-color': '#ab1700',
@@ -182,7 +297,6 @@ export default {
 
   '--theme-backup-mnemonic-background-color': '#f3f3f5',
 
-  '--theme-error-color': '#ea4c5b',
   '--theme-error-text-color': '#daa49a',
 
   '--theme-instructions-text-color': '#121327',
diff --git a/app/themes/simple/SimpleBubble.scss b/app/themes/simple/SimpleBubble.scss
deleted file mode 100644
index f9f7feaa92..0000000000
--- a/app/themes/simple/SimpleBubble.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleBubble";
-// Css module overrides go here …
diff --git a/app/themes/simple/SimpleCheckbox.scss b/app/themes/simple/SimpleCheckbox.scss
deleted file mode 100644
index b9e59f3365..0000000000
--- a/app/themes/simple/SimpleCheckbox.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleCheckbox";
-// Css module overrides go here …
-
-.root {
-  .checked {
-    background-color: var(--theme-checkbox-background-color-checked);
-  }
-}
-
-.check {
-  border: 1px solid var(--theme-checkbox-border-color);
-}
-
-.label {
-  color: var(--theme-checkbox-label-color);
-  font-size: 15px;
-
-  strong {
-    font-family: var(--font-medium);
-  }
-}
diff --git a/app/themes/simple/SimpleInput.scss b/app/themes/simple/SimpleInput.scss
deleted file mode 100644
index 160f270ed8..0000000000
--- a/app/themes/simple/SimpleInput.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleInput";
-// Css module overrides go here …
-
-:global {
-  .AmountInputSkin_total, .AmountInputSkin_fees {
-    color: var(--theme-input-right-floating-text-color);
-  }
-}
-
-.input {
-  font-size: 15px;
-  padding: 10px;
-}
diff --git a/app/themes/simple/SimpleOptions.scss b/app/themes/simple/SimpleOptions.scss
deleted file mode 100644
index 52fb8fff4a..0000000000
--- a/app/themes/simple/SimpleOptions.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleOptions";
-// Css module overrides go here …
-
-.options {
-  :global {
-    .SimpleBubble_bubble {
-      margin-top: -11px !important;
-    }
-  }
-
-  span[data-bubble-arrow] {
-    display: none;
-  }
-}
-
-.ul {
-  font-size: 15px;
-}
-
-.option {
-  padding: 10px;
-}
diff --git a/app/themes/simple/SimpleSelect.scss b/app/themes/simple/SimpleSelect.scss
deleted file mode 100644
index 23fd04c289..0000000000
--- a/app/themes/simple/SimpleSelect.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleSelect";
-// Css module overrides go here …
-$select-arrow-color: var(--theme-select-arrow-color);
-$select-open-arrow-color: var(--theme-select-arrow-color-open);
-
-.selectInput {
-  &::after {
-    bottom: 16px;
-    left: calc(100% - 22px);
-  }
-
-  input {
-    background: none;
-  }
-}
-
diff --git a/app/themes/simple/SimpleSwitch.scss b/app/themes/simple/SimpleSwitch.scss
deleted file mode 100644
index 7284b65186..0000000000
--- a/app/themes/simple/SimpleSwitch.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleSwitch";
-// Css module overrides go here …
-
-.root {
-  flex-direction: row-reverse;
-  margin-bottom: 30px;
-  &:not(.checked) {
-    .switch {
-      box-shadow: 0 2px 0 -1px transparent; // fix for cut-off bottom
-      opacity: 0.3;
-    }
-  }
-}
-
-.label {
-  margin: 0 30px 0 0 !important;
-  opacity: 0.5;
-  width: 100%;
-}
diff --git a/app/themes/simple/SimpleTextArea.scss b/app/themes/simple/SimpleTextArea.scss
deleted file mode 100644
index 2f2af4dda0..0000000000
--- a/app/themes/simple/SimpleTextArea.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "_config";
-// Theme config overrides go here …
-@import "~react-polymorph/lib/themes/simple/SimpleTextArea";
-// Css module overrides go here …
-
-.textarea {
-  border-radius: 2px;
-  resize: none;
-}
diff --git a/app/themes/simple/_config.scss b/app/themes/simple/_config.scss
deleted file mode 100644
index 01bcf46ff7..0000000000
--- a/app/themes/simple/_config.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-// THEME CONFIGURATION
-
-$theme-assets-path: "react-polymorph/lib/themes/simple/assets";
-
-$theme-font-thin: var(--font-thin);
-$theme-font-light: var(--font-light);
-$theme-font-medium: var(--font-medium);
-$theme-font-regular: var(--font-regular);
-$theme-font-bold: var(--font-bold);
-
-// INPUT
-
-$input-bg-color: var(--theme-input-background-color);
-$input-border: 1px solid var(--theme-input-border-color);
-$input-border-focus-color: var(--theme-input-focus-border-color);
-$input-color: var(--theme-input-text-color);
-$input-disabled-bg-color: var(--theme-input-disabled-background-color);
-$input-disabled-color: var(--theme-input-placeholder-color);
-$input-placeholder-color: var(--theme-input-placeholder-color);
-$input-errored-border-color: var(--theme-input-error-color);
-
-// AUTOCOMPLETE
-
-$autocomplete-bg-color: var(--theme-autocomplete-bg-color);
-$autocomplete-border: var(--theme-autocomplete-border);
-$autocomplete-border-focus-color: var(--theme-autocomplete-border-focus-color);
-$autocomplete-placeholder-color: var(--theme-autocomplete-placeholder-color);
-$autocomplete-search-color: var(--theme-autocomplete-search-color);
-$autocomplete-selected-word-text-color: var(--theme-autocomplete-selected-word-text-color);
-$autocomplete-selected-word-box-background-color: var(--theme-autocomplete-selected-word-box-background-color);
-$autocomplete-selected-words-font-family: $theme-font-regular;
-
-// MODAL
-
-$modal-overlay-color: var(--theme-modal-overlay-background-color);
-$modal-bg: var(--theme-modal-background-color);
-
-// SELECT
-
-$select-arrow-color: var(--theme-select-arrow-color);
-$select-arrow-focus-color: var(--theme-select-arrow-color-open);
-$select-input-border-focus-color: var(--theme-input-focus-border-color);
-
-// OPTIONS
-
-$options-border-color: var(--theme-select-options-border-color);
-$options-shadow: var(--theme-select-options-shadow);
-$option-bg-color: var(--theme-select-background-color);
-$option-font-color: var(--theme-select-option-text-color);
-$option-border-color: var(--theme-select-options-border-color);
-$option-highlight-color: var(--theme-select-option-highlight-color);
-$option-checkmark-color: var(--theme-select-options-checkmark-color);
-
-// BUBBLE
-
-$bubble-bg-color: var(--theme-select-background-color);
-$bubble-border-color: var(--theme-select-options-border-color);
-$bubble-border-radius: 2px;
-
-// CHECKBOX
-
-$checkbox-border-disabled-color: var(--theme-checkbox-border-disabled-color);
-$checkbox-label-disabled-color: var(--theme-checkbox-label-disabled-color);
-
-// SWITCH
-
-$switch-on-accent-color: var(--theme-switch-background-color-checked);
-$switch-off-accent-color: var(--theme-switch-background-color-checked);
-$switch-thumb-accent-color: var(--theme-switch-thumb-color-checked);
-$switch-label-color: var(--theme-switch-label-color);
-
-// TEXTAREA
-
-$textarea-color: var(--theme-input-text-color);
-$textarea-placeholder-color: var(--theme-input-placeholder-color);
-$textarea-border: 1px solid var(--theme-input-border-color);
-$textarea-border-focus-color: var(--theme-input-focus-border-color);
-$textarea-disabled-border-color: #cfcfcf !default;
-$textarea-disabled-bg-color: var(--theme-input-disabled-background-color);
-$textarea-bg-color: var(--theme-input-background-color);
-$textarea-error-color: var(--theme-input-error-color);
-
-@import "~react-polymorph/lib/themes/simple/_theme";
diff --git a/app/themes/yoroi.js b/app/themes/yoroi.js
index a5ecef5f33..1a4b295900 100644
--- a/app/themes/yoroi.js
+++ b/app/themes/yoroi.js
@@ -1,15 +1,16 @@
-// react-polymorph components
-import SimpleFormField from './simple/SimpleFormField.scss';
-import SimpleInput from './simple/SimpleInput.scss';
-import SimpleCheckbox from './simple/SimpleCheckbox.scss';
-import SimpleSwitch from './simple/SimpleSwitch.scss';
-import SimpleModal from './simple/SimpleModal.scss';
-import SimpleButton from './simple/SimpleButton.scss';
-import SimpleTextArea from './simple/SimpleTextArea.scss';
-import SimpleAutocomplete from './simple/SimpleAutocomplete.scss';
-import SimpleBubble from './simple/SimpleBubble.scss';
-import SimpleOptions from './simple/SimpleOptions.scss';
-import SimpleSelect from './simple/SimpleSelect.scss';
+// @flow
+
+import SimpleAutocomplete from 'react-polymorph/lib/themes/simple/SimpleAutocomplete.scss';
+import SimpleBubble from 'react-polymorph/lib/themes/simple/SimpleBubble.scss';
+import SimpleButton from 'react-polymorph/lib/themes/simple/SimpleButton.scss';
+import SimpleCheckbox from 'react-polymorph/lib/themes/simple/SimpleCheckbox.scss';
+import SimpleFormField from 'react-polymorph/lib/themes/simple/SimpleFormField.scss';
+import SimpleInput from 'react-polymorph/lib/themes/simple/SimpleInput.scss';
+import SimpleModal from 'react-polymorph/lib/themes/simple/SimpleModal.scss';
+import SimpleOptions from 'react-polymorph/lib/themes/simple/SimpleOptions.scss';
+import SimpleSelect from 'react-polymorph/lib/themes/simple/SimpleSelect.scss';
+import SimpleSwitch from 'react-polymorph/lib/themes/simple/SimpleSwitch.scss';
+import SimpleTextArea from 'react-polymorph/lib/themes/simple/SimpleTextArea.scss';
 
 import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
 
@@ -29,15 +30,15 @@ const {
 
 // package all our overrides into one theme
 export const yoroiTheme = {
+  [AUTOCOMPLETE]: SimpleAutocomplete,
+  [BUBBLE]: SimpleBubble,
+  [BUTTON]: SimpleButton,
+  [CHECKBOX]: SimpleCheckbox,
   [FORM_FIELD]: SimpleFormField,
   [INPUT]: SimpleInput,
-  [CHECKBOX]: SimpleCheckbox,
-  [SWITCH]: SimpleSwitch,
   [MODAL]: SimpleModal,
-  [BUTTON]: SimpleButton,
-  [TEXT_AREA]: SimpleTextArea,
-  [BUBBLE]: SimpleBubble,
   [OPTIONS]: SimpleOptions,
   [SELECT]: SimpleSelect,
-  [AUTOCOMPLETE]: SimpleAutocomplete,
+  [SWITCH]: SimpleSwitch,
+  [TEXT_AREA]: SimpleTextArea,
 };
diff --git a/features/step_definitions/wallet-restoration-steps.js b/features/step_definitions/wallet-restoration-steps.js
index a0e16b5863..95904ccfbd 100644
--- a/features/step_definitions/wallet-restoration-steps.js
+++ b/features/step_definitions/wallet-restoration-steps.js
@@ -18,20 +18,20 @@ When(/^I enter the recovery phrase:$/, async function (table) {
   const recoveryPhrase = fields.recoveryPhrase.split(' ');
   for (let i = 0; i < recoveryPhrase.length; i++) {
     const word = recoveryPhrase[i];
-    await this.input('.SimpleAutocomplete_autocompleteWrapper input', word);
+    await this.input('.AutocompleteOverrides_autocompleteWrapper input', word);
     await this.click(`//li[contains(text(), '${word}')]`, By.xpath);
   }
 });
 
 When(/^I enter one more word to the recovery phrase field:$/, async function (table) {
   const words = table.hashes()[0];
-  await this.input('.SimpleAutocomplete_autocompleteWrapper input', words.word);
+  await this.input('.AutocompleteOverrides_autocompleteWrapper input', words.word);
   const lastWord = await this.driver.findElements(By.xpath(`//span[contains(text(), '${words.word}')]`));
   expect(lastWord.length).to.be.equal(0);
 });
 
 When(/^I clear the recovery phrase$/, async function () {
-  await this.clearInputUpdatingForm('.SimpleAutocomplete_autocompleteWrapper input', 15);
+  await this.clearInputUpdatingForm('.AutocompleteOverrides_autocompleteWrapper input', 15);
 });
 
 When(/^I enter the restored wallet password:$/, async function (table) {
@@ -68,7 +68,7 @@ Then(/^I delete recovery phrase by pressing "x" signs$/, async function () {
 
 Then(/^I should see an "Invalid recovery phrase" error message:$/, async function (data) {
   const error = data.hashes()[0];
-  const errorSelector = '.SimpleAutocomplete_autocompleteWrapper .SimpleFormField_error';
+  const errorSelector = '.AutocompleteOverrides_autocompleteWrapper .SimpleFormField_error';
   await checkErrorByTranslationId(this, errorSelector, error);
 });
 
diff --git a/package-lock.json b/package-lock.json
index f1e13bc2a4..166e1b21a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11882,9 +11882,9 @@
       }
     },
     "react-polymorph": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/react-polymorph/-/react-polymorph-0.7.2.tgz",
-      "integrity": "sha512-cow4PxXICHdLrPHkfP14n628q8DiXlkkr0unUyxKa0aqzxioBpCXMYWt/mQBQLk+qniOWUm+mDUJFQPV5K30gQ==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/react-polymorph/-/react-polymorph-0.8.0.tgz",
+      "integrity": "sha512-AZuDHowp6XnE/qNETMDu8P7ZrAjI5dlpig5H7wqi3ZTp3gZ1VfbWHOoLCAeQtoPHAoYdAJHFlDRQRMmwyVHDTg==",
       "requires": {
         "create-react-context": "0.2.2",
         "create-react-ref": "0.1.0",
diff --git a/package.json b/package.json
index 3910b4b423..66fcf3c90f 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "react-hot-loader": "4.3.12",
     "react-intl": "2.7.2",
     "react-markdown": "2.5.0",
-    "react-polymorph": "0.7.2",
+    "react-polymorph": "0.8.0",
     "react-router": "4.1.2",
     "react-router-dom": "4.1.2",
     "react-svg-inline": "2.1.1",

From ad825a5762ac580a6ffd87cc6a3f6cbac7860c36 Mon Sep 17 00:00:00 2001
From: sebastiengllmt <sebastiengllmt@gmail.com>
Date: Sun, 30 Dec 2018 09:34:44 +0900
Subject: [PATCH 3/4] update README

---
 app/themes/README.md | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/themes/README.md b/app/themes/README.md
index d2c1e23895..5497e9ca02 100644
--- a/app/themes/README.md
+++ b/app/themes/README.md
@@ -1,15 +1,22 @@
-# Folder structure
+# Extension points
 
-This folder serves three independent theme (css) related concepts
+Yoroi uses [React-Polymorph](https://github.com/input-output-hk/react-polymorph/) to separate the theming (style/css) of a component from its UI logic and its skin (markup).
 
-## 1) Overriding the default theme
+React-Polymorph comes with a default theme for each component (called the `simple` theme) with extension points (ex: letting you switch the color) as [`css` variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). We also create extension points into our own application again through `css` variables.
 
-Yoroi uses [React-Polymorph](https://github.com/input-output-hk/react-polymorph/) to separate the theming (style/css) of a component from its UI logic and its skin (markup).
+Prefixes the `react-polymorph` css vars with `--rp` and renames them to follow a uniform naming convention that describes their use from broad to specific.
+- Example: `--rp-formfield-label-text-color` and `--rp-formfield-label-text-color-disabled`.
+
+This convention follows `--rp-prefix-component-element-property-state`.
 
-React-Polymorph comes with a default theme for each component (called the `simple` theme) but we want to allow ourselves to easily extend/modify it as needed. To do this, we :
+# Folder structure
+
+This folder serves a few independent theme (css) related concepts
+
+## 1) Overriding the default theme
 
-A) Have a folder called `simple` which imports the default themes (css) and provides us the ability to override what we need.
-B) Rebundle this modified `simple` theme into a new theme called `yoroiTheme`. 
+A) Have a folder called `overrides` which overrides the default properties of `simple` (to see what the defaults are, go see the `simple` theme in the [`react-polymorph` repo](https://github.com/input-output-hk/react-polymorph/tree/develop/source/themes/simple))\
+B) Rebundle this modified `simple` theme into a new theme called `yoroiTheme`.\
 C) Use the `ThemeProvider` to automatically override the default theme on all React-Polymorph componenets at the top-level of our `App`.
 
 ## 2) Store prebuild themes
@@ -20,4 +27,4 @@ To add a new extension point for theming, create a new row in all the `prebuilt`
 
 ## 3) Store shared themes
 
-Some themes are shared across multiple components and so we store them in a shared location called `mixins`
\ No newline at end of file
+Some themes are shared across multiple components and so we store them in a shared location called `mixins`. Global css overrides are put in `index.global.scss`
\ No newline at end of file

From e076f67c8d3a59a7cc9a3a7c683c75ab27b01438 Mon Sep 17 00:00:00 2001
From: sebastiengllmt <sebastiengllmt@gmail.com>
Date: Tue, 15 Jan 2019 05:16:34 +0900
Subject: [PATCH 4/4] small fixes

---
 app/App.js                                      | 2 +-
 app/Routes.js                                   | 2 +-
 app/stores/ada/DaedalusTransferStore.js         | 4 +++-
 app/utils/validations.js                        | 6 +++---
 features/step_definitions/transactions-steps.js | 1 -
 features/transactions.feature                   | 4 ++--
 package-lock.json                               | 4 ++--
 7 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/App.js b/app/App.js
index 137d2a442a..c3ac56da90 100644
--- a/app/App.js
+++ b/app/App.js
@@ -11,7 +11,7 @@ import zh from 'react-intl/locale-data/zh';
 import ru from 'react-intl/locale-data/ru';
 import { Routes } from './Routes';
 import { yoroiTheme } from './themes/yoroi';
-import { themeOverrides } from './themes/overrides/index.js';
+import { themeOverrides } from './themes/overrides/index';
 import translations from './i18n/translations';
 import type { StoresMap } from './stores/index';
 import type { ActionsMap } from './actions/index';
diff --git a/app/Routes.js b/app/Routes.js
index 97f1b9630f..32bb74712a 100644
--- a/app/Routes.js
+++ b/app/Routes.js
@@ -72,7 +72,7 @@ export const Routes = (
           <Settings {...props} stores={stores} actions={actions}>
             {SettingsSubpages(stores, actions)}
           </Settings>
-        )} 
+        )}
       />
       <Route
         exact
diff --git a/app/stores/ada/DaedalusTransferStore.js b/app/stores/ada/DaedalusTransferStore.js
index a575b9ee32..5f6bf6d77b 100644
--- a/app/stores/ada/DaedalusTransferStore.js
+++ b/app/stores/ada/DaedalusTransferStore.js
@@ -36,7 +36,9 @@ export default class DaedalusTransferStore extends Store {
   @observable disableTransferFunds: boolean = true;
   @observable error: ?LocalizableError = null;
   @observable transferTx: ?TransferTx = null;
-  @observable transferFundsRequest: Request<SignedResponse> = new Request(this._transferFundsRequest);
+  @observable transferFundsRequest: Request<SignedResponse>= new Request(
+    this._transferFundsRequest
+  );
   @observable ws: any = null;
 
   setup(): void {
diff --git a/app/utils/validations.js b/app/utils/validations.js
index 572f0e2e69..726b8d758c 100644
--- a/app/utils/validations.js
+++ b/app/utils/validations.js
@@ -6,10 +6,10 @@ export const isValidWalletName = (walletName) => {
   return nameLength >= 1 && nameLength <= 40;
 };
 
-export const isValidWalletPassword = (walletPassword) => {
+export const isValidWalletPassword = (walletPassword) => (
   // https://xkcd.com/936/
-  return walletPassword.length >= 12;
-};
+  walletPassword.length >= 12
+);
 
 // eslint-disable-next-line max-len
 export const isValidRepeatPassword = (walletPassword, repeatPassword) => walletPassword === repeatPassword;
diff --git a/features/step_definitions/transactions-steps.js b/features/step_definitions/transactions-steps.js
index 58e4e849de..ffc111e0d2 100644
--- a/features/step_definitions/transactions-steps.js
+++ b/features/step_definitions/transactions-steps.js
@@ -1,7 +1,6 @@
 // @flow
 
 import { Given, When, Then, Before, After } from 'cucumber';
-import { By } from 'selenium-webdriver';
 import { expect } from 'chai';
 import { getMockServer, closeMockServer } from '../support/mockServer';
 import i18n from '../support/helpers/i18n-helpers';
diff --git a/features/transactions.feature b/features/transactions.feature
index 8c4ee35f58..3be03aebd3 100644
--- a/features/transactions.feature
+++ b/features/transactions.feature
@@ -25,8 +25,8 @@ Feature: Send transaction
     Examples:
       | amount              | fee       | |
       | 0.001000            | 0.168082  | # Sent tx to a valid adress|
-      | 9007199254..552484  | 0.168038  | # Sent all funds|
-      | 9007199253..720698  | 0.168170  | # Sent a big amount|
+      | 9007199254.552484  | 0.168038  | # Sent all funds|
+      | 9007199253.720698  | 0.168170  | # Sent a big amount|
 
   @it-90
   Scenario Outline: Spending Password should be case-sensitive [Transaction confirmation] (IT-90)
diff --git a/package-lock.json b/package-lock.json
index 166e1b21a1..5180807b1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "yoroi",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -17975,7 +17975,7 @@
         },
         "whatwg-fetch": {
           "version": "2.0.4",
-          "resolved": "http://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+          "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
           "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
         }
       }