Jack Mallers
7 years ago
8 changed files with 277 additions and 19 deletions
@ -0,0 +1,71 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
|
||||
|
import Moment from 'react-moment' |
||||
|
import 'moment-timezone' |
||||
|
|
||||
|
import { FaAngleDown } from 'react-icons/lib/fa' |
||||
|
|
||||
|
import { btc } from 'utils' |
||||
|
import Value from 'components/Value' |
||||
|
|
||||
|
import styles from './PaymentModal.scss' |
||||
|
|
||||
|
|
||||
|
const PaymentModal = ({ |
||||
|
payment, |
||||
|
ticker, |
||||
|
currentTicker, |
||||
|
|
||||
|
toggleCurrencyProps: { |
||||
|
setActivityModalCurrencyFilters, |
||||
|
showCurrencyFilters, |
||||
|
currencyName, |
||||
|
currentCurrencyFilters, |
||||
|
onCurrencyFilterClick |
||||
|
} |
||||
|
}) => { |
||||
|
return ( |
||||
|
<div className={styles.container}> |
||||
|
<div className={styles.content}> |
||||
|
<section className={styles.left}> |
||||
|
|
||||
|
</section> |
||||
|
<section className={styles.right}> |
||||
|
<div className={styles.details}> |
||||
|
<section className={styles.amount}> |
||||
|
<h1> |
||||
|
<Value value={payment.value} currency={ticker.currency} currentTicker={currentTicker} /> |
||||
|
</h1> |
||||
|
<section className={styles.currentCurrency} onClick={() => setActivityModalCurrencyFilters(!showCurrencyFilters)}> |
||||
|
<span>{currencyName}</span><span><FaAngleDown /></span> |
||||
|
</section> |
||||
|
<ul className={showCurrencyFilters && styles.active}> |
||||
|
{ |
||||
|
currentCurrencyFilters.map(filter => |
||||
|
<li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li> |
||||
|
) |
||||
|
} |
||||
|
</ul> |
||||
|
</section> |
||||
|
<section className={styles.date}> |
||||
|
<p> |
||||
|
<Moment format='MM/DD/YYYY'>{payment.creation_date * 1000}</Moment> |
||||
|
</p> |
||||
|
</section> |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
PaymentModal.propTypes = { |
||||
|
payment: PropTypes.object.isRequired, |
||||
|
ticker: PropTypes.object.isRequired, |
||||
|
currentTicker: PropTypes.object.isRequired, |
||||
|
|
||||
|
toggleCurrencyProps: PropTypes.object.isRequired |
||||
|
} |
||||
|
|
||||
|
export default PaymentModal |
||||
@ -0,0 +1,143 @@ |
|||||
|
@import '../../variables.scss'; |
||||
|
|
||||
|
.container { |
||||
|
color: $white; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
background: $spaceblue; |
||||
|
width: 85%; |
||||
|
margin: 50px auto; |
||||
|
padding: 30px 0; |
||||
|
|
||||
|
.left { |
||||
|
width: 25%; |
||||
|
padding: 0 60px; |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
width: 75%; |
||||
|
min-height: 220px; |
||||
|
border-left: 1px solid $spaceborder; |
||||
|
padding: 10px 60px; |
||||
|
|
||||
|
.details { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 40px; |
||||
|
|
||||
|
.amount { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
|
||||
|
h1 { |
||||
|
font-size: 40px; |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.currentCurrency { |
||||
|
cursor: pointer; |
||||
|
transition: 0.25s all; |
||||
|
|
||||
|
&:hover { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 14px; |
||||
|
|
||||
|
&:nth-child(1) { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
ul { |
||||
|
visibility: hidden; |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
right: -50px; |
||||
|
|
||||
|
&.active { |
||||
|
visibility: visible; |
||||
|
} |
||||
|
|
||||
|
li { |
||||
|
padding: 8px 15px; |
||||
|
background: #191919; |
||||
|
cursor: pointer; |
||||
|
transition: 0.25s hover; |
||||
|
border-bottom: 1px solid #0f0f0f; |
||||
|
|
||||
|
&:hover { |
||||
|
background: #0f0f0f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.date { |
||||
|
font-size: 12px; |
||||
|
text-align: right; |
||||
|
|
||||
|
.notPaid { |
||||
|
color: #FF8A65; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.memo, .request { |
||||
|
h4 { |
||||
|
font-size: 10px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
word-wrap: break-word; |
||||
|
max-width: 450px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.memo { |
||||
|
margin-bottom: 40px; |
||||
|
|
||||
|
p { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.request p { |
||||
|
font-size: 10px; |
||||
|
max-width: 450px; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.actions { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
|
||||
|
div { |
||||
|
text-align: center; |
||||
|
margin: 35px 10px; |
||||
|
width: 235px; |
||||
|
padding: 20px 10px; |
||||
|
background: #31343f; |
||||
|
cursor: pointer; |
||||
|
transition: 0.25s all; |
||||
|
|
||||
|
&:hover { |
||||
|
background: darken(#31343f, 5%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue