From b3a8bb4d1dd73cb82a26457d5b0b155bf53df8b8 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 26 Jul 2017 17:52:10 -0500
Subject: [PATCH] feature(tooltip): add tooltip styling

---
 app/app.global.scss                         |   1 +
 app/main.dev.js                             |   4 +-
 app/routes/app/components/components/Nav.js |   5 +-
 app/tooltip.scss                            | 133 ++++++++++++++++++++
 package.json                                |   1 -
 resources/zap.png                           | Bin 0 -> 4217 bytes
 6 files changed, 138 insertions(+), 6 deletions(-)
 create mode 100644 app/tooltip.scss
 create mode 100644 resources/zap.png

diff --git a/app/app.global.scss b/app/app.global.scss
index 079f2b7f..2fac4bf3 100644
--- a/app/app.global.scss
+++ b/app/app.global.scss
@@ -1,6 +1,7 @@
 @import "~font-awesome/css/font-awesome.css";
 @import 'reset.scss';
 @import 'variables.scss';
+@import 'tooltip.scss';
 
 @font-face {
   font-family: 'Roboto';
diff --git a/app/main.dev.js b/app/main.dev.js
index 82f801cc..122ef61f 100644
--- a/app/main.dev.js
+++ b/app/main.dev.js
@@ -10,8 +10,8 @@
  *
  * @flow
  */
-import { app, BrowserWindow } from 'electron';
-import MenuBuilder from './menu';
+import { app, BrowserWindow } from 'electron'
+import MenuBuilder from './menu'
 
 let mainWindow = null;
 
diff --git a/app/routes/app/components/components/Nav.js b/app/routes/app/components/components/Nav.js
index e6acdfff..0a037e6f 100644
--- a/app/routes/app/components/components/Nav.js
+++ b/app/routes/app/components/components/Nav.js
@@ -9,7 +9,6 @@ import styles from './Nav.scss'
 
 class Nav extends Component {
   render() {
-    console.log('props: ', this.props)
     const { ticker, balance } = this.props
     return (
       <nav className={styles.nav}>
@@ -23,11 +22,11 @@ class Nav extends Component {
             </span>
           </li>
           <li className={`${styles.balance} ${styles.link}`}>
-            <p>
+            <p data-hint='Wallet balance' className='hint--bottom-left'>
               <span>{ticker.current === 'btc' ? <FaBitcoin /> : <FaDollar />}</span>
               <span>{satoshisToBtc(balance.walletBalance)}</span>
             </p>
-            <p>
+            <p data-hint='Channel balance' className='hint--bottom-left'>
               <span>{ticker.current === 'btc' ? <FaBitcoin /> : <FaDollar />}</span>
               <span>{satoshisToBtc(balance.channelBalance)}</span>
             </p>
diff --git a/app/tooltip.scss b/app/tooltip.scss
new file mode 100644
index 00000000..65eb544c
--- /dev/null
+++ b/app/tooltip.scss
@@ -0,0 +1,133 @@
+/* Tooltips */
+[data-hint] {
+  position: relative;
+  /*display: inline-block;*/
+}
+[data-hint]:before,
+[data-hint]:after {
+  position: absolute;
+  will-change: transform;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 900005;
+  pointer-events: none;
+  transition: 0.2s ease;
+  transition-delay: 0ms;
+}
+[data-hint]:hover:before,
+[data-hint]:hover:after {
+  visibility: visible;
+  opacity: 1;
+}
+[data-hint]:before {
+  content: '';
+  position: absolute;
+  background: transparent;
+  border: 6px solid transparent;
+  z-index: 900006;
+}
+[data-hint]:after {
+  content: attr(data-hint);
+  background: #404040;
+  color: #e0e0e0;
+  text-shadow: 0 -1px 0 black;
+  padding: 8px 10px;
+  line-height: 12px;
+  white-space: nowrap;
+  border-radius: 2px;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
+  letter-spacing: normal;
+  font-size: 12px;
+  font-weight: normal;
+  font-style: inherit;
+  font-family: 'Noto Sans','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
+}
+.hint--bottom:before,
+.hint--bottom-left:before {
+  border-bottom-color: #404040;
+}
+.hint--top:before,
+.hint--top-left:before {
+  border-top-color: #404040;
+}
+.hint--bottom:before {
+  margin-top: -12px;
+}
+.hint--bottom:after {
+  margin-left: -18px;
+}
+.hint--bottom:before,
+.hint--bottom:after {
+  top: 100%;
+  left: 50%;
+}
+.hint--bottom:hover:after,
+.hint--bottom:hover:before {
+  -webkit-transform: translateY(8px);
+  transform: translateY(8px);
+}
+.hint--top:before {
+  margin-bottom: -12px;
+}
+.hint--top:after {
+  margin-left: -18px;
+}
+.hint--top:before,
+.hint--top:after {
+  bottom: 100%;
+  left: 50%;
+}
+.hint--top:hover:after,
+.hint--top:hover:before {
+  -webkit-transform: translateY(-8px);
+  transform: translateY(-8px);
+}
+.hint--top-left:before {
+  margin-bottom: -12px;
+}
+.hint--top-left:after {
+  margin-right: -6px;
+}
+.hint--top-left:before,
+.hint--top-left:after {
+  bottom: 100%;
+  right: 30%;
+}
+.hint--top-left:hover:after,
+.hint--top-left:hover:before {
+  -webkit-transform: translateY(-8px);
+  transform: translateY(-8px);
+}
+.hint--bottom-left:before {
+  margin-top: -12px;
+}
+.hint--bottom-left:after {
+  margin-right: -6px;
+}
+.hint--bottom-left:before,
+.hint--bottom-left:after {
+  top: 100%;
+  right: 30%;
+}
+.hint--bottom-left:hover:after,
+.hint--bottom-left:hover:before {
+  -webkit-transform: translateY(8px);
+  transform: translateY(8px);
+}
+.hint--left:before {
+  margin-right: -12px;
+  margin-top: -6px;
+}
+.hint--left:after {
+  margin-right: -14px;
+}
+.hint--left:before,
+.hint--left:after {
+  right: 100%;
+  bottom: 50%;
+}
+.hint--left:hover:after,
+.hint--left:hover:before {
+  -webkit-transform: translateX(-8px);
+  transform: translateX(-8px);
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 88d4d36f..9875e0d7 100644
--- a/package.json
+++ b/package.json
@@ -183,7 +183,6 @@
   },
   "dependencies": {
     "axios": "^0.16.2",
-    "big.js": "^3.1.3",
     "devtron": "^1.4.0",
     "electron-debug": "^1.2.0",
     "font-awesome": "^4.7.0",
diff --git a/resources/zap.png b/resources/zap.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa1a5953a0c8c5276a383bbda3969f9739910f4e
GIT binary patch
literal 4217
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

literal 0
HcmV?d00001