fix bookmark erea

src/client/js/components/BookmarkButton.jsx

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

src/client/styles/scss/_subnav.scss

@@ -39,6 +39,7 @@
     height: 40px;
     font-size: 20px;
   }
+
   .btn-like-erea {
     border-radius: 5px;
     @include button-outline-variant($secondary, lighten($info, 15%), rgba(lighten($info, 10%), 0.5), rgba(lighten($info, 10%), 0.5));
@@ -51,6 +52,18 @@
     }
   }
 
+  .btn-bookmark-erea {
+    border-radius: 5px;
+    @include button-outline-variant($secondary, $warning, rgba(lighten($warning, 20%), 0.5), rgba(lighten($warning, 20%), 0.5));
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: $warning;
+    }
+    &:not(:disabled):not(.disabled):not(:hover) {
+      background-color: transparent;
+    }
+  }
+
   .total-likes {
     width: 8px;
     height: 16px;