From 9ebfb49360a43a9b8046fb55a3142b953501c6d0 Mon Sep 17 00:00:00 2001
From: Ryan Lerch <rlerch@redhat.com>
Date: Feb 15 2018 11:31:26 +0000
Subject: style the tags at the top of the halp widget


fixes #437

---

diff --git a/js/app/widgets/halp/Hub.js b/js/app/widgets/halp/Hub.js
index 7728662..f9249a6 100644
--- a/js/app/widgets/halp/Hub.js
+++ b/js/app/widgets/halp/Hub.js
@@ -9,10 +9,10 @@ export default class Hub extends React.Component {
   }
 
   render() {
-    var activeClass = this.props.active ? "active" : "inactive";
+    var activeClass = this.props.active ? "badge-primary" : "badge-light";
     return (
       <span
-        className={"hub " + activeClass}
+        className={"hub badge " + activeClass}
         onClick={this.onClick.bind(this)}
         >{"@" + this.props.name}</span>
     );
diff --git a/js/app/widgets/halp/HubsList.js b/js/app/widgets/halp/HubsList.js
index 9f39afe..35ad8d2 100644
--- a/js/app/widgets/halp/HubsList.js
+++ b/js/app/widgets/halp/HubsList.js
@@ -25,14 +25,18 @@ export default class HubsList extends React.Component {
     }.bind(this));
     return (
       <div className="hubs">
-        <span className="fa fa-tags" aria-hidden="true"></span>
+        <span className="fa fa-tags text-muted" aria-hidden="true"></span>
         { (hubNodes.length !== 0) ?
-            hubNodes
+          <span className="tag-list">
+            { hubNodes }
+          </span>
           :
+            <span className="text-muted">
             <FormattedMessage
               tagName="em"
               {...messages.watching_all_hubs}
               />
+            </span>
         }
       </div>
     );
diff --git a/js/app/widgets/halp/halp.css b/js/app/widgets/halp/halp.css
index cecc420..144ebac 100644
--- a/js/app/widgets/halp/halp.css
+++ b/js/app/widgets/halp/halp.css
@@ -4,27 +4,41 @@
  * Widget halp
  */
 
-.widget-halp {
-}
-.widget-halp .hubs {
-    color: gray;
-}
+
 .widget-halp .hubs .fa {
     margin-right: 4px;
 }
+
 .widget-halp .hubs span.hub {
-    border: 1px solid gray;
-    border-radius: 2px;
-    background-color: #eee;
-    display: inline-block;
-    margin: 2px 3px 2px 0;
-    padding: 1px 2px;
-    font-size: 90%;
     cursor: pointer;
+    line-height: 1.2em;
+    margin-left: 2px;
+    margin-right:2px;
 }
-.widget-halp .hubs span.hub.inactive {
-    background-color: white;
+
+.widget-halp .hubs span.tag-list {
+    font-size: 1.2em;
 }
+
+.widget-halp .hubs span.hub.badge-primary {
+    border: 1px solid #294172;
+}
+
+.widget-halp .hubs span.hub.badge-primary:hover {
+    background-color: #294172;
+}
+
+.widget-halp .hubs span.hub.badge-light {
+    background-color: #eceeef;
+    color: #808080;
+    border: 1px solid #d5d5d5;
+}
+
+.widget-halp .hubs span.hub.badge-light:hover {
+    background-color: #d5d5d5;
+    border: 1px solid #a3a3a3;
+}
+
 .widget-halp .Spinner {
     margin: 0 auto;
 }