fix(label): redesign activity label

app/routes/activity/components/components/Activity.scss

@@ -17,14 +17,24 @@
 }
 
 .label {
-  position: absolute;
-  top: 0;
-  left: -25%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  margin-right: 20px;
+  width: 65px;
+
+  h3 {
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 10px;
+    font-weight: 500;
+    margin-top: 10px;
+  }
 }
 
 .icon {
   display: block;
-  margin-right: 20px;
   flex: none;
   position: relative;
   width: 36px;
@@ -52,11 +62,6 @@
   .title {
     flex: 8 0;
   }
-
-  .subtitle {
-    padding-left: 20px;
-    flex: 2 0;
-  }
 }
 
 .subtitle, .date {

app/routes/activity/components/components/Invoice/Invoice.js

@@ -9,16 +9,23 @@ import styles from '../Activity.scss'
 
 const Invoice = ({ invoice, ticker, currentTicker }) => (
   <div className={styles.container}>
-    <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
-      <FaBolt />
-    </i>
+    <div className={styles.label}>
+      <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
+        <FaBolt />
+      </i>
+      <h3>
+        {
+          invoice.settled ?
+            'Received'
+            :
+            'Requested'
+        }
+      </h3>
+    </div>
     <div className={styles.data}>
       <div className={styles.title}>
         {invoice.r_hash.toString('hex')}
       </div>
-      <div className={styles.subtitle}>
-        {invoice.memo}
-      </div>
     </div>
     <div className={styles.date}>
       <Moment format='MMM Do'>

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

@@ -9,21 +9,18 @@ import styles from '../Activity.scss'
 
 const Payment = ({ payment, ticker, currentTicker }) => (
   <div className={styles.container}>
-    <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
-      <FaBolt />
-    </i>
+    <div className={styles.label}>
+      <i className={`${styles.icon} hint--top`} data-hint='Lightning Network transaction'>
+        <FaBolt />
+      </i>
+      <h3>
+        Sent
+      </h3>
+    </div>
     <div className={styles.data}>
       <div className={styles.title}>
         {payment.payment_hash}
       </div>
-      <div className={styles.subtitle}>
-        {
-          payment.path.length > 1 ? 
-          `${payment.path.length} hops`
-          :
-          'Directly routed'
-        }
-      </div>
     </div>
     <div className={styles.date}>
       <Moment format='MMM Do'>{payment.creation_date * 1000}</Moment>

app/routes/activity/components/components/Transaction/Transaction.js

@@ -10,6 +10,9 @@ import styles from '../Activity.scss'
 const Transaction = ({ transaction, ticker, currentTicker }) => (
   <div className={styles.container}>
     <div className={styles.label}>
+      <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
+        <FaChain />
+      </i>
       <h3>
         {
           transaction.amount < 0 ?
@@ -19,16 +22,10 @@ const Transaction = ({ transaction, ticker, currentTicker }) => (
         }
       </h3>
     </div>
-    <i className={`${styles.icon} hint--top`} data-hint='On-chain transaction'>
-      <FaChain />
-    </i>
     <div className={styles.data}>
       <div className={styles.title}>
         {transaction.tx_hash}
       </div>
-      <div className={styles.subtitle}>
-        {transaction.num_confirmations} confirmations
-      </div>
     </div>
     <div className={styles.date}>
       <Moment format='MMM Do'>{transaction.time_stamp * 1000}</Moment>