[DDW-496]: Adjust wallet restore dialog styles

input-output-hk · Jan 14, 2021 · 0b8155f · 0b8155f
1 parent cad62a6
commit 0b8155f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 30 deletions.
diff --git a/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreDialog.js b/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreDialog.js
@@ -1,24 +1,31 @@
 // @flow
 import React, { Component } from 'react';
 import type { Node } from 'react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import DialogCloseButton from '../../../widgets/DialogCloseButton';
 import Dialog from '../../../widgets/Dialog';
 import DialogBackButton from '../../../widgets/DialogBackButton';
 import WalletRestoreSteps from './WalletRestoreSteps';
 import styles from './WalletRestoreDialog.scss';
+import { RESTORE_WALLET_STEPS } from '../../../../config/walletRestoreConfig';
 import type { DialogActionItems } from '../../../widgets/Dialog';
+import type { RestoreWalletStep } from '../../../../types/walletRestoreTypes';
 
 const messages = defineMessages({
   dialogTitle: {
     id: 'wallet.restore.dialog.title',
     defaultMessage: '!!!Restore a wallet',
-    description: 'Title "Create a new wallet" in the wallet create form.',
+    description: 'Title "Create a new wallet" in the wallet restore form.',
   },
   dialogTitleSuccess: {
     id: 'wallet.restore.dialog.titleSuccess',
     defaultMessage: '!!!Restore a wallet',
-    description: 'Title "Create a new wallet" in the wallet create form.',
+    description: 'Title "Create a new wallet" in the wallet restore form.',
+  },
+  stepsCounter: {
+    id: 'wallet.restore.dialog.stepsCounter',
+    defaultMessage: '!!!Step {currentStep} of {totalSteps}',
+    description: 'Step couters in the wallet restore dialog.',
   },
 });
 
@@ -35,18 +42,34 @@ export default class WalletRestoreDialog extends Component<Props> {
     intl: intlShape.isRequired,
   };
 
+  get filteredSteps(): Array<RestoreWalletStep> {
+    return RESTORE_WALLET_STEPS.filter((stepId) => stepId !== 'success');
+  }
+
   render() {
     const { intl } = this.context;
     const { actions, children, stepNumber, onClose, onBack } = this.props;
     const hasStep = stepNumber !== undefined;
     const title = hasStep
       ? intl.formatMessage(messages.dialogTitle)
       : intl.formatMessage(messages.dialogTitleSuccess);
+    const currentStep = (stepNumber || 0) + 1;
+    const totalSteps = this.filteredSteps.length;
+    const subTitle = (
+      <FormattedHTMLMessage
+        {...messages.stepsCounter}
+        values={{
+          currentStep,
+          totalSteps,
+        }}
+      />
+    );
 
     return (
       <Dialog
         className={styles.component}
         title={title}
+        subtitle={subTitle}
         actions={actions}
         closeOnOverlayClick={false}
         onClose={onClose}

diff --git a/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreSteps.js b/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreSteps.js
@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
+import { defineMessages, intlShape } from 'react-intl';
 import { Stepper } from 'react-polymorph/lib/components/Stepper';
 import { StepperSkin } from 'react-polymorph/lib/skins/simple/StepperSkin';
 import styles from './WalletRestoreSteps.scss';
@@ -12,25 +12,20 @@ type Props = {
 };
 
 const messages = defineMessages({
-  stepsCounter: {
-    id: 'wallet.restore.dialog.stepsCounter',
-    defaultMessage: '!!!Step {currentStep} of {totalSteps}',
-    description: 'Step couters in the wallet create dialog.',
-  },
   typeStep: {
     id: 'wallet.restore.dialog.typeStep',
     defaultMessage: '!!!Type',
-    description: 'Step "Type" in the wallet create dialog.',
+    description: 'Step "Type" in the wallet restore dialog.',
   },
   mnemonicsStep: {
     id: 'wallet.restore.dialog.mnemonicsStep',
     defaultMessage: '!!!Recovery Phrase',
-    description: 'Step "Recovery Phrase" in the wallet create dialog.',
+    description: 'Step "Recovery Phrase" in the wallet restore dialog.',
   },
   configurationStep: {
     id: 'wallet.restore.dialog.configurationStep',
     defaultMessage: '!!!Configuration',
-    description: 'Step "Configuration" in the wallet create dialog.',
+    description: 'Step "Configuration" in the wallet restore dialog.',
   },
 });
 
@@ -52,18 +47,8 @@ export default class WalletRestoreSteps extends Component<Props> {
   render() {
     const { stepNumber } = this.props;
     const currentStep = stepNumber + 1;
-    const totalSteps = this.filteredSteps.length;
     return (
       <div className={styles.component}>
-        <div className={styles.stepCounter}>
-          <FormattedHTMLMessage
-            {...messages.stepsCounter}
-            values={{
-              currentStep,
-              totalSteps,
-            }}
-          />
-        </div>
         <Stepper
           steps={this.stepsList}
           activeStep={currentStep}

diff --git a/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreSteps.scss b/source/renderer/app/components/wallet/wallet-restore/widgets/WalletRestoreSteps.scss
@@ -8,11 +8,3 @@
     }
   }
 }
-
-.stepCounter {
-  font-family: var(--font-regular);
-  font-size: 12px;
-  line-height: 1.83;
-  margin-bottom: 5px;
-  text-align: center;
-}