From a6439f10696c7049a701a2d4b28c9f29ae845cf9 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Tue, 14 Aug 2018 12:06:52 +0200
Subject: [PATCH] fix(activity): correct tooltips in activity log

Fix a bug where we were showing transaction amounts as transaction fee.

Fix #662
---
 .../components/components/Invoice/Invoice.js        |  9 +++++++--
 .../components/components/Payment/Payment.js        |  8 +++-----
 .../components/Transaction/Transaction.js           | 13 ++++++++-----
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/routes/activity/components/components/Invoice/Invoice.js b/app/routes/activity/components/components/Invoice/Invoice.js
index 19ff1861..dfed4695 100644
--- a/app/routes/activity/components/components/Invoice/Invoice.js
+++ b/app/routes/activity/components/components/Invoice/Invoice.js
@@ -32,8 +32,13 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
         </Moment>
       </div>
     </div>
-    <div className={`${styles.amount} ${invoice.settled ? styles.positive : styles.negative}`}>
-      <span className="hint--top" data-hint="Invoice amount">
+    <div
+      className={`hint--top-left ${styles.amount} ${
+        invoice.settled ? styles.positive : styles.negative
+      }`}
+      data-hint="Invoice amount"
+    >
+      <span>
         <i className={styles.plus}>+</i>
         <Value value={invoice.value} currency={ticker.currency} currentTicker={currentTicker} />
         <i> {currencyName}</i>
diff --git a/app/routes/activity/components/components/Payment/Payment.js b/app/routes/activity/components/components/Payment/Payment.js
index 565aa95c..4ad30f97 100644
--- a/app/routes/activity/components/components/Payment/Payment.js
+++ b/app/routes/activity/components/components/Payment/Payment.js
@@ -35,15 +35,13 @@ const Payment = ({ payment, ticker, currentTicker, showActivityModal, nodes, cur
           <Moment format="h:mm a">{payment.creation_date * 1000}</Moment>
         </div>
       </div>
-      <div className={styles.amount}>
-        <span className="hint--top" data-hint="Payment amount">
+      <div className={`hint--top-left ${styles.amount}`} data-hint="Payment amount">
+        <span>
           <i className={styles.minus}>-</i>
           <Value value={payment.value} currency={ticker.currency} currentTicker={currentTicker} />
           <i> {currencyName}</i>
         </span>
-        <span className="hint--bottom" data-hint="Payment fee">
-          ${btc.convert('sats', 'usd', payment.value, currentTicker.price_usd)}
-        </span>
+        <span>${btc.convert('sats', 'usd', payment.value, currentTicker.price_usd)}</span>
       </div>
     </div>
   )
diff --git a/app/routes/activity/components/components/Transaction/Transaction.js b/app/routes/activity/components/components/Transaction/Transaction.js
index 45ff6a4a..c4c303d4 100644
--- a/app/routes/activity/components/components/Transaction/Transaction.js
+++ b/app/routes/activity/components/components/Transaction/Transaction.js
@@ -27,8 +27,13 @@ const Transaction = ({ transaction, ticker, currentTicker, showActivityModal, cu
         <Moment format="h:mm a">{transaction.time_stamp * 1000}</Moment>
       </div>
     </div>
-    <div className={`${styles.amount} ${transaction.received ? styles.positive : styles.negative}`}>
-      <span className="hint--top" data-hint="Transaction amount">
+    <div
+      className={`hint--top-left ${styles.amount} ${
+        transaction.received ? styles.positive : styles.negative
+      }`}
+      data-hint="Transaction amount"
+    >
+      <span>
         <i className={transaction.received ? styles.plus : styles.minus}>
           {transaction.received ? '+' : '-'}
         </i>
@@ -39,9 +44,7 @@ const Transaction = ({ transaction, ticker, currentTicker, showActivityModal, cu
         />
         <i> {currencyName}</i>
       </span>
-      <span className="hint--bottom" data-hint="Transaction fee">
-        ${btc.convert('sats', 'usd', transaction.amount, currentTicker.price_usd)}
-      </span>
+      <span>${btc.convert('sats', 'usd', transaction.amount, currentTicker.price_usd)}</span>
     </div>
   </div>
 )