fix(ui): improve tooltip styles

Ensure that tooltips display correctly in the activity list.

Fix #966

app/components/Activity/Activity.scss

@@ -162,7 +162,6 @@
   cursor: pointer;
   height: 76px;
   align-items: center;
-  font-size: 14px;
   transition: background-color 0.1s linear;
   transition-delay: 0.1s;
   color: var(--primaryText);
@@ -224,14 +223,10 @@
   flex-direction: column;
   flex: 6;
   justify-content: space-evenly;
-
-  &:nth-child(2) {
-    font-size: 10px;
-  }
+  width: 75%;
 
   .title {
     margin-bottom: 10px;
-    font-size: 14px;
   }
 
   .subtitle {
@@ -268,7 +263,6 @@
 
   h3 {
     display: inline-block;
-    font-size: 14px;
     font-weight: 300;
     letter-spacing: 1.2px;
 
@@ -286,6 +280,7 @@
   text-align: right;
   font-size: 12px;
   color: var(--primaryText);
+  width: 25%;
 
   span {
     &:nth-child(1) {

app/components/Activity/Invoice/Invoice.js

@@ -15,19 +15,17 @@ const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyNa
     onClick={() => showActivityModal('INVOICE', invoice.payment_request)}
   >
     <div className={styles.activityTypeIcon}>
-      <section
-        className="hint--bottom"
-        data-hint={
-          invoice.settled
-            ? intl.formatMessage({ ...messages.type_paid })
-            : intl.formatMessage({ ...messages.type_unpaid })
-        }
-      >
-        <CheckCircle />
-      </section>
+      <CheckCircle />
     </div>
 
-    <div className={styles.data}>
+    <div
+      className={`hint--top-right ${styles.data}`}
+      data-hint={
+        invoice.settled
+          ? intl.formatMessage({ ...messages.type_paid })
+          : intl.formatMessage({ ...messages.type_unpaid })
+      }
+    >
       <div className={styles.title}>
         <h3>
           {invoice.settled ? (

app/components/Activity/Payment/Payment.js

@@ -35,12 +35,13 @@ const Payment = ({
       onClick={() => showActivityModal('PAYMENT', payment.payment_hash)}
     >
       <div className={styles.activityTypeIcon}>
-        <section className="hint--bottom" data-hint={intl.formatMessage({ ...messages.type })}>
-          <Zap />
-        </section>
+        <Zap />
       </div>
 
-      <div className={styles.data}>
+      <div
+        className={`hint--top-right ${styles.data}`}
+        data-hint={intl.formatMessage({ ...messages.type })}
+      >
         <div className={styles.title}>
           <h3>{displayNodeName(payment.path[payment.path.length - 1])}</h3>
         </div>

app/components/Activity/Transaction/Transaction.js

@@ -23,12 +23,13 @@ const Transaction = ({
     onClick={() => showActivityModal('TRANSACTION', transaction.tx_hash)}
   >
     <div className={styles.activityTypeIcon}>
-      <section className="hint--bottom" data-hint={intl.formatMessage({ ...messages.type })}>
-        <ChainLink />
-      </section>
+      <ChainLink />
     </div>
 
-    <div className={styles.data}>
+    <div
+      className={`hint--top-right ${styles.data}`}
+      data-hint={intl.formatMessage({ ...messages.type })}
+    >
       <div className={styles.title}>
         <h3>
           {transaction.received ? (

app/components/UI/GlobalStyle.js

@@ -100,12 +100,14 @@ const GlobalStyle = createGlobalStyle`
   }
 
   .hint--bottom::before,
-  .hint--bottom-left::before {
+  .hint--bottom-left::before,
+  .hint--bottom-right::before {
     border-bottom-color: #404040;
   }
 
   .hint--top::before,
-  .hint--top-left::before {
+  .hint--top-left::before,
+  .hint--top-right::before {
     border-top-color: #404040;
   }
 
@@ -147,7 +149,8 @@ const GlobalStyle = createGlobalStyle`
     transform: translateY(-8px);
   }
 
-  .hint--top-left::before {
+  .hint--top-left::before,
+  .hint--top-right::before {
     margin-bottom: -12px;
   }
 
@@ -155,14 +158,26 @@ const GlobalStyle = createGlobalStyle`
     margin-right: -6px;
   }
 
+  .hint--top-right::after {
+    margin-right: 6px;
+  }
+
   .hint--top-left::before,
   .hint--top-left::after {
     bottom: 100%;
     right: 12px;
   }
 
+  .hint--top-right::before,
+  .hint--top-right::after {
+    bottom: 100%;
+    left: 12px;
+  }
+
   .hint--top-left:hover::after,
-  .hint--top-left:hover::before {
+  .hint--top-left:hover::before,
+  .hint--top-right:hover::after,
+  .hint--top-right:hover::before {
     transform: translateY(-8px);
   }