mr to me

apps/app/_obsolete/src/components/Navbar/GrowiNavbar.tsx

@@ -47,7 +47,7 @@ const NavbarRight = memo((): JSX.Element => {
                 data-testid="newPageBtn"
                 onClick={() => openCreateModal(currentPagePath || '')}
               >
-                <i className="icon-pencil mr-2"></i>
+                <i className="icon-pencil me-2"></i>
                 <span className="d-none d-lg-block">{ t('commons:New') }</span>
               </button>
             </li>

apps/app/_obsolete/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -747,7 +747,7 @@ class CodeMirrorEditor extends AbstractEditor {
             </div>
           )
           : (
-            <div className="mr-4 mb-2">
+            <div className="me-4 mb-2">
               {cheatsheetModalButton}
             </div>
           )

apps/app/public/static/locales/en_US/admin.json

@@ -730,7 +730,7 @@
       "description1":"Temporarily issue new users by email addresses.",
       "description2":"A temporary password will be generated for the first login.",
       "invite_thru_email": "Send invitation email",
-      "mail_setting_link":"<i class='icon-settings mr-2'></i><a href='/admin/app'>Email settings</a>",
+      "mail_setting_link":"<i class='icon-settings me-2'></i><a href='/admin/app'>Email settings</a>",
       "valid_email": "Valid email address is required",
       "temporary_password": "The created user has a temporary password",
       "send_new_password": "Please send the new password to the user.",

apps/app/public/static/locales/ja_JP/admin.json

@@ -738,7 +738,7 @@
       "description1": "メールアドレスを使用して新規ユーザーを仮発行します。",
       "description2": "初回のログイン時に使用する仮パスワードが生成されます。",
       "invite_thru_email": "招待メールを送信する",
-      "mail_setting_link": "<i class='icon-settings mr-2'></i><a href='/admin/app'>メールの設定</a>",
+      "mail_setting_link": "<i class='icon-settings me-2'></i><a href='/admin/app'>メールの設定</a>",
       "valid_email": "メールアドレスを入力してください。",
       "temporary_password": "作成したユーザーは仮パスワードが設定されています。",
       "send_new_password": "新規発行したパスワードを、対象ユーザーへ連絡してください。",

apps/app/public/static/locales/zh_CN/admin.json

@@ -737,7 +737,7 @@
       "emails": "电子邮件",
       "description1": "通过电子邮件地址临时发布新用户。",
       "description2": "将为首次登录生成一个临时密码。",
-      "mail_setting_link": "<i class='icon-settings mr-2'></i><a href='/admin/app'>Email settings</a>",
+      "mail_setting_link": "<i class='icon-settings me-2'></i><a href='/admin/app'>Email settings</a>",
       "valid_email": "需要有效的电子邮件地址",
       "invite_thru_email": "发送邀请电子邮件",
       "temporary_password": "创建的用户具有临时密码",

apps/app/src/components/Admin/App/QuestionnaireSettings.tsx

@@ -53,7 +53,7 @@ const QuestionnaireSettings = (): JSX.Element => {
         <div className="mb-4">{t('app_setting.questionnaire_settings_explanation')}</div>
         <span>
           <div className="mb-2">
-            <span className="text-info mr-2"><i className="icon-info icon-fw"></i>{t('app_setting.about_data_sent')}</span>
+            <span className="text-info me-2"><i className="icon-info icon-fw"></i>{t('app_setting.about_data_sent')}</span>
             <a href={t('app_setting.docs_link')} rel="noreferrer" target="_blank" className="d-inline">
               {t('app_setting.learn_more')} <i className="icon-share-alt"></i>
             </a>
@@ -65,7 +65,7 @@ const QuestionnaireSettings = (): JSX.Element => {
 
       {isLoading && (
         <div className="text-muted text-center mb-5">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+          <i className="fa fa-2x fa-spinner fa-pulse me-1" />
         </div>
       )}
 

apps/app/src/components/Admin/AuditLog/DateRangePicker.tsx

@@ -62,7 +62,7 @@ export const DateRangePicker: FC<DateRangePickerProps> = (props: DateRangePicker
   }, [onChange]);
 
   return (
-    <div className="btn-group mr-2">
+    <div className="btn-group me-2">
       <DatePicker
         selectsRange
         startDate={startDate}

apps/app/src/components/Admin/AuditLog/SearchUsernameTypeahead.tsx

@@ -109,7 +109,7 @@ const SearchUsernameTypeaheadSubstance: ForwardRefRenderFunction<IClearable, Pro
   }));
 
   return (
-    <div className="input-group mr-2">
+    <div className="input-group me-2">
       <div className="input-group-prepend">
         <span className="input-group-text">
           <i className="icon-people" />

apps/app/src/components/Admin/AuditLog/SelectActionDropdown.tsx

@@ -76,7 +76,7 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
   }, [onChangeMultipleAction]);
 
   return (
-    <div className="btn-group mr-2 admin-audit-log">
+    <div className="btn-group me-2 admin-audit-log">
       <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
         <i className="fa fa-fw fa-bolt" />{t('admin:audit_log_management.action')}
       </button>

apps/app/src/components/Admin/AuditLogManagement.tsx

@@ -152,8 +152,8 @@ export const AuditLogManagement: FC = () => {
       <button type="button" className="btn btn-outline-secondary mb-4" onClick={() => setIsSettingPage(!isSettingPage)}>
         {
           isSettingPage
-            ? <><i className="fa fa-hand-o-left mr-1" />{t('admin:audit_log_management.return')}</>
-            : <><i className="fa icon-settings mr-1" />{t('admin:audit_log_management.settings')}</>
+            ? <><i className="fa fa-hand-o-left me-1" />{t('admin:audit_log_management.return')}</>
+            : <><i className="fa icon-settings me-1" />{t('admin:audit_log_management.settings')}</>
         }
       </button>
 
@@ -205,7 +205,7 @@ export const AuditLogManagement: FC = () => {
           { isLoading
             ? (
               <div className="text-muted text-center mb-5">
-                <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+                <i className="fa fa-2x fa-spinner fa-pulse me-1" />
               </div>
             )
             : (
@@ -224,7 +224,7 @@ export const AuditLogManagement: FC = () => {
             />
 
             <div className="admin-audit-log ms-3">
-              <label htmlFor="jumpPageInput" className="mr-1 text-secondary">Jump To Page</label>
+              <label htmlFor="jumpPageInput" className="me-1 text-secondary">Jump To Page</label>
               <input
                 id="jumpPageInput"
                 type="text"

apps/app/src/components/Admin/Common/AdminNavigation.tsx

@@ -13,23 +13,23 @@ const MenuLabel = ({ menu }: { menu: string }) => {
 
   switch (menu) {
     /* eslint-disable no-multi-spaces, max-len */
-    case 'app':                      return <><i className="mr-1 icon-fw icon-settings"></i>{        t('headers.app_settings', { ns: 'commons' }) }</>;
-    case 'security':                 return <><i className="mr-1 icon-fw icon-shield"></i>{          t('security_settings.security_settings') }</>;
-    case 'markdown':                 return <><i className="mr-1 icon-fw icon-note"></i>{            t('markdown_settings.markdown_settings') }</>;
-    case 'customize':                return <><i className="mr-1 icon-fw icon-wrench"></i>{          t('customize_settings.customize_settings') }</>;
-    case 'importer':                 return <><i className="mr-1 icon-fw icon-cloud-upload"></i>{    t('importer_management.import_data') }</>;
-    case 'export':                   return <><i className="mr-1 icon-fw icon-cloud-download"></i>{  t('export_management.export_archive_data') }</>;
-    case 'data-transfer':            return <><i className="mr-1 icon-fw icon-plane"></i>{           t('g2g_data_transfer.data_transfer', { ns: 'commons' })}</>;
-    case 'notification':             return <><i className="mr-1 icon-fw icon-bell"></i>{            t('external_notification.external_notification')}</>;
-    case 'slack-integration':        return <><i className="mr-1 icon-fw icon-shuffle"></i>{         t('slack_integration.slack_integration') }</>;
-    case 'slack-integration-legacy': return <><i className="mr-1 icon-fw icon-shuffle"></i>{         t('slack_integration_legacy.slack_integration_legacy')}</>;
-    case 'users':                    return <><i className="mr-1 icon-fw icon-user"></i>{            t('user_management.user_management') }</>;
-    case 'user-groups':              return <><i className="mr-1 icon-fw icon-people"></i>{          t('user_group_management.user_group_management') }</>;
-    case 'audit-log':                return <><i className="mr-1 icon-fw icon-feed"></i>{            t('audit_log_management.audit_log')}</>;
-    case 'plugins':                  return <><i className="mr-1 icon-fw icon-puzzle"></i>{          t('plugins.plugins')}</>;
-    case 'search':                   return <><i className="mr-1 icon-fw icon-magnifier"></i>{       t('full_text_search_management.full_text_search_management') }</>;
-    case 'cloud':                    return <><i className="mr-1 icon-fw icon-share-alt"></i>{       t('cloud_setting_management.to_cloud_settings')} </>;
-    default:                         return <><i className="mr-1 icon-fw icon-home"></i>{            t('wiki_management_homepage') }</>;
+    case 'app':                      return <><i className="me-1 icon-fw icon-settings"></i>{        t('headers.app_settings', { ns: 'commons' }) }</>;
+    case 'security':                 return <><i className="me-1 icon-fw icon-shield"></i>{          t('security_settings.security_settings') }</>;
+    case 'markdown':                 return <><i className="me-1 icon-fw icon-note"></i>{            t('markdown_settings.markdown_settings') }</>;
+    case 'customize':                return <><i className="me-1 icon-fw icon-wrench"></i>{          t('customize_settings.customize_settings') }</>;
+    case 'importer':                 return <><i className="me-1 icon-fw icon-cloud-upload"></i>{    t('importer_management.import_data') }</>;
+    case 'export':                   return <><i className="me-1 icon-fw icon-cloud-download"></i>{  t('export_management.export_archive_data') }</>;
+    case 'data-transfer':            return <><i className="me-1 icon-fw icon-plane"></i>{           t('g2g_data_transfer.data_transfer', { ns: 'commons' })}</>;
+    case 'notification':             return <><i className="me-1 icon-fw icon-bell"></i>{            t('external_notification.external_notification')}</>;
+    case 'slack-integration':        return <><i className="me-1 icon-fw icon-shuffle"></i>{         t('slack_integration.slack_integration') }</>;
+    case 'slack-integration-legacy': return <><i className="me-1 icon-fw icon-shuffle"></i>{         t('slack_integration_legacy.slack_integration_legacy')}</>;
+    case 'users':                    return <><i className="me-1 icon-fw icon-user"></i>{            t('user_management.user_management') }</>;
+    case 'user-groups':              return <><i className="me-1 icon-fw icon-people"></i>{          t('user_group_management.user_group_management') }</>;
+    case 'audit-log':                return <><i className="me-1 icon-fw icon-feed"></i>{            t('audit_log_management.audit_log')}</>;
+    case 'plugins':                  return <><i className="me-1 icon-fw icon-puzzle"></i>{          t('plugins.plugins')}</>;
+    case 'search':                   return <><i className="me-1 icon-fw icon-magnifier"></i>{       t('full_text_search_management.full_text_search_management') }</>;
+    case 'cloud':                    return <><i className="me-1 icon-fw icon-share-alt"></i>{       t('cloud_setting_management.to_cloud_settings')} </>;
+    default:                         return <><i className="me-1 icon-fw icon-home"></i>{            t('wiki_management_homepage') }</>;
       /* eslint-enable no-multi-spaces, max-len */
   }
 };

apps/app/src/components/Admin/ElasticsearchManagement/ReconnectControls.tsx

@@ -21,7 +21,7 @@ const ReconnectControls = (props: Props): JSX.Element => {
         onClick={() => { props.onReconnectingRequested() }}
         disabled={!isEnabled}
       >
-        { isProcessing && <i className="fa fa-spinner fa-pulse mr-2"></i> }
+        { isProcessing && <i className="fa fa-spinner fa-pulse me-2"></i> }
         { t('full_text_search_management.reconnect_button') }
       </button>
 

apps/app/src/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -55,7 +55,7 @@ class StatusTable extends React.PureComponent {
 
     const aliasLabels = aliases.map((aliasName) => {
       return (
-        <span key={`badge-${indexName}-${aliasName}`} className="badge rounded-pill bg-primary mr-2">
+        <span key={`badge-${indexName}-${aliasName}`} className="badge rounded-pill bg-primary me-2">
           <i className="icon-tag"></i> {aliasName}
         </span>
       );
@@ -65,7 +65,7 @@ class StatusTable extends React.PureComponent {
       <div className="card">
         <div className="card-header">
 
-          <a role="button" className="text-nowrap mr-2" data-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
+          <a role="button" className="text-nowrap me-2" data-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
             <i className="fa fa-fw fa-database"></i> {indexName}
           </a>
           <span className="ms-md-3">{aliasLabels}</span>

apps/app/src/components/Admin/ExportArchiveData/SelectCollectionsModal.tsx

@@ -165,10 +165,10 @@ const SelectCollectionsModal = (props: Props): JSX.Element => {
         <ModalBody>
           <div className="row">
             <div className="col-sm-12">
-              <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={checkAll}>
+              <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={checkAll}>
                 <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}
               </button>
-              <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={uncheckAll}>
+              <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={uncheckAll}>
                 <i className="fa fa-square-o"></i> {t('admin:export_management.uncheck_all')}
               </button>
             </div>

apps/app/src/components/Admin/G2GDataTransfer.tsx

@@ -248,10 +248,10 @@ const G2GDataTransfer = (): JSX.Element => {
       {isTransferring && (
         <div className="border rounded p-4">
           <div>
-            <G2GDataTransferStatusIcon className="mr-2 mb-2" status={g2gProgress.mongo} /> MongoDB
+            <G2GDataTransferStatusIcon className="me-2 mb-2" status={g2gProgress.mongo} /> MongoDB
           </div>
           <div>
-            <G2GDataTransferStatusIcon className="mr-2" status={g2gProgress.attachments} /> Attachments
+            <G2GDataTransferStatusIcon className="me-2" status={g2gProgress.attachments} /> Attachments
           </div>
         </div>
       )}

apps/app/src/components/Admin/G2GDataTransferExportForm.tsx

@@ -201,12 +201,12 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
     <>
       <form className="form-inline mt-3">
         <div className="form-group">
-          <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={checkAll}>
+          <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={checkAll}>
             <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}
           </button>
         </div>
         <div className="form-group">
-          <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={uncheckAll}>
+          <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={uncheckAll}>
             <i className="fa fa-square-o"></i> {t('admin:export_management.uncheck_all')}
           </button>
         </div>

apps/app/src/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -448,12 +448,12 @@ class ImportForm extends React.Component {
       <>
         <form className="form-inline">
           <div className="form-group">
-            <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={this.checkAll}>
+            <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={this.checkAll}>
               <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}
             </button>
           </div>
           <div className="form-group">
-            <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={this.uncheckAll}>
+            <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={this.uncheckAll}>
               <i className="fa fa-square-o"></i> {t('admin:export_management.uncheck_all')}
             </button>
           </div>

apps/app/src/components/Admin/Notification/ManageGlobalNotification.tsx

@@ -238,7 +238,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.CREATE)}
               >
                 <span className="badge rounded-pill bg-success">
-                  <i className="icon-doc mr-1" /> CREATE
+                  <i className="icon-doc me-1" /> CREATE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -250,7 +250,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.EDIT)}
               >
                 <span className="badge rounded-pill bg-warning text-dark">
-                  <i className="icon-pencil mr-1" />EDIT
+                  <i className="icon-pencil me-1" />EDIT
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -262,7 +262,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.MOVE)}
               >
                 <span className="badge rounded-pill bg-pink">
-                  <i className="icon-action-redo mr-1" />MOVE
+                  <i className="icon-action-redo me-1" />MOVE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -274,7 +274,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.DELETE)}
               >
                 <span className="badge rounded-pill bg-danger">
-                  <i className="icon-fire mr-1" />DELETE
+                  <i className="icon-fire me-1" />DELETE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -286,7 +286,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.LIKE)}
               >
                 <span className="badge rounded-pill bg-info">
-                  <i className="fa fa-heart-o mr-1" />LIKE
+                  <i className="fa fa-heart-o me-1" />LIKE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -298,7 +298,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.POST)}
               >
                 <span className="badge rounded-pill bg-primary">
