Merge pull request #815 from lbryio/channel-name-page

Highlight channel names in pages.

CHANGELOG.md

@@ -14,6 +14,8 @@ Web UI version numbers should always match the corresponding version of LBRY App
 ### Changed
   * The credit balance displayed in the main app navigation displays two decimal places instead of one.
   * Moved all redux code into /redux folder
+  * Channel names in pages are highlighted to indicate them being clickable(#814)
+  *
 
 ### Fixed
   * Long channel names causing inconsistent thumbnail sizes (#721)

src/renderer/js/component/uriIndicator/view.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { Icon } from "component/common";
 import Link from "component/link";
-import lbryuri from "lbryuri.js";
+import lbryuri from "lbryuri";
+import classnames from "classnames";
 
 class UriIndicator extends React.PureComponent {
   componentWillMount() {
@@ -60,7 +61,12 @@ class UriIndicator extends React.PureComponent {
 
     const inner = (
       <span>
-        <span className={`channel-name ${smallCard && "channel-name--small"}`}>
+        <span
+          className={classnames("channel-name", {
+            "channel-name--small": smallCard,
+            "button-text no-underline": link,
+          })}
+        >
           {channelName}
         </span>{" "}
         {!signatureIsValid ? (

src/renderer/scss/component/_channel-indicator.scss

@@ -1,9 +1,9 @@
 
 .channel-name {
-  display: inline-block;
+  display: inline-flex;
   overflow: hidden;
   white-space: nowrap;
-  text-overflow: ellipsis
+  text-overflow: ellipsis;
 }
 
 // this shouldn't know about the card width