adjust button style

src/client/js/components/BookmarkButton.jsx

@@ -78,7 +78,7 @@ export default class BookmarkButton extends React.Component {
         href="#"
         title="Bookmark"
         onClick={this.handleClick}
-        className={`btn btn-circle btn-outline-warning border-0 ${addedClassName}`}
+        className={`btn btn-circle btn-outline-warning btn-bookmark border-0 ${addedClassName}`}
       >
         <i className="icon-star"></i>
       </button>

src/client/js/components/LikeButton.jsx

@@ -59,7 +59,7 @@ class LikeButton extends React.Component {
         href="#"
         title="Like"
         onClick={this.handleClick}
-        className={`btn btn-circle btn-outline-info border-0 ${addedClassName}`}
+        className={`btn btn-circle btn-outline-info btn-like border-0 ${addedClassName}`}
       >
         <i className="icon-like"></i>
       </button>

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

@@ -46,7 +46,7 @@ const GrowiSubNavigation = (props) => {
       </div>
 
       {/* Header Button */}
-      <div className="ml-1">
+      <div className="mr-2">
         <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />
       </div>
       <div>

src/client/styles/scss/atoms/_buttons.scss

@@ -26,15 +26,18 @@
   border-radius: 35px;
 }
 
-#like-button,
-#bookmark-button {
-  & button {
-    font-size: 1.2em;
-    line-height: 0.8em;
+.btn-like,
+.btn-bookmark {
+  font-size: 1.2em;
+  line-height: 0.8em;
 
-    &:not(:hover):not(.active) {
-      background-color: transparent;
-    }
+  &.active {
+    // header buttons are always white for active
+    color: white !important;
+  }
+
+  &:not(:hover):not(.active) {
+    background-color: transparent;
   }
 }