-                  <i className="icon-bubble mr-1" />POST
+                  <i className="icon-bubble me-1" />POST
                 </span>
               </TriggerEventCheckBox>
             </div>

apps/app/src/components/Admin/SlackIntegration/BotTypeCard.jsx

@@ -47,18 +47,18 @@ const BotTypeCard = (props) => {
               ${isBotTypeOfficial ? 'd-flex align-items-center justify-content-center' : 'text-center'}
               ${props.isActive ? 'bg-primary grw-botcard-title-active' : ''}`}
         >
-          <span className="mr-2">
+          <span className="me-2">
             {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].botTypeCategory}`)}
           </span>
 
           {/*  A recommended badge is shown on official bot card, supplementary names are shown on Custom bot cards   */}
           { isBotTypeOfficial
             ? (
-              <span className="badge bg-info mr-2">
+              <span className="badge bg-info me-2">
                 {t('admin:slack_integration.selecting_bot_types.recommended')}
               </span>
             ) : (
-              <span className="supplementary-bot-name mr-2">
+              <span className="supplementary-bot-name me-2">
                 {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].supplementaryBotName}`)}
               </span>
             )}

apps/app/src/components/Admin/SlackIntegration/CustomBotWithoutProxySettingsAccordion.jsx

@@ -73,7 +73,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
     <div className="card border-0 rounded-lg shadow overflow-hidden">
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CREATE_BOT)}
-        title={<><span className="mr-2">①</span>{t('admin:slack_integration.accordion.create_bot')}</>}
+        title={<><span className="me-2">①</span>{t('admin:slack_integration.accordion.create_bot')}</>}
       >
         <div className="my-5 d-flex flex-column align-items-center">
           <button type="button" className="btn btn-primary text-nowrap" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
@@ -96,7 +96,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
       </Accordion>
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.INSTALL_BOT)}
-        title={<><span className="mr-2">②</span>{t('admin:slack_integration.accordion.install_bot_to_slack')}</>}
+        title={<><span className="me-2">②</span>{t('admin:slack_integration.accordion.install_bot_to_slack')}</>}
       >
         <div className="container w-75 py-5">
           <p>1. {t('admin:slack_integration.accordion.select_install_your_app')}</p>
@@ -115,7 +115,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.REGISTER_SLACK_CONFIGURATION)}
         // eslint-disable-next-line max-len
-        title={<><span className="mr-2">③</span>{t('admin:slack_integration.accordion.register_secret_and_token')}{isEnterdSecretAndToken && <i className="ms-3 text-success fa fa-check"></i>}</>}
+        title={<><span className="me-2">③</span>{t('admin:slack_integration.accordion.register_secret_and_token')}{isEnterdSecretAndToken && <i className="ms-3 text-success fa fa-check"></i>}</>}
       >
         <CustomBotWithoutProxySecretTokenSection
           onUpdatedSecretToken={props.onUpdatedSecretToken}
@@ -128,7 +128,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CONNECTION_TEST)}
         // eslint-disable-next-line max-len
-        title={<><span className="mr-2">④</span>{t('admin:slack_integration.accordion.manage_permission')}</>}
+        title={<><span className="me-2">④</span>{t('admin:slack_integration.accordion.manage_permission')}</>}
       >
         <ManageCommandsProcessWithoutProxy
           commandPermission={commandPermission}
@@ -138,7 +138,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CONNECTION_TEST)}
         // eslint-disable-next-line max-len
-        title={<><span className="mr-2">⑤</span>{t('admin:slack_integration.accordion.test_connection')}{isLatestConnectionSuccess && <i className="ms-3 text-success fa fa-check"></i>}</>}
+        title={<><span className="me-2">⑤</span>{t('admin:slack_integration.accordion.test_connection')}{isLatestConnectionSuccess && <i className="ms-3 text-success fa fa-check"></i>}</>}
       >
         <p className="text-center m-4">{t('admin:slack_integration.accordion.test_connection_by_pressing_button')}</p>
         <p className="text-center text-warning">

apps/app/src/components/Admin/SlackIntegration/DeleteSlackBotSettingsModal.jsx

@@ -30,7 +30,7 @@ const DeleteSlackBotSettingsModal = React.memo((props) => {
           )}
           {!props.isResetAll && (
             <>
-              <i className="icon-trash mr-1" />
+              <i className="icon-trash me-1" />
               {t('admin:slack_integration.delete_slackbot_settings')}
             </>
           )}
@@ -61,7 +61,7 @@ const DeleteSlackBotSettingsModal = React.memo((props) => {
           )}
           {!props.isResetAll && (
             <>
-              <i className="icon-trash mr-1" />
+              <i className="icon-trash me-1" />
               {t('admin:slack_integration.delete')}
             </>
           )}

apps/app/src/components/Admin/SlackIntegration/SlackAppIntegrationControl.tsx

@@ -45,7 +45,7 @@ export const SlackAppIntegrationControl: FC<Props> = (props: Props) => {
           }
         }}
       >
-        <i className="icon-trash mr-1" />
+        <i className="icon-trash me-1" />
         {t('admin:slack_integration.delete')}
       </button>
     </div>

apps/app/src/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -187,7 +187,7 @@ const SlackIntegration = () => {
   if (isLoading) {
     return (
       <div className="text-muted text-center">
-        <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
       </div>
     );
   }

apps/app/src/components/Admin/SlackIntegration/WithProxyAccordions.jsx

@@ -389,7 +389,7 @@ const WithProxyAccordions = (props) => {
           <Accordion
             title={(
               <>
-                <span className="mr-2">{key}</span>
+                <span className="me-2">{key}</span>
                 {t(`admin:slack_integration.accordion.${value.title}`)}
                 {value.title === 'test_connection' && isLatestConnectionSuccess && <i className="ms-3 text-success fa fa-check"></i>}
               </>

apps/app/src/components/Admin/UserManagement.tsx

@@ -81,7 +81,7 @@ const UserManagement = (props: UserManagementProps) => {
 
   const renderCheckbox = (status: string, statusLabel: string, statusColor: string) => {
     return (
-      <div className={`custom-control custom-checkbox custom-checkbox-${statusColor} mr-2`}>
+      <div className={`custom-control custom-checkbox custom-checkbox-${statusColor} me-2`}>
         <input
           className="custom-control-input"
           type="checkbox"
@@ -128,7 +128,7 @@ const UserManagement = (props: UserManagementProps) => {
           className="btn btn-outline-secondary ms-2"
           role="button"
         >
-          <i className="icon-user-follow mr-1" aria-hidden="true"></i>
+          <i className="icon-user-follow me-1" aria-hidden="true"></i>
           {t('admin:user_management.external_account')}
         </Link>
       </p>
@@ -138,7 +138,7 @@ const UserManagement = (props: UserManagementProps) => {
 
         <div className="row d-flex justify-content-start align-items-center my-2">
           <div className="col-md-3 d-flex align-items-center my-2">
-            <i className="icon-magnifier mr-1"></i>
+            <i className="icon-magnifier me-1"></i>
             <span className={`search-typeahead ${styles['search-typeahead']}`}>
               <input
                 className="w-100"
@@ -183,7 +183,7 @@ const UserManagement = (props: UserManagementProps) => {
               className="btn btn-outline-secondary btn-sm"
               onClick={resetButtonClickHandler}
             >
-              <span className="icon-refresh mr-1"></span>
+              <span className="icon-refresh me-1"></span>
               {t('commons:Reset')}
             </button>
           </div>

apps/app/src/components/Admin/Users/PasswordResetModal.jsx

@@ -72,7 +72,7 @@ class PasswordResetModal extends React.Component {
           <label className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />
         ) : (
           <>
-            <p className="mr-2">To:</p>
+            <p className="me-2">To:</p>
             <div>
               <p className="mb-0">{userForPasswordResetModal.username}</p>
               <p className="mb-0">{userForPasswordResetModal.email}</p>

apps/app/src/components/Admin/Users/UserInviteModal.jsx

@@ -127,7 +127,7 @@ class UserInviteModal extends React.Component {
         <div>
           <button
             type="button"
-            className="btn btn-outline-secondary mr-2"
+            className="btn btn-outline-secondary me-2"
             onClick={this.onToggleModal}
           >
             {t('Cancel')}
@@ -151,7 +151,7 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <label className="mr-3 text-left" style={{ flex: 1 }}>
+        <label className="me-3 text-left" style={{ flex: 1 }}>
           <text className="text-danger">{t('admin:user_management.invite_modal.send_temporary_password')}</text>
           <text>{t('admin:user_management.invite_modal.send_email')}</text>
         </label>
@@ -175,7 +175,7 @@ class UserInviteModal extends React.Component {
             <div className="my-1" key={user.email}>
               <CopyToClipboard text={copyText} onCopy={this.showToaster}>
                 <li className="btn btn-outline-secondary">
-                  Email: <strong className="mr-3">{user.email}</strong> Password: <strong>{user.password}</strong>
+                  Email: <strong className="me-3">{user.email}</strong> Password: <strong>{user.password}</strong>
                 </li>
               </CopyToClipboard>
             </div>

apps/app/src/components/Admin/Users/UserTable.tsx

@@ -70,7 +70,7 @@ const UserTable = (props: UserTableProps) => {
             <th style={{ width: '100px' }}>#</th>
             <th>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   {t('user_management.status')}
                 </div>
                 <SortIcons
@@ -82,7 +82,7 @@ const UserTable = (props: UserTableProps) => {
             </th>
             <th>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   <code>username</code>
                 </div>
                 <SortIcons
@@ -94,7 +94,7 @@ const UserTable = (props: UserTableProps) => {
             </th>
             <th>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   {t('Name')}
                 </div>
                 <SortIcons
@@ -106,7 +106,7 @@ const UserTable = (props: UserTableProps) => {
             </th>
             <th>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   {t('Email')}
                 </div>
                 <SortIcons
@@ -118,7 +118,7 @@ const UserTable = (props: UserTableProps) => {
             </th>
             <th style={{ width: '100px' }}>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   {t('Created')}
                 </div>
                 <SortIcons
@@ -130,7 +130,7 @@ const UserTable = (props: UserTableProps) => {
             </th>
             <th style={{ width: '150px' }}>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   {t('last_login')}
                 </div>
                 <SortIcons

apps/app/src/components/Bookmarks/BookmarkFolderItem.tsx

@@ -266,7 +266,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
                 }
               >
                 <div onClick={e => e.stopPropagation()}>
-                  <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
+                  <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover me-1">
                     <i className="icon-options fa fa-rotate-90 p-1"></i>
                   </DropdownToggle>
                 </div>

apps/app/src/components/Bookmarks/BookmarkItem.tsx

@@ -147,7 +147,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
       useDragMode={isOperable}
     >
       <li
-        className="grw-bookmark-item-list list-group-item list-group-item-action border-0 py-0 mr-auto d-flex align-items-center"
+        className="grw-bookmark-item-list list-group-item list-group-item-action border-0 py-0 me-auto d-flex align-items-center"
         key={bookmarkedPage._id}
         id={bookmarkItemId}
         style={{ paddingLeft }}
@@ -179,7 +179,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
               ? () => <BookmarkMoveToRootBtn pageId={bookmarkedPage._id} onClickMoveToRootHandler={onClickMoveToRootHandler} />
               : undefined}
           >
-            <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
+            <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover me-1">
               <i className="icon-options fa fa-rotate-90 p-1"></i>
             </DropdownToggle>
           </PageItemControl>

apps/app/src/components/Common/ImageCropModal.tsx

@@ -157,15 +157,15 @@ const ImageCropModal: FC<Props> = (props: Props) => {
         }
       </ModalBody>
       <ModalFooter>
-        <button type="button" className="btn btn-outline-danger rounded-pill mr-auto" disabled={!isCropImage} onClick={reset}>
+        <button type="button" className="btn btn-outline-danger rounded-pill me-auto" disabled={!isCropImage} onClick={reset}>
           {t('commons:Reset')}
         </button>
         { !showCropOption && (
-          <div className="mr-auto">
+          <div className="me-auto">
             <div className="custom-control custom-switch ">
               <input
                 id="cropImageOption"
-                className="custom-control-input mr-auto"
+                className="custom-control-input me-auto"
                 type="checkbox"
                 checked={isCropImage}
                 onChange={() => { setIsCropImage(!isCropImage) }}
@@ -177,7 +177,7 @@ const ImageCropModal: FC<Props> = (props: Props) => {
           </div>
         )
         }
-        <button type="button" className="btn btn-outline-secondary rounded-pill mr-2" onClick={onModalCloseHandler}>
+        <button type="button" className="btn btn-outline-secondary rounded-pill me-2" onClick={onModalCloseHandler}>
           {t('crop_image_modal.cancel')}
         </button>
         <button type="button" className="btn btn-outline-primary rounded-pill" onClick={processAndSaveImage}>

apps/app/src/components/CompleteUserRegistration.tsx

@@ -14,7 +14,7 @@ export const CompleteUserRegistration: FC = () => {
           </p>
           {/* If the transition source is "/login", use <a /> tag since the transition will not occur if next/link is used. */}
           <a href="/login">
-            <i className="icon-login mr-1" />{t('Sign in is here')}
+            <i className="icon-login me-1" />{t('Sign in is here')}
           </a>
         </div>
       </div>

apps/app/src/components/ContentLinkButtons.tsx

@@ -32,7 +32,7 @@ const RecentlyCreatedLinkButton = React.memo(() => {
         type="button"
         className="btn btn-outline-secondary btn-sm px-3"
       >
-        <i className={`${styles['grw-icon-container-recently-created']} grw-icon-container-recently-created mr-2`}><RecentlyCreatedIcon /></i>
+        <i className={`${styles['grw-icon-container-recently-created']} grw-icon-container-recently-created me-2`}><RecentlyCreatedIcon /></i>
         <span>Recently Created</span>
       </button>
     </ScrollLink>

apps/app/src/components/DeleteBookmarkFolderModal.tsx

@@ -58,7 +58,7 @@ const DeleteBookmarkFolderModal: FC = () => {
           className="btn btn-danger"
           onClick={onClickDeleteButton}
         >
-          <i className="mr-1 icon-trash" aria-hidden="true"></i>
+          <i className="me-1 icon-trash" aria-hidden="true"></i>
           {t('bookmark_folder.delete_modal.modal_footer_button')}
         </button>
       </ModalFooter>

apps/app/src/components/DescendantsPageList.tsx

@@ -86,7 +86,7 @@ const DescendantsPageListSubstance = (props: SubstanceProps): JSX.Element => {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+          <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
         </div>
       </div>
     );

apps/app/src/components/EmptyTrashModal.tsx

@@ -80,7 +80,7 @@ const EmptyTrashModal: FC = () => {
           className="btn btn-danger"
           onClick={emptyTrashButtonHandler}
         >
-          <i className="mr-1 icon-fire" aria-hidden="true"></i>
+          <i className="me-1 icon-fire" aria-hidden="true"></i>
           {t('modal_empty.empty_the_trash_button')}
         </button>
       </ModalFooter>

apps/app/src/components/ForbiddenPage.tsx

@@ -14,7 +14,7 @@ const ForbiddenPage = React.memo((props: Props): JSX.Element => {
       <div className="row not-found-message-row mb-4">
         <div className="col-lg-12">
           <h2 className="text-muted">
-            <i className="icon-ban mr-2" aria-hidden="true" />
+            <i className="icon-ban me-2" aria-hidden="true" />
             Forbidden
           </h2>
         </div>

apps/app/src/components/InAppNotification/InAppNotificationElm.tsx

@@ -167,7 +167,7 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
           className={`${notification.status === InAppNotificationStatuses.STATUS_UNOPENED
             ? 'grw-unopend-notification'
             : 'ms-2'
-          } rounded-circle mr-3`}
+          } rounded-circle me-3`}
         >
         </span>
         {renderActionUserPictures()}

