fix(ln payment modal): redesign modal

app/routes/activity/components/components/Modal/Payment/Payment.js

@@ -12,21 +12,30 @@ import styles from './Payment.scss'
 
 const Payment = ({ payment, ticker, currentTicker }) => (
   <div className={styles.container}>
-    <h3>{payment.payment_hash}</h3>
-    <h1>
-      <CurrencyIcon currency={ticker.currency} crypto={ticker.crypto} styles={{ verticalAlign: 'top' }} />
-      <span className={styles.value}>
-        {
-          ticker.currency === 'usd' ?
-            btc.satoshisToUsd(payment.value, currentTicker.price_usd)
-            :
-            btc.satoshisToBtc(payment.value)
-        }
-      </span>
-    </h1>
+    <header>
+      <div className={styles.title}>
+        <h2>Sent</h2>
+        <h1>
+          <span className={styles.value}>
+            {
+              ticker.currency === 'usd' ?
+                btc.satoshisToUsd(payment.value, currentTicker.price_usd)
+                :
+                btc.satoshisToBtc(payment.value)
+            }
+          </span>
+          <i>
+            BTC
+          </i>
+        </h1>
+      </div>
+      <h3>{payment.payment_hash}</h3>
+    </header>
     <dl>
       <dt>Fee</dt>
       <dd>{payment.fee}</dd>
+      <dt>Hops</dt>
+      <dd>{payment.path.length}</dd>
       <dt>Date</dt>
       <dd>
         <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>

app/routes/activity/components/components/Modal/Payment/Payment.scss

@@ -1,38 +1,44 @@
 @import '../../../../../../variables.scss';
 
 .container {
-  padding: 40px;
+  header {
+    padding: 5px 40px 20px 40px;
+    background: $lightgrey;
+
+    .title {
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 30px;
+
+      h2 {
+        text-transform: uppercase;
+        font-size: 24px;
+        margin-right: 10px;
+      }
+    }
+  }
 
   h1 {
-    text-align: center;
     color: $main;
-    margin: 60px 30px 60px 0;
 
-    svg {
-      font-size: 30px;
-      vertical-align: top;
+    .value {
+      font-size: 24px;
     }
 
-    span svg[data-icon='ltc'] {
-      width: 30px;
-      height: 30px;
+    i {
+      margin-left: 2px;
       vertical-align: top;
-
-      g {
-        transform: scale(1.75) translate(-5px, -5px);
-      }
-    }
-
-    .value {
-      font-size: 80px;
     }
   }
 
   h3 {
     font-size: 14px;
     text-align: center;
-    color: $black;
-    font-weight: bold;
+    color: $darkestgrey;
+  }
+
+  dl {
+    padding: 40px 40px 40px 40px;
   }
 
   dt {
@@ -48,8 +54,8 @@
   dd {
     text-align: right;
     font-weight: 400;
-    padding: 19px 0;
+    padding: 30px 0 10px 0;
     margin-left: 0;
-    border-top: 1px solid $darkgrey;
+    border-bottom: 1px solid $darkgrey;
   }
 }