// @flow
import Container from '../../forms/container'
import React, {Component} from 'react'
import type {Props} from './index.render'
import {UserCard, Input, Button} from '../../../common-adapters'
import {globalStyles, globalColors} from '../../../styles'

class Render extends Component<void, Props, void> {

  render () {
    const passphraseError = this.props.passphraseError && this.props.passphraseError.stringValue()

    let confirmInput
    return (
      <Container onBack={this.props.onBack} style={stylesContainer} outerStyle={stylesOuter}>
        <UserCard style={stylesCard}>
          <Input autoFocus={true} style={stylesFirst} type='password'
            onChangeText={pass1 => this.props.pass1Update(pass1)}
            onEnterKeyDown={() => confirmInput.focus()}
            hintText='Create a passphrase' errorText={passphraseError} />
          <Input type='password' hintText='Confirm passphrase' onEnterKeyDown={this.props.onSubmit}
            ref={input => { confirmInput = input }}
            onChangeText={pass2 => this.props.pass2Update(pass2)} />
          <Button fullWidth={true} type='Primary' label='Continue' onClick={this.props.onSubmit} />
        </UserCard>
      </Container>
    )
  }
}

const stylesOuter = {
  backgroundColor: globalColors.black_10,
}
const stylesContainer = {
  ...globalStyles.flexBoxColumn,
  justifyContent: 'center',
  alignItems: 'center',
  marginTop: 15,
}
const stylesFirst = {
  marginTop: 35,
}

const stylesCard = {
  alignItems: 'stretch',
}

export default Render

@@ -228,16 +228,31 @@
 alColors
+, globalMargins
 %7D from '
@@ -268,16 +268,16 @@
 styles'%0A
-
 %0Aclass R
@@ -639,24 +639,44 @@
 rue%7D style=%7B
+%7B...stylesInput, ...
 stylesFirst%7D
@@ -675,16 +675,17 @@
 esFirst%7D
+%7D
  type='p
@@ -921,16 +921,36 @@
 assword'
+ style=%7BstylesInput%7D
  hintTex
@@ -1459,16 +1459,16 @@
 enter',%0A
-
   margin
@@ -1474,24 +1474,85 @@
 nTop: 15,%0A%7D%0A
+const stylesInput = %7B%0A  marginBottom: globalMargins.large,%0A%7D%0A
 const styles

Add back spacing to passphrase entry screen