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