Merge pull request #1229 from weseek/support/apply-bst4-side-bar

GW-289 サイドバーを直す：Support/apply bst4 side bar

src/client/js/components/User/UserPicture.jsx

@@ -29,7 +29,7 @@ export default class UserPicture extends React.Component {
   }
 
   getClassName() {
-    const className = ['img-circle', 'picture'];
+    const className = ['rounded-circle', 'picture'];
     // size
     if (this.props.size) {
       className.push(`picture-${this.props.size}`);

src/client/styles/scss/_layout.scss

@@ -95,7 +95,7 @@
       // first level of li
       > ul > li {
         padding: 5px;
-        margin: 4px 4px 4px 15px;
+        margin: 4px 4px 4px 17px;
       }
     }
   }

src/client/styles/scss/_layout_growi.scss

@@ -1,11 +1,16 @@
+@import 'layout_variable';
+@import 'layout';
+
 .growi.main-container {
   .content-main {
     padding: 0;
   }
 
   .liker-and-seenusers {
-    height: 42px; // .nav height
-    border-bottom: 1px solid $border;
+    // adjusting position with negative margin
+    height: $nav-main-tab-height;
+    line-height: 1.25;
+    border-bottom: 1px solid $grw-line-gray;
 
     .liker-user-count,
     .seen-user-count {

src/client/styles/scss/_layout_variable.scss

@@ -23,6 +23,7 @@ $grw-sea-green: seagreen;
 $grw-alice-blue: aliceblue;
 
 /* gray */
+$grw-line-gray: #dee2e6;
 $grw-line-light-gray: #ddd;
 
 /* white */