Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DDW-245] Integrate react-polymorph render props in Daedalus #950

Merged
Show file tree
Hide file tree
Changes from 49 commits
Commits
Show all changes
54 commits
Select commit Hold shift + click to select a range
6256b5d
[DDW-245] Changes import syntax and paths for react-polymorph compone…
MarcusHurney May 29, 2018
1956f28
[DDW-245] Replaces react-css-themr ThemeProvider with react-polymorph…
MarcusHurney May 29, 2018
e396312
[DDW-245] Removes react-css-themr from dependencies
MarcusHurney May 29, 2018
da37ea0
[DDW-245] Removes FormField wrapping Input components. Adds themeId t…
MarcusHurney May 30, 2018
cbb07ae
[DDW-245] Removes react-css-themr dependency
MarcusHurney May 30, 2018
a366c07
[DDW-245] Replaces react-css-themr ThemeProvider with react-polymorph's
MarcusHurney May 30, 2018
27058fa
[DDW-245] Removes FormField rendering Inputs. Passes label directly t…
MarcusHurney May 30, 2018
6a5a809
[DDW-245] Implements new react-polymorph API in import statements and…
MarcusHurney May 30, 2018
efe890b
Merge branch 'develop' of github.com:input-output-hk/daedalus into ch…
MarcusHurney May 30, 2018
4604ca4
[DDW-245] Corrects name of label prop for displaying wallet name
MarcusHurney May 31, 2018
363d8c2
[DDW-245] Updates CHANGELOG
MarcusHurney May 31, 2018
f82bd0d
[DDW-245] Updates StoryDecorator.js to use react-polymorph ThemeProvider
MarcusHurney May 31, 2018
888f2ca
[DDW-245] Corrects InputSkin import path
MarcusHurney May 31, 2018
039a673
[DDW-245] Updates yarn.lock
MarcusHurney May 31, 2018
70b35f1
[DDW-245] Updates line numbers in defaultMessages.json
MarcusHurney Jun 1, 2018
4095dec
Merge branch 'develop' of github.com:input-output-hk/daedalus into ch…
MarcusHurney Jun 1, 2018
782f055
[DDW-245] Adds themeId prop for Checkbox component within TinySwitch.js
MarcusHurney Jun 1, 2018
275c704
[DDW-245] Adds themeId prop to Checkbox components with SwitchSkin
MarcusHurney Jun 1, 2018
7dfa149
[DDW-245] Deletes lock files to avoid merge conflict when pulling in …
MarcusHurney Jun 18, 2018
3f6ec78
[DDW-245] Pulls in latest changes from develop branch
MarcusHurney Jun 18, 2018
6262833
[DDW-245] Updates AdaRedemptionNoWallets.js to use new react-polymorp…
MarcusHurney Jun 18, 2018
7b3692e
Merge branch 'develop' into chore/ddw-245-integrate-react-polymorph-r…
DominikGuzei Jun 21, 2018
dc46169
update to react-polymorph 0.7.0
DominikGuzei Jun 21, 2018
0823de1
[DDW-245] fix conflicts with latest develop
DominikGuzei Jun 22, 2018
4527b37
[DDW-245] fix small bugs and acceptance tests
DominikGuzei Jun 25, 2018
1f38ba5
[DDW-245] merge-in latest develop
DominikGuzei Jun 25, 2018
6a31bad
Merge branch 'develop' into chore/ddw-245-integrate-react-polymorph-r…
DominikGuzei Jun 26, 2018
b698e70
[DDW-245] fix clear feature on wallet restore dialog
DominikGuzei Jun 26, 2018
851bf55
[DDW-245] Composes styles for wallet name and password input fields u…
MarcusHurney Jun 27, 2018
71bc7d6
[DDW-245] Adds option-checkmark-color variable to _config.scss and it…
MarcusHurney Jun 28, 2018
9e80749
[DDW-245] Defines MnemonicWord's click handler as a const instead of …
MarcusHurney Jun 29, 2018
22f1f23
[DDW-245] Defines MnemonicWord's styles in accordance to Button's the…
MarcusHurney Jun 29, 2018
43334e9
[DDW-245] Passes Button component MnemonicWord.scss's custom styles a…
MarcusHurney Jun 29, 2018
73abd1d
[DDW-245] fix select arrow colors in all themes and states
DominikGuzei Jul 5, 2018
84631e4
[DDW-245] Adjusts paths to import react-polymorph components and skin…
MarcusHurney Jul 6, 2018
14a7630
[DDW-245] fix conflicts with latest develop
DominikGuzei Jul 6, 2018
f07f65a
Merge branch 'chore/ddw-245-integrate-react-polymorph-render-props-in…
DominikGuzei Jul 6, 2018
82362d2
[DDW-245] fixes all paths to react-polymorph components
DominikGuzei Jul 6, 2018
23d1a38
[DDW-245] update to latest react-polymorph
DominikGuzei Jul 9, 2018
bfdf4fb
[DDW-245] Fixes import path for react-polymorph InputSkin
MarcusHurney Jul 9, 2018
2732208
[DDW-245] Fix autocomplete clear and storybook imports
nikolaglumac Jul 10, 2018
37fbcdb
[DDW-245] Fix checkbox disabled state styles
nikolaglumac Jul 10, 2018
5f93927
[DDW-245] improve dynamic resolving based on environment
DominikGuzei Jul 10, 2018
5c46570
[DDW-245] update to latest react-polymorph without default theme to f…
DominikGuzei Jul 10, 2018
dba38d4
[DDW-245] small refactorings
DominikGuzei Jul 11, 2018
b336c02
[DDW-245] fix conflicts with latest develop branch
DominikGuzei Jul 11, 2018
b1f2370
[DDW-245] revert resolver changes as they didnt improve anything
DominikGuzei Jul 11, 2018
24b2429
Merge branch 'chore/ddw-245-integrate-react-polymorph-render-props-in…
DominikGuzei Jul 11, 2018
715dc6e
[DDW-245] Fix failing acceptance tests
nikolaglumac Jul 12, 2018
8aade98
[DDW-245] Merge latest develop and fix conflicts
nikolaglumac Jul 12, 2018
02c5f62
[DDW-245] update to react-polymorph 0.7.1
DominikGuzei Jul 20, 2018
a9c61b2
Merge branch 'chore/ddw-245-integrate-react-polymorph-render-props-in…
DominikGuzei Jul 20, 2018
d3a40c6
Merge branch 'develop' into chore/ddw-245-integrate-react-polymorph-r…
DominikGuzei Jul 20, 2018
b0ddb30
Merge branch 'develop' into chore/ddw-245-integrate-react-polymorph-r…
DominikGuzei Jul 23, 2018
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ Changelog

