Merge pull request #2883 from weseek/feat/gw-3968

feat/gw-3968

src/client/js/components/BookmarkButton.jsx

@@ -36,20 +36,18 @@ class BookmarkButton extends React.Component {
     }
 
     return (
-      <div className="d-flex">
-        <button
-          type="button"
-          onClick={this.handleClick}
-          className={`btn rounded-circle btn-bookmark border-0
+      <button
+        type="button"
+        onClick={this.handleClick}
+        className={`btn btn-bookmark border-0
           ${`btn-${this.props.size}`}
           ${pageContainer.state.isBookmarked ? 'active' : ''}`}
-        >
-          <i className="icon-star"></i>
-        </button>
-        <div className="total-bookmarks">
+      >
+        <i className="icon-star mr-3"></i>
+        <span className="total-bookmarks">
           {pageContainer.state.sumOfBookmarks}
-        </div>
-      </div>
+        </span>
+      </button>
     );
   }
 

src/client/js/components/LikeButton.jsx

@@ -36,19 +36,17 @@ class LikeButton extends React.Component {
     }
 
     return (
-      <div className="d-flex">
-        <button
-          type="button"
-          onClick={this.handleClick}
-          className={`btn rounded-circle btn-like border-0 d-edit-none
+      <button
+        type="button"
+        onClick={this.handleClick}
+        className={`btn btn-like border-0 d-edit-none
         ${pageContainer.state.isLiked ? 'active' : ''}`}
-        >
-          <i className="icon-like"></i>
-        </button>
-        <div className="total-likes">
+      >
+        <i className="icon-like mr-3"></i>
+        <span className="total-likes">
           {pageContainer.state.sumOfLikers}
-        </div>
-      </div>
+        </span>
+      </button>
     );
   }
 

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -119,7 +119,7 @@ const PageReactionButtons = ({ appContainer, pageContainer }) => {
         <LikeButton pageId={pageId} isLiked={isLiked} />
       </span>
       )}
-      <span className="mr-2">
+      <span>
         <BookmarkButton pageId={pageId} crowi={appContainer} />
       </span>
     </>
@@ -190,7 +190,7 @@ const GrowiSubNavigation = (props) => {
       {/* Right side */}
       <div className="d-flex">
 
-        <div className="d-flex flex-column align-items-end justify-content-center">
+        <div className="d-flex flex-column align-items-end">
           <div className="d-flex">
             { !isPageInTrash && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
           </div>

src/client/styles/scss/_override-bootstrap-variables.scss

@@ -39,6 +39,7 @@ $line-height-base: 1.42857;
 $text-muted: $gray-500;
 $blockquote-small-color: $gray-500;
 
+
 //== Components
 //
 $border-radius:               .15rem;

src/client/styles/scss/_subnav.scss

@@ -35,23 +35,15 @@
 
   .btn-like,
   .btn-bookmark {
-    width: 40px;
     height: 40px;
     font-size: 20px;
+    border-radius: $border-radius-xl;
   }
 
-  .total-likes {
-    width: 8px;
-    height: 16px;
-    padding: 0.5em 0 0 0;
-    font-size: 16px;
-  }
-
+  .total-likes,
   .total-bookmarks {
-    width: 8px;
-    height: 16px;
-    padding: 0.5em 0 0 0;
-    font-size: 16px;
+    font-size: 17px;
+    font-weight: $font-weight-bold;
   }
 
   ul.authors {
@@ -94,19 +86,13 @@
     .btn-bookmark {
       @extend .btn-sm;
 
-      width: 30px;
       height: 30px;
       font-size: 15px !important;
+      border-radius: $border-radius-xl;
     }
 
-    .total-likes {
-      width: 6px;
-      height: 12px;
-      font-size: 12px;
-    }
-
+    .total-likes,
     .total-bookmarks {
-      width: 6px;
       height: 12px;
       font-size: 12px;
     }