Browse Source

fix(channelform): restyle footer buttons

renovate/lint-staged-8.x
Jack Mallers 7 years ago
parent
commit
31762ecf76
  1. 1
      app/components/ChannelForm/ChannelForm.scss
  2. 24
      app/components/ChannelForm/Footer.js
  3. 10
      app/components/ChannelForm/Footer.scss
  4. 2
      app/components/ChannelForm/StepFour.js

1
app/components/ChannelForm/ChannelForm.scss

@ -3,7 +3,6 @@
.modal {
position: relative;
width: 40%;
min-height: 600px;
margin: 50px auto;
position: absolute;
top: auto;

24
app/components/ChannelForm/Footer.js

@ -9,14 +9,14 @@ const Footer = ({ step, changeStep }) => {
if (step === 4 ) {
return (
<div className={styles.footer}>
<div className='buttonContainer circleContainer'>
<div className='buttonPrimary circle'onClick={() => changeStep(step - 1)}>
<FaArrowLeft />
<div className='buttonContainer'>
<div className='buttonPrimary'onClick={() => changeStep(step - 1)}>
Back
</div>
</div>
<div className='buttonContainer circleContainer' onClick={() => console.log('create this mf channel baby')}>
<div className='buttonPrimary circle'>
<FaCheck />
<div className='buttonContainer' onClick={() => console.log('create this mf channel baby')}>
<div className='buttonPrimary'>
Submit
</div>
</div>
</div>
@ -25,14 +25,14 @@ const Footer = ({ step, changeStep }) => {
return (
<div className={styles.footer}>
<div className='buttonContainer circleContainer'>
<div className='buttonPrimary circle'onClick={() => changeStep(step - 1)}>
<FaArrowLeft />
<div className='buttonContainer'>
<div className='buttonPrimary'onClick={() => changeStep(step - 1)}>
Back
</div>
</div>
<div className='buttonContainer circleContainer' onClick={() => changeStep(step + 1)}>
<div className='buttonPrimary circle'>
<FaArrowRight />
<div className='buttonContainer' onClick={() => changeStep(step + 1)}>
<div className='buttonPrimary'>
Next
</div>
</div>
</div>

10
app/components/ChannelForm/Footer.scss

@ -1,8 +1,14 @@
.footer {
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: 30px;
div {
margin: 0 5px;
margin: 0 20px;
div {
padding: 18px 60px 15px 60px;
}
}
}

2
app/components/ChannelForm/StepFour.js

@ -10,7 +10,7 @@ class StepFour extends Component {
return (
<div className={styles.container}>
<div className={styles.nodekey}>
<h4>Node key</h4>
<h4>Peer</h4>
<h2>{node_key}</h2>
</div>

Loading…
Cancel
Save