From 9a421941fe631e9b8a3d559c15196b3e0a393951 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 20 Jan 2017 09:53:50 -0500
Subject: [PATCH] Move styles for ToolTip and ToolTipLink into CSS

---
 js/component/common.js           | 13 +------------
 js/component/link.js             | 23 +++++++++--------------
 js/page/discover.js              | 10 ++++++++--
 scss/all.scss                    |  2 ++
 scss/component/_tooltip.scss     | 13 +++++++++++++
 scss/component/_tooltiplink.scss | 12 ++++++++++++
 6 files changed, 45 insertions(+), 28 deletions(-)
 create mode 100644 scss/component/_tooltip.scss
 create mode 100644 scss/component/_tooltiplink.scss

diff --git a/js/component/common.js b/js/component/common.js
index a342074c1..f5c78633e 100644
--- a/js/component/common.js
+++ b/js/component/common.js
@@ -50,17 +50,6 @@ export let BusyMessage = React.createClass({
   }
 });
 
-var toolTipStyle = {
-  position: 'absolute',
-  zIndex: '1',
-  top: '100%',
-  left: '-120px',
-  width: '260px',
-  padding: '15px',
-  border: '1px solid #aaa',
-  backgroundColor: '#fff',
-  fontSize: '14px',
-};
 export let ToolTip = React.createClass({
   propTypes: {
     open: React.PropTypes.bool.isRequired,
@@ -68,7 +57,7 @@ export let ToolTip = React.createClass({
   },
   render: function() {
     return (
-      <div className={this.props.open ? '' : 'hidden'} style={toolTipStyle} onMouseOut={this.props.onMouseOut}>
+      <div className={'tooltip ' + (this.props.className || '') + (this.props.open ? '' : ' hidden')} onMouseOut={this.props.onMouseOut}>
         {this.props.children}
       </div>
     );
diff --git a/js/component/link.js b/js/component/link.js
index 4a80ee830..a3d931852 100644
--- a/js/component/link.js
+++ b/js/component/link.js
@@ -53,10 +53,6 @@ export let Link = React.createClass({
   }
 });
 
-var linkContainerStyle = {
-  position: 'relative',
-};
-
 export let ToolTipLink = React.createClass({
   getInitialState: function() {
     return {
@@ -79,22 +75,21 @@ export let ToolTipLink = React.createClass({
     });
   },
   render: function() {
-    var href = this.props.href ? this.props.href : 'javascript:;',
-      icon = this.props.icon ? <Icon icon={this.props.icon} />  : '',
-      className = this.props.className +
-        (this.props.button ? ' button-block button-' + this.props.button : '') +
-        (this.props.hidden ? ' hidden' : '') +
-        (this.props.disabled ? ' disabled' : '');
+    const linkClass = 'tooltip-link__link ' + (this.props.className ? this.props.className + '__link' : '') +
+                      (this.props.button ? ' button-block button-' + this.props.button : '') +
+                      (this.props.hidden ? ' hidden' : '') +
+                      (this.props.disabled ? ' disabled' : '');
+    const toolTipClass = 'tooltip-link__tooltip ' + (this.props.className ? this.props.className + '__tooltip' : '');
 
     return (
-      <span style={linkContainerStyle}>
-        <a className={className ? className : 'button-text'} href={href} style={this.props.style ? this.props.style : {}}
+      <span className={'tooltip-link ' + (this.props.className || '')}>
+        <a className={linkClass} href={this.props.href || 'javascript:;'}
            title={this.props.title} onClick={this.handleClick}>
-          {this.props.icon ? icon : '' }
+          {this.props.icon ? <Icon icon={this.props.icon} />  : null }
           {this.props.label}
         </a>
         {(!this.props.tooltip ? null :
-          <ToolTip open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
+          <ToolTip className={toolTipClass} open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
             {this.props.tooltip}
           </ToolTip>
         )}
diff --git a/js/page/discover.js b/js/page/discover.js
index 3d9d620c5..d59fc2315 100644
--- a/js/page/discover.js
+++ b/js/page/discover.js
@@ -65,6 +65,9 @@ var featuredContentLegendStyle = {
 
 var FeaturedContent = React.createClass({
   render: function() {
+    const toolTipText = ('Community Content is a public space where anyone can share content with the ' +
+                        'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
+                        '"five" to put your content here!');
     return (
       <div className="row-fluid">
         <div className="span6">
@@ -77,8 +80,11 @@ var FeaturedContent = React.createClass({
 
         </div>
         <div className="span6">
-          <h3>Community Content <ToolTipLink style={featuredContentLegendStyle} label="What's this?"
-            tooltip='Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names "one," "two," "three," "four" and "five" to put your content here!' /></h3>
+          <h3>
+            Community Content {' '}
+            <ToolTipLink label="What's this?"
+                         tooltip={toolTipText} />
+          </h3>
           <FileTile name="one" />
           <FileTile name="two" />
           <FileTile name="three" />
diff --git a/scss/all.scss b/scss/all.scss
index 4055cc708..59b8867d1 100644
--- a/scss/all.scss
+++ b/scss/all.scss
@@ -8,4 +8,6 @@
 @import "component/_file-actions.scss";
 @import "component/_file-tile.scss";
 @import "component/_menu.scss";
+@import "component/_tooltiplink.scss";
+@import "component/_tooltip.scss";
 @import "page/_developer.scss";
\ No newline at end of file
diff --git a/scss/component/_tooltip.scss b/scss/component/_tooltip.scss
new file mode 100644
index 000000000..c856f3a02
--- /dev/null
+++ b/scss/component/_tooltip.scss
@@ -0,0 +1,13 @@
+.tooltip {
+  text-align: left;
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: -120px;
+  width: 260px;
+  padding: 15px;
+  border: 1px solid #aaa;
+  color: $color-text-dark;
+  background-color: $color-bg;
+  font-size: 14px;
+}
diff --git a/scss/component/_tooltiplink.scss b/scss/component/_tooltiplink.scss
new file mode 100644
index 000000000..085a2d8ad
--- /dev/null
+++ b/scss/component/_tooltiplink.scss
@@ -0,0 +1,12 @@
+.tooltip-link {
+  position: relative;
+}
+
+.tooltip-link__link {
+  font-size: 12px;
+  color: #aaa;
+  vertical-align: 15%;
+  &:hover {
+    text-decoration: underline;
+  }
+}