apps/app/src/components/InAppNotification/InAppNotificationList.tsx

@@ -20,7 +20,7 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+          <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
         </div>
       </div>
     );

apps/app/src/components/InAppNotification/InAppNotificationPage.tsx

@@ -66,7 +66,7 @@ export const InAppNotificationPage: FC = () => {
       return (
         <div className="wiki" data-testid="grw-in-app-notification-page-spinner">
           <div className="text-muted text-center">
-            <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+            <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
           </div>
         </div>
       );

apps/app/src/components/InAppNotification/PageNotification/PageModelNotification.tsx

@@ -44,7 +44,7 @@ const PageModelNotification: ForwardRefRenderFunction<IInAppNotificationOpenable
       <div className="text-truncate">
         <b>{actionUsers}</b> {actionMsg} <PagePathLabel path={notification.parsedSnapshot?.path ?? ''} />
       </div>
-      <i className={`${actionIcon} mr-2`} />
+      <i className={`${actionIcon} me-2`} />
       <FormattedDistanceDate
         id={notification._id}
         date={notification.createdAt}

apps/app/src/components/InAppNotification/PageNotification/UserModelNotification.tsx

@@ -32,7 +32,7 @@ const UserModelNotification: ForwardRefRenderFunction<IInAppNotificationOpenable
       <div className="text-truncate">
         <b>{actionUsers}</b> {actionMsg}
       </div>
-      <i className={`${actionIcon} mr-2`} />
+      <i className={`${actionIcon} me-2`} />
       <FormattedDistanceDate
         id={notification._id}
         date={notification.createdAt}

apps/app/src/components/InfiniteScroll.tsx

@@ -32,7 +32,7 @@ const useIntersection = <E extends HTMLElement>(): [boolean, Ref<E>] => {
 const LoadingIndicator = (): React.ReactElement => {
   return (
     <div className="text-muted text-center">
-      <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+      <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
     </div>
   );
 };

apps/app/src/components/InstallerForm.tsx

@@ -213,7 +213,7 @@ const InstallerForm = memo((): JSX.Element => {
               disabled={isLoading}
             >
               <div className="eff"></div>
-              <span className="btn-label"><i className={isLoading ? 'fa fa-spinner fa-pulse mr-1' : 'icon-user-follow'} /></span>
+              <span className="btn-label"><i className={isLoading ? 'fa fa-spinner fa-pulse me-1' : 'icon-user-follow'} /></span>
               <span className="btn-label-text">{ t('Create') }</span>
             </button>
           </div>

apps/app/src/components/InvitedForm.tsx

@@ -149,7 +149,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         <div className="input-group justify-content-center d-flex mt-4">
           <button type="submit" className="btn btn-fill" id="register" disabled={isLoading}>
             <div className="eff"></div>
-            <span className="btn-label"><i className={isLoading ? 'fa fa-spinner fa-pulse mr-1' : 'icon-user-follow'} /></span>
+            <span className="btn-label"><i className={isLoading ? 'fa fa-spinner fa-pulse me-1' : 'icon-user-follow'} /></span>
             <span className="btn-label-text">{t('Create')}</span>
           </button>
         </div>

apps/app/src/components/LoginForm.tsx

@@ -243,7 +243,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             >
               <div className="eff"></div>
               <span className="btn-label">
-                <i className={isLoading ? 'fa fa-spinner fa-pulse mr-1' : 'icon-login'} />
+                <i className={isLoading ? 'fa fa-spinner fa-pulse me-1' : 'icon-login'} />
               </span>
               <span className="btn-label-text">{t('Sign in')}</span>
             </button>
@@ -525,7 +525,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             >
               <div className="eff"></div>
               <span className="btn-label">
-                <i className={isLoading ? 'fa fa-spinner fa-pulse mr-1' : 'icon-user-follow'} />
+                <i className={isLoading ? 'fa fa-spinner fa-pulse me-1' : 'icon-user-follow'} />
               </span>
               <span className="btn-label-text">{submitText}</span>
             </button>

apps/app/src/components/Me/OtherSettings.tsx

@@ -46,7 +46,7 @@ const OtherSettings = (): JSX.Element => {
 
       {isLoadingCurrentUser && (
         <div className="text-muted text-center mb-5">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+          <i className="fa fa-2x fa-spinner fa-pulse me-1" />
         </div>
       )}
 

apps/app/src/components/Navbar/AuthorInfo.tsx

@@ -60,7 +60,7 @@ export const AuthorInfo = (props: AuthorInfoProps): JSX.Element => {
 
   return (
     <div className="d-flex align-items-center">
-      <div className="mr-2">
+      <div className="me-2">
         <UserPicture user={user} size="sm" />
       </div>
       <div>

apps/app/src/components/Navbar/GrowiNavbarBottom.tsx

@@ -37,7 +37,7 @@ export const GrowiNavbarBottom = (): JSX.Element => {
       <div className={`navbar navbar-expand navbar-dark bg-primary px-0 ${additionalClasses.join(' ')}`}>
 
         <ul className="navbar-nav w-100">
-          <li className="nav-item mr-auto">
+          <li className="nav-item me-auto">
             <a
               role="button"
               className="nav-link btn-lg"

apps/app/src/components/Navbar/GrowiSubNavigation.tsx

@@ -62,7 +62,7 @@ export const GrowiSubNavigation = (props: GrowiSubNavigationProps): JSX.Element
       {/* Left side */}
       <div className="d-flex grw-subnav-start-side">
         { (showDrawerToggler && isDrawerMode) && (
-          <div className={`d-none d-md-flex align-items-center ${isEditorMode ? 'mr-2 pr-2' : 'border-end mr-4 pr-4'}`}>
+          <div className={`d-none d-md-flex align-items-center ${isEditorMode ? 'me-2 pr-2' : 'border-end me-4 pr-4'}`}>
             <DrawerToggler />
           </div>
         ) }

apps/app/src/components/Navbar/PageEditorModeManager.jsx

@@ -30,7 +30,7 @@ const PageEditorModeButtonWrapper = React.memo(({
       data-testid={`${targetMode}-button`}
     >
       <span className="d-flex flex-column flex-md-row justify-content-center">
-        <span className="grw-page-editor-mode-manager-icon mr-md-1">{icon}</span>
+        <span className="grw-page-editor-mode-manager-icon me-md-1">{icon}</span>
         <span className="grw-page-editor-mode-manager-label">{label}</span>
       </span>
     </button>

apps/app/src/components/NotCreatablePage.tsx

@@ -9,7 +9,7 @@ export const NotCreatablePage: FC = () => {
     <div className="row not-found-message-row">
       <div className="col-md-12">
         <h2 className="text-muted">
-          <i className="icon-ban mr-1" aria-hidden="true"></i>
+          <i className="icon-ban me-1" aria-hidden="true"></i>
           { t('not_creatable_page.message') }
         </h2>
       </div>

apps/app/src/components/Page/RenderTagLabels.tsx

@@ -28,7 +28,7 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
     <>
       {tags.map((tag) => {
         return (
-          <a key={tag} href={`/_search?q=tag:${tag}`} className="grw-tag-label badge bg-primary mr-2">
+          <a key={tag} href={`/_search?q=tag:${tag}`} className="grw-tag-label badge bg-primary me-2">
             {tag}
           </a>
         );

apps/app/src/components/Page/RevisionLoader.tsx

@@ -64,7 +64,7 @@ export const RevisionLoader = (props: RevisionLoaderProps): JSX.Element => {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+          <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
         </div>
       </div>
     );

apps/app/src/components/Page/TagLabels.tsx

@@ -37,7 +37,7 @@ export const TagLabels:FC<Props> = (props: Props) => {
   return (
     <>
       <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center`} data-testid="grw-tag-labels">
-        <i className="tag-icon icon-tag mr-2" />
+        <i className="tag-icon icon-tag me-2" />
         <RenderTagLabels
           tags={tags}
           openEditorModal={openEditorModal}

apps/app/src/components/PageAccessoriesModal/PageAttachment.tsx

@@ -63,7 +63,7 @@ const PageAttachment = (): JSX.Element => {
     if (dataAttachments == null || inUseAttachmentsMap == null) {
       return (
         <div className="text-muted text-center">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+          <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
         </div>
       );
     }

apps/app/src/components/PageAlert/TrashPageAlert.tsx

@@ -86,7 +86,7 @@ export const TrashPageAlert = (): JSX.Element => {
       <>
         <button
           type="button"
-          className="btn btn-info rounded-pill btn-sm ms-auto mr-2"
+          className="btn btn-info rounded-pill btn-sm ms-auto me-2"
           onClick={openPutbackPageModalHandler}
           data-toggle="modal"
           data-testid="put-back-button"

apps/app/src/components/PageAttachment/DeleteAttachmentModal.tsx

@@ -108,7 +108,7 @@ export const DeleteAttachmentModal: React.FC = () => {
         {attachmentFileFormat}
       </ModalBody>
       <ModalFooter>
-        <div className="mr-3 d-inline-block">
+        <div className="me-3 d-inline-block">
           {deletingIndicator}
         </div>
         <Button

apps/app/src/components/PageComment/CommentControl.tsx

@@ -19,7 +19,7 @@ export const CommentControl = (props: CommentControlProps): JSX.Element => {
       <button
         data-testid="comment-delete-button"
         type="button"
-        className="btn btn-link p-2 mr-2"
+        className="btn btn-link p-2 me-2"
         onClick={onClickDeleteBtn}
       >
         <i className="ti ti-close"></i>

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -273,7 +273,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
   const renderReady = () => {
     const commentPreview = getCommentHtml();
 
-    const errorMessage = <span className="text-danger text-right mr-2">{error}</span>;
+    const errorMessage = <span className="text-danger text-right me-2">{error}</span>;
     const cancelButton = (
       <Button
         outline
@@ -335,7 +335,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
             {isSlackConfigured && isSlackEnabled != null
               && (
-                <div className="form-inline align-self-center mr-md-2">
+                <div className="form-inline align-self-center me-md-2">
                   <SlackNotification
                     isSlackEnabled={isSlackEnabled}
                     slackChannels={slackChannels}
@@ -347,13 +347,13 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
               )
             }
             <div className="d-none d-sm-block">
-              <span className="mr-2">{cancelButton}</span><span>{submitButton}</span>
+              <span className="me-2">{cancelButton}</span><span>{submitButton}</span>
             </div>
           </div>
           <div className="d-block d-sm-none mt-2">
             <div className="d-flex justify-content-end">
               {error && errorMessage}
-              <span className="mr-2">{cancelButton}</span><span>{submitButton}</span>
+              <span className="me-2">{cancelButton}</span><span>{submitButton}</span>
             </div>
           </div>
         </div>

apps/app/src/components/PageComment/ReplyComments.tsx

@@ -40,7 +40,7 @@ export const ReplyComments = (props: ReplycommentsProps): JSX.Element => {
 
   const renderReply = (reply: ICommentHasId) => {
     return (
-      <div key={reply._id} className={`${styles['page-comment-reply']} ms-4 ms-sm-5 mr-3`}>
+      <div key={reply._id} className={`${styles['page-comment-reply']} ms-4 ms-sm-5 me-3`}>
         <Comment
           rendererOptions={rendererOptions}
           comment={reply}

apps/app/src/components/PageDeleteModal.tsx

@@ -285,7 +285,7 @@ const PageDeleteModal: FC = () => {
           onClick={deleteButtonHandler}
           data-testid="delete-page-button"
         >
-          <i className={`mr-1 icon-${deleteIconAndKey[deleteMode].icon}`} aria-hidden="true"></i>
+          <i className={`me-1 icon-${deleteIconAndKey[deleteMode].icon}`} aria-hidden="true"></i>
           { t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }
         </button>
       </>

apps/app/src/components/PageEditor/EditorNavbarBottom.tsx

@@ -110,7 +110,7 @@ const EditorNavbarBottom = (): JSX.Element => {
           {/* Button or the normal Slack banner */}
           {isSlackConfigured && (isDeviceSmallerThanMd ? (
             <Button
-              className="grw-btn-slack border mr-2"
+              className="grw-btn-slack border me-2"
               onClick={() => (setSlackExpanded(!isSlackExpanded))}
             >
               <div className="grw-slack-logo">
@@ -119,7 +119,7 @@ const EditorNavbarBottom = (): JSX.Element => {
               </div>
             </Button>
           ) : (
-            <div className="mr-2">
+            <div className="me-2">
               {isSlackEnabled != null
               && (
                 <SlackNotification

apps/app/src/components/PageEditor/GridEditModal.jsx

@@ -237,7 +237,7 @@ class GridEditModal extends React.Component {
         </ModalBody>
         <ModalFooter className="grw-modal-footer">
           <div className="ms-auto">
-            <button type="button" className="mr-2 btn btn-secondary" onClick={this.cancel}>
+            <button type="button" className="me-2 btn btn-secondary" onClick={this.cancel}>
               Cancel
             </button>
             <button type="button" className="btn btn-primary" onClick={this.pasteCodedGrid}>

apps/app/src/components/PageEditor/HandsontableModal.tsx

@@ -457,13 +457,13 @@ export const HandsontableModal = (): JSX.Element => {
         <div className="grw-hot-modal-navbar px-4 py-3 border-bottom">
           <button
             type="button"
-            className="mr-4 data-import-button btn btn-secondary"
+            className="me-4 data-import-button btn btn-secondary"
             data-toggle="collapse"
             data-target="#collapseDataImport"
             aria-expanded={isDataImportAreaExpanded}
             onClick={toggleDataImportArea}
           >
-            <span className="mr-3">{t('handsontable_modal.data_import')}</span>
+            <span className="me-3">{t('handsontable_modal.data_import')}</span>
             <i className={isDataImportAreaExpanded ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
           </button>
           <div role="group" className="btn-group">
@@ -502,7 +502,7 @@ export const HandsontableModal = (): JSX.Element => {
       <ModalFooter className="grw-modal-footer">
         <button type="button" className="btn btn-danger" onClick={reset}>{t('commons:Reset')}</button>
         <div className="ms-auto">
-          <button type="button" className="mr-2 btn btn-secondary" onClick={cancel}>{t('handsontable_modal.cancel')}</button>
+          <button type="button" className="me-2 btn btn-secondary" onClick={cancel}>{t('handsontable_modal.cancel')}</button>
           <button type="button" className="btn btn-primary" onClick={save}>{t('handsontable_modal.done')}</button>
         </div>
       </ModalFooter>

apps/app/src/components/PageEditor/MarkdownTableDataImportForm.tsx

@@ -89,7 +89,7 @@ export const MarkdownTableDataImportForm = (props: MarkdownTableDataImportFormPr
         </div>
       </Collapse>
       <div className="d-flex justify-content-end">
-        <Button color="secondary mr-2" onClick={onCancel}>{t('cancel')}</Button>
+        <Button color="secondary me-2" onClick={onCancel}>{t('cancel')}</Button>
         <Button color="primary" onClick={importButtonHandler}>{t('import')}</Button>
       </div>
     </form>

apps/app/src/components/PageEditor/OptionsSelector.tsx

@@ -80,7 +80,7 @@ const KeymapSelector = memo((): JSX.Element => {
       { (Object.keys(KEYMAP_LABEL_MAP) as KeyMapMode[]).map((keymapMode) => {
         const keymapLabel = KEYMAP_LABEL_MAP[keymapMode];
         const icon = (keymapMode !== 'default')
-          ? <img src={`/images/icons/${keymapMode}.png`} width="16px" className="mr-2"></img>
+          ? <img src={`/images/icons/${keymapMode}.png`} width="16px" className="me-2"></img>
           : null;
         return <button key={keymapMode} className="dropdown-item" type="button" onClick={() => update({ keymapMode })}>{icon}{keymapLabel}</button>;
       }) }

apps/app/src/components/PageEditorByHackmd.tsx

@@ -359,7 +359,7 @@ export const PageEditorByHackmd = (): JSX.Element => {
       content = (
         <div className="text-center">
           <p className="hackmd-status-label">
-            <i className="fa fa-file-text mr-2" />
+            <i className="fa fa-file-text me-2" />
             { t('hackmd.used_for_not_found') }
           </p>
           {/* eslint-disable-next-line react/no-danger */}

apps/app/src/components/PageHistory/PageRevisionTable.tsx

@@ -157,7 +157,7 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
         </td>
         <td className="col-1">
           {(hasDiff || revisionId === sourceRevision?._id) && (
-            <div className="custom-control custom-radio custom-control-inline mr-0">
+            <div className="custom-control custom-radio custom-control-inline me-0">
               <input
                 type="radio"
                 className="custom-control-input"
@@ -173,7 +173,7 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
         </td>
         <td className="col-2">
           {(hasDiff || revisionId === targetRevision?._id) && (
-            <div className="custom-control custom-radio custom-control-inline mr-0">
+            <div className="custom-control custom-radio custom-control-inline me-0">
               <input
                 type="radio"
                 className="custom-control-input"

apps/app/src/components/PageList/PageList.tsx

@@ -30,7 +30,7 @@ const PageList = (props: Props<IPageInfoForEntity>): JSX.Element => {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+          <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
         </div>
       </div>
     );

apps/app/src/components/PageList/PageListItemL.tsx

@@ -220,7 +220,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
             </div>
             <div className="d-flex align-items-center mb-1">
               {/* Picture */}
-              <span className="mr-2 d-none d-md-block">
+              <span className="me-2 d-none d-md-block">
                 <UserPicture user={pageData.lastUpdateUser} size="md" />
               </span>
               {/* page title */}

apps/app/src/components/PageStatusAlert.tsx

@@ -63,7 +63,7 @@ export const PageStatusAlert = (): JSX.Element => {
   </>,
       btn:
   <a href="#hackmd" key="btnOpenHackmdSomeoneEditing" className="btn btn-outline-white">
-    <i className="fa fa-fw fa-file-text-o mr-1"></i>
+    <i className="fa fa-fw fa-file-text-o me-1"></i>
     Open HackMD Editor
   </a>,
     };
@@ -79,7 +79,7 @@ export const PageStatusAlert = (): JSX.Element => {
   </>,
       btn:
   <button type="button" onClick={() => mutateEditorMode(EditorMode.HackMD)} className="btn btn-outline-white">
-    <i className="fa fa-fw fa-file-text-o mr-1"></i>
+    <i className="fa fa-fw fa-file-text-o me-1"></i>
     Open HackMD Editor
   </button>,
     };
@@ -103,8 +103,8 @@ export const PageStatusAlert = (): JSX.Element => {
   </>,
       btn:
   <>
-    <button type="button" onClick={() => refreshPage()} className="btn btn-outline-white mr-4">
-      <i className="icon-fw icon-reload mr-1"></i>
+    <button type="button" onClick={() => refreshPage()} className="btn btn-outline-white me-4">
+      <i className="icon-fw icon-reload me-1"></i>
       {t('Load latest')}
     </button>
     { isConflict && (
@@ -113,7 +113,7 @@ export const PageStatusAlert = (): JSX.Element => {
         onClick={onClickResolveConflict}
         className="btn btn-outline-white"
       >
-        <i className="fa fa-fw fa-file-text-o mr-1"></i>
+        <i className="fa fa-fw fa-file-text-o me-1"></i>
         {t('modal_resolve_conflict.resolve_conflict')}
       </button>
     )}

apps/app/src/components/PasswordResetExecutionForm.tsx

@@ -81,7 +81,7 @@ const PasswordResetExecutionForm: FC = () => {
         <input name="reset-password-btn" className="btn btn-lg btn-primary btn-block" value={t('forgot_password.reset_password')} type="submit" />
       </div>
       <Link href="/login" prefetch={false}>
-        <i className="icon-login mr-1"></i>{t('forgot_password.sign_in_instead')}
+        <i className="icon-login me-1"></i>{t('forgot_password.sign_in_instead')}
       </Link>
     </form>
   );

apps/app/src/components/PasswordResetRequestForm.tsx

@@ -67,7 +67,7 @@ const PasswordResetRequestForm: FC = () => {
         </>
       )}
       <Link href="/login" prefetch={false}>
-        <i className="icon-login mr-1" />{t('forgot_password.return_to_login')}
+        <i className="icon-login me-1" />{t('forgot_password.return_to_login')}
       </Link>
     </form>
   );

apps/app/src/components/PrivateLegacyPages.tsx

@@ -61,7 +61,7 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
   if (migrationStatus == null) {
     return (
       <div className="mw-0 flex-grow-1 flex-basis-0 m-5 text-muted text-center">
-        <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
       </div>
     );
   }

apps/app/src/components/PutbackPageModal.jsx

@@ -60,7 +60,7 @@ const PutBackPageModal = () => {
     }
     return (
       <>
-        <i className="icon-action-undo mr-2" aria-hidden="true"></i> { t('modal_putback.label.Put Back Page') }
+        <i className="icon-action-undo me-2" aria-hidden="true"></i> { t('modal_putback.label.Put Back Page') }
       </>
     );
   };
@@ -102,7 +102,7 @@ const PutBackPageModal = () => {
       <>
         <ApiErrorMessageList errs={errs} targetPath={targetPath} />
         <button type="button" className="btn btn-info" onClick={putbackPageButtonHandler} data-testid="put-back-execution-button">
-          <i className="icon-action-undo mr-2" aria-hidden="true"></i> { t('Put Back') }
+          <i className="icon-action-undo me-2" aria-hidden="true"></i> { t('Put Back') }
         </button>
       </>
     );

apps/app/src/components/ReactMarkdownComponents/DrawioViewerWithEditButton.tsx

@@ -65,7 +65,7 @@ export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps):
           className="btn btn-outline-secondary btn-edit-drawio"
           onClick={editButtonClickHandler}
         >
-          <i className="icon-note mr-1"></i>{t('Edit')}
+          <i className="icon-note me-1"></i>{t('Edit')}
         </button>
       ) }
       <DrawioViewer {...props} onRenderingStart={renderingStartHandler} onRenderingUpdated={renderingUpdatedHandler} />

apps/app/src/components/ReactMarkdownComponents/RichAttachment.tsx

@@ -53,7 +53,7 @@ export const RichAttachment: React.FC<{
     <div className={`${styles.attachment} d-inline-block`}>
       <div className="my-2 p-2 card">
         <div className="p-1 card-body d-flex align-items-center">
-          <div className="mr-2 px-0 d-flex align-items-center justify-content-center">
+          <div className="me-2 px-0 d-flex align-items-center justify-content-center">
             <img src="/images/icons/editor/attachment.svg" className="attachment-icon" alt="attachment icon" />
           </div>
           <div className="pl-0">

apps/app/src/components/SavePageControls.tsx

@@ -78,7 +78,7 @@ export const SavePageControls = (props: SavePageControlsProps): JSX.Element | nu
 
       {isAclEnabled
         && (
-          <div className="mr-2">
+          <div className="me-2">
             <GrantSelector
               grant={grant}
               disabled={isGrantSelectorDisabledPage}
@@ -100,7 +100,7 @@ export const SavePageControls = (props: SavePageControlsProps): JSX.Element | nu
           disabled={isWaitingSaveProcessing}
         >
           {isWaitingSaveProcessing && (
-            <i className="fa fa-spinner fa-pulse mr-1"></i>
+            <i className="fa fa-spinner fa-pulse me-1"></i>
           )}
           {labelSubmitButton}
         </Button>

apps/app/src/components/SearchPage/SearchControl.tsx

@@ -84,7 +84,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
 
         {/* sort option: show when screen is larger than lg */}
         {isEnableSort && (
-          <div className="mr-4 d-lg-flex d-none">
+          <div className="me-4 d-lg-flex d-none">
             <SortControl
               sort={sort}
               order={order}
@@ -100,7 +100,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
         </div>
         {/* sort option: show when screen is smaller than lg */}
         {isEnableSort && (
-          <div className="mr-md-4 mr-2 d-flex d-lg-none ms-auto">
+          <div className="me-md-4 me-2 d-flex d-lg-none ms-auto">
             <SortControl
               sort={sort}
               order={order}
@@ -121,10 +121,10 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
               </button>
             </div>
             <div className="d-none d-lg-flex align-items-center ms-auto search-control-include-options">
-              <div className="border rounded px-2 py-1 mr-3">
+              <div className="border rounded px-2 py-1 me-3">
                 <div className="custom-control custom-checkbox custom-checkbox-succsess">
                   <input
-                    className="custom-control-input mr-2"
+                    className="custom-control-input me-2"
                     type="checkbox"
                     id="flexCheckDefault"
                     defaultChecked={includeUserPages}
@@ -138,7 +138,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
               <div className="border rounded px-2 py-1">
                 <div className="custom-control custom-checkbox custom-checkbox-succsess">
                   <input
-                    className="custom-control-input mr-2"
+                    className="custom-control-input me-2"
                     type="checkbox"
                     id="flexCheckChecked"
                     checked={includeTrashPages}

apps/app/src/components/SearchPage/SearchOptionModal.tsx

@@ -51,10 +51,10 @@ const SearchOptionModal: FC<Props> = (props: Props) => {
       </ModalHeader>
       <ModalBody>
         <div className="d-flex p-2">
-          <div className="border border-gray mr-3">
+          <div className="border border-gray me-3">
             <label className="px-3 py-2 mb-0 d-flex align-items-center">
               <input
-                className="mr-2"
+                className="me-2"
                 type="checkbox"
                 onChange={e => includeUserPagesChangeHandler(e.target.checked)}
                 checked={includeUserPages}
@@ -65,7 +65,7 @@ const SearchOptionModal: FC<Props> = (props: Props) => {
           <div className="border border-gray">
             <label className="px-3 py-2 mb-0 d-flex align-items-center">
               <input
-                className="mr-2"
+                className="me-2"
                 type="checkbox"
                 onChange={e => includeTrashPagesChangeHandler(e.target.checked)}
                 checked={includeTrashPages}

apps/app/src/components/SearchPage/SearchPageBase.tsx

@@ -180,7 +180,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
           {/* Loading */}
           { pages == null && (
             <div className="mw-0 flex-grow-1 flex-basis-0 m-5 text-muted text-center">
-              <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+              <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
             </div>
           ) }
 

apps/app/src/components/SearchPage/SortControl.tsx

@@ -41,7 +41,7 @@ const SortControl: FC <Props> = (props: Props) => {
             className="btn dropdown-toggle py-1"
             data-toggle="dropdown"
           >
-            <span className="mr-2 text-secondary">{t(`search_result.sort_axis.${sort}`)}</span>
+            <span className="me-2 text-secondary">{t(`search_result.sort_axis.${sort}`)}</span>
           </button>
           <div className="dropdown-menu dropdown-menu-right">
             {Object.values(SORT_AXIS).map((sortAxis) => {

apps/app/src/components/SearchTypeahead.tsx

@@ -210,7 +210,7 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
           <MenuItem key={pageWithMeta.data._id} option={pageWithMeta} position={index}>
             <span>
               <UserPicture user={pageWithMeta.data.lastUpdateUser} size="sm" noLink />
-              <span className="ms-1 mr-2 text-break text-wrap"><PagePathLabel path={pageWithMeta.data.path} /></span>
+              <span className="ms-1 me-2 text-break text-wrap"><PagePathLabel path={pageWithMeta.data.path} /></span>
               <PageListMeta page={pageWithMeta.data} />
             </span>
           </MenuItem>

apps/app/src/components/Sidebar/PageTree/Item.tsx

@@ -463,7 +463,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
             <>
               {shouldShowAttentionIcon && (
                 <>
-                  <i id="path-recovery" className="fa fa-warning mr-2 text-warning"></i>
+                  <i id="path-recovery" className="fa fa-warning me-2 text-warning"></i>
                   <UncontrolledTooltip placement="top" target="path-recovery" fade={false}>
                     {t('tooltip.operation.attention.rename')}
                   </UncontrolledTooltip>
@@ -501,7 +501,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
               operationProcessData={page.processData}
             >
               {/* pass the color property to reactstrap dropdownToggle props. https://6-4-0--reactstrap.netlify.app/components/dropdowns/  */}
-              <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
+              <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover me-1">
                 <i id="option-button-in-page-tree" className="icon-options fa fa-rotate-90 p-1"></i>
               </DropdownToggle>
             </PageItemControl>
@@ -551,7 +551,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
             />
             {isCreating && (currentChildren.length - 1 === index) && (
               <div className="text-muted text-center">
-                <i className="fa fa-spinner fa-pulse mr-1"></i>
+                <i className="fa fa-spinner fa-pulse me-1"></i>
               </div>
             )}
           </div>

apps/app/src/components/Sidebar/PageTree/PrivateLegacyPagesLink.tsx

@@ -13,7 +13,7 @@ export const PrivateLegacyPagesLink: FC = memo(() => {
       className="h5 grw-private-legacy-pages-anchor text-decoration-none"
       prefetch={false}
     >
-      <i className="icon-drawer mr-2"></i> {t('private_legacy_pages.title')}
+      <i className="icon-drawer me-2"></i> {t('private_legacy_pages.title')}
     </Link>
   );
 });

apps/app/src/components/Sidebar/PersonalDropdown.tsx

@@ -21,7 +21,7 @@ export const PersonalDropdown = (): JSX.Element => {
   if (currentUser == null) {
     return (
       <div className="text-muted text-center mb-5">
-        <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+        <i className="fa fa-2x fa-spinner fa-pulse me-1" />
       </div>
     );
   }

apps/app/src/components/Sidebar/RecentChanges/RecentChangesSubstance.tsx

@@ -34,10 +34,10 @@ const PageItemLower = memo(({ page }: PageItemLowerProps): JSX.Element => {
   return (
     <div className="d-flex justify-content-between grw-recent-changes-item-lower pt-1">
       <div className="d-flex">
-        <div className="footstamp-icon mr-1 d-inline-block"><FootstampIcon /></div>
-        <div className="mr-2 grw-list-counts d-inline-block">{page.seenUsers.length}</div>
-        <div className="icon-bubble mr-1 d-inline-block"></div>
-        <div className="mr-2 grw-list-counts d-inline-block">{page.commentCount}</div>
+        <div className="footstamp-icon me-1 d-inline-block"><FootstampIcon /></div>
+        <div className="me-2 grw-list-counts d-inline-block">{page.seenUsers.length}</div>
+        <div className="icon-bubble me-1 d-inline-block"></div>
+        <div className="me-2 grw-list-counts d-inline-block">{page.commentCount}</div>
       </div>
       <div className="grw-formatted-distance-date small mt-auto" data-vrt-blackout-datetime>
         <FormattedDistanceDate id={page._id} date={page.updatedAt} />
@@ -71,7 +71,7 @@ const PageItem = memo(({ page, isSmall }: PageItemProps): JSX.Element => {
       <Link
         key={tag.name}
         href={`/_search?q=tag:${tag.name}`}
-        className="grw-tag-label badge bg-primary mr-2 small"
+        className="grw-tag-label badge bg-primary me-2 small"
         prefetch={false}
       >
         {tag.name}

apps/app/src/components/TagCloudBox.tsx

@@ -33,7 +33,7 @@ const TagCloudBox: FC<Props> = memo((props:(Props & typeof defaultProps)) => {
       <Link
         key={tag.name}
         href={`${url.pathname}${url.search}`}
-        className="grw-tag-label badge bg-primary mr-2"
+        className="grw-tag-label badge bg-primary me-2"
         prefetch={false}
       >
         {tagNameFormat}

apps/app/src/components/TemplateModal/TemplateModal.tsx

@@ -74,7 +74,7 @@ const TemplateListGroupItem: React.FC<TemplateSummaryItemProps> = ({
       </h4>
       <p className="mb-2">{localizedTemplate.desc}</p>
       { templateLocales != null && Array.from(templateLocales).map(locale => (
-        <span key={locale} className="badge border rounded-pill text-muted mr-1">{locale}</span>
+        <span key={locale} className="badge border rounded-pill text-muted me-1">{locale}</span>
       ))}
     </a>
   );
@@ -103,7 +103,7 @@ const TemplateDropdownItem: React.FC<TemplateSummaryItemProps> = ({
       </h4>
       <p className="mb-1 text-wrap">{localizedTemplate.desc}</p>
       { templateLocales != null && Array.from(templateLocales).map(locale => (
-        <span key={locale} className="badge border rounded-pill text-muted mr-1">{locale}</span>
+        <span key={locale} className="badge border rounded-pill text-muted me-1">{locale}</span>
       ))}
     </DropdownItem>
   );

apps/app/src/components/User/SeenUserInfo.tsx

@@ -28,7 +28,7 @@ const SeenUserInfo: FC<Props> = (props: Props) => {
   return (
     <div className={`grw-seen-user-info ${styles['grw-seen-user-info']}`}>
       <button type="button" id="btn-seen-user" className="shadow-none btn btn-seen-user border-0">
-        <span className="mr-1 footstamp-icon">
+        <span className="me-1 footstamp-icon">
           <FootstampIcon />
         </span>
         <span className="seen-user-count">{sumOfSeenUsers || seenUsers.length}</span>

apps/app/src/components/User/UserInfo.tsx

@@ -26,9 +26,9 @@ export const UserInfo = (props: UserInfoProps): JSX.Element => {
           {author.name}
         </h1>
         <div className="user-page-meta mt-3 mb-0">
-          <span className="user-page-username mr-4"><i className="icon-user mr-1"></i>{author.username}</span>
-          <span className="user-page-email mr-2">
-            <i className="icon-envelope mr-1"></i>
+          <span className="user-page-username me-4"><i className="icon-user me-1"></i>{author.username}</span>
+          <span className="user-page-email me-2">
+            <i className="icon-envelope me-1"></i>
             { author.isEmailPublished
               ? author.email
               : '*****'

apps/app/src/components/UsersHomepageFooter.tsx

@@ -49,7 +49,7 @@ export const UsersHomepageFooter = (props: UsersHomepageFooterProps): JSX.Elemen
       </div>
       <div className="grw-user-page-list-m mt-5 d-edit-none">
         <h2 id="recently-created-list" className="grw-user-page-header border-bottom pb-2 mb-3">
-          <i id="recent-created-icon" className="mr-1"><RecentlyCreatedIcon /></i>
+          <i id="recent-created-icon" className="me-1"><RecentlyCreatedIcon /></i>
           {t('footer.recently_created')}
         </h2>
         <div id="user-created-list" className={`page-list ${styles['page-list']}`}>

apps/app/src/features/questionnaire/client/components/ProactiveQuestionnaireModal.tsx

@@ -93,7 +93,7 @@ const ProactiveQuestionnaireModal = (props: ModalProps): JSX.Element => {
             <form className="px-5" onSubmit={submitHandler}>
               <div className="form-group row mt-5">
                 <label className="col-sm-5 col-form-label" htmlFor="satisfaction">
-                  <span className="badge bg-primary mr-2">{t('questionnaire_modal.required')}</span>{t('questionnaire_modal.satisfaction_with_growi')}
+                  <span className="badge bg-primary me-2">{t('questionnaire_modal.required')}</span>{t('questionnaire_modal.satisfaction_with_growi')}
                 </label>
                 <select className="col-sm-7 form-control" name="satisfaction" id="satisfaction" required>
                   <option value="">▼ {t('Select')}</option>
@@ -130,7 +130,7 @@ const ProactiveQuestionnaireModal = (props: ModalProps): JSX.Element => {
               </div>
               <div className="form-group row mt-3">
                 <label className="col-sm-5 col-form-label" htmlFor="commentText">
-                  <span className="badge bg-primary mr-2">{t('questionnaire_modal.required')}</span>{t('questionnaire_modal.comment_on_growi')}
+                  <span className="badge bg-primary me-2">{t('questionnaire_modal.required')}</span>{t('questionnaire_modal.comment_on_growi')}
                 </label>
                 <textarea className="col-sm-7 form-control" name="commentText" id="commentText" rows={5} required />
               </div>

apps/app/src/features/questionnaire/client/components/Question.tsx

@@ -22,7 +22,7 @@ const Question = ({ question, inputNamePrefix }: QuestionProps): JSX.Element =>
       </div>
       <div className="col-6 d-flex align-items-center pl-0">
         <div className="btn-group btn-group-toggle flex-fill grw-questionnaire-btn-group" data-toggle="buttons">
-          <label className="btn btn-outline-primary active mr-4 rounded">
+          <label className="btn btn-outline-primary active me-4 rounded">
             <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-noAnswer`} value="0" defaultChecked /> -
           </label>
           <label className="btn btn-outline-primary rounded-start">

apps/app/src/features/questionnaire/client/components/QuestionnaireModal.tsx

@@ -149,7 +149,7 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
 
             {currentUser?.admin && (
               <a href="/admin/app#questionnaire-settings">
-                <i className="material-icons mr-1">admin_panel_settings</i>
+                <i className="material-icons me-1">admin_panel_settings</i>
               </a>
             )}
             {currentUser != null && (

apps/app/src/features/questionnaire/client/components/QuestionnaireToast.tsx

@@ -71,11 +71,11 @@ const QuestionnaireToast = ({ questionnaireOrder }: QuestionnaireToastProps): JS
   return (
     <div className={`toast ${isOpen ? 'show' : 'hide'}`}>
       <div className="toast-header bg-primary">
-        <strong className="mr-auto text-light">{questionnaireOrderShortTitle}</strong>
+        <strong className="me-auto text-light">{questionnaireOrderShortTitle}</strong>
         <button type="button" className="ms-2 mb-1 btn-close" onClick={closeBtnClickHandler} aria-label="Close"></button>
       </div>
       <div className="toast-body bg-light text-dark d-flex justify-content-end">
-        <button type="button" className="btn btn-secondary mr-3" onClick={answerBtnClickHandler}>{t('questionnaire.answer')}</button>
+        <button type="button" className="btn btn-secondary me-3" onClick={answerBtnClickHandler}>{t('questionnaire.answer')}</button>
         <button type="button" className="btn btn-secondary" onClick={denyBtnClickHandler}>{t('questionnaire.deny')}</button>
       </div>
     </div>

apps/app/src/pages/login/error/[message].page.tsx

@@ -92,7 +92,7 @@ const LoginPage: NextPage<CommonProps> = () => {
           </div>
           {/* If the transition source is "/login", use <a /> tag since the transition will not occur if next/link is used. */}
           <a href="/login">
-            <i className="icon-login mr-1" />{t('Sign in is here')}
+            <i className="icon-login me-1" />{t('Sign in is here')}
           </a>
         </div>
       </div>

packages/remark-attachment-refs/src/client/components/AttachmentList.tsx

@@ -43,7 +43,7 @@ export const AttachmentList = ({
     if (isLoading) {
       return (
         <div className="text-muted">
-          <i className="fa fa-spinner fa-pulse mr-1"></i>
+          <i className="fa fa-spinner fa-pulse me-1"></i>
           <span className="attachment-refs-blink">{refsContext.toString()}</span>
         </div>
       );

packages/remark-lsx/src/client/components/Lsx.tsx

@@ -71,7 +71,7 @@ const LsxSubstance = React.memo(({
     return (
       <div className={`text-muted ${isLoading ? 'lsx-blink' : ''}`}>
         <small>
-          <i className="fa fa-spinner fa-pulse mr-1"></i>
+          <i className="fa fa-spinner fa-pulse me-1"></i>
           {lsxContext.toString()}
         </small>
       </div>