From 9d0aa0d8da70797bfe303b7cd0f1c3fbad3503a9 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Thu, 19 Jan 2017 04:58:11 -0500
Subject: [PATCH 01/10] Add setting to hide unavailable content

---
 js/component/file-tile.js | 23 +++++++++++++++++++----
 js/page/discover.js       |  4 ++--
 js/page/settings.js       | 19 +++++++++++++++++--
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/js/component/file-tile.js b/js/component/file-tile.js
index 42f79d16c..1c4f1873e 100644
--- a/js/component/file-tile.js
+++ b/js/component/file-tile.js
@@ -64,7 +64,8 @@ export let FileTileStream = React.createClass({
   getInitialState: function() {
     return {
       showNsfwHelp: false,
-      isHidden: false
+      isHidden: false,
+      available: null,
     }
   },
   getDefaultProps: function() {
@@ -73,6 +74,15 @@ export let FileTileStream = React.createClass({
       hidePrice: false
     }
   },
+  componentWillMount: function() {
+    if (!('available' in this.props)) {
+      lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
+        this.setState({
+          available: peers.length > 0,
+        });
+      });
+    }
+  },
   componentDidMount: function() {
     this._isMounted = true;
     if (this.props.hideOnRemove) {
@@ -84,6 +94,9 @@ export let FileTileStream = React.createClass({
       lbry.fileInfoUnsubscribe(this.props.sdHash, this._fileInfoSubscribeId);
     }
   },
+  isAvailable: function() {
+    return 'available' in this.props ? this.props.available : this.state.available;
+  },
   onFileInfoUpdate: function(fileInfo) {
     if (!fileInfo && this._isMounted && this.props.hideOnRemove) {
       this.setState({
@@ -106,7 +119,7 @@ export let FileTileStream = React.createClass({
     }
   },
   render: function() {
-    if (this.state.isHidden) {
+    if (this.state.isHidden || (!lbry.getClientSetting('showUnavailable') && !this.isAvailable())) {
       return null;
     }
 
@@ -157,7 +170,8 @@ export let FileTile = React.createClass({
   _isMounted: false,
 
   propTypes: {
-    name: React.PropTypes.string.isRequired
+    name: React.PropTypes.string.isRequired,
+    available: React.PropTypes.bool,
   },
 
   getInitialState: function() {
@@ -187,6 +201,7 @@ export let FileTile = React.createClass({
       return null;
     }
 
-    return <FileTileStream name={this.props.name} sdHash={this.state.sdHash} metadata={this.state.metadata} />;
+    return <FileTileStream name={this.props.name} available={this.props.available} sdHash={this.state.sdHash}
+                           metadata={this.state.metadata} />;
   }
 });
\ No newline at end of file
diff --git a/js/page/discover.js b/js/page/discover.js
index 3e0bf65e2..3d9d620c5 100644
--- a/js/page/discover.js
+++ b/js/page/discover.js
@@ -43,11 +43,11 @@ var SearchResults = React.createClass({
   render: function() {
     var rows = [],
         seenNames = {}; //fix this when the search API returns claim IDs
-    this.props.results.forEach(function({name, value}) {
+    this.props.results.forEach(function({name, peer_count}) {
       if (!seenNames[name]) {
         seenNames[name] = name;
         rows.push(
-          <FileTile key={name} name={name} />
+          <FileTile key={name} name={name} available={peer_count > 0} />
         );
       }
     });
diff --git a/js/page/settings.js b/js/page/settings.js
index 81403492b..b192f15c9 100644
--- a/js/page/settings.js
+++ b/js/page/settings.js
@@ -51,7 +51,8 @@ var SettingsPage = React.createClass({
   getInitialState: function() {
     return {
       settings: null,
-      showNsfw: lbry.getClientSetting('showNsfw')
+      showNsfw: lbry.getClientSetting('showNsfw'),
+      showUnavailable: lbry.getClientSetting('showUnavailable'),
     }
   },
   componentDidMount: function() {
@@ -69,6 +70,9 @@ var SettingsPage = React.createClass({
   onShowNsfwChange: function(event) {
     lbry.setClientSetting('showNsfw', event.target.checked);
   },
+  onShowUnavailableChange: function(event) {
+    lbry.setClientSetting('showUnavailable', event.target.checked);
+  },
   render: function() {
     if (!this.state.daemonSettings) {
       return null;
@@ -114,7 +118,7 @@ var SettingsPage = React.createClass({
           <h3>Content</h3>
           <div className="form-row">
             <label style={settingsCheckBoxOptionStyles}>
-              <input type="checkbox" onChange={this.onShowNsfwChange} defaultChecked={this.state.showNsfw} /> Show NSFW Content
+              <input type="checkbox" onChange={this.onShowNsfwChange} defaultChecked={this.state.showNsfw} /> Show NSFW content
             </label>
             <div className="help">
               NSFW content may include nudity, intense sexuality, profanity, or other adult content.
@@ -122,6 +126,17 @@ var SettingsPage = React.createClass({
             </div>
           </div>
         </section>
+        <section className="card">
+          <h3>Search</h3>
+          <div className="form-row">
+          <div className="help">
+            Would you like search results to include items that are not currently available for download?
+          </div>
+          <label style={settingsCheckBoxOptionStyles}>
+            <input type="checkbox" onChange={this.onShowUnavailableChange} defaultChecked={this.state.showUnavailable} /> Show unavailable content in search results
+          </label>
+          </div>
+        </section>
         <section className="card">
           <h3>Share Diagnostic Data</h3>
           <label style={settingsCheckBoxOptionStyles}>

From 1c19537883e172f917615f2092cf6da865d9c7bc Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 20 Jan 2017 08:49:47 -0500
Subject: [PATCH 02/10] Clean up prop passing from FileTile to FileTileStream

---
 js/component/file-tile.js      | 5 ++---
 scss/component/_file-tile.scss | 4 ++++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/js/component/file-tile.js b/js/component/file-tile.js
index 1c4f1873e..2349df364 100644
--- a/js/component/file-tile.js
+++ b/js/component/file-tile.js
@@ -129,7 +129,7 @@ export let FileTileStream = React.createClass({
 
     return (
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card-obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
-        <div className="row-fluid card-content file-tile__row">
+        <div className={"row-fluid card-content file-tile__row"}>
           <div className="span3">
             <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + (title || this.props.name)} /></a>
           </div>
@@ -201,7 +201,6 @@ export let FileTile = React.createClass({
       return null;
     }
 
-    return <FileTileStream name={this.props.name} available={this.props.available} sdHash={this.state.sdHash}
-                           metadata={this.state.metadata} />;
+    return <FileTileStream sdHash={this.state.sdHash} metadata={this.state.metadata} {... this.props} />;
   }
 });
\ No newline at end of file
diff --git a/scss/component/_file-tile.scss b/scss/component/_file-tile.scss
index 11a071232..74b06c461 100644
--- a/scss/component/_file-tile.scss
+++ b/scss/component/_file-tile.scss
@@ -4,6 +4,10 @@
   height: $spacing-vertical * 7;
 }
 
+.file-tile__row--unavailable {
+  opacity: 0.65;
+}
+
 .file-tile__thumbnail {
   max-width: 100%;
   max-height: $spacing-vertical * 7;

From 87e6713262027e068331a016ff93d223c07e634e Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 20 Jan 2017 08:54:33 -0500
Subject: [PATCH 03/10] Make unavailable content visible by default

---
 js/lbry.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/lbry.js b/js/lbry.js
index 9063aca2e..96965ec99 100644
--- a/js/lbry.js
+++ b/js/lbry.js
@@ -10,6 +10,7 @@ var lbry = {
   },
   defaultClientSettings: {
     showNsfw: false,
+    showUnavailable: true,
     debug: false,
     useCustomLighthouseServers: false,
     customLighthouseServers: [],

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 04/10] 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;
+  }
+}

From 78176e6b0a4a11bb0383474cb3e7a8a7bbbe3542 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 20 Jan 2017 11:44:08 -0500
Subject: [PATCH 05/10] In FileTile, show a message when a file is unavailable

---
 js/component/file-tile.js      | 15 +++++++++++----
 scss/_global.scss              |  1 +
 scss/component/_file-tile.scss | 14 ++++++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/js/component/file-tile.js b/js/component/file-tile.js
index 2349df364..d7e4f915f 100644
--- a/js/component/file-tile.js
+++ b/js/component/file-tile.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import lbry from '../lbry.js';
-import {Link} from '../component/link.js';
+import {Link, ToolTipLink} from '../component/link.js';
 import {FileActions} from '../component/file-actions.js';
 import {Thumbnail, TruncatedText, CreditAmount} from '../component/common.js';
 
@@ -125,11 +125,18 @@ export let FileTileStream = React.createClass({
 
     const metadata = this.props.metadata || {},
           obscureNsfw = this.props.obscureNsfw && metadata.nsfw,
-          title =  metadata.title ? metadata.title : ('lbry://' + this.props.name);
-
+          title = metadata.title ? metadata.title : ('lbry://' + this.props.name),
+          showUnavailable = this.isAvailable() === false,
+          unavailableMessage = ("The content on LBRY is hosted by its users. It appears there are no " +
+                                "users connected that have this file at the moment.");
     return (
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card-obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
-        <div className={"row-fluid card-content file-tile__row"}>
+        {showUnavailable
+          ? <div className='file-tile__not-available-message'>
+              This file is not currently available. <ToolTipLink label="Why?" tooltip={unavailableMessage} className="not-available-tooltip-link" />
+            </div>
+          : null}
+        <div className={"row-fluid card-content file-tile__row" + (showUnavailable ? ' file-tile__row--unavailable' : '')}>
           <div className="span3">
             <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + (title || this.props.name)} /></a>
           </div>
diff --git a/scss/_global.scss b/scss/_global.scss
index b59b5821f..7c616ac29 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -8,6 +8,7 @@ $color-primary: #155B4A;
 $color-light-alt: hsl(hue($color-primary), 15, 85);
 $color-text-dark: #000;
 $color-help: rgba(0,0,0,.6);
+$color-notice: #921010;
 $color-canvas: #f5f5f5;
 $color-bg: #ffffff;
 $color-bg-alt: #D9D9D9;
diff --git a/scss/component/_file-tile.scss b/scss/component/_file-tile.scss
index 74b06c461..b5118fb22 100644
--- a/scss/component/_file-tile.scss
+++ b/scss/component/_file-tile.scss
@@ -5,7 +5,7 @@
 }
 
 .file-tile__row--unavailable {
-  opacity: 0.65;
+  opacity: 0.5;
 }
 
 .file-tile__thumbnail {
@@ -28,4 +28,14 @@
   color: #444;
   margin-top: 12px;
   font-size: 0.9em;
-}
\ No newline at end of file
+}
+
+.file-tile__not-available-message {
+  height: auto;
+  text-align: right;
+  color: $color-notice;
+}
+
+.file-tile .not-available-tooltip-link__tooltip { /* temporary */
+  left: -225px;
+}

From 9b68f71199272d17106fad9155863cda0344b0e2 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 20 Jan 2017 23:55:49 -0500
Subject: [PATCH 06/10] Always use local availability checks (not Lighthouse)

---
 js/component/file-tile.js | 23 ++++++++++-------------
 js/page/discover.js       |  4 ++--
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/js/component/file-tile.js b/js/component/file-tile.js
index d7e4f915f..4ac887d2a 100644
--- a/js/component/file-tile.js
+++ b/js/component/file-tile.js
@@ -75,13 +75,11 @@ export let FileTileStream = React.createClass({
     }
   },
   componentWillMount: function() {
-    if (!('available' in this.props)) {
-      lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
-        this.setState({
-          available: peers.length > 0,
-        });
+    lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
+      this.setState({
+        available: peers.length > 0,
       });
-    }
+    });
   },
   componentDidMount: function() {
     this._isMounted = true;
@@ -94,9 +92,6 @@ export let FileTileStream = React.createClass({
       lbry.fileInfoUnsubscribe(this.props.sdHash, this._fileInfoSubscribeId);
     }
   },
-  isAvailable: function() {
-    return 'available' in this.props ? this.props.available : this.state.available;
-  },
   onFileInfoUpdate: function(fileInfo) {
     if (!fileInfo && this._isMounted && this.props.hideOnRemove) {
       this.setState({
@@ -119,24 +114,26 @@ export let FileTileStream = React.createClass({
     }
   },
   render: function() {
-    if (this.state.isHidden || (!lbry.getClientSetting('showUnavailable') && !this.isAvailable())) {
+    const isUnavailable = this.state.available === false;
+
+    if (this.state.isHidden || (!lbry.getClientSetting('showUnavailable') && isUnavailable)) {
       return null;
     }
 
     const metadata = this.props.metadata || {},
           obscureNsfw = this.props.obscureNsfw && metadata.nsfw,
           title = metadata.title ? metadata.title : ('lbry://' + this.props.name),
-          showUnavailable = this.isAvailable() === false,
+          showAsAvailable = this.state.available !== false,
           unavailableMessage = ("The content on LBRY is hosted by its users. It appears there are no " +
                                 "users connected that have this file at the moment.");
     return (
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card-obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
-        {showUnavailable
+        {isUnavailable
           ? <div className='file-tile__not-available-message'>
               This file is not currently available. <ToolTipLink label="Why?" tooltip={unavailableMessage} className="not-available-tooltip-link" />
             </div>
           : null}
-        <div className={"row-fluid card-content file-tile__row" + (showUnavailable ? ' file-tile__row--unavailable' : '')}>
+        <div className={"row-fluid card-content file-tile__row" + (isUnavailable ? ' file-tile__row--unavailable' : '')}>
           <div className="span3">
             <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + (title || this.props.name)} /></a>
           </div>
diff --git a/js/page/discover.js b/js/page/discover.js
index d59fc2315..59bf7d032 100644
--- a/js/page/discover.js
+++ b/js/page/discover.js
@@ -43,11 +43,11 @@ var SearchResults = React.createClass({
   render: function() {
     var rows = [],
         seenNames = {}; //fix this when the search API returns claim IDs
-    this.props.results.forEach(function({name, peer_count}) {
+    this.props.results.forEach(function({name}) {
       if (!seenNames[name]) {
         seenNames[name] = name;
         rows.push(
-          <FileTile key={name} name={name} available={peer_count > 0} />
+          <FileTile key={name} name={name} />
         );
       }
     });

From 3e33b5a2e89ae56763d7af4887d4f2e0f01f3999 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 20 Jan 2017 23:59:07 -0500
Subject: [PATCH 07/10] Pass sdHash into FileTile on Discover page

---
 js/page/discover.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/page/discover.js b/js/page/discover.js
index 59bf7d032..a35515ff7 100644
--- a/js/page/discover.js
+++ b/js/page/discover.js
@@ -43,11 +43,11 @@ var SearchResults = React.createClass({
   render: function() {
     var rows = [],
         seenNames = {}; //fix this when the search API returns claim IDs
-    this.props.results.forEach(function({name}) {
+    this.props.results.forEach(function({name, value}) {
       if (!seenNames[name]) {
         seenNames[name] = name;
         rows.push(
-          <FileTile key={name} name={name} />
+          <FileTile key={name} name={name} sdHash={value.sources.lbry_sd_hash} />
         );
       }
     });

From 42517587eee4eb31338c03e40d2d7e976e6f18eb Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Sat, 21 Jan 2017 01:48:30 -0500
Subject: [PATCH 08/10] Add FileUnavailableMessage component

---
 js/component/file-unavailable-message.js      | 23 +++++++++++++++++++
 scss/component/_file-unavailable-message.scss | 13 +++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 js/component/file-unavailable-message.js
 create mode 100644 scss/component/_file-unavailable-message.scss

diff --git a/js/component/file-unavailable-message.js b/js/component/file-unavailable-message.js
new file mode 100644
index 000000000..29cf76de7
--- /dev/null
+++ b/js/component/file-unavailable-message.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {Link, ToolTipLink} from '../component/link.js';
+
+const FileUnavailableMessage = React.createClass({
+  _unavailableMessage: "The content on LBRY is hosted by its users. It appears there are no users " +
+                       "connected that have this file at the moment.",
+  propTypes: {
+    onShowActionsClicked: React.PropTypes.func,
+  },
+  render: function() {
+    return (
+      <div className="file-unavailable-message">
+        <span className="empty">This file is not currently available.</span> { ' ' }
+        <ToolTipLink label="Why?" tooltip={this._unavailableMessage} className="not-available-tooltip-link" /> { ' ' }
+        {'onShowActionsClicked' in this.props
+          ? <Link label="Try Anyway" className="button-text" onClick={this.props.onShowActionsClicked} />
+          : null}
+      </div>
+    );
+  }
+});
+
+export default FileUnavailableMessage;
diff --git a/scss/component/_file-unavailable-message.scss b/scss/component/_file-unavailable-message.scss
new file mode 100644
index 000000000..d2f062a64
--- /dev/null
+++ b/scss/component/_file-unavailable-message.scss
@@ -0,0 +1,13 @@
+.file-unavailable-message {
+  font-size: 14px;
+
+  .not-available-tooltip-link__tooltip { /* temporary */
+    left: -225px;
+  }
+
+  .not-available-tooltip-link__link {
+    @include text-link();
+    font-size: 14px;
+    vertical-align: baseline;
+  }
+}
\ No newline at end of file

From e5b4aaf175c5bb0b239e6dbcadb5215ca840cca6 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Sat, 21 Jan 2017 01:52:32 -0500
Subject: [PATCH 09/10] Revamp "file not available" message

 - Don't fade out tile
 - Display message in place of buttons with an option to bypass the
   message
 - Factor out message into its own FileUnavailableMessage component
---
 js/component/file-actions.js | 27 +++++++++++++++++++++++++--
 js/component/file-tile.js    | 23 +++--------------------
 scss/all.scss                |  1 +
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/js/component/file-actions.js b/js/component/file-actions.js
index ec4a14e06..c670964ce 100644
--- a/js/component/file-actions.js
+++ b/js/component/file-actions.js
@@ -2,6 +2,7 @@ import React from 'react';
 import lbry from '../lbry.js';
 import {Link} from '../component/link.js';
 import {Icon} from '../component/common.js';
+import FileUnavailableMessage from '../component/file-unavailable-message.js';
 import Modal from './modal.js';
 import FormField from './form.js';
 import {DropDownMenu, DropDownMenuItem} from './menu.js';
@@ -71,6 +72,8 @@ export let FileActions = React.createClass({
       deleteChecked: false,
       attemptingDownload: false,
       attemptingRemove: false,
+      available: null,
+      forceShowActions: false,
     }
   },
   onFileInfoUpdate: function(fileInfo) {
@@ -136,6 +139,11 @@ export let FileActions = React.createClass({
       modal: 'confirmRemove',
     });
   },
+  showActions: function() {
+    this.setState({
+      forceShowActions: true,
+    });
+  },
   handleRemoveConfirmed: function() {
     if (this.props.streamName) {
       lbry.removeFile(this.props.sdHash, this.props.streamName, this.state.deleteChecked);
@@ -156,6 +164,15 @@ export let FileActions = React.createClass({
   componentDidMount: function() {
     this._isMounted = true;
     this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.sdHash, this.onFileInfoUpdate);
+    lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
+      if (!this._isMounted) {
+        return;
+      }
+
+      this.setState({
+        available: peers.length > 0,
+      });
+    });
   },
   componentWillUnmount: function() {
     this._isMounted = false;
@@ -168,6 +185,11 @@ export let FileActions = React.createClass({
     {
       return <section className="file-actions--stub"></section>;
     }
+
+    if (this.state.available === false && !this.state.forceShowActions) {
+      return <FileUnavailableMessage onShowActionsClicked={this.showActions} />;
+    }
+
     const openInFolderMessage = window.navigator.platform.startsWith('Mac') ? 'Open in Finder' : 'Open in Folder',
           showMenu = !!this.state.fileInfo;
 
@@ -180,11 +202,12 @@ export let FileActions = React.createClass({
         label = this.state.fileInfo ? progress.toFixed(0) + '% complete' : 'Connecting...',
         labelWithIcon = <span className="button__content"><Icon icon="icon-download" />{label}</span>;
 
-      linkBlock =
+      linkBlock = (
         <div className="faux-button-block file-actions__download-status-bar">
           <div className="faux-button-block file-actions__download-status-bar-overlay" style={{ width: progress + '%' }}>{labelWithIcon}</div>
           {labelWithIcon}
-        </div>;
+        </div>
+      );
     } else {
       linkBlock = <Link button="text" label="Open" icon="icon-folder-open" onClick={this.onOpenClick} />;
     }
diff --git a/js/component/file-tile.js b/js/component/file-tile.js
index 4ac887d2a..f4e3c747b 100644
--- a/js/component/file-tile.js
+++ b/js/component/file-tile.js
@@ -74,13 +74,6 @@ export let FileTileStream = React.createClass({
       hidePrice: false
     }
   },
-  componentWillMount: function() {
-    lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
-      this.setState({
-        available: peers.length > 0,
-      });
-    });
-  },
   componentDidMount: function() {
     this._isMounted = true;
     if (this.props.hideOnRemove) {
@@ -114,26 +107,16 @@ export let FileTileStream = React.createClass({
     }
   },
   render: function() {
-    const isUnavailable = this.state.available === false;
-
-    if (this.state.isHidden || (!lbry.getClientSetting('showUnavailable') && isUnavailable)) {
+    if (this.state.isHidden) {
       return null;
     }
 
     const metadata = this.props.metadata || {},
           obscureNsfw = this.props.obscureNsfw && metadata.nsfw,
-          title = metadata.title ? metadata.title : ('lbry://' + this.props.name),
-          showAsAvailable = this.state.available !== false,
-          unavailableMessage = ("The content on LBRY is hosted by its users. It appears there are no " +
-                                "users connected that have this file at the moment.");
+          title = metadata.title ? metadata.title : ('lbry://' + this.props.name);
     return (
       <section className={ 'file-tile card ' + (obscureNsfw ? 'card-obscured ' : '') } onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
-        {isUnavailable
-          ? <div className='file-tile__not-available-message'>
-              This file is not currently available. <ToolTipLink label="Why?" tooltip={unavailableMessage} className="not-available-tooltip-link" />
-            </div>
-          : null}
-        <div className={"row-fluid card-content file-tile__row" + (isUnavailable ? ' file-tile__row--unavailable' : '')}>
+        <div className={"row-fluid card-content file-tile__row"}>
           <div className="span3">
             <a href={'/?show=' + this.props.name}><Thumbnail className="file-tile__thumbnail" src={metadata.thumbnail} alt={'Photo for ' + (title || this.props.name)} /></a>
           </div>
diff --git a/scss/all.scss b/scss/all.scss
index 59b8867d1..1621fc47f 100644
--- a/scss/all.scss
+++ b/scss/all.scss
@@ -7,6 +7,7 @@
 @import "component/_table";
 @import "component/_file-actions.scss";
 @import "component/_file-tile.scss";
+@import "component/_file-unavailable-message.scss";
 @import "component/_menu.scss";
 @import "component/_tooltiplink.scss";
 @import "component/_tooltip.scss";

From 44412437ce7fc60dc2e55babdf3f8d9a2b7ab56b Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <kauffj@gmail.com>
Date: Sat, 21 Jan 2017 16:31:41 -0500
Subject: [PATCH 10/10] unavailable content cleanup

---
 js/component/common.js                        | 14 ---
 js/component/file-actions.js                  | 97 ++++++++++++-------
 js/component/file-tile.js                     |  2 +-
 js/component/file-unavailable-message.js      | 23 -----
 js/component/link.js                          | 49 +---------
 js/component/tooltip.js                       | 36 +++++++
 js/page/discover.js                           |  8 +-
 scss/_canvas.scss                             |  2 +-
 scss/_global.scss                             |  1 +
 scss/_gui.scss                                |  5 +-
 scss/all.scss                                 |  2 -
 scss/component/_file-actions.scss             |  5 +-
 scss/component/_file-tile.scss                | 12 +--
 scss/component/_file-unavailable-message.scss | 13 ---
 scss/component/_tooltip.scss                  | 34 +++++--
 scss/component/_tooltiplink.scss              | 12 ---
 16 files changed, 144 insertions(+), 171 deletions(-)
 delete mode 100644 js/component/file-unavailable-message.js
 create mode 100644 js/component/tooltip.js
 delete mode 100644 scss/component/_file-unavailable-message.scss
 delete mode 100644 scss/component/_tooltiplink.scss

diff --git a/js/component/common.js b/js/component/common.js
index f5c78633e..fcb7fbd0d 100644
--- a/js/component/common.js
+++ b/js/component/common.js
@@ -50,20 +50,6 @@ export let BusyMessage = React.createClass({
   }
 });
 
-export let ToolTip = React.createClass({
-  propTypes: {
-    open: React.PropTypes.bool.isRequired,
-    onMouseOut: React.PropTypes.func
-  },
-  render: function() {
-    return (
-      <div className={'tooltip ' + (this.props.className || '') + (this.props.open ? '' : ' hidden')} onMouseOut={this.props.onMouseOut}>
-        {this.props.children}
-      </div>
-    );
-  }
-});
-
 var creditAmountStyle = {
   color: '#216C2A',
   fontWeight: 'bold',
diff --git a/js/component/file-actions.js b/js/component/file-actions.js
index c670964ce..0ad8ba04d 100644
--- a/js/component/file-actions.js
+++ b/js/component/file-actions.js
@@ -2,9 +2,9 @@ import React from 'react';
 import lbry from '../lbry.js';
 import {Link} from '../component/link.js';
 import {Icon} from '../component/common.js';
-import FileUnavailableMessage from '../component/file-unavailable-message.js';
 import Modal from './modal.js';
 import FormField from './form.js';
+import {ToolTip} from '../component/tooltip.js';
 import {DropDownMenu, DropDownMenuItem} from './menu.js';
 
 let WatchLink = React.createClass({
@@ -51,18 +51,14 @@ let WatchLink = React.createClass({
   }
 });
 
-export let FileActions = React.createClass({
+let FileActionsRow = React.createClass({
   _isMounted: false,
   _fileInfoSubscribeId: null,
 
   propTypes: {
     streamName: React.PropTypes.string,
     sdHash: React.PropTypes.string.isRequired,
-    metadata: React.PropTypes.object,
-    path: React.PropTypes.string,
-    hidden: React.PropTypes.bool,
-    deleteChecked: React.PropTypes.bool,
-    onRemove: React.PropTypes.func,
+    metadata: React.PropTypes.object
   },
   getInitialState: function() {
     return {
@@ -71,9 +67,7 @@ export let FileActions = React.createClass({
       menuOpen: false,
       deleteChecked: false,
       attemptingDownload: false,
-      attemptingRemove: false,
-      available: null,
-      forceShowActions: false,
+      attemptingRemove: false
     }
   },
   onFileInfoUpdate: function(fileInfo) {
@@ -139,11 +133,6 @@ export let FileActions = React.createClass({
       modal: 'confirmRemove',
     });
   },
-  showActions: function() {
-    this.setState({
-      forceShowActions: true,
-    });
-  },
   handleRemoveConfirmed: function() {
     if (this.props.streamName) {
       lbry.removeFile(this.props.sdHash, this.props.streamName, this.state.deleteChecked);
@@ -164,15 +153,6 @@ export let FileActions = React.createClass({
   componentDidMount: function() {
     this._isMounted = true;
     this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.sdHash, this.onFileInfoUpdate);
-    lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
-      if (!this._isMounted) {
-        return;
-      }
-
-      this.setState({
-        available: peers.length > 0,
-      });
-    });
   },
   componentWillUnmount: function() {
     this._isMounted = false;
@@ -183,15 +163,11 @@ export let FileActions = React.createClass({
   render: function() {
     if (this.state.fileInfo === null)
     {
-      return <section className="file-actions--stub"></section>;
-    }
-
-    if (this.state.available === false && !this.state.forceShowActions) {
-      return <FileUnavailableMessage onShowActionsClicked={this.showActions} />;
+      return null;
     }
 
     const openInFolderMessage = window.navigator.platform.startsWith('Mac') ? 'Open in Finder' : 'Open in Folder',
-          showMenu = !!this.state.fileInfo;
+      showMenu = !!this.state.fileInfo;
 
     let linkBlock;
     if (this.state.fileInfo === false && !this.state.attemptingDownload) {
@@ -213,10 +189,10 @@ export let FileActions = React.createClass({
     }
 
     return (
-      <section className="file-actions">
+      <div>
         {(this.props.metadata.content_type && this.props.metadata.content_type.startsWith('video/')) ? <WatchLink streamName={this.props.streamName} /> : null}
         {this.state.fileInfo !== null || this.state.fileInfo.isMine ?
-          <div className="button-container">{linkBlock}</div>
+         <div className="button-container">{linkBlock}</div>
           : null}
         { showMenu ?
           <DropDownMenu>
@@ -238,7 +214,62 @@ export let FileActions = React.createClass({
 
           <label><FormField type="checkbox" checked={this.state.deleteChecked} onClick={this.handleDeleteCheckboxClicked} /> Delete this file from my computer</label>
         </Modal>
-      </section>
+      </div>
     );
   }
 });
+
+export let FileActions = React.createClass({
+  _isMounted: false,
+  _fileInfoSubscribeId: null,
+
+  propTypes: {
+    streamName: React.PropTypes.string,
+    sdHash: React.PropTypes.string.isRequired,
+    metadata: React.PropTypes.object
+  },
+  getInitialState: function() {
+    return {
+      available: true,
+      forceShowActions: false,
+    }
+  },
+  onShowFileActionsRowClicked: function() {
+    this.setState({
+      forceShowActions: true,
+    });
+  },
+  componentDidMount: function() {
+    this._isMounted = true;
+    lbry.getPeersForBlobHash(this.props.sdHash, (peers) => {
+      if (!this._isMounted) {
+        return;
+      }
+
+      this.setState({
+        available: peers.length > 0,
+      });
+    });
+  },
+  componentWillUnmount: function() {
+    this._isMounted = false;
+  },
+  render: function() {
+    return (<section className="file-actions">
+      {
+        this.state.available || this.state.forceShowActions ?
+         <FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} /> :
+         (<div>
+           <div className="button-container empty">This file is not currently available.</div>
+           <div className="button-container">
+             <ToolTip label="Why?"
+                      body="The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment" />
+           </div>
+           <div className="button-container">
+             <Link label="Try Anyway" className="button-text" onClick={this.onShowFileActionsRowClicked} />
+           </div>
+         </div>)
+      }
+    </section>);
+  }
+});
diff --git a/js/component/file-tile.js b/js/component/file-tile.js
index f4e3c747b..e3a4b83d1 100644
--- a/js/component/file-tile.js
+++ b/js/component/file-tile.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import lbry from '../lbry.js';
-import {Link, ToolTipLink} from '../component/link.js';
+import {Link} from '../component/link.js';
 import {FileActions} from '../component/file-actions.js';
 import {Thumbnail, TruncatedText, CreditAmount} from '../component/common.js';
 
diff --git a/js/component/file-unavailable-message.js b/js/component/file-unavailable-message.js
deleted file mode 100644
index 29cf76de7..000000000
--- a/js/component/file-unavailable-message.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import {Link, ToolTipLink} from '../component/link.js';
-
-const FileUnavailableMessage = React.createClass({
-  _unavailableMessage: "The content on LBRY is hosted by its users. It appears there are no users " +
-                       "connected that have this file at the moment.",
-  propTypes: {
-    onShowActionsClicked: React.PropTypes.func,
-  },
-  render: function() {
-    return (
-      <div className="file-unavailable-message">
-        <span className="empty">This file is not currently available.</span> { ' ' }
-        <ToolTipLink label="Why?" tooltip={this._unavailableMessage} className="not-available-tooltip-link" /> { ' ' }
-        {'onShowActionsClicked' in this.props
-          ? <Link label="Try Anyway" className="button-text" onClick={this.props.onShowActionsClicked} />
-          : null}
-      </div>
-    );
-  }
-});
-
-export default FileUnavailableMessage;
diff --git a/js/component/link.js b/js/component/link.js
index a3d931852..d19e0b46c 100644
--- a/js/component/link.js
+++ b/js/component/link.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Icon, ToolTip} from './common.js';
+import {Icon} from './common.js';
 
 export let Link = React.createClass({
   propTypes: {
@@ -51,49 +51,4 @@ export let Link = React.createClass({
       </a>
     );
   }
-});
-
-export let ToolTipLink = React.createClass({
-  getInitialState: function() {
-    return {
-      showTooltip: false,
-    };
-  },
-  handleClick: function() {
-    if (this.props.tooltip) {
-      this.setState({
-        showTooltip: !this.state.showTooltip,
-      });
-    }
-    if (this.props.onClick) {
-      this.props.onClick();
-    }
-  },
-  handleTooltipMouseOut: function() {
-    this.setState({
-      showTooltip: false,
-    });
-  },
-  render: function() {
-    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 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 icon={this.props.icon} />  : null }
-          {this.props.label}
-        </a>
-        {(!this.props.tooltip ? null :
-          <ToolTip className={toolTipClass} open={this.state.showTooltip} onMouseOut={this.handleTooltipMouseOut}>
-            {this.props.tooltip}
-          </ToolTip>
-        )}
-      </span>
-    );
-  }
-});
+});
\ No newline at end of file
diff --git a/js/component/tooltip.js b/js/component/tooltip.js
new file mode 100644
index 000000000..eb7d7d4fb
--- /dev/null
+++ b/js/component/tooltip.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+export let ToolTip = React.createClass({
+  propTypes: {
+    body: React.PropTypes.string.isRequired,
+    label: React.PropTypes.string.isRequired
+  },
+  getInitialState: function() {
+    return {
+      showTooltip: false,
+    };
+  },
+  handleClick: function() {
+    this.setState({
+      showTooltip: !this.state.showTooltip,
+    });
+  },
+  handleTooltipMouseOut: function() {
+    this.setState({
+      showTooltip: false,
+    });
+  },
+  render: function() {
+    return (
+      <span className={'tooltip ' + (this.props.className || '')}>
+        <a className="tooltip__link" onClick={this.handleClick}>
+          {this.props.label}
+        </a>
+        <div className={'tooltip__body ' + (this.state.showTooltip ? '' : ' hidden')}
+             onMouseOut={this.handleTooltipMouseOut}>
+          {this.props.body}
+        </div>
+      </span>
+    );
+  }
+});
\ No newline at end of file
diff --git a/js/page/discover.js b/js/page/discover.js
index a35515ff7..de59d09d7 100644
--- a/js/page/discover.js
+++ b/js/page/discover.js
@@ -2,7 +2,8 @@ import React from 'react';
 import lbry from '../lbry.js';
 import lighthouse from '../lighthouse.js';
 import {FileTile} from '../component/file-tile.js';
-import {Link, ToolTipLink} from '../component/link.js';
+import {Link} from '../component/link.js';
+import {ToolTip} from '../component/tooltip.js';
 import {BusyMessage} from '../component/common.js';
 
 var fetchResultsStyle = {
@@ -81,9 +82,8 @@ var FeaturedContent = React.createClass({
         </div>
         <div className="span6">
           <h3>
-            Community Content {' '}
-            <ToolTipLink label="What's this?"
-                         tooltip={toolTipText} />
+            Community Content
+            <ToolTip label="What's this?" body={toolTipText} className="tooltip--header"/>
           </h3>
           <FileTile name="one" />
           <FileTile name="two" />
diff --git a/scss/_canvas.scss b/scss/_canvas.scss
index 7a6184a95..a5082d0d9 100644
--- a/scss/_canvas.scss
+++ b/scss/_canvas.scss
@@ -8,7 +8,7 @@ html
 body
 {
   font-family: 'Source Sans Pro', sans-serif;
-  line-height: 1.3333;
+  line-height: $font-line-height;
 }
 
 $drawer-width: 240px;
diff --git a/scss/_global.scss b/scss/_global.scss
index 7c616ac29..4fc770831 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -16,6 +16,7 @@ $color-money: #216C2A;
 $color-meta-light: #505050;
 
 $font-size: 16px;
+$font-line-height: 1.3333;
 
 $mobile-width-threshold: 801px;
 $max-content-width: 1000px;
diff --git a/scss/_gui.scss b/scss/_gui.scss
index a184f6ace..5d7685037 100644
--- a/scss/_gui.scss
+++ b/scss/_gui.scss
@@ -1,7 +1,7 @@
 @import "global";
 
 @mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
-  color: $color;
+
   .icon
   {
     &:first-child {
@@ -29,6 +29,7 @@
   }
 
   color: $color;
+  cursor: pointer;
 }
 
 .icon-fixed-width {
@@ -200,7 +201,7 @@ input[type="text"], input[type="search"]
 }
 .button-text-help
 {
-  @include text-link(#5b8c80);
+  @include text-link(#aaa);
   font-size: 0.8em;
 }
 
diff --git a/scss/all.scss b/scss/all.scss
index 1621fc47f..5193fe5e1 100644
--- a/scss/all.scss
+++ b/scss/all.scss
@@ -7,8 +7,6 @@
 @import "component/_table";
 @import "component/_file-actions.scss";
 @import "component/_file-tile.scss";
-@import "component/_file-unavailable-message.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/_file-actions.scss b/scss/component/_file-actions.scss
index 5117b11f5..6b3e934ee 100644
--- a/scss/component/_file-actions.scss
+++ b/scss/component/_file-actions.scss
@@ -2,9 +2,10 @@
 
 $color-download: #444;
 
-.file-actions--stub
+.file-actions
 {
-  height: $height-button;
+  line-height: $height-button;
+  min-height: $height-button;
 }
 
 .file-actions__download-status-bar
diff --git a/scss/component/_file-tile.scss b/scss/component/_file-tile.scss
index b5118fb22..a5c73a175 100644
--- a/scss/component/_file-tile.scss
+++ b/scss/component/_file-tile.scss
@@ -28,14 +28,4 @@
   color: #444;
   margin-top: 12px;
   font-size: 0.9em;
-}
-
-.file-tile__not-available-message {
-  height: auto;
-  text-align: right;
-  color: $color-notice;
-}
-
-.file-tile .not-available-tooltip-link__tooltip { /* temporary */
-  left: -225px;
-}
+}
\ No newline at end of file
diff --git a/scss/component/_file-unavailable-message.scss b/scss/component/_file-unavailable-message.scss
deleted file mode 100644
index d2f062a64..000000000
--- a/scss/component/_file-unavailable-message.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.file-unavailable-message {
-  font-size: 14px;
-
-  .not-available-tooltip-link__tooltip { /* temporary */
-    left: -225px;
-  }
-
-  .not-available-tooltip-link__link {
-    @include text-link();
-    font-size: 14px;
-    vertical-align: baseline;
-  }
-}
\ No newline at end of file
diff --git a/scss/component/_tooltip.scss b/scss/component/_tooltip.scss
index c856f3a02..9a6ccd7da 100644
--- a/scss/component/_tooltip.scss
+++ b/scss/component/_tooltip.scss
@@ -1,13 +1,35 @@
+@import "../global";
+
 .tooltip {
-  text-align: left;
+  position: relative;
+}
+
+.tooltip__link {
+  @include text-link();
+}
+
+.tooltip__body {
+  $tooltip-body-width: 300px;
+
   position: absolute;
   z-index: 1;
-  top: 100%;
-  left: -120px;
-  width: 260px;
-  padding: 15px;
+  left: 50%;
+  margin-left: $tooltip-body-width * -1 / 2;
+
+  box-sizing: border-box;
+  padding: $spacing-vertical / 2;
+  width: $tooltip-body-width;
   border: 1px solid #aaa;
   color: $color-text-dark;
   background-color: $color-bg;
-  font-size: 14px;
+  font-size: $font-size * 7/8;
+  line-height: $font-line-height;
+  box-shadow: $default-box-shadow;
 }
+
+.tooltip--header .tooltip__link {
+  @include text-link(#aaa);
+  font-size: $font-size * 3/4;
+  margin-left: $padding-button;
+  vertical-align: middle;
+}
\ No newline at end of file
diff --git a/scss/component/_tooltiplink.scss b/scss/component/_tooltiplink.scss
deleted file mode 100644
index 085a2d8ad..000000000
--- a/scss/component/_tooltiplink.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.tooltip-link {
-  position: relative;
-}
-
-.tooltip-link__link {
-  font-size: 12px;
-  color: #aaa;
-  vertical-align: 15%;
-  &:hover {
-    text-decoration: underline;
-  }
-}