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
-
-
-
+
+
-
-
-
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;