use one style class for mutual styling

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>
@@ -138,7 +138,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
             onClick={bookmarkItemClickedHandler}
             className="d-flex align-items-center"
           >
-            <i className="fa fa-fw fa-bookmark-o d-flex grw-dropdown-icon justify-content-center"></i>
+            <i className="fa fa-fw fa-bookmark-o grw-page-control-dropdown-icon"></i>
             { pageInfo.isBookmarked ? t('remove_bookmark') : t('add_bookmark') }
           </DropdownItem>
         ) }
@@ -150,7 +150,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
             data-testid="open-page-duplicate-modal-btn"
             className="d-flex align-items-center"
           >
-            <i className="icon-fw icon-docs d-flex grw-dropdown-icon justify-content-center"></i>
+            <i className="icon-fw icon-docs grw-page-control-dropdown-icon"></i>
             {t('Duplicate')}
           </DropdownItem>
         ) }
@@ -162,7 +162,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
             data-testid="open-page-move-rename-modal-btn"
             className="d-flex align-items-center"
           >
-            <i className="icon-fw icon-action-redo d-flex grw-dropdown-icon justify-content-center"></i>
+            <i className="icon-fw icon-action-redo grw-page-control-dropdown-icon"></i>
             {t(isInstantRename ? 'Rename' : 'Move/Rename')}
           </DropdownItem>
         ) }
@@ -173,7 +173,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
             onClick={revertItemClickedHandler}
             className="d-flex align-items-center"
           >
-            <i className="icon-fw icon-action-undo d-flex grw-dropdown-icon justify-content-center"></i>
+            <i className="icon-fw icon-action-undo grw-page-control-dropdown-icon"></i>
             {t('modal_putback.label.Put Back Page')}
           </DropdownItem>
         ) }
@@ -196,12 +196,12 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
               onClick={deleteItemClickedHandler}
               data-testid="open-page-delete-modal-btn"
             >
-              <i className="icon-fw icon-trash d-flex grw-dropdown-icon justify-content-center"></i>
+              <i className="icon-fw icon-trash grw-page-control-dropdown-icon"></i>
               {t('Delete')}
             </DropdownItem>
           </>
         )}
-      </div>
+      </>
     );
   }
 

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

@@ -77,7 +77,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         data-testid="open-presentation-modal-btn"
         className="d-flex align-items-center"
       >
-        <i className="icon-fw grw-dropdown-icon d-flex justify-content-center">
+        <i className="icon-fw grw-page-control-dropdown-icon">
           <PresentationIcon />
         </i>
         { t('Presentation Mode') }
@@ -88,7 +88,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         onClick={() => exportAsMarkdown(pageId, revisionId, 'md')}
         className="d-flex align-items-center"
       >
-        <i className="icon-fw icon-cloud-download grw-dropdown-icon d-flex justify-content-center"></i>
+        <i className="icon-fw icon-cloud-download grw-page-control-dropdown-icon"></i>
         {t('export_bulk.export_page_markdown')}
       </DropdownItem>
 
@@ -103,7 +103,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         disabled={isGuestUser || isSharedUser}
         className="d-flex align-items-center"
       >
-        <span className="grw-dropdown-icon d-flex justify-content-center">
+        <span className="grw-page-control-dropdown-icon">
           <HistoryIcon />
         </span>
         {t('History')}
@@ -113,7 +113,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         onClick={() => openAccessoriesModal(PageAccessoriesModalContents.Attachment)}
         className="d-flex align-items-center"
       >
-        <span className="grw-dropdown-icon d-flex justify-content-center">
+        <span className="grw-page-control-dropdown-icon">
           <AttachmentIcon />
         </span>
         {t('attachment_data')}
@@ -124,7 +124,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         disabled={isGuestUser || isSharedUser || isLinkSharingDisabled}
         className="d-flex align-items-center"
       >
-        <span className="grw-dropdown-icon d-flex justify-content-center">
+        <span className="grw-page-control-dropdown-icon">
           <ShareLinkIcon />
         </span>
         {t('share_links.share_link_management')}
@@ -137,7 +137,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
         onClick={openPageTemplateModalHandler}
         className="d-flex align-items-center"
       >
-        <i className="icon-fw icon-magic-wand grw-dropdown-icon d-flex justify-content-center"></i>
+        <i className="icon-fw icon-magic-wand grw-page-control-dropdown-icon"></i>
         { t('template.option_label.create/edit') }
       </DropdownItem>
     </>

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

@@ -46,7 +46,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
       onClick={() => exportAsMarkdown(pageId, revisionId, 'md')}
       className="d-flex align-items-center"
     >
-      <i className="icon-fw icon-cloud-download grw-dropdown-icon d-flex justify-content-center"></i>
+      <i className="icon-fw icon-cloud-download grw-page-control-dropdown-icon"></i>
       {t('export_bulk.export_page_markdown')}
     </DropdownItem>
   );

packages/app/src/styles/_subnav.scss

@@ -135,11 +135,6 @@
     }
   }
 
-  .grw-page-item-control-dropdown-menu {
-    .grw-dropdown-icon {
-      width: 20px;
-    }
-  }
 }
 
 /*

packages/app/src/styles/style-app.scss

@@ -150,3 +150,9 @@
     content: 'Ctrl';
   }
 }
+
+.grw-page-control-dropdown-icon {
+  display: flex;
+  justify-content: center;
+  width: 25px;
+}