fix(payment): update payment modal styles

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,17 +29,30 @@ const PaymentModal = ({
   }
 }) => (
   <div className={styles.container}>
-    <div className={styles.content}>
+    <header className={styles.header}>
-      <section className={styles.top}>
+      <section>
-        <div className={styles.details}>
+        <Isvg src={paperPlane} />
-          <section className={styles.amount}>
+        <span>Sent</span>
+      </section>
+      <section className={styles.details}>
+        <div>
+          <Isvg src={zap} />
+          <span className={styles.zap}>Lightning Network</span>
+        </div>
+        <div>
+          <Value value={payment.fee} currency={ticker.currency} currentTicker={currentTicker} />
+          <span> {currencyName} fee</span>
+        </div>
+      </section>
+    </header>
+
+    <div className={styles.amount}>
       <h1>
-              <i className={styles.symbol}>-</i>
+        <i className={`${styles.symbol} ${payment.value > 0 && styles.active}`}>-</i>
         <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 =>
@@ -39,27 +60,16 @@ const PaymentModal = ({
           }
         </ul>
       </section>
-          <section className={styles.fee}>
+
-            <p>Sent</p>
-            <p>
-              <Value value={payment.fee} currency={ticker.currency} currentTicker={currentTicker} />
-              <span> {currencyName} fee</span>
-            </p>
-          </section>
     </div>
-      </section>
+    
-      <section className={styles.bottom}>
+    <div className={styles.date}>
-        <div className={styles.txHash}>
+      <Moment format='LLL'>{payment.creation_date * 1000}</Moment>
-          <h4>Memo</h4>
-          <p>{payment.memo}</p>
     </div>
 
-        <div className={styles.blockHash}>
+    <footer className={styles.footer}>
-          <h4>Proof</h4>
       <p>{payment.payment_preimage}</p>
-        </div>
+    </footer>
-      </section>
-    </div>
   </div>
 )
 

app/components/Activity/PaymentModal.scss

@@ -1,55 +1,86 @@
 @import '../../variables.scss';
 
+@import '../../variables.scss';
+
 .container {
   color: $white;
-}
+  font-size: 12px;
-
+  width: 75%;
-.content {
+  margin: 0 auto;
   background: $spaceblue;
-  width: 85%;
+}
-  margin: 50px auto;
-  padding-top: 30px;
-
-  .top {
-    padding: 10px 60px;
 
-    .details {
+.header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-      margin-bottom: 40px;
+  padding: 20px;
+
+  section {
+    &:nth-child(1) {
+      font-size: 16px;
+      color: $green;
+
+      svg {
+        width: 16px;
+        height: 16px;
+        vertical-align: top;
+        fill: $green;
+      }
+
+      span:nth-child(2) {
+        margin-left: 5px;
+      }
+    }
+
+    &.details {
+      text-align: right;
+
+      div:nth-child(1) {
+        margin-bottom: 5px;
+      } 
+
+      svg {
+        width: 12px;
+        height: 12px;
+        vertical-align: middle;
+      }
+
+      .zap {
+        margin-left: 5px;
+        cursor: pointer;
+        transition: all 0.25s;
+      }
+    }
+  }
+}
 
 .amount {
+  margin-top: 50px;
   display: flex;
   flex-direction: row;
   align-items: center;
-        position: relative;
+  justify-content: center;
-
+  padding: 20px;
-        .symbol {
-          color: $red;
-        }
 
   h1 {
     font-size: 40px;
-          margin-right: 10px;
   }
 
-        .currentCurrency {
+  section {
+    font-size: 20px;
+    margin-left: 10px;
+    position: relative;
     cursor: pointer;
-          transition: 0.25s all;
 
     &:hover {
-            opacity: 0.5;
-          }
-
       span {
-            font-size: 14px;
+        opacity: 0.5;
-            
-            &:nth-child(1) {
-              font-weight: bold;
       }  
     }
 
+    span {
+      transition: all 0.25s;
     }
     
     ul {
@@ -57,6 +88,7 @@
       position: absolute;
       top: 40px;
       right: -50px;
+      font-size: 12px;
 
       &.active {
         visibility: visible;
@@ -75,49 +107,20 @@
       }
     }
   }
-
-      .fee {
-        font-size: 12px;
-        text-align: right;
-
-        .notPaid {
-          color: #FF8A65;
-          margin-top: 5px;
 }
 
-        p {
+.date {
-          margin-bottom: 5px;
+  text-align: center;
-
+  padding: 20px;
-          &:nth-child(2) {
-            opacity: 0.5;
-          }
-        }
-      }
-    }
-  }
 }
 
-.bottom {
+.footer {
   background: #31343f;
-  padding: 40px;
+  margin: 20px 0 50px 0;
-
+  padding: 20px;
-  .txHash, .blockHash {
+  text-align: center;
-    margin: 40px 0;
-    
-    h4 {
-      font-size: 10px;
-      margin-bottom: 10px;
-    }
 
   p {
-      font-size: 14px;
-      text-decoration: underline;
     cursor: pointer;
-      transition: all 0.25s;
-
-      &:hover {
-        opacity: 0.5;
-      }
-    }
   }
 }

app/components/Activity/TransactionModal.scss

@@ -126,6 +126,7 @@
   p {
     text-decoration: underline;
     cursor: pointer;
+    transition: all 0.25s;
 
     &:hover  {
       opacity: 0.5;