tag-list-component

src/client/js/components/TagsList.jsx

@@ -74,7 +74,11 @@ 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">
-          <p className="float-left my-0">{data.name}</p>
+          <div className="d-flex">
+            <i className="list-tag-icon icon-tag"></i>
+            <p className="my-0 list-tag-name"> {data.name}</p>
+            <span className="list-tag-count">{data.count}</span>
+          </div>
         </a>
       );
     });

src/client/styles/scss/_tag.scss

@@ -0,0 +1,46 @@
+.manage-tags {
+  margin-left: 5px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.tag-icon:not(:first-child) {
+  margin-left: 5px;
+}
+
+.display-of-notag,
+.tag-icon {
+  font-size: 10px;
+}
+
+.tag-name {
+  margin-left: 1px;
+  font-size: 10px;
+}
+
+.list-tag-icon {
+  font-size: 20px;
+  margin: auto 0px;
+}
+
+.list-tag-name {
+  font-size: 20px;
+  margin-left: 5px;
+}
+
+.list-tag-count {
+  color: rgba(60, 74, 96, 0.5);
+  background: rgba(0, 0, 0, 0.08);
+  padding: 2px 20px;
+  border-radius: 40px;
+  font-size: 100%;
+  height: 20px;
+  margin: auto 20px;
+}
+
+
+#editTagModal {
+  .form-control {
+    height: auto;
+  }
+}