Merge pull request #74 from lbryio/report-link

Add infringement report link to Show page

js/page/show.js

@@ -60,6 +60,9 @@ var FormatItem = React.createClass({
             {mediaType == 'video' ? <WatchLink streamName={this.props.name} button="primary" /> : null}
             <DownloadLink streamName={this.props.name} button="alt" />
           </section>
+          <section>
+            <Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
+          </section>
         </div>
       </div>
       );

scss/_gui.scss

@@ -1,5 +1,34 @@
 @import "global";
 
+@mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
+  color: $color;
+  .icon
+  {
+    &:first-child {
+      padding-right: 5px;
+    }
+    &:last-child:not(:only-child) {
+      padding-left: 5px;
+    }
+  }
+
+  &:not(.no-underline) {
+    text-decoration: underline;
+    .icon {
+      text-decoration: none;
+    }
+  }
+  &:hover
+  {
+    opacity: $hover-opacity;
+    transition: opacity .225s ease;
+    text-decoration: underline;
+    .icon {
+      text-decoration: none;
+    }
+  }
+}
+
 .icon-fixed-width {
   /* This borrowed is from a component of Font Awesome we're not using, maybe add it? */
   width: (18em / 14);
@@ -151,32 +180,12 @@ input[type="text"], input[type="search"]
 }
 .button-text
 {
-  color: $color-primary;
-  .icon
-  {
-    &:first-child {
-      padding-right: 5px;
-    }
-    &:last-child:not(:only-child) {
-      padding-left: 5px;
-    }
-  }
-
-  &:not(.no-underline) {
-    text-decoration: underline;
-    .icon {
-      text-decoration: none;
-    }
-  }
-  &:hover
-  {
-    opacity: 0.70;
-    transition: opacity .225s ease;
-    text-decoration: underline;
-    .icon {
-      text-decoration: none;
-    }
-  }
+  @include text-link();
+}
+.button-text-help
+{
+  @include text-link(#5b8c80);
+  font-size: 0.8em;
 }
 
 .icon:only-child {