adjust bookmark and like

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-bookmark btn btn-circle btn-outline-secondary border-0 ${addedClassName}`}
+        className={`btn btn-circle btn-outline-warning 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-like btn btn-circle btn-outline-secondary border-0 ${addedClassName}`}
+        className={`btn btn-circle btn-outline-info border-0 ${addedClassName}`}
       >
         <i className="icon-like"></i>
       </button>

src/client/styles/scss/_layout.scss

@@ -70,6 +70,18 @@
       }
     }
   }
+
+  #like-button,
+  #bookmark-button {
+    & button {
+      font-size: 1.2em;
+      line-height: 0.8em;
+
+      &:not(:hover):not(.active) {
+        background-color: transparent;
+      }
+    }
+  }
 }
 
 .main {

src/client/styles/scss/_page.scss

@@ -47,47 +47,6 @@
     }
   }
 
-  .btn-like,
-  .btn-bookmark {
-    font-size: 1.2em;
-    line-height: 0.8em;
-    border: none;
-
-    &:not(:hover):not(.active) {
-      background-color: transparent;
-    }
-  }
-
-  .btn-like {
-    &.active {
-      background-color: $info;
-      border: 1px solid $info;
-
-      &:hover,
-      &:focus,
-      &.focus {
-        background-color: $info;
-        border: 1px solid $info;
-        opacity: 0.8;
-      }
-    }
-  }
-
-  .btn-bookmark {
-    &.active {
-      background: $warning;
-      border: 1px solid $warning;
-
-      &:hover,
-      &:focus,
-      &.focus {
-        background: $warning;
-        border: 1px solid $warning;
-        opacity: 0.8;
-      }
-    }
-  }
-
   .url-line {
     font-size: 1rem;
     color: #999;