add new style class

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

@@ -136,7 +136,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
         { !forceHideMenuItems?.includes(MenuItemType.BOOKMARK) && isEnableActions && !pageInfo.isEmpty && isIPageInfoForOperation(pageInfo) && (
           <DropdownItem
             onClick={bookmarkItemClickedHandler}
-            className="d-flex align-items-center"
+            className="grw-page-control-dropdown-item"
           >
             <i className="fa fa-fw fa-bookmark-o grw-page-control-dropdown-icon"></i>
             { pageInfo.isBookmarked ? t('remove_bookmark') : t('add_bookmark') }
@@ -148,7 +148,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
           <DropdownItem
             onClick={duplicateItemClickedHandler}
             data-testid="open-page-duplicate-modal-btn"
-            className="d-flex align-items-center"
+            className="grw-page-control-dropdown-item"
           >
             <i className="icon-fw icon-docs grw-page-control-dropdown-icon"></i>
             {t('Duplicate')}
@@ -160,7 +160,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
           <DropdownItem
             onClick={renameItemClickedHandler}
             data-testid="open-page-move-rename-modal-btn"
-            className="d-flex align-items-center"
+            className="grw-page-control-dropdown-item"
           >
             <i className="icon-fw icon-action-redo grw-page-control-dropdown-icon"></i>
             {t(isInstantRename ? 'Rename' : 'Move/Rename')}
@@ -171,7 +171,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
         { !forceHideMenuItems?.includes(MenuItemType.REVERT) && isEnableActions && pageInfo.isRevertible && (
           <DropdownItem
             onClick={revertItemClickedHandler}
-            className="d-flex align-items-center"
+            className="grw-page-control-dropdown-item"
           >
             <i className="icon-fw icon-action-undo grw-page-control-dropdown-icon"></i>
             {t('modal_putback.label.Put Back Page')}

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

@@ -75,7 +75,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
       <DropdownItem
         onClick={() => openPresentationModal(hrefForPresentationModal)}
         data-testid="open-presentation-modal-btn"
-        className="d-flex align-items-center"
+        className="grw-page-control-dropdown-item"
       >
         <i className="icon-fw grw-page-control-dropdown-icon">
           <PresentationIcon />
@@ -86,7 +86,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
       {/* Export markdown */}
       <DropdownItem
         onClick={() => exportAsMarkdown(pageId, revisionId, 'md')}
-        className="d-flex align-items-center"
+        className="grw-page-control-dropdown-item"
       >
         <i className="icon-fw icon-cloud-download grw-page-control-dropdown-icon"></i>
         {t('export_bulk.export_page_markdown')}
@@ -101,7 +101,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
       <DropdownItem
         onClick={() => openAccessoriesModal(PageAccessoriesModalContents.PageHistory)}
         disabled={isGuestUser || isSharedUser}
-        className="d-flex align-items-center"
+        className="grw-page-control-dropdown-item"
       >
         <span className="grw-page-control-dropdown-icon">
           <HistoryIcon />
@@ -111,7 +111,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
 
       <DropdownItem
         onClick={() => openAccessoriesModal(PageAccessoriesModalContents.Attachment)}
-        className="d-flex align-items-center"
+        className="grw-page-control-dropdown-item"
       >
         <span className="grw-page-control-dropdown-icon">
           <AttachmentIcon />
@@ -122,7 +122,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
       <DropdownItem
         onClick={() => openAccessoriesModal(PageAccessoriesModalContents.ShareLink)}
         disabled={isGuestUser || isSharedUser || isLinkSharingDisabled}
-        className="d-flex align-items-center"
+        className="grw-page-control-dropdown-item"
       >
         <span className="grw-page-control-dropdown-icon">
           <ShareLinkIcon />
@@ -135,7 +135,7 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
       {/* Create template */}
       <DropdownItem
         onClick={openPageTemplateModalHandler}
-        className="d-flex align-items-center"
+        className="grw-page-control-dropdown-item"
       >
         <i className="icon-fw icon-magic-wand grw-page-control-dropdown-icon"></i>
         { t('template.option_label.create/edit') }

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

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

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

@@ -151,6 +151,11 @@
   }
 }
 
+.grw-page-control-dropdown-item {
+  display: flex;
+  align-items: center;
+}
+
 .grw-page-control-dropdown-icon {
   display: flex;
   justify-content: center;