Skip to content
Permalink
Browse files

[DDW-893] Dialogs - basic styling

  • Loading branch information...
daniloprates committed Sep 11, 2019
1 parent 2af4c76 commit 5527d95af726f88b578e8df906d4ebac09cd69e2
@@ -1,42 +1,55 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
// import { defineMessages, intlShape } from 'react-intl';
import { defineMessages, intlShape } from 'react-intl';
import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import styles from './WalletRecoveryPhraseStep1Dialog.scss';
import styles from './WalletRecoveryPhraseStepDialogs.scss';

// export const messages = defineMessages({
// recoveryPhraseStep1Title: {
// id: 'wallet.settings.recoveryPhraseStep1Title',
// defaultMessage: '!!!Wallet recovery phrase verification',
// description: 'Label for the recoveryPhraseStep1Title on wallet settings.',
// },
// recoveryPhraseStep1Paragraph1: {
// id: 'wallet.settings.recoveryPhraseStep1Paragraph1',
// defaultMessage: '!!!To verify that you have the correct recovery phrase for this wallet you can enter your 12-word wallet recovery phrase on the following screen.',
// description: 'Label for the recoveryPhraseStep1Paragraph1 on wallet settings.',
// },
// recoveryPhraseStep1Paragraph2: {
// id: 'wallet.settings.recoveryPhraseStep1Paragraph2',
// defaultMessage: '!!!Are you being watched? Please make sure that nobody can see your screen while you are entering your wallet recovery phrase.',
// description: 'Label for the recoveryPhraseStep1Paragraph2 on wallet settings.',
// },
// });
export const messages = defineMessages({
recoveryPhraseStep1Title: {
id: 'wallet.settings.recoveryPhraseStep1Title',
defaultMessage: '!!!Wallet recovery phrase verification',
description: 'Label for the recoveryPhraseStep1Title on wallet settings.',
},
recoveryPhraseStep1Paragraph1: {
id: 'wallet.settings.recoveryPhraseStep1Paragraph1',
defaultMessage:
'!!!To verify that you have the correct recovery phrase for this wallet you can enter your 12-word wallet recovery phrase on the following screen.',
description:
'Label for the recoveryPhraseStep1Paragraph1 on wallet settings.',
},
recoveryPhraseStep1Paragraph2: {
id: 'wallet.settings.recoveryPhraseStep1Paragraph2',
defaultMessage:
'!!!Are you being watched? Please make sure that nobody can see your screen while you are entering your wallet recovery phrase.',
description:
'Label for the recoveryPhraseStep1Paragraph2 on wallet settings.',
},
});

type Props = {
onContinue: Function,
onClose: Function,
onToggleSafetyAgreement: Function,
safetyAgreement: boolean,
};

