Merge pull request #667 from mrfelton/fix/transaction-amount-hints

fix(activity): correct tooltips in activity log

Author: JimmyMow

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>

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>
   )

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>
 )