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,45 +29,47 @@ const PaymentModal = ({
   }
 }) => (
   <div className={styles.container}>
-    <div className={styles.content}>
-      <section className={styles.top}>
-        <div className={styles.details}>
-          <section className={styles.amount}>
-            <h1>
-              <i className={styles.symbol}>-</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 =>
-                  <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>)
-              }
-            </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>
+    <header className={styles.header}>
+      <section>
+        <Isvg src={paperPlane} />
+        <span>Sent</span>
       </section>
-      <section className={styles.bottom}>
-        <div className={styles.txHash}>
-          <h4>Memo</h4>
-          <p>{payment.memo}</p>
+      <section className={styles.details}>
+        <div>
+          <Isvg src={zap} />
+          <span className={styles.zap}>Lightning Network</span>
         </div>
-
-        <div className={styles.blockHash}>
-          <h4>Proof</h4>
-          <p>{payment.payment_preimage}</p>
+        <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} ${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>
+        <ul className={showCurrencyFilters && styles.active}>
+          {
+            currentCurrencyFilters.map(filter =>
+              <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>{filter.name}</li>)
+          }
+        </ul>
+      </section>
+
     </div>
+    
+    <div className={styles.date}>
+      <Moment format='LLL'>{payment.creation_date * 1000}</Moment>
+    </div>
+
+    <footer className={styles.footer}>
+      <p>{payment.payment_preimage}</p>
+    </footer>
   </div>
 )
 

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

app/components/Activity/TransactionModal.scss

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