@observer
export default class WalletRecoveryPhraseStep1 extends Component<Props> {
// static contextTypes = {
// intl: intlShape.isRequired,
// };
static contextTypes = {
intl: intlShape.isRequired,
};
render() {
// const { intl } = this.context;
const { onContinue, onClose } = this.props;
const { intl } = this.context;
const {
onContinue,
onClose,
onToggleSafetyAgreement,
safetyAgreement,
} = this.props;
const isSubmitting = false;

const actions = [
@@ -45,6 +58,7 @@ export default class WalletRecoveryPhraseStep1 extends Component<Props> {
label: 'Continue',
primary: true,
onClick: onContinue,
disabled: !safetyAgreement,
},
];

@@ -62,7 +76,13 @@ export default class WalletRecoveryPhraseStep1 extends Component<Props> {
you can enter your 12-word wallet recovery phrase on the following
screen.
</p>
<p>
<p className={styles.checkboxContainer}>
<Checkbox
onChange={onToggleSafetyAgreement}
checked={safetyAgreement}
skin={CheckboxSkin}
className={styles.checkbox}
/>
Are you being watched? Please make sure that nobody can see your
screen while you are entering your wallet recovery phrase.
</p>

This file was deleted.

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
// import { defineMessages, intlShape } from 'react-intl';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import styles from './WalletRecoveryPhraseStep1Dialog.scss';
import styles from './WalletRecoveryPhraseStepDialogs.scss';

// export const messages = defineMessages({
// recoveryPhraseStep1Title: {
@@ -84,7 +84,9 @@ export default class WalletRecoveryPhraseStep1 extends Component<Props, State> {
Please enter your 12-word wallet recovery phrase. Make sure you enter
the words in the correct order.
</p>
<h3>Recovery phrase</h3>
<div className={styles.subtitle}>
<h2>Recovery phrase</h2>
</div>
</Dialog>
);
}
@@ -2,9 +2,11 @@
import React, { Component } from 'react';
import { observer } from 'mobx-react';
// import { defineMessages, intlShape } from 'react-intl';
import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import styles from './WalletRecoveryPhraseStep1Dialog.scss';
import styles from './WalletRecoveryPhraseStepDialogs.scss';

// export const messages = defineMessages({
// recoveryPhraseStep1Title: {
@@ -26,6 +28,8 @@ import styles from './WalletRecoveryPhraseStep1Dialog.scss';

type Props = {
onClose: Function,
onToggleSafetyAgreement: Function,
safetyAgreement: boolean,
};

@observer
@@ -35,13 +39,14 @@ export default class WalletRecoveryPhraseStep1 extends Component<Props> {
// };
render() {
// const { intl } = this.context;
const { onClose } = this.props;
const { onClose, onToggleSafetyAgreement, safetyAgreement } = this.props;

const actions = [
{
label: 'Continue',
primary: true,
onClick: onClose,
disabled: !safetyAgreement,
},
];

@@ -59,7 +64,13 @@ export default class WalletRecoveryPhraseStep1 extends Component<Props> {
at any time to recover the funds in this wallet on another computer,
even if using a different version of Daedalus.
</p>
<p>
<p className={styles.checkboxContainer}>
<Checkbox
onChange={onToggleSafetyAgreement}
checked={safetyAgreement}
skin={CheckboxSkin}
className={styles.checkbox}
/>
Please make sure to keep the paper with your wallet recovery phrase in
a safe place. Anyone with access to your wallet recovery phrase can
take control of your funds.
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
// import { defineMessages, intlShape } from 'react-intl';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import styles from './WalletRecoveryPhraseStep1Dialog.scss';
import styles from './WalletRecoveryPhraseStepDialogs.scss';

// export const messages = defineMessages({
// recoveryPhraseStep1Title: {
@@ -0,0 +1,23 @@
.dialog {
p {
color: #5e6066;
font-family: var(--font-light);
line-height: 1.38;
&:first-child {
margin-bottom: 20px;
}
}
}
.subtitle h2 {
color: #5e6066;
font-family: var(--font-regular);
font-size: 16px;
font-weight: 500;
line-height: 1.38;
}
.checkboxContainer {
display: flex;
}
.checkbox {
margin-right: 20px;
}
@@ -7,16 +7,33 @@ import type { InjectedDialogContainerProps } from '../../../../types/injectedPro

type Props = InjectedDialogContainerProps;

type State = {
safetyAgreement: boolean,
};

@inject('stores', 'actions')
@observer
export default class WalletRecoveryPhraseStep1Container extends Component<Props> {
export default class WalletRecoveryPhraseStep1Container extends Component<
Props,
State
> {
static defaultProps = {
actions: null,
stores: null,
children: null,
onClose: () => {},
};

state = {
safetyAgreement: false,
};

handleToggleSafetyAgreement = checked => {
this.setState({
safetyAgreement: checked,
});
};

handleContinue = () => {
this.props.actions.dialogs.open.trigger({
dialog: WalletRecoveryPhraseStep2Dialog,
@@ -25,10 +42,13 @@ export default class WalletRecoveryPhraseStep1Container extends Component<Props>

render() {
const { closeActiveDialog } = this.props.actions.dialogs;
const { safetyAgreement } = this.state;
return (
<WalletRecoveryPhraseStep1Dialog
onContinue={this.handleContinue}
onClose={closeActiveDialog.trigger}
safetyAgreement={safetyAgreement}
onToggleSafetyAgreement={this.handleToggleSafetyAgreement}
/>
);
}
@@ -6,20 +6,42 @@ import type { InjectedDialogContainerProps } from '../../../../types/injectedPro

type Props = InjectedDialogContainerProps;

type State = {
safetyAgreement: boolean,
};

@inject('stores', 'actions')
@observer
export default class WalletRecoveryPhraseStep2Container extends Component<Props> {
export default class WalletRecoveryPhraseStep2Container extends Component<
Props,
State
> {
static defaultProps = {
actions: null,
stores: null,
children: null,
onClose: () => {},
};

state = {
safetyAgreement: false,
};

handleToggleSafetyAgreement = checked => {
this.setState({
safetyAgreement: checked,
});
};

render() {
const { closeActiveDialog } = this.props.actions.dialogs;
const { safetyAgreement } = this.state;
return (
<WalletRecoveryPhraseStep3Dialog onClose={closeActiveDialog.trigger} />
<WalletRecoveryPhraseStep3Dialog
onClose={closeActiveDialog.trigger}
safetyAgreement={safetyAgreement}
onToggleSafetyAgreement={this.handleToggleSafetyAgreement}
/>
);
}
}

0 comments on commit 5527d95

Please sign in to comment.
You can’t perform that action at this time.