Merge pull request #932 from weseek/imprv/adjust-styles-for-tag

adjust styles for tag

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

@@ -109,7 +109,7 @@ class TagLabel extends React.Component {
         )}
         {tags}
         <i
-          className="manage-tags icon-plus"
+          className="manage-tags ml-2 icon-plus"
           onClick={this.handleShowModal}
 
         >

src/client/js/components/TagsList.jsx

@@ -74,11 +74,8 @@ export default class TagsList extends React.Component {
     return tagData.map((data) => {
       return (
         <a key={data.name} href={`/_search?q=tag:${data.name}`} className="list-group-item">
-          <div className="d-flex">
-            <i className="my-auto icon-tag"></i>
-            <p className="my-auto list-tag-name"> {data.name}</p>
-            <span className="my-auto ml-4 list-tag-count label text-muted">{data.count}</span>
-          </div>
+          <i className="icon-tag mr-2"></i>{data.name}
+          <span className="ml-4 list-tag-count label label-default text-muted">{data.count}</span>
         </a>
       );
     });
@@ -171,7 +168,7 @@ export default class TagsList extends React.Component {
 
     return (
       <div>
-        <ul className="list-group　mx-4">{tagList}</ul>
+        <ul className="list-group tags-list">{tagList}</ul>
         <div className="text-center">
           <Pagination>{paginationItems}</Pagination>
         </div>

src/client/styles/scss/_tag.scss

@@ -1,30 +1,28 @@
-.manage-tags {
-  margin-left: 5px;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.tag-icon:not(:first-child) {
-  margin-left: 5px;
-}
+.tag-viewer {
+  .manage-tags {
+    font-size: 10px;
+    cursor: pointer;
+  }
 
-.display-of-notag,
-.tag-icon {
-  font-size: 10px;
-}
+  .tag-icon:not(:first-child) {
+    margin-left: 5px;
+  }
 
-.tag-name {
-  margin-left: 1px;
-  font-size: 10px;
-}
+  .display-of-notag,
+  .tag-icon {
+    font-size: 10px;
+  }
 
-.list-tag-name {
-  margin-left: 5px;
+  .tag-name {
+    margin-left: 1px;
+    font-size: 10px;
+  }
 }
 
-.list-tag-count {
-  width: 30px;
-  background: rgba(0, 0, 0, 0.08);
+.tags-list {
+  .label.list-tag-count {
+    background: rgba(0, 0, 0, 0.08);
+  }
 }
 
 #editTagModal {