add tag-scss

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

@@ -50,47 +50,20 @@ export default class TagLabel extends React.Component {
 
   render() {
     const tags = [];
-    const tagStyle = {
-      float: 'left',
-      color: 'gray',
-    };
-
-    const tagListStyle = {
-      border: 'none',
-      fontSize: '10px',
-      marginLeft: '5px',
-    };
-
-    const tagButtonStyle = {
-      cursor: 'pointer',
-      fontSize: '15px',
-      marginLeft: '15px',
-      marginRight: '10px',
-      paddingTop: '1px',
-      float: 'left',
-    };
-
-
-    const tagLinkStyle = {
-      marginLeft: '2px',
-      color: 'gray',
-      fontSize: '10px',
-    };
 
     for (let i = 0; i < this.state.currentPageTags.length; i++) {
       tags.push(
-        <i style={tagListStyle} className="icon-tag"></i>,
-        <a key={i.toString()} style={tagLinkStyle}>{this.state.currentPageTags[i]}</a>,
+        <i className="tag-icon icon-tag"></i>,
+        <a key={i.toString()}>{this.state.currentPageTags[i]}</a>,
       );
 
     }
 
     return (
-      <div style={tagStyle}>
+      <div className="tag-viewer">
         {tags}
         <i
-          className="icon-wrench"
-          style={tagButtonStyle}
+          className="manage-tags icon-wrench"
           onClick={this.handleShowModal}
 
         >

src/client/styles/scss/_tag.scss

@@ -0,0 +1,29 @@
+.title-container {
+  .tag-viewer {
+    float: left;
+    color: gray;
+
+    .manage-tags {
+      cursor: pointer;
+      font-size: 15px;
+      margin-left: 15px;
+      margin-right: 10px;
+      padding-top: 1px;
+      float: left;
+    }
+
+    .tag-icon {
+      border: none;
+      font-size: 10px;
+      margin-left: 5px;
+    }
+
+    a {
+      margin-left: 2px;
+      color: gray;
+      font-size: 10px;
+    }
+  }
+
+
+}

src/client/styles/scss/style-app.scss

@@ -39,6 +39,7 @@
 @import 'user_growi';
 @import 'handsontable';
 @import 'wiki';
+@import 'tag';
 
 /*
  * for Guest User Mode
@@ -64,14 +65,17 @@
     width: 48px;
     height: 48px;
   }
+
   &.picture-md {
     width: 24px;
     height: 24px;
   }
+
   &.picture-sm {
     width: 18px;
     height: 18px;
   }
+
   &.picture-xs {
     width: 14px;
     height: 14px;