adjust spaces in page item control and subnav btn

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -123,7 +123,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
     const showDeviderBeforeDelete = AdditionalMenuItems != null || showDeviderBeforeAdditionalMenuItems;
 
     contents = (
-      <>
+      <div className="grw-page-item-control-dropdown-menu">
         { !isEnableActions && (
           <DropdownItem>
             <p>
@@ -134,32 +134,46 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
 
         {/* Bookmark */}
         { !forceHideMenuItems?.includes(MenuItemType.BOOKMARK) && isEnableActions && !pageInfo.isEmpty && isIPageInfoForOperation(pageInfo) && (
-          <DropdownItem onClick={bookmarkItemClickedHandler}>
-            <i className="fa fa-fw fa-bookmark-o"></i>
+          <DropdownItem
+            onClick={bookmarkItemClickedHandler}
+            className="d-flex align-items-center"
+          >
+            <i className="grw-dropdown-icon fa fa-fw fa-bookmark-o d-flex justify-content-center"></i>
             { pageInfo.isBookmarked ? t('remove_bookmark') : t('add_bookmark') }
           </DropdownItem>
         ) }
 
         {/* Duplicate */}
         { !forceHideMenuItems?.includes(MenuItemType.DUPLICATE) && isEnableActions && (
-          <DropdownItem onClick={duplicateItemClickedHandler} data-testid="open-page-duplicate-modal-btn">
-            <i className="icon-fw icon-docs"></i>
+          <DropdownItem
+            onClick={duplicateItemClickedHandler}
+            data-testid="open-page-duplicate-modal-btn"
+            className="d-flex align-items-center"
+          >
+            <i className="grw-dropdown-icon icon-fw icon-docs d-flex justify-content-center"></i>
             {t('Duplicate')}
           </DropdownItem>
         ) }
 
         {/* Move/Rename */}
         { !forceHideMenuItems?.includes(MenuItemType.RENAME) && isEnableActions && pageInfo.isMovable && (
-          <DropdownItem onClick={renameItemClickedHandler} data-testid="open-page-move-rename-modal-btn">
-            <i className="icon-fw  icon-action-redo"></i>
+          <DropdownItem
+            onClick={renameItemClickedHandler}
+            data-testid="open-page-move-rename-modal-btn"
+            className="d-flex align-items-center"
+          >
+            <i className="grw-dropdown-icon icon-fw icon-action-redo d-flex justify-content-center"></i>
             {t(isInstantRename ? 'Rename' : 'Move/Rename')}
           </DropdownItem>
         ) }
 
         {/* Revert */}
         { !forceHideMenuItems?.includes(MenuItemType.REVERT) && isEnableActions && pageInfo.isRevertible && (
-          <DropdownItem onClick={revertItemClickedHandler}>
-            <i className="icon-fw  icon-action-undo"></i>
+          <DropdownItem
+            onClick={revertItemClickedHandler}
+            className="d-flex align-items-center"
+          >
+            <i className="grw-dropdown-icon icon-fw icon-action-undo d-flex justify-content-center"></i>
             {t('modal_putback.label.Put Back Page')}
           </DropdownItem>
         ) }
@@ -177,17 +191,17 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
           <>
             { showDeviderBeforeDelete && <DropdownItem divider /> }
             <DropdownItem
-              className={`pt-2 ${pageInfo.isDeletable ? 'text-danger' : ''}`}
+              className={`pt-2 d-flex align-items-center ${pageInfo.isDeletable ? 'text-danger' : ''}`}
               disabled={!pageInfo.isDeletable}
               onClick={deleteItemClickedHandler}
               data-testid="open-page-delete-modal-btn"
             >
-              <i className="icon-fw icon-trash"></i>
+              <i className="grw-dropdown-icon icon-fw icon-trash d-flex justify-content-center"></i>
               {t('Delete')}
             </DropdownItem>
           </>
         )}
-      </>
+      </div>
     );
   }
 

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

@@ -75,14 +75,20 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
       <DropdownItem
         onClick={() => openPresentationModal(hrefForPresentationModal)}
         data-testid="open-presentation-modal-btn"
+        className="d-flex align-items-center"
       >
-        <i className="icon-fw"><PresentationIcon /></i>
+        <i className="grw-dropdown-icon icon-fw d-flex justify-content-center">
+          <PresentationIcon />
+        </i>
         { t('Presentation Mode') }
       </DropdownItem>
 
       {/* Export markdown */}
-      <DropdownItem onClick={() => exportAsMarkdown(pageId, revisionId, 'md')}>
-        <i className="icon-fw icon-cloud-download"></i>
+      <DropdownItem
+        onClick={() => exportAsMarkdown(pageId, revisionId, 'md')}
+        className="d-flex align-items-center"
+      >
+        <i className="grw-dropdown-icon icon-fw icon-cloud-download d-flex justify-content-center"></i>
         {t('export_bulk.export_page_markdown')}
       </DropdownItem>
 
@@ -95,31 +101,46 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
       <DropdownItem
         onClick={() => openAccessoriesModal(PageAccessoriesModalContents.PageHistory)}
         disabled={isGuestUser || isSharedUser}
+        className="d-flex align-items-center"
       >
-        <span className="mr-1"><HistoryIcon /></span>
+        <span className="grw-dropdown-icon grw-dropdown-icon d-flex justify-content-center">
+          <HistoryIcon />
+        </span>
         {t('History')}
       </DropdownItem>
 
       <DropdownItem
         onClick={() => openAccessoriesModal(PageAccessoriesModalContents.Attachment)}
+        className="d-flex align-items-center"
       >
-        <span className="mr-1"><AttachmentIcon /></span>
+        <span className="grw-dropdown-icon grw-dropdown-icon d-flex justify-content-center">
+          <AttachmentIcon />
+        </span>
         {t('attachment_data')}
       </DropdownItem>
 
       <DropdownItem
         onClick={() => openAccessoriesModal(PageAccessoriesModalContents.ShareLink)}
         disabled={isGuestUser || isSharedUser || isLinkSharingDisabled}
+        className="d-flex align-items-center"
       >
-        <span className="mr-1"><ShareLinkIcon /></span>
+        <span className="grw-dropdown-icon grw-dropdown-icon d-flex justify-content-center">
+          <ShareLinkIcon />
+        </span>
         {t('share_links.share_link_management')}
       </DropdownItem>
 
       <DropdownItem divider />
 
       {/* Create template */}
-      <DropdownItem onClick={openPageTemplateModalHandler}>
-        <i className="icon-fw icon-magic-wand"></i> { t('template.option_label.create/edit') }
+      <DropdownItem
+        onClick={openPageTemplateModalHandler}
+        className="d-flex align-items-center"
+      >
+        <span className="grw-dropdown-icon grw-dropdown-icon d-flex justify-content-center">
+          <i className="icon-fw icon-magic-wand text-center"></i>
+        </span>
+        { t('template.option_label.create/edit') }
       </DropdownItem>
     </>
   );

packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -43,7 +43,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
   return (
     // Export markdown
     <DropdownItem onClick={() => exportAsMarkdown(pageId, revisionId, 'md')}>
-      <i className="icon-fw icon-cloud-download"></i>
+      <i className="icon-fw icon-cloud-download text-center"></i>
       {t('export_bulk.export_page_markdown')}
     </DropdownItem>
   );

packages/app/src/styles/_subnav.scss

@@ -134,6 +134,12 @@
       font-size: 12px;
     }
   }
+
+  .grw-page-item-control-dropdown-menu {
+    .grw-dropdown-icon {
+      width: 20px;
+    }
+  }
 }
 
 /*