[DDW-893] Dialogs - basic styling

input-output-hk · Sep 11, 2019 · 5527d95 · 5527d95
1 parent 2af4c76
commit 5527d95
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 39 deletions.
diff --git a/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep1Dialog.js b/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep1Dialog.js
@@ -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({
+export const messages = defineMessages({
-//   recoveryPhraseStep1Title: {
+  recoveryPhraseStep1Title: {
-//     id: 'wallet.settings.recoveryPhraseStep1Title',
+    id: 'wallet.settings.recoveryPhraseStep1Title',
-//     defaultMessage: '!!!Wallet recovery phrase verification',
+    defaultMessage: '!!!Wallet recovery phrase verification',
-//     description: 'Label for the recoveryPhraseStep1Title on wallet settings.',
+    description: 'Label for the recoveryPhraseStep1Title on wallet settings.',
-//   },
+  },
-//   recoveryPhraseStep1Paragraph1: {
+  recoveryPhraseStep1Paragraph1: {
-//     id: '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.',
+    defaultMessage:
-//     description: 'Label for the recoveryPhraseStep1Paragraph1 on wallet settings.',
+      '!!!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:
-//     recoveryPhraseStep1Paragraph2: {
+      'Label for the recoveryPhraseStep1Paragraph1 on wallet settings.',
-//     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.',
+  recoveryPhraseStep1Paragraph2: {
-//     description: 'Label for the recoveryPhraseStep1Paragraph2 on wallet settings.',
+    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 = {
+  static contextTypes = {
-  //   intl: intlShape.isRequired,
+    intl: intlShape.isRequired,
-  // };
+  };
   render() {
-    // const { intl } = this.context;
+    const { intl } = this.context;
-    const { onContinue, onClose } = this.props;
+    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>

diff --git a/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep1Dialog.scss b/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep1Dialog.scss
diff --git a/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep2Dialog.js b/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep2Dialog.js
@@ -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>
     );
   }

diff --git a/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep3Dialog.js b/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep3Dialog.js
@@ -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.

diff --git a/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep4Dialog.js b/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStep4Dialog.js
@@ -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: {

diff --git a/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStepDialogs.scss b/source/renderer/app/components/wallet/settings/WalletRecoveryPhraseStepDialogs.scss
@@ -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;
+}
diff --git a/source/renderer/app/containers/wallet/dialogs/settings/WalletRecoveryPhraseStep1Container.js b/source/renderer/app/containers/wallet/dialogs/settings/WalletRecoveryPhraseStep1Container.js
@@ -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}
       />
     );
   }

diff --git a/source/renderer/app/containers/wallet/dialogs/settings/WalletRecoveryPhraseStep3Container.js b/source/renderer/app/containers/wallet/dialogs/settings/WalletRecoveryPhraseStep3Container.js
@@ -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}
+      />
     );
   }
 }