Merge pull request #2924 from korhaliv/fix/wallet-create-layout

fix(ui): center WalletCreate content
LN-Zap · Oct 7, 2019 · a40c13d · a40c13d
2 parents 1b34bd7 + c8795b0
commit a40c13d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 23 deletions.
diff --git a/renderer/components/Onboarding/Steps/WalletCreate.js b/renderer/components/Onboarding/Steps/WalletCreate.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
-import { Spinner, Text } from 'components/UI'
+import { Spinner, Text, CenteredContent } from 'components/UI'
 import { Form } from 'components/Form'
 import ErrorDialog from './components/ErrorDialog'
 import messages from './messages'
@@ -68,28 +68,30 @@ class WalletCreate extends React.Component {
     const { currentItem } = wizardState
 
     return (
-      <Form
-        {...rest}
-        getApi={formApi => {
-          this.setFormApi(formApi)
-          if (getApi) {
-            getApi(formApi)
-          }
-        }}
-        onChange={onChange && (formState => onChange(formState, currentItem))}
-        onSubmit={this.handleSubmit}
-        onSubmitFailure={onSubmitFailure}
-      >
-        <Text textAlign="center">
-          <Spinner />
-          <FormattedMessage {...messages.creating_wallet} />
-        </Text>
-        <ErrorDialog
-          error={createWalletError}
-          isOpen={Boolean(createWalletError)}
-          onClose={this.resetOnboarding}
-        />
-      </Form>
+      <CenteredContent>
+        <Form
+          {...rest}
+          getApi={formApi => {
+            this.setFormApi(formApi)
+            if (getApi) {
+              getApi(formApi)
+            }
+          }}
+          onChange={onChange && (formState => onChange(formState, currentItem))}
+          onSubmit={this.handleSubmit}
+          onSubmitFailure={onSubmitFailure}
+        >
+          <Text textAlign="center">
+            <Spinner />
+            <FormattedMessage {...messages.creating_wallet} />
+          </Text>
+          <ErrorDialog
+            error={createWalletError}
+            isOpen={Boolean(createWalletError)}
+            onClose={this.resetOnboarding}
+          />
+        </Form>
+      </CenteredContent>
     )
   }
 }

diff --git a/renderer/components/UI/index.js b/renderer/components/UI/index.js
@@ -12,6 +12,7 @@ export CopyButton from './CopyButton'
 export Card from './Card'
 export CloseButton from './CloseButton'
 export Countdown from './Countdown'
+export CenteredContent from './CenteredContent'
 export DataRow from './DataRow'
 export Dialog from './Dialog'
 export DialogOverlay from './DialogOverlay'

diff --git a/stories/containers/onboarding/onboarding.component.stories.js b/stories/containers/onboarding/onboarding.component.stories.js
@@ -12,13 +12,15 @@ import {
   Recover,
   SeedConfirm,
   SeedView,
+  WalletCreate,
 } from 'components/Onboarding/Steps'
 
 const setConnectionHost = () => ({})
 const setConnectionCert = () => ({})
 const setConnectionMacaroon = () => ({})
 const stopLnd = () => ({})
 const resetOnboarding = () => ({})
+const wizardApi = { next() {} }
 
 storiesOf('Containers.Onboarding.Forms', module)
   .add('ConnectionType', () => (
@@ -38,6 +40,7 @@ storiesOf('Containers.Onboarding.Forms', module)
   .add('Name', () => <Name />)
   .add('Network', () => <Network />)
   .add('Autopilot', () => <Autopilot />)
+  .add('Creating', () => <WalletCreate isCreatingWallet wizardApi={wizardApi} />)
   .add('SeedConfirm', () => (
     <SeedConfirm
       seed={[