From 91eec1d1630730ad089f0bd18e6ca15f426e5d4d Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 20 Sep 2017 14:03:50 -0500
Subject: [PATCH] fix(label): redesign activity label

---
 .../components/components/Activity.scss       | 23 +++++++++++--------
 .../components/components/Invoice/Invoice.js  | 19 ++++++++++-----
 .../components/components/Payment/Payment.js  | 19 +++++++--------
 .../components/Transaction/Transaction.js     |  9 +++-----
 4 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/app/routes/activity/components/components/Activity.scss b/app/routes/activity/components/components/Activity.scss
index de728313..e558c94a 100644
--- a/app/routes/activity/components/components/Activity.scss
+++ b/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 {
diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index ac1b2000..fc03e83b 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/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'>
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
index e131b91e..37da8145 100644
--- a/app/routes/activity/components/components/Payment/Payment.js
+++ b/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>
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index f8f42f3e..8b3bb08f 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/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>