reorganize layout for subnavigation buttons

packages/app/src/components/BookmarkButton.jsx

@@ -36,7 +36,7 @@ class LegacyBookmarkButton extends React.Component {
           id="bookmark-button"
           onClick={this.handleClick}
           className={`btn btn-bookmark border-0
-          ${`btn-${this.props.size}`} ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
+          ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
         >
           <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
           { !hideTotalNumber && (
@@ -72,14 +72,9 @@ LegacyBookmarkButton.propTypes = {
   hideTotalNumber: PropTypes.bool,
   sumOfBookmarks: PropTypes.number,
   t: PropTypes.func.isRequired,
-  size: PropTypes.string,
   onBookMarkClicked: PropTypes.func,
 };
 
-LegacyBookmarkButton.defaultProps = {
-  size: 'md',
-};
-
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const BookmarkButton = (props) => {
   const { t } = useTranslation();

packages/app/src/components/Navbar/GrowiSubNavigation.jsx

@@ -103,17 +103,15 @@ const GrowiSubNavigation = (props) => {
       <div className="d-flex">
 
         <div className="d-flex flex-column align-items-end">
-          <div className="d-flex">
-            <SubNavButtons
-              isCompactMode={isCompactMode}
-              pageId={pageId}
-              revisionId={revisionId}
-              path={path}
-              isDeletable={isDeletable}
-              isAbleToDeleteCompletely={isAbleToDeleteCompletely}
-              willShowPageManagement={isAbleToShowPageManagement}
-            />
-          </div>
+          <SubNavButtons
+            isCompactMode={isCompactMode}
+            pageId={pageId}
+            revisionId={revisionId}
+            path={path}
+            isDeletable={isDeletable}
+            isAbleToDeleteCompletely={isAbleToDeleteCompletely}
+            willShowPageManagement={isAbleToShowPageManagement}
+          />
           <div className="mt-2">
             {pageContainer.isAbleToShowPageEditorModeManager && (
               <PageEditorModeManager

packages/app/src/components/Navbar/SubNavButtons.tsx

@@ -77,7 +77,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
   const { sumOfBookmarks, isBookmarked } = bookmarkInfo;
 
   return (
-    <>
+    <div className="d-flex" style={{ gap: '2px' }}>
       {isViewMode && (
         <PageReactionButtons
           isCompactMode={isCompactMode}
@@ -102,7 +102,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
         >
         </PageManagement>
       )}
-    </>
+    </div>
   );
 };
 

packages/app/src/components/Page/PageManagement.jsx

@@ -203,7 +203,7 @@ const LegacyPageManagemenet = (props) => {
       <>
         <button
           type="button"
-          className={`btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management ${isCompactMode && 'py-0'}`}
+          className="btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management"
           data-toggle="dropdown"
         >
           <i className="text-muted icon-options"></i>
@@ -217,7 +217,7 @@ const LegacyPageManagemenet = (props) => {
       <>
         <button
           type="button"
-          className={`btn nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret disabled ${isCompactMode && 'py-0'}`}
+          className="btn nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret disabled"
           id="icon-options-guest-tltips"
         >
           <i className="text-muted icon-options"></i>

packages/app/src/components/PageReactionButtons.tsx

@@ -25,25 +25,21 @@ const PageReactionButtons : FC<Props> = (props: Props) => {
 
   return (
     <>
-      <span>
-        <LikeButtons
-          hideTotalNumber={isCompactMode}
-          onLikeClicked={onLikeClicked}
-          sumOfLikers={sumOfLikers}
-          isLiked={isLiked}
-          likers={likers}
-        >
-        </LikeButtons>
-      </span>
-      <span>
-        <BookmarkButton
-          hideTotalNumber={isCompactMode}
-          sumOfBookmarks={sumOfBookmarks}
-          isBookmarked={isBookmarked}
-          onBookMarkClicked={onBookMarkClicked}
-        >
-        </BookmarkButton>
-      </span>
+      <LikeButtons
+        hideTotalNumber={isCompactMode}
+        onLikeClicked={onLikeClicked}
+        sumOfLikers={sumOfLikers}
+        isLiked={isLiked}
+        likers={likers}
+      >
+      </LikeButtons>
+      <BookmarkButton
+        hideTotalNumber={isCompactMode}
+        sumOfBookmarks={sumOfBookmarks}
+        isBookmarked={isBookmarked}
+        onBookMarkClicked={onBookMarkClicked}
+      >
+      </BookmarkButton>
     </>
   );
 };

packages/app/src/styles/_subnav.scss

@@ -43,10 +43,9 @@
     height: 40px;
     font-size: 20px;
   }
-
-  .btn-bookmark {
-    display: flex;
-    align-items: center;
+  .grw-btn-page-management {
+    height: 40px;
+    font-size: 16px;
   }
 
   .total-likes,
@@ -89,15 +88,15 @@
 
     .btn-like,
     .btn-bookmark {
-      @extend .btn-sm;
-
-      height: 30px;
-      font-size: 15px !important;
+      width: 32px;
+      height: 32px;
+      padding: 4px;
+      font-size: 16px;
     }
-
-    .total-likes,
-    .total-bookmarks {
-      height: 12px;
+    .grw-btn-page-management {
+      width: 32px;
+      height: 32px;
+      padding: 4px;
       font-size: 12px;
     }
   }