Darken hashtags in channel list

client/css/style.css

@@ -307,16 +307,24 @@ i[class*=' icon-']:before {
   margin-right: 5px;
 }
 
+.tab-prefix {
+  color: #777;
+}
+
 .tab-label {
   margin: 5px;
   margin-left: 15px;
   font-size: 12px;
-  color: #999;
+  color: #777;
   display: flex;
   align-items: center;
   height: 25px;
 }
 
+.tab-label-channels {
+  cursor: pointer;
+}
+
 .tab-label span {
   flex: 1;
 }
@@ -326,10 +334,10 @@ i[class*=' icon-']:before {
   height: 100%;
   font-size: 20px;
   background: none;
-  color: #999;
+  color: #777;
 }
 
-.tab-label button:hover {
+.tab-label:hover button {
   color: #ccc;
 }
 
@@ -345,7 +353,7 @@ i[class*=' icon-']:before {
 
 .side-buttons button {
   background: #222;
-  color: #999;
+  color: #777;
   flex: 1;
 }
 

client/js/components/TabList.js

@@ -60,7 +60,7 @@ export default class TabList extends PureComponent {
       tabs.push(
         <div
           key={`${address}-chans}`}
-          className="tab-label"
+          className="tab-label tab-label-channels"
           onClick={() => openModal('channel', address)}
         >
           <span>CHANNELS {chanLabel}</span>

client/js/components/TabListItem.js

@@ -1,6 +1,18 @@
 import React from 'react';
 import classnames from 'classnames';
 
+function splitContent(content) {
+  let start = 0;
+  while (content[start] === '#') {
+    start++;
+  }
+
+  if (start > 0) {
+    return [content.slice(0, start), content.slice(start)];
+  }
+  return [null, content];
+}
+
 const TabListItem = ({
   target,
   content,
@@ -19,9 +31,14 @@ const TabListItem = ({
     selected
   });
 
+  const [prefix, name] = splitContent(content);
+
   return (
     <p className={className} onClick={() => onClick(network, target)}>
-      <span className="tab-content">{content}</span>
+      <span className="tab-content">
+        {prefix && <span className="tab-prefix">{prefix}</span>}
+        {name}
+      </span>
     </p>
   );
 };