read button style

packages/app/src/components/BookmarkButtons.module.scss

@@ -1,11 +1,10 @@
 @use '~/styles/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
 
-.btn.btn-bookmark {
-  @include bs.button-outline-variant(rgba(bs.$secondary, 50%), $orange, rgba(lighten(var.$orange, 20%), 0.5), rgba(lighten(var.$orange, 20%), 0.5));
+.btn-bookmark {
+  @include bs.button-outline-variant(rgba(bs.$secondary, 50%), bs.$orange, rgba(lighten(bs.$orange, 20%), 0.5), rgba(lighten(bs.$orange, 20%), 0.5));
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
-    color: var.$orange;
+    color: bs.$orange;
   }
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;

packages/app/src/components/BookmarkButtons.tsx

@@ -9,6 +9,8 @@ import { IUser } from '../interfaces/user';
 
 import UserPictureList from './User/UserPictureList';
 
+import styles from './BookmarkButtons.module.scss';
+
 interface Props {
   bookmarkCount?: number
   isBookmarked?: boolean
@@ -55,7 +57,7 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
         type="button"
         id="bookmark-button"
         onClick={handleClick}
-        className={`btn btn-bookmark border-0
+        className={`btn ${styles['btn-bookmark']} border-0
           ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
         <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>

packages/app/src/components/LikeButtons.module.scss

@@ -1,11 +1,10 @@
 @use '~/styles/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
 
-.btn.btn-like {
-  @include bs.button-outline-variant(rgba(bs.$secondary, 50%), lighten(var.$red, 15%), rgba(lighten(var.$red, 10%), 0.15), rgba(lighten(var.$red, 10%), 0.5));
+.btn-like {
+  @include bs.button-outline-variant(rgba(bs.$secondary, 50%), lighten(bs.$red, 15%), rgba(lighten(bs.$red, 10%), 0.15), rgba(lighten(bs.$red, 10%), 0.5));
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
-    color: lighten(var.$red, 15%);
+    color: lighten(bs.$red, 15%);
   }
   &:not(:disabled):not(.disabled):not(:hover) {
     background-color: transparent;

packages/app/src/components/LikeButtons.tsx

@@ -7,6 +7,8 @@ import { IUser } from '../interfaces/user';
 
 import UserPictureList from './User/UserPictureList';
 
+import styles from './LikeButtons.module.scss';
+
 type LikeButtonsProps = {
 
   hideTotalNumber?: boolean,
@@ -48,7 +50,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         type="button"
         id="like-button"
         onClick={onLikeClicked}
-        className={`btn btn-like border-0
+        className={`btn ${styles['btn-like']} border-0
             ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
         <i className={`fa ${isLiked ? 'fa-heart' : 'fa-heart-o'}`}></i>

packages/app/src/components/SubscribeButton.module.scss

@@ -1,13 +1,14 @@
 @use '~/styles/bootstrap/init' as bs;
-@use '~/styles/variables' as var;
 
-.btn.btn-subscribe {
-  @include bs.button-outline-variant(rgba(bs.$secondary, 50%), var.$success, rgba(lighten(var.$success, 10%), 0.15), rgba(lighten(var.$success, 10%), 0.5));
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: lighten(var.$success, 15%);
-  }
-  &:not(:disabled):not(.disabled):not(:hover) {
-    background-color: transparent;
+.btn-subscribe {
+  &:global {
+    @include bs.button-outline-variant(rgba(bs.$secondary, 50%), bs.$success, rgba(lighten(bs.$success, 10%), 0.15), rgba(lighten(bs.$success, 10%), 0.5));
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: lighten(bs.$success, 15%);
+    }
+    &:not(:disabled):not(.disabled):not(:hover) {
+      background-color: transparent;
+    }
   }
 }

packages/app/src/components/SubscribeButton.tsx

@@ -5,6 +5,8 @@ import { UncontrolledTooltip } from 'reactstrap';
 
 import { SubscriptionStatusType } from '~/interfaces/subscription';
 
+import styles from './SubscribeButton.module.scss';
+
 
 type Props = {
   isGuestUser?: boolean,
@@ -38,7 +40,7 @@ const SubscribeButton: FC<Props> = (props: Props) => {
         type="button"
         id="subscribe-button"
         onClick={props.onClick}
-        className={`btn btn-subscribe border-0 ${buttonClass}`}
+        className={`btn ${styles['btn-subscribe']} border-0 ${buttonClass}`}
       >
         <i className={iconClass}></i>
       </button>