fix(ui): center seed confirm inputs

fix #2730
LN-Zap · Sep 2, 2019 · 72299f7 · 72299f7
1 parent b1c7b8c
commit 72299f7
Showing 1 changed file with 22 additions and 20 deletions.
diff --git a/renderer/components/Onboarding/Steps/SeedConfirm.js b/renderer/components/Onboarding/Steps/SeedConfirm.js
@@ -101,26 +101,28 @@ class SeedConfirm extends React.Component {
 
         <Bar my={4} />
 
-        {seedWordIndexes.map((wordIndex, index) => {
-          // Only validate if the word has been entered correctly already or the form has been submitted.
-          return (
-            <Flex key={`word${index}`} justifyContent="flex-start" mb={3}>
-              <Label htmlFor="alias" mt={18} width={25}>
-                {wordIndex}
-              </Label>
-              <Input
-                field={`word${index}`}
-                name={`word${index}`}
-                onChange={e => this.handleWordChange(e.target.value, index, wordIndex - 1)}
-                placeholder={intl.formatMessage({ ...messages.word_placeholder })}
-                validate={value => this.validateWord.call(null, wordIndex - 1, value)}
-                validateOnBlur
-                validateOnChange
-                willAutoFocus={index === 0}
-              />
-            </Flex>
-          )
-        })}
+        <Flex alignItems="center" flexDirection="column">
+          {seedWordIndexes.map((wordIndex, index) => {
+            // Only validate if the word has been entered correctly already or the form has been submitted.
+            return (
+              <Flex key={`word${index}`} justifyContent="flex-start" mb={3}>
+                <Label htmlFor="alias" mt={18} width={25}>
+                  {wordIndex}
+                </Label>
+                <Input
+                  field={`word${index}`}
+                  name={`word${index}`}
+                  onChange={e => this.handleWordChange(e.target.value, index, wordIndex - 1)}
+                  placeholder={intl.formatMessage({ ...messages.word_placeholder })}
+                  validate={value => this.validateWord.call(null, wordIndex - 1, value)}
+                  validateOnBlur
+                  validateOnChange
+                  willAutoFocus={index === 0}
+                />
+              </Flex>
+            )
+          })}
+        </Flex>
       </Form>
     )
   }