Upgrade to React-Polymorph v8 (#201)

To upgrade to the latest version of `react-polymorph` (v8) we need to do two upgrades: - [x] upgrade to v7.2 (based on [this PR](input-output-hk/daedalus#950)) - [x] upgrade to v8 (based on [this PR](input-output-hk/daedalus#1139)) I made both upgrades as the two commits to this PR and it's probably easier to read if you code review the two commits individually (since the changes are orthogonal). I also have a README change that explains what `react-polymorph` v8 does but you can find something similar in the Daedalus PR I linked above. v8 also introduces large refactoring changes that makes a mess of the whole thing. I tried my best to make all the UI look the same while keeping the improvements from v8 but one thing I couldn't stop is that the font size is not 1px bigger across the app (which honestly is not a big deal so I didn't bother). There are probably small things that changed here in there but I manually compared the whole UI and everything looked close enough I don't think anybody would notice any difference that did occur.
Emurgo · Jan 15, 2019 · 1b93d9f · 1b93d9f
1 parent 72684b8
commit 1b93d9f
Show file tree

Hide file tree

Showing 62 changed files with 502 additions and 488 deletions.
diff --git 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';
@@ -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';
 import translations from './i18n/translations';
 import type { StoresMap } from './stores/index';
 import type { ActionsMap } from './actions/index';
@@ -48,15 +49,15 @@ 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}>
+        <ThemeProvider theme={yoroiTheme} themeOverrides={themeOverrides}>
           <IntlProvider {...{ locale, key: locale, messages: mergedMessages }}>
             <Router history={history}>
               {Routes(stores, actions)}

diff --git 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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,22 +157,22 @@ 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}>
               <Button
                 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
@@ -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,15 +166,15 @@ export default class TransferSummaryPage extends Component<Props> {
                 label={intl.formatMessage(messages.cancelTransferButtonLabel)}
                 onClick={this.props.onCancel}
                 disabled={isSubmitting}
-                skin={<SimpleButtonSkin />}
+                skin={ButtonSkin}
               />
 
               <Button
                 className={nextButtonClasses}
                 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
@@ -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
@@ -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
@@ -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
@@ -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)}