Merge pull request #1014 from weseek/feat/thread_comments_replydesign

design

src/client/js/components/PageComments.jsx

@@ -161,10 +161,10 @@ class PageComments extends React.Component {
                       <div className="col-xs-offset-6 col-sm-offset-6 col-md-offset-6 col-lg-offset-6">
                         <Button
                           bsStyle="primary"
-                          className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b"
+                          className="fcbtn btn btn-outline btn-rounded btn-xxs"
                           onClick={() => { return this.replyButtonClickedHandler(commentId) }}
                         >
-                          <i className="icon-bubble"></i> Reply
+                          Reply <i className="fa fa-mail-reply"></i>
                         </Button>
                       </div>
                     )

src/client/styles/scss/_comment.scss

@@ -1,46 +1,56 @@
-.main-container {
-  .page-comment-main {
-    // delete button
-    .page-comment-control {
-      position: absolute;
-      top: 0;
-      right: 0;
-      display: none; // default hidden
-    }
-  }
-
-  // modal
-  .page-comment-delete-modal .modal-content {
-    .modal-body {
-      .comment-body {
-        max-height: 13em;
-        // scrollable
-        overflow-y: auto;
-      }
-    }
-  }
-}
-
-.main-container {
-  .page-comments {
-    .page-comments-list-toggle-newer,
-    .page-comments-list-toggle-older {
-      display: block;
-      margin: 8px;
-      font-size: 0.9em;
-      text-align: center;
-    }
-
-    // older comments
-    .page-comments-list-older .page-comment {
-    }
-    // newer comments
-    .page-comments-list-newer .page-comment {
-      opacity: 0.7;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-}
+.main-container {
+  .page-comment-main {
+    // delete button
+    .page-comment-control {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: none; // default hidden
+    }
+  }
+
+  // modal
+  .page-comment-delete-modal .modal-content {
+    .modal-body {
+      .comment-body {
+        max-height: 13em;
+        // scrollable
+        overflow-y: auto;
+      }
+    }
+  }
+}
+
+.main-container {
+  .page-comments {
+    .page-comments-list-toggle-newer,
+    .page-comments-list-toggle-older {
+      display: block;
+      margin: 8px;
+      font-size: 0.9em;
+      text-align: center;
+    }
+
+    // older comments
+    .page-comments-list-older .page-comment {
+    }
+    // newer comments
+    .page-comments-list-newer .page-comment {
+      opacity: 0.7;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.btn-xxs {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 10px;
+  font-size: 11px;
+  border-radius: 1px;
+}