Merge pull request #2983 from weseek/imprv/gw4213-design-fix-for-comment-area-new

Imprv/gw4213 design fix for comment area new

src/client/js/components/PageComments.jsx

@@ -170,7 +170,7 @@ class PageComments extends React.Component {
               className="btn-comment-reply"
               onClick={() => { return this.replyButtonClickedHandler(commentId) }}
             >
-              <i className="icon-fw icon-action-redo"></i> Reply
+              <i className="icon-fw icon-action-undo"></i> Reply
             </Button>
           </div>
         )}

src/client/styles/scss/_comment_growi.scss

@@ -33,8 +33,8 @@
   }
 
   .page-comments-row {
-    margin: 30px 0px;
-    border-top: 5px solid;
+    // offset margin left to apply bg-color
+    margin: 30px 0px 30px -15px;
   }
 
   .page-comments {
@@ -98,13 +98,8 @@
   }
   // reply button
   .btn.btn-comment-reply {
-    width: 120px;
     margin-top: 0.5em;
-    margin-right: 15px;
-
-    border-top: none;
-    border-right: none;
-    border-left: none;
+    border: none;
   }
 
   // display cheatsheet for comment form only

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -343,6 +343,12 @@ body.on-edit {
   }
 }
 
+.growi .main {
+  .page-comments-row {
+    background: $bgcolor-subnav;
+  }
+}
+
 /*
  * GROWI tags
  */

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -273,6 +273,12 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
+.growi .main {
+  .page-comments-row {
+    background: $bgcolor-subnav;
+  }
+}
+
 /*
  * GROWI tags
  */

src/client/styles/scss/theme/_apply-colors.scss

@@ -452,16 +452,12 @@ body.on-edit {
  * GROWI comment form
  */
 .growi .main {
-  .page-comments-row {
-    border-top-color: $border-color-theme;
-  }
-
   .page-comment .page-comment-main,
   .page-comment-form .comment-form-main {
-    background-color: darken($bgcolor-global, 4%);
+    background-color: $bgcolor-global;
 
     &:before {
-      border-right-color: darken($bgcolor-global, 4%);
+      border-right-color: $bgcolor-global;
     }
 
     .nav.nav-tabs {

src/server/views/layout-growi/widget/comments.html

@@ -1,8 +1,8 @@
 <div class="page-comments-row row d-edit-none d-print-none">
 
-  <div class="page-comments col-xl-7 col-lg-9">
+  <div class="page-comments col-lg-10 my-5">
 
-    <h4 class="my-2"><i class="icon-fw icon-bubbles"></i> Comments</h4>
+    <h1 class="border-bottom pb-2 mb-3"><i class="icon-fw icon-bubbles"></i> Comments</h1>
 
     <div class="page-comments-list" id="page-comments-list"></div>