## vNext

### Chores

- Integrates the latest features from the develop branch of react-polymorph. Features include: render props architecture, theme composition, and a ThemeProvider HOC. [PR 950](https://github.com/input-output-hk/daedalus/pull/950)

### Features

- Improved the loading UX ([PR 723](https://github.com/input-output-hk/daedalus/pull/723))
Expand Down
2 changes: 1 addition & 1 deletion features/step_definitions/select-language-steps.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ When(/^I open language selection dropdown$/, function () {
});

When(/^I select Japanese language$/, function () {
return this.waitAndClick('//li[contains(text(), "Japanese")]');
return this.waitAndClick('//*[@class="SimpleOptions_label"][contains(text(), "Japanese")]');
});

When(/^I submit the language selection form$/, function () {
Expand Down
2 changes: 1 addition & 1 deletion features/step_definitions/settings-steps.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ When(/^I open "Transaction assurance security level" selection dropdown$/, funct
});

When(/^I select "Strict" assurance level$/, function () {
return this.waitAndClick('//li[contains(text(), "Strict")]');
return this.waitAndClick('//*[@class="SimpleOptions_label"][contains(text(), "Strict")]');
});

Then(/^I should have wallet with "Strict" assurance level set$/, async function () {
Expand Down
2 changes: 1 addition & 1 deletion features/step_definitions/wallets-steps.js
Original file line number Diff line number Diff line change
Expand Up @@ -272,7 +272,7 @@ When(/^I see the create wallet recovery phrase entry dialog$/, function () {
When(/^I click on recovery phrase mnemonics in correct order$/, async function () {
for (let i = 0; i < this.recoveryPhrase.length; i++) {
const recoveryPhraseMnemonic = this.recoveryPhrase[i];
await this.waitAndClick(`//button[contains(text(), "${recoveryPhraseMnemonic}") and @class="flat MnemonicWord_component MnemonicWord_active SimpleButton_root"]`);
await this.waitAndClick(`//button[contains(text(), "${recoveryPhraseMnemonic}") and @class="flat SimpleButton_root MnemonicWord_root"]`);
}
});

Expand Down
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -140,13 +140,12 @@
"react": "15.6.2",
"react-addons-css-transition-group": "15.6.2",
"react-copy-to-clipboard": "5.0.1",
"react-css-themr": "2.1.2",
"react-dom": "15.6.2",
"react-dropzone": "4.2.3",
"react-intl": "2.4.0",
"react-markdown": "3.1.0",
"react-number-format": "3.0.3",
"react-polymorph": "0.6.5",
"react-polymorph": "input-output-hk/react-polymorph#4f17d79608953b2d61d8dea792af0df106fcf3de",
"react-router": "3.0.3",
"react-svg-inline": "2.1.0",
"recharts": "1.0.0-beta.10",
Expand Down
6 changes: 3 additions & 3 deletions source/renderer/app/App.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @flow
import React, { Component } from 'react';
import { Provider, observer } from 'mobx-react';
import { ThemeProvider } from 'react-css-themr';
import { ThemeProvider } from 'react-polymorph/lib/components/ThemeProvider';
import DevTools from 'mobx-react-devtools';
import { Router } from 'react-router';
import { IntlProvider } from 'react-intl';
Expand All @@ -26,11 +26,11 @@ export default class App extends Component<{
const locale = stores.profile.currentLocale;
const mobxDevTools = environment.MOBX_DEV_TOOLS ? <DevTools /> : null;
const currentTheme = stores.profile.currentTheme;
const theme = require(`./themes/daedalus/${currentTheme}.js`); // eslint-disable-line
const themeVars = require(`./themes/daedalus/${currentTheme}.js`); // eslint-disable-line

return (
<div>
<ThemeManager variables={theme} />
<ThemeManager variables={themeVars} />
<Provider stores={stores} actions={actions}>
<ThemeProvider theme={daedalusTheme}>
<IntlProvider {...{ locale, key: locale, messages: translations[locale] }}>
Expand Down
6 changes: 3 additions & 3 deletions source/renderer/app/components/loading/Loading.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import SVGInline from 'react-svg-inline';
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 SystemTimeErrorOverlay from './SystemTimeErrorOverlay';
import LoadingSpinner from '../widgets/LoadingSpinner';
import daedalusLogo from '../../assets/images/daedalus-logo-loading-grey.inline.svg';
Expand Down Expand Up @@ -246,7 +246,7 @@ export default class Loading extends Component<Props, State> {
className={buttonClasses}
label={intl.formatMessage(messages.reportIssueButtonLabel)}
onClick={handleReportIssue}
skin={<SimpleButtonSkin />}
skin={ButtonSkin}
/>
</div>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import humanizeDuration from 'humanize-duration';
import SVGInline from 'react-svg-inline';
import { observer } from 'mobx-react';
import { defineMessages, intlShape, FormattedHTMLMessage } 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 attentionIcon from '../../assets/images/attention-big-light.inline.svg';
import styles from './SystemTimeErrorOverlay.scss';

Expand Down Expand Up @@ -78,7 +78,7 @@ export default class SystemTimeErrorOverlay extends Component<Props> {
<Button
className="disclaimer"
label={problemSolutionLink}
skin={<SimpleButtonSkin />}
skin={ButtonSkin}
onClick={this.onProblemSolutionClick.bind(this, problemSolutionLink)}
/>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import SVGInline from 'react-svg-inline';
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 styles from './NodeUpdateNotification.scss';
import arrowIcon from '../../assets/images/arrow.inline.svg';

Expand Down Expand Up @@ -91,14 +91,14 @@ export default class NodeUpdateNotification extends Component<Props> {
className={styles.acceptButton}
label={intl.formatMessage(messages.acceptLabel)}
onClick={onAccept}
skin={<SimpleButtonSkin />}
skin={ButtonSkin}
/>

<Button
className={styles.denyButton}
label={intl.formatMessage(messages.denyLabel)}
onClick={onPostpone}
skin={<SimpleButtonSkin />}
skin={ButtonSkin}
/>

</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@ import { observer } from 'mobx-react';
import { isEmail, isEmpty } from 'validator';
import classnames from 'classnames';
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
import Input from 'react-polymorph/lib/components/Input';
import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
import TextArea from 'react-polymorph/lib/components/TextArea';
import SimpleTextAreaSkin from 'react-polymorph/lib/skins/simple/raw/TextAreaSkin';
import Checkbox from 'react-polymorph/lib/components/Checkbox';
import SimpleSwitchSkin from 'react-polymorph/lib/skins/simple/raw/SwitchSkin';
import { Input } from 'react-polymorph/lib/components/Input';
import { TextArea } from 'react-polymorph/lib/components/TextArea';
import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
import { TextAreaSkin } from 'react-polymorph/lib/skins/simple/TextAreaSkin';
import { SwitchSkin } from 'react-polymorph/lib/skins/simple/SwitchSkin';
import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
Expand Down Expand Up @@ -321,7 +322,7 @@ export default class BugReportDialog extends Component<Props, State> {
className="email"
{...emailField.bind()}
error={emailField.error}
skin={<SimpleInputSkin />}
skin={InputSkin}
onKeyPress={submitOnEnter.bind(this, this.submit)}
/>
</div>
Expand All @@ -331,7 +332,7 @@ export default class BugReportDialog extends Component<Props, State> {
className="subject"
{...subjectField.bind()}
error={subjectField.error}
skin={<SimpleInputSkin />}
skin={InputSkin}
onKeyPress={submitOnEnter.bind(this, this.submit)}
/>
</div>
Expand All @@ -343,7 +344,7 @@ export default class BugReportDialog extends Component<Props, State> {
rows={3}
{...problemField.bind()}
error={problemField.error}
skin={<SimpleTextAreaSkin />}
skin={TextAreaSkin}
/>
</div>

Expand All @@ -354,10 +355,11 @@ export default class BugReportDialog extends Component<Props, State> {
</div>

<Checkbox
themeId={IDENTIFIERS.SWITCH}
onChange={this.handleLogsSwitchToggle}
label={intl.formatMessage(messages.logsSwitchPlaceholder)}
checked={showLogs}
skin={<SimpleSwitchSkin />}
skin={SwitchSkin}
/>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 { Button } from 'react-polymorph/lib/components/Button';
import { Select } from 'react-polymorph/lib/components/Select';
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';
Expand Down Expand Up @@ -84,16 +84,16 @@ 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>}

<Button
className={buttonClasses}
label={intl.formatMessage(messages.submitLabel)}
skin={ButtonSkin}
onClick={this.submit}
skin={<SimpleButtonSkin />}
/>

</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 { Checkbox } from 'react-polymorph/lib/components/Checkbox';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
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 LocalizableError from '../../../i18n/LocalizableError';
import TermsOfUseText from './TermsOfUseText';
import styles from './TermsOfUseForm.scss';
Expand Down Expand Up @@ -82,7 +82,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>

Expand All @@ -93,7 +93,7 @@ export default class TermsOfUseForm extends Component<Props, State> {
label={intl.formatMessage(messages.submitLabel)}
onClick={this.submit}
disabled={!areTermsOfUseAccepted}
skin={<SimpleButtonSkin />}
skin={ButtonSkin}
/>

</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -72,7 +72,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>}
Expand Down
8 changes: 5 additions & 3 deletions source/renderer/app/components/staking/StakingSwitch.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import Checkbox from 'react-polymorph/lib/components/Checkbox';
import SimpleSwitchSkin from 'react-polymorph/lib/skins/simple/raw/SwitchSkin';
import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
import { SwitchSkin } from 'react-polymorph/lib/skins/simple/SwitchSkin';
import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
import styles from './StakingSwitch.scss';

type Props = {
Expand All @@ -20,9 +21,10 @@ export default class StakingSwitch extends Component<Props> {
<div className={styles.component}>
<div className={styles.label}>Staking</div>
<Checkbox
themeId={IDENTIFIERS.SWITCH}
onChange={this.handleChange}
checked={active}
skin={<SimpleSwitchSkin />}
skin={SwitchSkin}
/>
</div>
);
Expand Down
20 changes: 11 additions & 9 deletions source/renderer/app/components/wallet/WalletCreateDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
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 Checkbox from 'react-polymorph/lib/components/Checkbox';
import SimpleSwitchSkin from 'react-polymorph/lib/skins/simple/raw/SwitchSkin';
import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
import { Input } from 'react-polymorph/lib/components/Input';
import { SwitchSkin } from 'react-polymorph/lib/skins/simple/SwitchSkin';
import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
import { defineMessages, intlShape } from 'react-intl';
import ReactToolboxMobxForm from '../../utils/ReactToolboxMobxForm';
import DialogCloseButton from '../widgets/DialogCloseButton';
Expand Down Expand Up @@ -87,7 +88,7 @@ export default class WalletCreateDialog extends Component<Props, State> {
};

componentDidMount() {
setTimeout(() => { this.walletNameInput.focus(); });
setTimeout(() => { this.walletNameInput.getRef().focus(); });
}

walletNameInput: Input;
Expand Down Expand Up @@ -210,7 +211,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}>
Expand All @@ -219,10 +220,11 @@ export default class WalletCreateDialog extends Component<Props, State> {
{intl.formatMessage(messages.passwordSwitchLabel)}
</div>
<Checkbox
themeId={IDENTIFIERS.SWITCH}
onChange={this.handlePasswordSwitchToggle}
label={intl.formatMessage(messages.passwordSwitchPlaceholder)}
checked={createPassword}
skin={<SimpleSwitchSkin />}
skin={SwitchSkin}
/>
</div>

Expand All @@ -232,14 +234,14 @@ export default class WalletCreateDialog extends Component<Props, State> {
onKeyPress={submitOnEnter.bind(this, this.submit)}
{...walletPasswordField.bind()}
error={walletPasswordField.error}
skin={<SimpleInputSkin />}
skin={InputSkin}
/>
<Input
className="repeatedPassword"
onKeyPress={submitOnEnter.bind(this, this.submit)}
{...repeatedPasswordField.bind()}
error={repeatedPasswordField.error}
skin={<SimpleInputSkin />}
skin={InputSkin}
/>
<p className={styles.passwordInstructions}>
{intl.formatMessage(globalMessages.passwordInstructions)}
Expand Down
Loading