clean scss

apps/app/src/components/PageControls/BookmarkButtons.module.scss

@@ -6,6 +6,13 @@
   .btn-bookmark {
     @extend %btn-basis;
   }
+  .dropdown .btn-bookmark {
+    padding-right: 1px;
+  }
+  .total-counts {
+    @extend %btn-total-counts-basis;
+    padding-left: 5px;
+  }
 }
 
 // == Colors

apps/app/src/components/PageControls/BookmarkButtons.tsx

@@ -73,7 +73,7 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
         <DropdownToggle
           id="bookmark-dropdown-btn"
           color="transparent"
-          className={`shadow-none btn btn-bookmark border-0 rounded-end-0
+          className={`btn btn-bookmark rounded-end-0
           ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
         >
           <span className={`material-symbols-outlined ${isBookmarked ? 'fill' : ''}`}>
@@ -88,7 +88,7 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
       <button
         type="button"
         id="po-total-bookmarks"
-        className={`shadow-none btn btn-bookmark border-0
+        className={`btn btn-bookmark
           total-counts ${isBookmarked ? 'active' : ''}`}
       >
         {bookmarkCount}

apps/app/src/components/PageControls/LikeButtons.module.scss

@@ -6,6 +6,13 @@
   .btn-like {
     @extend %btn-basis;
   }
+  .btn-like#like-button {
+    padding-right: 3px;
+  }
+  .total-counts {
+    @extend %btn-total-counts-basis;
+    padding-left: 5px;
+  }
 }
 
 // == Colors

apps/app/src/components/PageControls/LikeButtons.tsx

@@ -46,7 +46,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         type="button"
         id="like-button"
         onClick={onLikeClicked}
-        className={`shadow-none btn btn-like border-0
+        className={`btn btn-like
             ${isLiked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
         <span className={`material-symbols-outlined ${isLiked ? 'fill' : ''}`}>favorite</span>
@@ -59,7 +59,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
       <button
         type="button"
         id="po-total-likes"
-        className={`shadow-none btn btn-like border-0
+        className={`btn btn-like
           total-counts ${isLiked ? 'active' : ''}`}
       >
         {sumOfLikers}

apps/app/src/components/PageControls/PageControls.module.scss

@@ -1,30 +1,3 @@
-%page-controls-buttons-height {
-  height: 40px;
-}
-
 .grw-page-controls :global {
 
-  .btn-subscribe {
-    --bs-btn-font-size: 18px;
-    @extend %page-controls-buttons-height;
-  }
-
-  .btn-like,
-  .btn-bookmark,
-  .btn-seen-user {
-    --bs-btn-font-size: 18px;
-
-    @extend %page-controls-buttons-height;
-    padding-right: 6px;
-    padding-left: 8px;
-  }
-
-  .total-counts {
-    font-size: 13px;
-  }
-
-  .btn-page-item-control {
-    @extend %page-controls-buttons-height;
-  }
-
 }

apps/app/src/components/PageControls/SeenUserInfo.module.scss

@@ -6,6 +6,9 @@
   .btn-seen-user {
     @extend %btn-basis;
   }
+  .total-counts {
+    @extend %text-total-counts-basis;
+  }
 }
 
 

apps/app/src/components/PageControls/SubscribeButton.module.scss

@@ -2,8 +2,12 @@
 
 @use './button-styles';
 
-.btn-subscribe {
+.btn-subscribe :global {
   @extend %btn-basis;
+
+  .total-counts {
+    @extend %btn-total-counts-basis;
+  }
 }
 
 // == Colors

apps/app/src/components/PageControls/_button-styles.scss

@@ -1,10 +1,19 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
 %btn-basis {
-  padding: 6px 8px;
-  line-height: 1em;
-  border: 0;
-  box-shadow: none !important;
+  --bs-btn-padding-x: 6px;
+  --bs-btn-padding-y: 8px;
+  --bs-btn-line-height: 1em;
+  --bs-btn-border-width: 0;
+  --bs-btn-box-shadow: none;
+}
+
+%btn-total-counts-basis {
+  --bs-btn-font-size: 13px;
+}
+
+%text-total-counts-basis {
+  font-size: 13px;
 }
 
 @mixin btn-color($color) {