ml to ms

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

@@ -125,7 +125,7 @@ export const GrowiNavbar = (props: Props): JSX.Element => {
       </div>
 
       {/* Navbar Right  */}
-      <ul className="navbar-nav ml-auto">
+      <ul className="navbar-nav ms-auto">
         <NavbarRight />
         <Confidential confidential={confidential} />
       </ul>

apps/app/_obsolete/src/components/PageEditor/ConflictDiffModal.tsx

@@ -171,7 +171,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
                 <div>
                   <UserPicture user={request.user} size="lg" noLink noTooltip />
                 </div>
-                <div className="ml-3 text-muted">
+                <div className="ms-3 text-muted">
                   <p className="my-0">updated by {request.user.username}</p>
                   <p className="my-0">{request.createdAt}</p>
                 </div>
@@ -183,7 +183,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
                 <div>
                   <UserPicture user={origin.user} size="lg" noLink noTooltip />
                 </div>
-                <div className="ml-3 text-muted">
+                <div className="ms-3 text-muted">
                   <p className="my-0">updated by {origin.user.username}</p>
                   <p className="my-0">{origin.createdAt}</p>
                 </div>
@@ -195,7 +195,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
                 <div>
                   <UserPicture user={latest.user} size="lg" noLink noTooltip />
                 </div>
-                <div className="ml-3 text-muted">
+                <div className="ms-3 text-muted">
                   <p className="my-0">updated by {latest.user.username}</p>
                   <p className="my-0">{latest.createdAt}</p>
                 </div>
@@ -272,7 +272,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
         </button>
         <button
           type="button"
-          className="btn btn-primary ml-3"
+          className="btn btn-primary ms-3"
           onClick={onResolveConflict}
           disabled={!isRevisionselected}
         >

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

@@ -52,7 +52,7 @@ const AdminHome = (props) => {
             </p>
             <hr />
             <a className="btn-link" href="/admin/app" rel="noopener noreferrer">
-              <i className="fa fa-link ml-1" aria-hidden="true"></i>
+              <i className="fa fa-link ms-1" aria-hidden="true"></i>
               <strong>{t('admin:maintenance_mode.end_maintenance_mode')}</strong>
             </a>
           </div>
@@ -65,7 +65,7 @@ const AdminHome = (props) => {
           <div className={`alert ${migrationStatus.isV5Compatible == null ? 'alert-warning' : 'alert-info'}`}>
             {t('admin:v5_page_migration.migration_desc')}
             <a className="btn-link" href="/admin/app" rel="noopener noreferrer">
-              <i className="fa fa-link ml-1" aria-hidden="true"></i>
+              <i className="fa fa-link ms-1" aria-hidden="true"></i>
               <strong>{t('admin:v5_page_migration.upgrade_to_v5')}</strong>
             </a>
           </div>
@@ -115,7 +115,7 @@ const AdminHome = (props) => {
               {t('admin:admin_top:copy_prefilled_host_information:done')}
             </Tooltip>
             {/* eslint-disable-next-line react/no-danger */}
-            <span className="ml-2" dangerouslySetInnerHTML={{ __html: t('admin:admin_top:submit_bug_report') }} />
+            <span className="ms-2" dangerouslySetInnerHTML={{ __html: t('admin:admin_top:submit_bug_report') }} />
           </div>
         </div>
       </div>

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

@@ -62,7 +62,7 @@ const AppSettingsPageContents = (props: Props) => {
             </p>
             <hr />
             <a className="btn-link" href="#maintenance-mode" rel="noopener noreferrer">
-              <i className="fa fa-fw fa-arrow-down ml-1" aria-hidden="true"></i>
+              <i className="fa fa-fw fa-arrow-down ms-1" aria-hidden="true"></i>
               <strong>{t('admin:maintenance_mode.end_maintenance_mode')}</strong>
             </a>
           </div>

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

@@ -62,7 +62,7 @@ export const ConfirmModal: FC<ConfirmModalProps> = (props: ConfirmModalProps) =>
         </button>
         <button
           type="button"
-          className="btn btn-outline-primary ml-3"
+          className="btn btn-outline-primary ms-3"
           onClick={onConfirm}
         >
           {props.confirmButtonTitle ?? t('Confirm')}

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

@@ -96,7 +96,7 @@ const MailSetting = (props: Props) => {
             { t('Update') }
           </button>
           {adminAppContainer.state.transmissionMethod === 'smtp' && (
-            <button type="button" className="btn btn-secondary ml-4" onClick={sendTestEmailHandler}>
+            <button type="button" className="btn btn-secondary ms-4" onClick={sendTestEmailHandler}>
               {t('admin:app_setting.send_test_email')}
             </button>
           )}

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

@@ -49,7 +49,7 @@ export const ActivityTable : FC<Props> = (props: Props) => {
                     <>
                       <UserPicture user={activity.user} />
                       <a
-                        className="ml-2"
+                        className="ms-2"
                         href={pagePathUtils.userHomepagePath(activity.user)}
                       >
                         {activity.snapshot?.username}

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

@@ -37,11 +37,11 @@ export const AuditLogSettings: FC = () => {
 
       <h4 className="mt-4">
         {t('admin:audit_log_management.available_action_list')}
-        <span className="badge rounded-pill bg-primary ml-2">
+        <span className="badge rounded-pill bg-primary ms-2">
           {`${availableActions.length} / ${AllSupportedActions.length}`}
         </span>
         <a
-          className="ml-2"
+          className="ms-2"
           href={t('admin:audit_log_management.docs_url.log_type')}
           target="_blank"
           rel="noopener noreferrer"

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

@@ -162,7 +162,7 @@ export const AuditLogManagement: FC = () => {
           {isSettingPage ? t('audit_log_management.audit_log_settings') : t('audit_log_management.audit_log')}
         </span>
         { !isSettingPage && (
-          <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={reloadButtonPushedHandler}>
+          <button type="button" className="btn btn-sm ms-auto grw-btn-reload" onClick={reloadButtonPushedHandler}>
             <i className="icon icon-reload"></i>
           </button>
         )}
@@ -197,7 +197,7 @@ export const AuditLogManagement: FC = () => {
           </div>
 
           <p
-            className="ml-2"
+            className="ms-2"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{ __html: activityCounter }}
           />
@@ -223,7 +223,7 @@ export const AuditLogManagement: FC = () => {
               size="sm"
             />
 
-            <div className="admin-audit-log ml-3">
+            <div className="admin-audit-log ms-3">
               <label htmlFor="jumpPageInput" className="mr-1 text-secondary">Jump To Page</label>
               <input
                 id="jumpPageInput"

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

@@ -17,7 +17,7 @@ class StatusTable extends React.PureComponent {
     } = this.props;
 
     const errorOccuredLabel = isErrorOccuredOnSearchService
-      ? <span className="badge rounded-pill bg-danger ml-2">{ t('full_text_search_management.connection_status_label_erroroccured') }</span>
+      ? <span className="badge rounded-pill bg-danger ms-2">{ t('full_text_search_management.connection_status_label_erroroccured') }</span>
       : null;
 
     let connectionStatusLabel = null;
@@ -68,7 +68,7 @@ class StatusTable extends React.PureComponent {
           <a role="button" className="text-nowrap mr-2" data-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
             <i className="fa fa-fw fa-database"></i> {indexName}
           </a>
-          <span className="ml-md-3">{aliasLabels}</span>
+          <span className="ms-md-3">{aliasLabels}</span>
         </div>
         <div id={collapseId} className="collapse">
           <div className="card-body">

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

@@ -124,7 +124,7 @@ const SelectCollectionsModal = (props: Props): JSX.Element => {
                   checked={selectedCollections.has(collectionName)}
                   onChange={toggleCheckbox}
                 />
-                <label className="text-capitalize custom-control-label ml-3" htmlFor={collectionName}>
+                <label className="text-capitalize custom-control-label ms-3" htmlFor={collectionName}>
                   {collectionName}
                 </label>
               </div>

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

@@ -123,7 +123,7 @@ export default class ImportCollectionItem extends React.Component {
             aria-expanded="true"
           >
             {this.renderModeLabel(option.mode)}
-            <span className="caret ml-2"></span>
+            <span className="caret ms-2"></span>
           </button>
           <ul className="dropdown-menu" aria-labelledby="ddmMode">
             { modes.map((mode) => {
@@ -147,7 +147,7 @@ export default class ImportCollectionItem extends React.Component {
     return (
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm p-1 ml-2"
+        className="btn btn-outline-secondary btn-sm p-1 ms-2"
         disabled={isImporting || !isConfigButtonAvailable}
         onClick={isConfigButtonAvailable ? this.configButtonClickedHandler : null}
       >

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

@@ -158,7 +158,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 <p className="font-weight-bold">Email</p>
               </label>
             </div>
-            <div className="custom-control custom-radio ml-2">
+            <div className="custom-control custom-radio ms-2">
               <input
                 className="custom-control-input"
                 type="radio"

apps/app/src/components/Admin/Notification/NotificationSetting.jsx

@@ -39,7 +39,7 @@ const SkeletonListItem = () => (
   <li className="list-group-item">
     <h4 className="mb-2">
       <span className="badge bg-primary">――</span>
-      <span className="ml-2">...</span>
+      <span className="ms-2">...</span>
     </h4>
   </li>
 );
@@ -54,7 +54,7 @@ const SlackIntegrationListItem = ({ isEnabled, currentBotType }) => {
     <li data-testid="slack-integration-list-item" className="list-group-item">
       <h4>
         <Badge isEnabled={isEnabled} />
-        <a href="/admin/slack-integration" className="ml-2">{t('slack_integration.slack_integration')}</a>
+        <a href="/admin/slack-integration" className="ms-2">{t('slack_integration.slack_integration')}</a>
       </h4>
       { isCautionVisible && (
         <ul className="mt-2 pl-4">
@@ -74,7 +74,7 @@ const LegacySlackIntegrationListItem = ({ isEnabled }) => {
     <li className="list-group-item">
       <h4>
         <Badge isEnabled={isEnabled} />
-        <a href="/admin/slack-integration-legacy" className="ml-2">{t('slack_integration_legacy.slack_integration_legacy')}</a>
+        <a href="/admin/slack-integration-legacy" className="ms-2">{t('slack_integration_legacy.slack_integration_legacy')}</a>
       </h4>
       { isEnabled && (
         <ul className="mt-2 pl-4">

apps/app/src/components/Admin/Security/LdapSecuritySettingContents.jsx

@@ -412,7 +412,7 @@ class LdapSecuritySettingContents extends React.Component {
                 </button>
                 <button
                   type="button"
-                  className="btn btn-outline-secondary ml-2"
+                  className="btn btn-outline-secondary ms-2"
                   onClick={this.openLdapAuthTestModal}
                 >{t('security_settings.ldap.test_config')}
                 </button>

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

@@ -24,7 +24,7 @@ const BridgeCore = (props) => {
         <p className={`${withProxy ? 'mt-0' : 'mt-2'}`}>
           <i className={iconClass} />
           <small
-            className="ml-2 d-none d-lg-inline"
+            className="ms-2 d-none d-lg-inline"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{ __html: description }}
           />

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

@@ -14,7 +14,7 @@ const CustomBotWithProxyConnectionStatus = (props) => {
     <div className="d-flex justify-content-center my-5 bot-integration">
 
       <div className="card rounded shadow border-0 w-50 admin-bot-card">
-        <h5 className="card-title font-weight-bold mt-3 ml-3">Slack</h5>
+        <h5 className="card-title font-weight-bold mt-3 ms-3">Slack</h5>
         <div className="card-body px-5">
           {connectionStatusValues.map((connectionStatus, i) => {
             const workspaceName = connectionStatus.workspaceName || `Settings #${i}`;
@@ -36,7 +36,7 @@ const CustomBotWithProxyConnectionStatus = (props) => {
       </div>
 
       <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
-        <h5 className="card-title font-weight-bold mt-3 ml-3">GROWI App</h5>
+        <h5 className="card-title font-weight-bold mt-3 ms-3">GROWI App</h5>
         <div className="card-body text-center">
           <div className="mx-md-3 my-4 my-lg-5 p-2 border bg-primary text-light">
             {siteName}

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

@@ -94,7 +94,7 @@ const CustomBotWithProxySettings = (props) => {
       <h2 className="admin-setting-header mb-2">{t('admin:slack_integration.custom_bot_with_proxy_integration')}
         <a href={t('admin:slack_integration.docs_url.custom_bot_with_proxy')} target="_blank" rel="noopener noreferrer">
           <i
-            className="fa fa-external-link btn-link ml-2"
+            className="fa fa-external-link btn-link ms-2"
             aria-hidden="true"
           />
         </a>

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

@@ -18,7 +18,7 @@ const CustomBotWithoutProxyConnectionStatus = (props) => {
   return (
     <div className="d-flex justify-content-center my-5 bot-integration">
       <div className="card rounded shadow border-0 w-50 admin-bot-card mb-0">
-        <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
+        <h5 className="card-title font-weight-bold mt-3 ms-4">Slack</h5>
         <div className="card-body px-4 text-center mx-md-5">
           {totalCount > 0 ? (
             <div className="card slack-work-space-name-card">
@@ -38,7 +38,7 @@ const CustomBotWithoutProxyConnectionStatus = (props) => {
       </div>
 
       <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
-        <h5 className="card-title font-weight-bold mt-3 ml-4">GROWI App</h5>
+        <h5 className="card-title font-weight-bold mt-3 ms-4">GROWI App</h5>
         <div className="card-body p-4 text-center">
           <div className="border p-2 bg-primary text-light mx-md-5">
             {siteName}

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

@@ -25,7 +25,7 @@ const CustomBotWithoutProxySettings = (props) => {
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_integration')}
         <a href={t('admin:slack_integration.docs_url.custom_bot_without_proxy')} target="_blank" rel="noopener noreferrer">
           <i
-            className="fa fa-external-link btn-link ml-2"
+            className="fa fa-external-link btn-link ms-2"
             aria-hidden="true"
           />
         </a>

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

@@ -78,7 +78,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
         <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')}>
             {t('admin:slack_integration.accordion.create_bot')}
-            <i className="fa fa-external-link ml-2" aria-hidden="true" />
+            <i className="fa fa-external-link ms-2" aria-hidden="true" />
           </button>
           <a
             href={t('admin:slack_integration.docs_url.custom_bot_without_proxy_setting')}
@@ -88,7 +88,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
             <p className="text-center mt-1">
               <small>
                 {t('admin:slack_integration.accordion.how_to_create_a_bot')}
-                <i className="fa fa-external-link ml-2" aria-hidden="true" />
+                <i className="fa fa-external-link ms-2" aria-hidden="true" />
               </small>
             </p>
           </a>
@@ -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="ml-3 text-success fa fa-check"></i>}</>}
+        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>}</>}
       >
         <CustomBotWithoutProxySecretTokenSection
           onUpdatedSecretToken={props.onUpdatedSecretToken}
@@ -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="ml-3 text-success fa fa-check"></i>}</>}
+        title={<><span className="mr-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/OfficialBotSettings.jsx

@@ -78,7 +78,7 @@ const OfficialBotSettings = (props) => {
       <h2 className="admin-setting-header">{t('admin:slack_integration.official_bot_integration')}
         <a href={t('admin:slack_integration.docs_url.official_bot')} target="_blank" rel="noopener noreferrer">
           <i
-            className="fa fa-external-link btn-link ml-2"
+            className="fa fa-external-link btn-link ms-2"
             aria-hidden="true"
             onClick={() => window.open(`${t('admin:slack_integration.docs_url.official_bot')}`, '_blank')}
           />

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

@@ -37,7 +37,7 @@ export const SlackAppIntegrationControl: FC<Props> = (props: Props) => {
         </label>
       </div>
       <button
-        className="btn btn-outline-danger ml-3"
+        className="btn btn-outline-danger ms-3"
         type="button"
         onClick={() => {
           if (onDeleteButtonClicked != null) {

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

@@ -210,8 +210,8 @@ const SlackIntegration = () => {
       <div className="selecting-bot-type mb-5">
         <h2 className="admin-setting-header mb-4">
           {t('admin:slack_integration.selecting_bot_types.slack_bot')}
-          <a className="ml-2 btn-link small" href={t('admin:slack_integration.docs_url.slack_integration')} target="_blank" rel="noopener noreferrer">
-            <i className="icon icon-question ml-1" aria-hidden="true"></i>
+          <a className="ms-2 btn-link small" href={t('admin:slack_integration.docs_url.slack_integration')} target="_blank" rel="noopener noreferrer">
+            <i className="icon icon-question ms-1" aria-hidden="true"></i>
           </a>
         </h2>
 

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

@@ -25,7 +25,7 @@ const BotCreateProcess = () => {
     <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')}>
         {t('admin:slack_integration.accordion.create_bot')}
-        <i className="fa fa-external-link ml-2" aria-hidden="true" />
+        <i className="fa fa-external-link ms-2" aria-hidden="true" />
       </button>
       <a
         href={t('admin:slack_integration.docs_url.custom_bot_with_proxy_setting')}
@@ -35,7 +35,7 @@ const BotCreateProcess = () => {
         <p className="text-center mt-1">
           <small>
             {t('admin:slack_integration.accordion.how_to_create_a_bot')}
-            <i className="fa fa-external-link ml-2" aria-hidden="true" />
+            <i className="fa fa-external-link ms-2" aria-hidden="true" />
           </small>
         </p>
       </a>
@@ -49,7 +49,7 @@ const BotInstallProcessForOfficialBot = () => {
     <div className="my-5 d-flex flex-column align-items-center">
       <button type="button" className="btn btn-primary text-nowrap" onClick={() => window.open('https://slackbot-proxy.growi.org/', '_blank')}>
         {t('admin:slack_integration.accordion.install_now')}
-        <i className="fa fa-external-link ml-2" aria-hidden="true" />
+        <i className="fa fa-external-link ms-2" aria-hidden="true" />
       </button>
       <a
         href={t('admin:slack_integration.docs_url.official_bot_setting')}
@@ -59,7 +59,7 @@ const BotInstallProcessForOfficialBot = () => {
         <p className="text-center mt-1">
           <small>
             {t('admin:slack_integration.accordion.how_to_install')}
-            <i className="fa fa-external-link ml-2" aria-hidden="true" />
+            <i className="fa fa-external-link ms-2" aria-hidden="true" />
           </small>
         </p>
       </a>
@@ -170,14 +170,14 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
         <ol className="p-0">
           <li>
             <p
-              className="ml-2"
+              className="ms-2"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.enter_growi_register_on_slack') }}
             />
           </li>
           <li>
             <p
-              className="ml-2"
+              className="ms-2"
               // TODO: Add dynamic link
               // TODO: Add logo
               // eslint-disable-next-line react/no-danger
@@ -193,7 +193,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
           </li>
           <li>
             <p
-              className="ml-2"
+              className="ms-2"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.enter_access_token_for_growi_and_proxy') }}
             />
@@ -391,7 +391,7 @@ const WithProxyAccordions = (props) => {
               <>
                 <span className="mr-2">{key}</span>
                 {t(`admin:slack_integration.accordion.${value.title}`)}
-                {value.title === 'test_connection' && isLatestConnectionSuccess && <i className="ml-3 text-success fa fa-check"></i>}
+                {value.title === 'test_connection' && isLatestConnectionSuccess && <i className="ms-3 text-success fa fa-check"></i>}
               </>
             )}
             key={key}

apps/app/src/components/Admin/UserGroupDetail/CheckBoxForSerchUserOption.jsx

@@ -1,8 +1,8 @@
 
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 
 class CheckBoxForSerchUserOption extends React.Component {
 
@@ -17,7 +17,7 @@ class CheckBoxForSerchUserOption extends React.Component {
           checked={this.props.checked}
           onChange={this.props.onChange}
         />
-        <label className="text-capitalize custom-control-label ml-3" htmlFor={`isAlso${option}Searched`}>
+        <label className="text-capitalize custom-control-label ms-3" htmlFor={`isAlso${option}Searched`}>
           {t('admin:user_group_management.add_modal.enable_option', { option })}
         </label>
       </div>

apps/app/src/components/Admin/UserGroupDetail/RadioButtonForSerchUserOption.jsx

@@ -1,8 +1,8 @@
 
 import React from 'react';
 
-import PropTypes from 'prop-types';
 import { useTranslation } from 'next-i18next';
+import PropTypes from 'prop-types';
 
 const RadioButtonForSerchUserOption = (props) => {
 
@@ -17,7 +17,7 @@ const RadioButtonForSerchUserOption = (props) => {
         checked={props.checked}
         onChange={props.onChange}
       />
-      <label className="text-capitalize custom-control-label ml-3" htmlFor={`${searchType}Match`}>
+      <label className="text-capitalize custom-control-label ms-3" htmlFor={`${searchType}Match`}>
         {t(`admin:user_group_management.add_modal.${searchType}_match`)}
       </label>
     </div>

apps/app/src/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -98,9 +98,9 @@ class UserGroupUserFormByInput extends React.Component {
     return (
       <>
         <UserPicture user={user} size="sm" noLink noTooltip />
-        <strong className="ml-2">{user.username}</strong>
-        {isAlsoNameSearched && <span className="ml-2">{user.name}</span>}
-        {isAlsoMailSearched && <span className="ml-2">{user.email}</span>}
+        <strong className="ms-2">{user.username}</strong>
+        {isAlsoNameSearched && <span className="ms-2">{user.name}</span>}
+        {isAlsoMailSearched && <span className="ms-2">{user.email}</span>}
       </>
     );
   }

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

@@ -125,7 +125,7 @@ const UserManagement = (props: UserManagementProps) => {
         <InviteUserControl />
         <Link
           href="/admin/users/external-accounts"
-          className="btn btn-outline-secondary ml-2"
+          className="btn btn-outline-secondary ms-2"
           role="button"
         >
           <i className="icon-user-follow mr-1" aria-hidden="true"></i>

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

@@ -48,7 +48,7 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
             </th>
             <th style={{ width: '200px' }}>
               <div className="d-flex align-items-center">
-                {t('user_management.related_username')}<code className="ml-2">username</code>
+                {t('user_management.related_username')}<code className="ms-2">username</code>
               </div>
             </th>
             <th style={{ width: '100px' }}>

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

@@ -67,7 +67,7 @@ class PasswordResetModal extends React.Component {
     const { t, isMailerSetup, userForPasswordResetModal } = this.props;
 
     return (
-      <div className="d-flex col text-left ml-1 pl-0">
+      <div className="d-flex col text-left ms-1 pl-0">
         {!isMailerSetup ? (
           <label className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />
         ) : (

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

@@ -153,12 +153,12 @@ const UserTable = (props: UserTableProps) => {
                 <td>
                   {getUserStatusLabel(user.status)}
                   {(user.admin) && (
-                    <span className="badge bg-indigo rounded-pill ml-2">
+                    <span className="badge bg-indigo rounded-pill ms-2">
                       {t('admin:user_management.user_table.administrator')}
                     </span>
                   )}
                   {(user.readOnly) && (
-                    <span className="badge bg-light text-dark rounded-pill ml-2">
+                    <span className="badge bg-light text-dark rounded-pill ms-2">
                       {t('admin:user_management.user_table.read_only')}
                     </span>
                   )}

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

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

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

@@ -402,7 +402,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
             )}
           </div>
           {(isAbleToShowPageAuthors && !isCompactMode && !pagePathUtils.isUsersHomepage(path ?? '')) && (
-            <ul className={`${AuthorInfoStyles['grw-author-info']} text-nowrap border-start d-none d-lg-block d-edit-none py-2 pl-4 mb-0 ml-3`}>
+            <ul className={`${AuthorInfoStyles['grw-author-info']} text-nowrap border-start d-none d-lg-block d-edit-none py-2 pl-4 mb-0 ms-3`}>
               <li className="pb-1">
                 {currentPage != null
                   ? <AuthorInfo user={currentPage.creator as IUser} date={currentPage.createdAt} mode="create" locate="subnav" />

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

@@ -60,7 +60,7 @@ export const GrowiNavbarBottom = (): JSX.Element => {
               </li>
             )
           }
-          <li className="nav-item ml-auto">
+          <li className="nav-item ms-auto">
             <a
               role="button"
               className="nav-link btn-lg"

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

@@ -45,7 +45,7 @@ const WideViewMenuItem = (props: WideViewMenuItemProps): JSX.Element => {
       onClick={() => onClickMenuItem(!(expandContentWidth))}
       className="grw-page-control-dropdown-item"
     >
-      <div className="custom-control custom-switch ml-1">
+      <div className="custom-control custom-switch ms-1">
         <input
           id="switchContentWidth"
           className="custom-control-input"

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

@@ -41,7 +41,7 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
               onClick={openEditorHandler}
             >
               { isTagsEmpty && <>{ t('Add tags for this page') }</>}
-              <i className={`icon-plus ${isTagsEmpty && 'ml-1'}`} />
+              <i className={`icon-plus ${isTagsEmpty && 'ms-1'}`} />
             </a>
           </div>
         </NotAvailableForReadOnlyUser>

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

@@ -53,7 +53,7 @@ export const ShareLink = (): JSX.Element => {
     <div className="container p-0" data-testid="share-link-management">
       <h3 className="grw-modal-head d-flex pb-2">
         { t('share_links.share_link_list') }
-        <button className="btn btn-danger ml-auto " type="button" onClick={deleteAllLinksButtonHandler}>{t('delete_all')}</button>
+        <button className="btn btn-danger ms-auto " type="button" onClick={deleteAllLinksButtonHandler}>{t('delete_all')}</button>
       </h3>
       <div>
         <ShareLinkList

apps/app/src/components/PageAccessoriesModal/ShareLink/ShareLinkForm.tsx

@@ -165,7 +165,7 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
               <div className="d-inline-flex flex-wrap">
                 <input
                   type="date"
-                  className="ml-3 mb-2"
+                  className="ms-3 mb-2"
                   name="customExpirationDate"
                   value={format(customExpirationDate, 'yyyy-MM-dd')}
                   onFocus={() => { handleChangeExpirationType(ExpirationType.CUSTOM) }}
@@ -173,7 +173,7 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
                 />
                 <input
                   type="time"
-                  className="ml-3 mb-2"
+                  className="ms-3 mb-2"
                   name="customExpiration"
                   value={format(customExpirationTime, 'HH:mm')}
                   onFocus={() => { handleChangeExpirationType(ExpirationType.CUSTOM) }}

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

@@ -132,7 +132,7 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
             {/* grant data label */}
             {renderGrantDataLabel()}
 
-            <div className="ml-2">
+            <div className="ms-2">
               <div className="custom-control custom-radio mb-3">
                 <input
                   className="custom-control-input"
@@ -174,14 +174,14 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
                 <label className="custom-control-label" htmlFor="grantUserGroup">
                   { t('fix_page_grant.modal.radio_btn.grant_group') }
                 </label>
-                <div className="dropdown ml-2">
+                <div className="dropdown ms-2">
                   <button
                     type="button"
                     className="btn btn-secondary dropdown-toggle text-right w-100 border-0 shadow-none"
                     data-toggle="dropdown"
                     disabled={selectedGrant !== PageGrant.GRANT_USER_GROUP} // disable when its radio input is not selected
                   >
-                    <span className="float-start ml-2">
+                    <span className="float-start ms-2">
                       {
                         selectedGroup == null
                           ? t('fix_page_grant.modal.select_group_default_text')
@@ -263,7 +263,7 @@ export const FixPageGrantAlert = (): JSX.Element => {
     <>
       <div className="alert alert-warning py-3 pl-4 d-flex flex-column flex-lg-row">
         <div className="flex-grow-1 d-flex align-items-center">
-          <i className="icon-fw icon-exclamation ml-1" aria-hidden="true" />
+          <i className="icon-fw icon-exclamation ms-1" aria-hidden="true" />
           {t('fix_page_grant.alert.description')}
         </div>
         <div className="d-flex align-items-end align-items-lg-center">

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 ml-auto mr-2"
+          className="btn btn-info rounded-pill btn-sm ms-auto mr-2"
           onClick={openPutbackPageModalHandler}
           data-toggle="modal"
           data-testid="put-back-button"
@@ -117,7 +117,7 @@ export const TrashPageAlert = (): JSX.Element => {
           This page is in the trash <i className="icon-trash" aria-hidden="true"></i>.
           <br />
           <UserPicture user={deleteUser} />
-          <span className="ml-2">
+          <span className="ms-2">
             Deleted by {deleteUser?.name} at <span data-vrt-blackout-datetime>{deletedAt ?? pageData?.updatedAt}</span>
           </span>
         </div>

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

@@ -173,7 +173,7 @@ export const Comment = (props: CommentProps): JSX.Element => {
                   <UncontrolledTooltip placement="bottom" fade={false} target={editedDateId}>{editedDateFormatted}</UncontrolledTooltip>
                 </>
               ) }
-              <span className="ml-2">
+              <span className="ms-2">
                 <Link
                   id={`page-comment-revision-${commentId}`}
                   href={urljoin(returnPathForURL(pagePath, pageId), revHref)}

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']} ml-4 ml-sm-5 mr-3`}>
+      <div key={reply._id} className={`${styles['page-comment-reply']} ms-4 ms-sm-5 mr-3`}>
         <Comment
           rendererOptions={rendererOptions}
           comment={reply}

apps/app/src/components/PageCreateModal.jsx

@@ -175,7 +175,7 @@ const PageCreateModal = () => {
                 </form>
                 <span className="page-today-suffix">/{now}/</span>
               </div>
-              <form className="mt-1 mt-lg-0 ml-lg-2 w-100" onSubmit={e => transitBySubmitEvent(e, createTodayPage)}>
+              <form className="mt-1 mt-lg-0 ms-lg-2 w-100" onSubmit={e => transitBySubmitEvent(e, createTodayPage)}>
                 <input
                   type="text"
                   className="page-today-input2 form-control w-100"
@@ -191,7 +191,7 @@ const PageCreateModal = () => {
               <button
                 type="button"
                 data-testid="btn-create-memo"
-                className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3"
+                className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ms-3"
                 onClick={createTodayPage}
               >
                 <i className="icon-fw icon-doc"></i>{t('Create')}
@@ -244,7 +244,7 @@ const PageCreateModal = () => {
               <button
                 type="button"
                 data-testid="btn-create-page-under-below"
-                className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3"
+                className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ms-3"
                 onClick={createInputPage}
                 disabled={isMatchedWithUserHomepagePath}
               >
@@ -299,7 +299,7 @@ const PageCreateModal = () => {
               <button
                 data-testid="grw-btn-edit-page"
                 type="button"
-                className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3"
+                className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ms-3"
                 onClick={createTemplatePage}
                 disabled={template == null}
               >

apps/app/src/components/PageDeleteModal.tsx

@@ -232,7 +232,7 @@ const PageDeleteModal: FC = () => {
       return pages.map(page => (
         <p key={page.data._id} className="mb-1">
           <code>{ page.data.path }</code>
-          { page.meta?.isDeletable != null && !page.meta.isDeletable && <span className="ml-3 text-danger"><strong>(CAN NOT TO DELETE)</strong></span> }
+          { page.meta?.isDeletable != null && !page.meta.isDeletable && <span className="ms-3 text-danger"><strong>(CAN NOT TO DELETE)</strong></span> }
         </p>
       ));
     }

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

@@ -65,7 +65,7 @@ const EditorNavbarBottom = (): JSX.Element => {
   );
 
   const renderExpandButton = () => (
-    <div className="d-md-none ml-2">
+    <div className="d-md-none ms-2">
       <button
         type="button"
         className={`btn btn-outline-secondary btn-expand border-0 ${isExpanded ? 'expand' : ''}`}
@@ -105,7 +105,7 @@ const EditorNavbarBottom = (): JSX.Element => {
           { isDeviceSmallerThanMd && renderDrawerButton() }
           { isOptionsSelectorEnabled && !isDeviceSmallerThanMd && <OptionsSelector /> }
         </form>
-        <form className="form-inline flex-nowrap ml-auto">
+        <form className="form-inline flex-nowrap ms-auto">
           {/* Responsive Design for the SlackNotification */}
           {/* Button or the normal Slack banner */}
           {isSlackConfigured && (isDeviceSmallerThanMd ? (
@@ -115,7 +115,7 @@ const EditorNavbarBottom = (): JSX.Element => {
             >
               <div className="grw-slack-logo">
                 <SlackLogo />
-                <span className="grw-btn-slack-triangle fa fa-caret-up ml-2"></span>
+                <span className="grw-btn-slack-triangle fa fa-caret-up ms-2"></span>
               </div>
             </Button>
           ) : (
@@ -141,7 +141,7 @@ const EditorNavbarBottom = (): JSX.Element => {
         <Collapse isOpen={isExpanded}>
           <div className="px-2"> {/* set padding for border-top */}
             <div className={`navbar navbar-expand border-top px-0 ${additionalClasses.join(' ')}`}>
-              <form className="form-inline ml-auto">
+              <form className="form-inline ms-auto">
                 <OptionsSelector />
               </form>
             </div>

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

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

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

@@ -501,7 +501,7 @@ export const HandsontableModal = (): JSX.Element => {
       </ModalBody>
       <ModalFooter className="grw-modal-footer">
         <button type="button" className="btn btn-danger" onClick={reset}>{t('commons:Reset')}</button>
-        <div className="ml-auto">
+        <div className="ms-auto">
           <button type="button" className="mr-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>

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

@@ -258,17 +258,17 @@ export const OptionsSelector = (): JSX.Element => {
         <span>
           <ThemeSelector />
         </span>
-        <span className="d-none d-sm-block ml-2 ml-sm-4">
+        <span className="d-none d-sm-block ms-2 ms-sm-4">
           <KeymapSelector />
         </span>
-        <span className="ml-2 ml-sm-4">
+        <span className="ms-2 ms-sm-4">
           <IndentSizeSelector
             isIndentSizeForced={isIndentSizeForced}
             selectedIndentSize={currentIndentSize}
             onChange={newValue => mutateCurrentIndentSize(newValue)}
           />
         </span>
-        <span className="ml-2 ml-sm-4">
+        <span className="ms-2 ms-sm-4">
           <ConfigurationDropdown />
         </span>
       </div>

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

@@ -133,7 +133,7 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
               onClose={onClose}
             />
             {hasDiff && (
-              <div className="ml-md-3 mt-auto">
+              <div className="ms-md-3 mt-auto">
                 <div className="btn-group">
                   <button
                     type="button"

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

@@ -41,7 +41,7 @@ export const Revision = (props: RevisionProps): JSX.Element => {
         <div className="picture-container">
           { pic }
         </div>
-        <div className="ml-3">
+        <div className="ms-3">
           <span className="text-muted small">
             <UserDate dateTime={revision.createdAt} /> {t('No diff')}
           </span>
@@ -61,17 +61,17 @@ export const Revision = (props: RevisionProps): JSX.Element => {
         <div className="picture-container">
           { pic }
         </div>
-        <div className="ml-2">
+        <div className="ms-2">
           <div className="revision-history-author mb-1">
             <strong><Username user={author}></Username></strong>
-            { isLatestRevision && <span className="badge bg-info ml-2">Latest</span> }
+            { isLatestRevision && <span className="badge bg-info ms-2">Latest</span> }
           </div>
           <div className="mb-1">
             <UserDate dateTime={revision.createdAt} />
             <br className="d-xl-none d-block" />
             <Link
               href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${revision._id}`)}
-              className="ml-xl-3"
+              className="ms-xl-3"
               onClick={onClose}
               prefetch={false}
             >

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

@@ -56,7 +56,7 @@ export const RevisionDiff = (props: RevisioinDiffProps): JSX.Element => {
               <span className="comparison-source pr-3">{t('page_history.comparing_source')}</span><UserDate dateTime={previousRevision.createdAt} />
               <Link
                 href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${previousRevision._id}`)}
-                className="ml-3"
+                className="ms-3"
                 onClick={onClose}
                 prefetch={false}
               >
@@ -67,7 +67,7 @@ export const RevisionDiff = (props: RevisioinDiffProps): JSX.Element => {
               <span className="comparison-target pr-3">{t('page_history.comparing_target')}</span><UserDate dateTime={currentRevision.createdAt} />
               <Link
                 href={urljoin(returnPathForURL(currentPagePath, currentPageId), `?revisionId=${currentRevision._id}`)}
-                className="ml-3"
+                className="ms-3"
                 onClick={onClose}
                 prefetch={false}
               >

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

@@ -250,14 +250,14 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
               </Clamp>
 
               {/* page meta */}
-              <div className="d-none d-md-flex py-0 px-1 ml-2 text-nowrap">
+              <div className="d-none d-md-flex py-0 px-1 ms-2 text-nowrap">
                 <PageListMeta page={pageData} likerCount={likerCount} bookmarkCount={bookmarkCount} shouldSpaceOutIcon />
               </div>
 
               {/* doropdown icon includes page control buttons */}
               {hasBrowsingRights
                 && (
-                  <div className="ml-auto">
+                  <div className="ms-auto">
                     <PageItemControl
                       alignEnd
                       pageId={pageData._id}

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

@@ -43,7 +43,7 @@ export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
       ) : (
         pagePathElement
       )}
-      <span className="ml-2">
+      <span className="ms-2">
         <PageListMeta page={page} shouldSpaceOutIcon />
       </span>
     </>

apps/app/src/components/PrivateLegacyPages.tsx

@@ -92,12 +92,12 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
       <div className="form-inline d-flex align-items-center justify-content-between">
         <div className="text-nowrap">
           {t('search_result.result_meta')}
-          <span className="ml-3">{`${leftNum}-${rightNum}`} / {total}</span>
+          <span className="ms-3">{`${leftNum}-${rightNum}`} / {total}</span>
           { took != null && (
-            <span className="ml-3 text-muted">({took}ms)</span>
+            <span className="ms-3 text-muted">({took}ms)</span>
           ) }
         </div>
-        <div className="input-group flex-nowrap search-result-select-group ml-auto d-md-flex d-none">
+        <div className="input-group flex-nowrap search-result-select-group ms-auto d-md-flex d-none">
           <div className="input-group-prepend">
             <label className="input-group-text text-muted" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
           </div>

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

@@ -61,19 +61,19 @@ export const RichAttachment: React.FC<{
               <a target="_blank" rel="noopener noreferrer" href={filePathProxied}>
                 {attachmentName || originalName}
               </a>
-              <a className="ml-2 attachment-download" href={downloadPathProxied}>
+              <a className="ms-2 attachment-download" href={downloadPathProxied}>
                 <i className="icon-cloud-download" />
               </a>
-              <a className="ml-2 text-danger attachment-delete" onClick={onClickTrashButtonHandler}>
+              <a className="ms-2 text-danger attachment-delete" onClick={onClickTrashButtonHandler}>
                 <i className="icon-trash" />
               </a>
             </div>
             <div className="d-flex align-items-center">
               <UserPicture user={creator} size="sm" />
-              <span className="ml-2 text-muted">
+              <span className="ms-2 text-muted">
                 {new Date(createdAt).toLocaleString('en-US')}
               </span>
-              <span className="ml-2 pl-2 border-start text-muted">{prettyBytes(fileSize)}</span>
+              <span className="ms-2 pl-2 border-start text-muted">{prettyBytes(fileSize)}</span>
             </div>
           </div>
         </div>

apps/app/src/components/RevisionComparer/RevisionComparer.tsx

@@ -67,7 +67,7 @@ export const RevisionComparer = (props: RevisionComparerProps): JSX.Element => {
       <div className="d-flex">
         <h4 className="align-self-center">{ t('page_history.comparing_revisions') }</h4>
         <Dropdown
-          className="grw-copy-dropdown align-self-center ml-auto"
+          className="grw-copy-dropdown align-self-center ms-auto"
           isOpen={dropdownOpen}
           toggle={() => toggleDropdown()}
         >

apps/app/src/components/SearchPage.tsx

@@ -60,14 +60,14 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
     <div className="form-inline d-flex align-items-center justify-content-between">
       <div className="text-nowrap">
         {t('search_result.result_meta')}
-        <span className="search-result-keyword ml-2">{`${searchingKeyword}`}</span>
-        <span className="ml-3">{`${leftNum}-${rightNum}`} / {total}</span>
+        <span className="search-result-keyword ms-2">{`${searchingKeyword}`}</span>
+        <span className="ms-3">{`${leftNum}-${rightNum}`} / {total}</span>
         { took != null && (
           // blackout 70px rectangle in VRT
-          <span data-vrt-blackout className="ml-3 text-muted d-inline-block" style={{ minWidth: '70px' }}>({took}ms)</span>
+          <span data-vrt-blackout className="ms-3 text-muted d-inline-block" style={{ minWidth: '70px' }}>({took}ms)</span>
         ) }
       </div>
-      <div className="input-group flex-nowrap search-result-select-group ml-auto d-md-flex d-none">
+      <div className="input-group flex-nowrap search-result-select-group ms-auto d-md-flex d-none">
         <div className="input-group-prepend">
           <label className="input-group-text text-muted" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
         </div>

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

@@ -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 ml-auto">
+          <div className="mr-md-4 mr-2 d-flex d-lg-none ms-auto">
             <SortControl
               sort={sort}
               order={order}
@@ -120,7 +120,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
                 <i className="icon-equalizer"></i>
               </button>
             </div>
-            <div className="d-none d-lg-flex align-items-center ml-auto search-control-include-options">
+            <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="custom-control custom-checkbox custom-checkbox-succsess">
                   <input

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="ml-1 mr-2 text-break text-wrap"><PagePathLabel path={pageWithMeta.data.path} /></span>
+              <span className="ms-1 mr-2 text-break text-wrap"><PagePathLabel path={pageWithMeta.data.path} /></span>
               <PageListMeta page={pageWithMeta.data} />
             </span>
           </MenuItem>

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

@@ -80,7 +80,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
               <IconWithTooltip id={isEditMode ? 'iwt-sidebar-editor-drawer' : 'iwt-sidebar-drawer'} label="Drawer" additionalClasses="grw-sidebar-mode-icon">
                 <SidebarDrawerIcon />
               </IconWithTooltip>
-              <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
+              <div className="custom-control custom-switch custom-checkbox-secondary ms-2">
                 <input
                   id={isEditMode ? 'swSidebarModeOnEditor' : 'swSidebarMode'}
                   className="custom-control-input"
@@ -134,7 +134,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
                   <IconWithTooltip id="iwt-light" label="Light" additionalClasses={useOsSettings ? 'grw-color-mode-icon-muted' : 'grw-color-mode-icon'}>
                     <SunIcon />
                   </IconWithTooltip>
-                  <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
+                  <div className="custom-control custom-switch custom-checkbox-secondary ms-2">
                     <input
                       id="swUserPreference"
                       className="custom-control-input"

apps/app/src/components/Sidebar/Custom/CustomSidebar.tsx

@@ -21,7 +21,7 @@ export const CustomSidebar = (): JSX.Element => {
       <div className="grw-sidebar-content-header py-3 d-flex">
         <h3 className="mb-0">
           {t('CustomSidebar')}
-          { !isLoading && <Link href="/Sidebar#edit" className="h6 ml-2"><i className="icon-pencil"></i></Link> }
+          { !isLoading && <Link href="/Sidebar#edit" className="h6 ms-2"><i className="icon-pencil"></i></Link> }
         </h3>
         { !isLoading && <SidebarHeaderReloadButton onClick={() => mutate()} /> }
       </div>

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

@@ -49,7 +49,7 @@ export const PersonalDropdown = (): JSX.Element => {
           data-testid="personal-dropdown-button"
           aria-expanded="false"
         >
-          <UserPicture user={currentUser} noLink noTooltip /><span className="ml-1 d-none d-lg-inline-block">&nbsp;{currentUser.name}</span>
+          <UserPicture user={currentUser} noLink noTooltip /><span className="ms-1 d-none d-lg-inline-block">&nbsp;{currentUser.name}</span>
         </button>
 
         {/* Menu */}

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

@@ -12,7 +12,7 @@ const SkeletonItem = () => {
     <li className={`list-group-item ${styles['list-group-item']} ${isSmall ? 'py-2' : 'py-3'} px-0`}>
       <div className="d-flex w-100">
         <Skeleton additionalClass="rounded-circle picture" roundedPill />
-        <div className="flex-grow-1 ml-2">
+        <div className="flex-grow-1 ms-2">
           <Skeleton additionalClass={`grw-recent-changes-skeleton-small ${styles['grw-recent-changes-skeleton-small']}`} />
           <Skeleton additionalClass={`grw-recent-changes-skeleton-h5 ${styles['grw-recent-changes-skeleton-h5']} ${isSmall ? 'my-0' : 'my-2'}`} />
           <div className="d-flex justify-content-end grw-recent-changes-item-lower pt-1">

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

@@ -59,7 +59,7 @@ const PageItem = memo(({ page, isSmall }: PageItemProps): JSX.Element => {
 
   let locked;
   if (page.grant !== 1) {
-    locked = <span><i className="icon-lock ml-2" /></span>;
+    locked = <span><i className="icon-lock ms-2" /></span>;
   }
 
   const tags = page.tags;
@@ -83,7 +83,7 @@ const PageItem = memo(({ page, isSmall }: PageItemProps): JSX.Element => {
     <li className={`list-group-item ${styles['list-group-item']} ${isSmall ? 'py-2' : 'py-3'} px-0`}>
       <div className="d-flex w-100">
         <UserPicture user={page.lastUpdateUser} size="md" noTooltip />
-        <div className="flex-grow-1 ml-2">
+        <div className="flex-grow-1 ms-2">
           { !dPagePath.isRoot && <FormerLink /> }
           <h5 className={isSmall ? 'my-0 text-truncate' : 'my-2'}>
             <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.isRoot ? undefined : dPagePath.former} />
@@ -133,7 +133,7 @@ export const RecentChangesHeader = ({ isSmall, onSizeChange }: HeaderProps): JSX
     <>
       <SidebarHeaderReloadButton onClick={() => mutate()} />
       <div className="d-flex align-items-center">
-        <div className={`grw-recent-changes-resize-button ${styles['grw-recent-changes-resize-button']} custom-control custom-switch ml-1`}>
+        <div className={`grw-recent-changes-resize-button ${styles['grw-recent-changes-resize-button']} custom-control custom-switch ms-1`}>
           <input
             id="recentChangesResize"
             className="custom-control-input"

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

@@ -7,7 +7,7 @@ type Props = {
 export const SidebarHeaderReloadButton = ({ onClick }: Props) => {
 
   return (
-    <button type="button" className="btn btn-sm ml-auto py-0 grw-btn-reload" onClick={onClick}>
+    <button type="button" className="btn btn-sm ms-auto py-0 grw-btn-reload" onClick={onClick}>
       <i className="icon icon-reload"></i>
     </button>
   );

apps/app/src/components/SystemVersion.tsx

@@ -28,7 +28,7 @@ const SystemVersion = (props: Props): JSX.Element => {
           <a href="https://growi.org">GROWI</a> {growiVersion}
         </span>
         { showShortcutsButton && (
-          <button type="button" className="btn btn-link ml-2 p-0" onClick={() => openShortcutsModal()}>
+          <button type="button" className="btn btn-link ms-2 p-0" onClick={() => openShortcutsModal()}>
             <i className="fa fa-keyboard-o"></i>&nbsp;<span className={`cmd-key ${os}`}></span>-/
           </button>
         ) }

apps/app/src/components/TagList.tsx

@@ -44,7 +44,7 @@ const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) =
           prefetch={false}
         >
           <div className="text-truncate list-tag-name">{tag.name}</div>
-          <div className="ml-4 my-auto py-1 px-2 list-tag-count badge bg-primary">{tag.count}</div>
+          <div className="ms-4 my-auto py-1 px-2 list-tag-count badge bg-primary">{tag.count}</div>
         </Link>
       );
     });

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

@@ -70,7 +70,7 @@ const TemplateListGroupItem: React.FC<TemplateSummaryItemProps> = ({
     >
       <h4 className="mb-1 d-flex">
         <span className="d-inline-block text-truncate">{localizedTemplate.title}</span>
-        {localizedTemplate.pluginId != null ? <i className="icon-fw icon-puzzle ml-2 text-muted small"></i> : ''}
+        {localizedTemplate.pluginId != null ? <i className="icon-fw icon-puzzle ms-2 text-muted small"></i> : ''}
       </h4>
       <p className="mb-2">{localizedTemplate.desc}</p>
       { templateLocales != null && Array.from(templateLocales).map(locale => (
@@ -99,7 +99,7 @@ const TemplateDropdownItem: React.FC<TemplateSummaryItemProps> = ({
     >
       <h4 className="mb-1 d-flex">
         <span className="d-inline-block text-truncate">{localizedTemplate.title}</span>
-        {localizedTemplate.pluginId != null ? <i className="icon-fw icon-puzzle ml-2 text-muted small"></i> : ''}
+        {localizedTemplate.pluginId != null ? <i className="icon-fw icon-puzzle ms-2 text-muted small"></i> : ''}
       </h4>
       <p className="mb-1 text-wrap">{localizedTemplate.desc}</p>
       { templateLocales != null && Array.from(templateLocales).map(locale => (

apps/app/src/components/UsersHomepageFooter.tsx

@@ -29,7 +29,7 @@ export const UsersHomepageFooter = (props: UsersHomepageFooterProps): JSX.Elemen
         <h2 id="bookmarks-list" className="grw-user-page-header border-bottom pb-2 mb-3 d-flex">
           <i style={{ fontSize: '1.3em' }} className="fa fa-fw fa-bookmark-o"></i>
           {t('footer.bookmarks')}
-          <span className="ml-auto pl-2 ">
+          <span className="ms-auto pl-2 ">
             <button
               type="button"
               className={`btn btn-sm grw-expand-compress-btn ${isExpanded ? 'active' : ''}`}

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginsExtensionPageContents.tsx

@@ -34,7 +34,7 @@ export const PluginsExtensionPageContents = (): JSX.Element => {
         <div className="col-lg-12">
           <h2 className="admin-setting-header">
             {t('plugins.plugin_card')}
-            <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={() => mutate()}>
+            <button type="button" className="btn btn-sm ms-auto grw-btn-reload" onClick={() => mutate()}>
               <i className="icon icon-reload"></i>
             </button>
           </h2>

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

@@ -72,7 +72,7 @@ const QuestionnaireToast = ({ questionnaireOrder }: QuestionnaireToastProps): JS
     <div className={`toast ${isOpen ? 'show' : 'hide'}`}>
       <div className="toast-header bg-primary">
         <strong className="mr-auto text-light">{questionnaireOrderShortTitle}</strong>
-        <button type="button" className="ml-2 mb-1 btn-close" onClick={closeBtnClickHandler} aria-label="Close"></button>
+        <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>

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

@@ -55,7 +55,7 @@ const LsxSubstance = React.memo(({
         <summary className="text-warning">
           <i className="fa fa-exclamation-triangle fa-fw"></i> {lsxContext.toString()}
         </summary>
-        <small className="ml-3 text-muted">{errorMessage}</small>
+        <small className="ms-3 text-muted">{errorMessage}</small>
       </details>
     );
   }, [errorMessage, hasError, lsxContext]);

packages/remark-lsx/src/client/components/LsxPageList/LsxPage.tsx

@@ -103,7 +103,7 @@ export const LsxPage = React.memo((props: Props): JSX.Element => {
   return (
     <li className={`page-list-li ${styles['page-list-li']}`}>
       <small>{iconElement}</small> {pagePathElement}
-      <span className="ml-2">{pageListMetaElement}</span>
+      <span className="ms-2">{pageListMetaElement}</span>
       {childrenElements}
     </li>
   );