FB

src/client/js/components/Page/TagLabel.jsx

@@ -53,24 +53,19 @@ class TagLabel extends React.Component {
     const tags = [];
     const { t } = this.props;
 
-    if (this.state.currentPageTags.length === 0) {
-      tags.push(
-        <a onClick={this.handleShowModal}>
-          <span>{ t('Add tags for this page') }</span>
-        </a>,
-      );
-    }
-
     for (let i = 0; i < this.state.currentPageTags.length; i++) {
       tags.push(
         <i className="tag-icon icon-tag"></i>,
-        <a key={i.toString()}>{this.state.currentPageTags[i]}</a>,
+        <a className="tag-name text-muted" key={i.toString()}>{this.state.currentPageTags[i]}</a>,
       );
 
     }
 
     return (
-      <div className="tag-viewer">
+      <div className="tag-viewer text-muted">
+        {this.state.currentPageTags.length === 0 && (
+          <a className="display-of-notag text-muted" onClick={this.handleShowModal}>{ t('Add tags for this page') }</a>
+        )}
         {tags}
         <i
           className="manage-tags icon-plus"

src/client/styles/scss/_tag.scss

@@ -1,29 +1,21 @@
-.title-container {
-  .tag-viewer {
-    float: left;
-    color: gray;
-
-    .manage-tags {
-      cursor: pointer;
-      font-size: 12px;
-      margin-left: 5px;
-    }
-
-    .tag-icon {
-      border: none;
-      font-size: 10px;
-    }
+.manage-tags {
+  margin-left: 5px;
+  font-size: 12px;
+  cursor: pointer;
+}
 
-    .tag-icon:not(:first-child) {
-      margin-left: 5px;
-    }
+.tag-icon:not(:first-child) {
+  margin-left: 5px;
+}
 
-    a {
-      color: gray;
-      font-size: 10px;
-    }
-  }
+.display-of-notag,
+.tag-icon {
+  font-size: 10px;
+}
 
+.tag-name {
+  margin-left: 1px;
+  font-size: 10px;
 }
 
 #editTagModal {