diff --git a/app/components/ChannelForm/StepTwo.js b/app/components/ChannelForm/StepTwo.js index 1ba801a0..6fd1acc7 100644 --- a/app/components/ChannelForm/StepTwo.js +++ b/app/components/ChannelForm/StepTwo.js @@ -7,24 +7,31 @@ import styles from './StepTwo.scss' class StepTwo extends Component { render() { const { local_amt, setLocalAmount } = this.props - console.log('local_amt: ', local_amt) + return (
- - this.input = input} - size='' - value={local_amt} - onChange={event => setLocalAmount(event.target.value)} - id='amount' - style={{ width: isNaN((local_amt.length + 1) * 55) ? 140 : (local_amt.length + 1) * 55 }} - /> +
+

Local Amount

+

Local amount is the amount of bitcoin that you would like to commit to the channel. This is the amount that will be sent in an on-chain transaction to open your Lightning channel.

+
+ +
+ + this.input = input} + size='' + value={local_amt} + onChange={event => setLocalAmount(event.target.value)} + id='amount' + style={{ width: isNaN((local_amt.length + 1) * 55) ? 140 : (local_amt.length + 1) * 55 }} + /> +
) } diff --git a/app/components/ChannelForm/StepTwo.scss b/app/components/ChannelForm/StepTwo.scss index 2a1249e5..129c193f 100644 --- a/app/components/ChannelForm/StepTwo.scss +++ b/app/components/ChannelForm/StepTwo.scss @@ -1,13 +1,32 @@ @import '../../variables.scss'; .container { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; margin-bottom: 50px; padding: 20px; + .explainer { + margin: 20px 0 50px 0; + padding-bottom: 20px; + border-bottom: 1px solid $lightgrey; + + h2 { + margin: 10px 0 20px 0; + font-size: 28px; + } + + p { + line-height: 1.5; + font-size: 16px; + } + } + + form { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + label { margin-left: -25px; height: 200px; diff --git a/app/reducers/channelform.js b/app/reducers/channelform.js index 4b2ba58f..8e573405 100644 --- a/app/reducers/channelform.js +++ b/app/reducers/channelform.js @@ -87,11 +87,11 @@ channelFormSelectors.channelFormHeader = createSelector( step => { switch (step) { case 1: - return 'Choose a peer' + return 'Select a peer' case 2: - return 'Choose your local amount' + return 'Set your local amount' case 3: - return 'Choose your push amount' + return 'Set your push amount' default: return 'Confirm' }