diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js index d962325f..6aa82ad2 100644 --- a/app/routes/activity/components/Activity.js +++ b/app/routes/activity/components/Activity.js @@ -2,8 +2,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { MdSearch } from 'react-icons/lib/md' import { FaChain, FaBolt } from 'react-icons/lib/fa' -import Payments from './components/Payments' -import Invoices from './components/Invoices' import Invoice from './components/Invoice' import Payment from './components/Payment' diff --git a/app/routes/activity/components/Activity.scss b/app/routes/activity/components/Activity.scss index 6b28b1dd..94470bbd 100644 --- a/app/routes/activity/components/Activity.scss +++ b/app/routes/activity/components/Activity.scss @@ -47,6 +47,7 @@ color: $darkestgrey; font-size: 14px; font-weight: 400; + max-width: 964px; } } } diff --git a/app/routes/activity/components/components/Activity.scss b/app/routes/activity/components/components/Activity.scss index e558c94a..993f309b 100644 --- a/app/routes/activity/components/components/Activity.scss +++ b/app/routes/activity/components/components/Activity.scss @@ -16,107 +16,116 @@ position: relative; } -.label { +.clock { display: flex; - flex-direction: column; - justify-content: space-evenly; + justify-content: center; align-items: center; - margin-right: 20px; - width: 65px; - - h3 { - text-transform: uppercase; - letter-spacing: 2px; - font-size: 10px; - font-weight: 500; - margin-top: 10px; - } -} - -.icon { - display: block; - flex: none; - position: relative; - width: 36px; - height: 36px; - border: 1px solid $darkestgrey; - border-radius: 50%; + position: absolute; + top: 0; + left: -100px; + width: 100px; + height: 77px; svg { - color: $main; - font-size: 16px; - vertical-align: middle; - display: flex; - top: 0; - left: 50%; - height: 100%; - margin: 0 auto; + font-size: 18px; } } -.data { +.date { display: flex; - flex-direction: row; - flex: 6 0; + flex-direction: column; + justify-content: center; + align-items: center; + padding-right: 50px; - .title { - flex: 8 0; - } -} + time { + text-transform: uppercase; -.subtitle, .date { - text-align: center; -} + &:nth-child(1) { + display: flex; + align-items: center; + height: 38px; + font-size: 18px; + margin-bottom: 5px; + } -.date { - padding-left: 20px; - flex: 1 0; + &:nth-child(2) { + font-size: 12px; + } + } } -.amount { - flex: 1 0; - padding-left: 20px; +.data { + display: flex; + flex-direction: column; + flex: 6; + justify-content: space-evenly; - &.negative { - font-weight: 200; + .title { + margin-bottom: 5px; } - &.positive { - color: $main; - font-weight: 500; + .icon, h3, span { + vertical-align: middle; } - section { + h3, span { + font-size: 18px; + font-weight: bold; + } + + .icon { display: inline-block; - vertical-align: top; - text-align: right; - font-size: 0; - margin: 0; - padding: 0; - - &:nth-child(1) { - width: 20%; + flex: none; + position: relative; + width: 36px; + height: 36px; + border: 1px solid $darkestgrey; + border-radius: 50%; + margin-right: 15px; + + svg { + color: $main; + font-size: 16px; + vertical-align: middle; + display: flex; + top: 0; + left: 50%; + height: 100%; + margin: 0 auto; } + } - &:nth-child(2) { - width: 80%; + h3 { + display: inline-block; + + &:after { + content: " "; + display: inline-block; + width: 3px; } } - svg { - font-size: 20px; + span { + text-transform: uppercase; } +} - span { - display: block; +.amount { + display: flex; + flex-direction: column; + flex: 1; + text-align: right; + font-size: 16px; - &:nth-child(1) { - font-size: 14px; - } + &.positive span:nth-child(1) { + font-weight: bold; + color: $main; + } + span { &:nth-child(2) { - font-size: 10px; + font-size: 12px; } } } - diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js index c644fc91..9fedc08b 100644 --- a/app/routes/activity/components/components/Invoice/Invoice.js +++ b/app/routes/activity/components/components/Invoice/Invoice.js @@ -2,62 +2,65 @@ import React from 'react' import PropTypes from 'prop-types' import Moment from 'react-moment' import 'moment-timezone' -import { FaBolt } from 'react-icons/lib/fa' +import { FaBolt, FaClockO } from 'react-icons/lib/fa' import { btc } from '../../../../../utils' import CurrencyIcon from '../../../../../components/CurrencyIcon' import styles from '../Activity.scss' const Invoice = ({ invoice, ticker, currentTicker, showActivityModal }) => (
showActivityModal('INVOICE', { invoice })}> -
- - - -

- { - invoice.settled ? - 'Received' - : - 'Requested' - } -

+ { + !invoice.settled ? +
+ + + +
+ : + null + } +
+ + {invoice.creation_date * 1000} + + + {invoice.creation_date * 1000} +
+ + + +

+ { invoice.settled ? 'Received' : 'Requested' } +

+ + {ticker.currency} + +
+
{invoice.r_hash.toString('hex')}
-
- - {invoice.creation_date * 1000} - -
-
- -
-
- - { - ticker.currency === 'usd' ? - btc.satoshisToUsd(invoice.value, currentTicker.price_usd) - : - btc.satoshisToBtc(invoice.value) - } - - - { - ticker.currency === 'usd' ? - btc.satoshisToUsd(invoice.fee, currentTicker.price_usd) - : - btc.satoshisToBtc(invoice.fee) - } - -
+ + + + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(invoice.value, currentTicker.price_usd) + : + btc.satoshisToBtc(invoice.value) + } + + + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(invoice.fee, currentTicker.price_usd) + : + btc.satoshisToBtc(invoice.fee) + } +
) diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js index 9aec7c42..d7948ef6 100644 --- a/app/routes/activity/components/components/Payment/Payment.js +++ b/app/routes/activity/components/components/Payment/Payment.js @@ -9,49 +9,48 @@ import styles from '../Activity.scss' const Payment = ({ payment, ticker, currentTicker, showActivityModal }) => (
showActivityModal('PAYMENT', { payment })}> -
- - - -

- Sent -

+
+ + {payment.creation_date * 1000} + + + {payment.creation_date * 1000} +
- {payment.payment_hash} + + + +

+ Sent +

+ + {ticker.currency} + +
+
+ {payment.payment_hash.toString('hex')}
-
-
- {payment.creation_date * 1000}
-
- -
-
- - - - { - ticker.currency === 'usd' ? - btc.satoshisToUsd(payment.value, currentTicker.price_usd) - : - btc.satoshisToBtc(payment.value) - } - - - { - ticker.currency === 'usd' ? - btc.satoshisToUsd(payment.fee, currentTicker.price_usd) - : - btc.satoshisToBtc(payment.fee) - } - -
+ + - + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(payment.value, currentTicker.price_usd) + : + btc.satoshisToBtc(payment.value) + } + + + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(payment.fee, currentTicker.price_usd) + : + btc.satoshisToBtc(payment.fee) + } +
) diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js index b43af1e6..924a8b73 100644 --- a/app/routes/activity/components/components/Transaction/Transaction.js +++ b/app/routes/activity/components/components/Transaction/Transaction.js @@ -9,56 +9,48 @@ import styles from '../Activity.scss' const Transaction = ({ transaction, ticker, currentTicker, showActivityModal }) => (
showActivityModal('TRANSACTION', { transaction })}> -
- - - -

- { - transaction.amount < 0 ? - 'Sent' - : - 'Received' - } -

+
+ + {transaction.time_stamp * 1000} + + + {transaction.time_stamp * 1000} +
+ + + +

+ { transaction.amount > 0 ? 'Received' : 'Sent' } +

+ + {ticker.currency} + +
+
{transaction.tx_hash}
-
- {transaction.time_stamp * 1000} -
-
-
- -
-
- - { - ticker.currency === 'usd' ? - btc.satoshisToUsd(transaction.amount, currentTicker.price_usd) - : - btc.satoshisToBtc(transaction.amount) - } - - - { - transaction.amount < 0 ? - ticker.currency === 'usd' ? - btc.satoshisToUsd(transaction.total_fees, currentTicker.price_usd) - : - btc.satoshisToBtc(transaction.total_fees) - : - null - } - -
+
0 ? styles.positive : styles.negative}`}> + + { transaction.amount > 0 ? '+' : '' } + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(transaction.amount, currentTicker.price_usd) + : + btc.satoshisToBtc(transaction.amount) + } + + + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(transaction.total_fees, currentTicker.price_usd) + : + btc.satoshisToBtc(transaction.total_fees) + } +
)