Jack Mallers
7 years ago
11 changed files with 419 additions and 33 deletions
@ -0,0 +1,77 @@ |
|||
// @flow
|
|||
import React, { Component } from 'react' |
|||
import ReactModal from 'react-modal' |
|||
import styles from './ChannelForm.scss' |
|||
|
|||
class ChannelForm extends Component { |
|||
render() { |
|||
const customStyles = { |
|||
overlay: { |
|||
cursor: 'pointer', |
|||
overflowY: 'auto' |
|||
}, |
|||
content : { |
|||
top: 'auto', |
|||
left: '20%', |
|||
right: '0', |
|||
bottom: 'auto', |
|||
width: '40%', |
|||
margin: '50px auto', |
|||
padding: '40px' |
|||
} |
|||
} |
|||
|
|||
const { form, setForm } = this.props |
|||
return ( |
|||
<div> |
|||
<ReactModal |
|||
isOpen={form.isOpen} |
|||
contentLabel="No Overlay Click Modal" |
|||
ariaHideApp={true} |
|||
shouldCloseOnOverlayClick={true} |
|||
onRequestClose={() => setForm(false)} |
|||
parentSelector={() => document.body} |
|||
style={customStyles} |
|||
> |
|||
<div className={styles.form}> |
|||
<h1 className={styles.title}>Open a new channel</h1> |
|||
|
|||
<section className={styles.pubkey}> |
|||
<label>With</label> |
|||
<input |
|||
type='text' |
|||
size='' |
|||
placeholder='Public key' |
|||
/> |
|||
</section> |
|||
<section className={styles.local}> |
|||
<label>Local</label> |
|||
<input |
|||
type='text' |
|||
size='' |
|||
placeholder='Local amount' |
|||
/> |
|||
</section> |
|||
<section className={styles.push}> |
|||
<label>Push</label> |
|||
<input |
|||
type='text' |
|||
size='' |
|||
placeholder='Push amount' |
|||
/> |
|||
</section> |
|||
|
|||
<div className={styles.buttonGroup}> |
|||
<div className={styles.button}> |
|||
Submit |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ReactModal> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default ChannelForm |
|||
@ -0,0 +1,69 @@ |
|||
@import '../../../../../../../variables.scss'; |
|||
|
|||
.title { |
|||
text-align: center; |
|||
font-size: 24px; |
|||
color: $black; |
|||
margin-bottom: 50px; |
|||
} |
|||
|
|||
.pubkey, .local, .push { |
|||
display: flex; |
|||
justify-content: center; |
|||
font-size: 18px; |
|||
height: auto; |
|||
min-height: 55px; |
|||
margin-bottom: 20px; |
|||
border: 1px solid $traditionalgrey; |
|||
border-radius: 6px; |
|||
position: relative; |
|||
padding: 0 20px; |
|||
|
|||
label, input[type=text] { |
|||
font-size: inherit; |
|||
} |
|||
|
|||
label { |
|||
padding-top: 19px; |
|||
padding-bottom: 12px; |
|||
color: $traditionalgrey; |
|||
} |
|||
|
|||
input[type=text] { |
|||
width: 100%; |
|||
border: none; |
|||
outline: 0; |
|||
-webkit-appearance: none; |
|||
height: 55px; |
|||
padding: 0 10px; |
|||
} |
|||
} |
|||
|
|||
.buttonGroup { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
border-radius: 6px; |
|||
overflow: hidden; |
|||
|
|||
.button { |
|||
cursor: pointer; |
|||
height: 55px; |
|||
min-height: 55px; |
|||
text-transform: none; |
|||
font-size: 18px; |
|||
transition: opacity .2s ease-out; |
|||
background: $main; |
|||
color: $white; |
|||
border: none; |
|||
font-weight: 500; |
|||
padding: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
line-height: 55px; |
|||
|
|||
&:first-child { |
|||
border-right: 1px solid lighten($main, 20%); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
import ChannelForm from './ChannelForm' |
|||
|
|||
export default ChannelForm |
|||
@ -0,0 +1,119 @@ |
|||
@import '../../../../../../../variables.scss'; |
|||
|
|||
.modalChannel { |
|||
padding: 40px; |
|||
} |
|||
|
|||
.header { |
|||
margin-bottom: 50px; |
|||
|
|||
h1 { |
|||
color: $black; |
|||
text-align: center; |
|||
margin-bottom: 5px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
h2 { |
|||
color: $darkestgrey; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.balances { |
|||
.capacity { |
|||
text-align: center; |
|||
align-items: center; |
|||
|
|||
h3 { |
|||
color: $main; |
|||
font-size: 40px; |
|||
} |
|||
|
|||
span { |
|||
color: $black; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
.balance { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
|
|||
.local, .remote { |
|||
flex: 5; |
|||
padding: 10px 30px; |
|||
text-align: center; |
|||
|
|||
h4 { |
|||
font-size: 20px; |
|||
color: $main; |
|||
} |
|||
|
|||
span { |
|||
color: $black; |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.details { |
|||
width: 75%; |
|||
margin: 20px auto; |
|||
|
|||
dt { |
|||
text-align: left; |
|||
float: left; |
|||
clear: left; |
|||
font-weight: 500; |
|||
padding: 20px 35px 19px 0; |
|||
color: $black; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
dd { |
|||
text-align: right; |
|||
font-weight: 400; |
|||
padding: 19px 0; |
|||
margin-left: 0; |
|||
border-top: 1px solid $darkgrey; |
|||
} |
|||
} |
|||
|
|||
.close { |
|||
text-align: center; |
|||
|
|||
div { |
|||
width: 35%; |
|||
margin: 0 auto; |
|||
cursor: pointer; |
|||
height: 55px; |
|||
min-height: 55px; |
|||
text-transform: none; |
|||
font-size: 18px; |
|||
transition: opacity .2s ease-out; |
|||
background: $red; |
|||
color: $white; |
|||
border: none; |
|||
font-weight: 500; |
|||
padding: 0; |
|||
text-align: center; |
|||
line-height: 55px; |
|||
transition: all 0.25s; |
|||
border-radius: 5px; |
|||
|
|||
&:hover { |
|||
background: darken($red, 10%); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.active { |
|||
color: $darkestgrey; |
|||
text-align: center; |
|||
margin-top: 50px; |
|||
text-transform: uppercase; |
|||
} |
|||
Loading…
Reference in new issue