diff --git a/app/components/Activity/PaymentModal.js b/app/components/Activity/PaymentModal.js index ba6c71f1..20629a84 100644 --- a/app/components/Activity/PaymentModal.js +++ b/app/components/Activity/PaymentModal.js @@ -1,8 +1,16 @@ 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 Isvg from 'react-inlinesvg' +import paperPlane from 'icons/paper_plane.svg' +import zap from 'icons/zap.svg' +import { blockExplorer } from 'utils' + import Value from 'components/Value' import styles from './PaymentModal.scss' @@ -21,45 +29,47 @@ const PaymentModal = ({ } }) => (
-
-
-
-
-

- - - -

-
setActivityModalCurrencyFilters(!showCurrencyFilters)}> - {currencyName} -
-
    - { - currentCurrencyFilters.map(filter => -
  • onCurrencyFilterClick(filter.key)}>{filter.name}
  • ) - } -
-
-
-

Sent

-

- - {currencyName} fee -

-
-
+
+
+ + Sent
-
-
-

Memo

-

{payment.memo}

+
+
+ + Lightning Network
- -
-

Proof

-

{payment.payment_preimage}

+
+ + {currencyName} fee
+
+ +
+

+ 0 && styles.active}`}>- + +

+
setActivityModalCurrencyFilters(!showCurrencyFilters)}> + {currencyName} +
    + { + currentCurrencyFilters.map(filter => +
  • onCurrencyFilterClick(filter.key)}>{filter.name}
  • ) + } +
+
+
+ +
+ {payment.creation_date * 1000} +
+ +
) diff --git a/app/components/Activity/PaymentModal.scss b/app/components/Activity/PaymentModal.scss index 5a05dcc5..d7a648af 100644 --- a/app/components/Activity/PaymentModal.scss +++ b/app/components/Activity/PaymentModal.scss @@ -1,123 +1,126 @@ @import '../../variables.scss'; +@import '../../variables.scss'; + .container { color: $white; -} - -.content { + font-size: 12px; + width: 75%; + margin: 0 auto; background: $spaceblue; - width: 85%; - margin: 50px auto; - padding-top: 30px; - - .top { - 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; - - .symbol { - color: $red; - } - - 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; - } - } +} - } +.header { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 20px; + + section { + &:nth-child(1) { + font-size: 16px; + color: $green; + + svg { + width: 16px; + height: 16px; + vertical-align: top; + fill: $green; + } - 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; - } - } - } + span:nth-child(2) { + margin-left: 5px; } + } - .fee { - font-size: 12px; - text-align: right; + &.details { + text-align: right; - .notPaid { - color: #FF8A65; - margin-top: 5px; - } + div:nth-child(1) { + margin-bottom: 5px; + } - p { - margin-bottom: 5px; + svg { + width: 12px; + height: 12px; + vertical-align: middle; + } - &:nth-child(2) { - opacity: 0.5; - } - } + .zap { + margin-left: 5px; + cursor: pointer; + transition: all 0.25s; } } } } -.bottom { - background: #31343f; - padding: 40px; +.amount { + margin-top: 50px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 20px; - .txHash, .blockHash { - margin: 40px 0; - - h4 { - font-size: 10px; - margin-bottom: 10px; + h1 { + font-size: 40px; + } + + section { + font-size: 20px; + margin-left: 10px; + position: relative; + cursor: pointer; + + &:hover { + span { + opacity: 0.5; + } } - p { - font-size: 14px; - text-decoration: underline; - cursor: pointer; + span { transition: all 0.25s; + } + + ul { + visibility: hidden; + position: absolute; + top: 40px; + right: -50px; + font-size: 12px; + + &.active { + visibility: visible; + } - &:hover { - opacity: 0.5; + li { + padding: 8px 15px; + background: #191919; + cursor: pointer; + transition: 0.25s hover; + border-bottom: 1px solid #0f0f0f; + + &:hover { + background: #0f0f0f; + } } } } } + +.date { + text-align: center; + padding: 20px; +} + +.footer { + background: #31343f; + margin: 20px 0 50px 0; + padding: 20px; + text-align: center; + + p { + cursor: pointer; + } +} \ No newline at end of file diff --git a/app/components/Activity/TransactionModal.scss b/app/components/Activity/TransactionModal.scss index 4ec856d7..15c875c8 100644 --- a/app/components/Activity/TransactionModal.scss +++ b/app/components/Activity/TransactionModal.scss @@ -126,6 +126,7 @@ p { text-decoration: underline; cursor: pointer; + transition: all 0.25s; &:hover { opacity: 0.5;