pl to ps

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

@@ -57,7 +57,7 @@ const SlackIntegrationListItem = ({ isEnabled, currentBotType }) => {
         <a href="/admin/slack-integration" className="ms-2">{t('slack_integration.slack_integration')}</a>
       </h4>
       { isCautionVisible && (
-        <ul className="mt-2 pl-4">
+        <ul className="mt-2 ps-4">
           {/* eslint-disable-next-line react/no-danger */}
           <li dangerouslySetInnerHTML={{ __html: t('external_notification.caution_enabled') }} />
         </ul>
@@ -77,7 +77,7 @@ const LegacySlackIntegrationListItem = ({ isEnabled }) => {
         <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">
+        <ul className="mt-2 ps-4">
           <li>
             {/* eslint-disable-next-line react/no-danger */}
             <span className="text-danger" dangerouslySetInnerHTML={{ __html: t('slack_integration_legacy.alert_deplicated') }}></span>

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

@@ -172,7 +172,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
         <form>
           <div className="row my-3 justify-content-center">
             <div className="form-group slack-connection-log col-md-4">
-              <label className="mb-1"><p className="border-info slack-connection-log-title pl-2 m-0">Logs</p></label>
+              <label className="mb-1"><p className="border-info slack-connection-log-title ps-2 m-0">Logs</p></label>
               <textarea
                 className="form-control card border-info slack-connection-log-body rounded-lg"
                 rows="5"

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

@@ -183,7 +183,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.paste_growi_url') }}
             />
-            <div className="input-group align-items-center pl-2 mb-3">
+            <div className="input-group align-items-center ps-2 mb-3">
               <div className="input-group-prepend w-75">
                 <input className="form-control" type="text" value={props.growiUrl} readOnly />
                 <CustomCopyToClipBoard textToBeCopied={props.growiUrl} message="admin:slack_integration.copied_to_clipboard"></CustomCopyToClipBoard>
@@ -269,7 +269,7 @@ const TestProcess = ({
       <form>
         <div className="row my-3 justify-content-center">
           <div className="form-group slack-connection-log col-md-4">
-            <label className="mb-1"><p className="border-info slack-connection-log-title pl-2 m-0">Logs</p></label>
+            <label className="mb-1"><p className="border-info slack-connection-log-title ps-2 m-0">Logs</p></label>
             <textarea
               className="form-control card border-info slack-connection-log-body rounded-lg"
               rows="5"

apps/app/src/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx

@@ -43,7 +43,7 @@ export const UpdateParentConfirmModal: FC = () => {
                 {t('admin:user_group_management.update_parent_confirm_modal.danger_message')}
               </div>
 
-              <div className="custom-control custom-checkbox custom-checkbox-succsess pl-5">
+              <div className="custom-control custom-checkbox custom-checkbox-succsess ps-5">
                 <input
                   className="custom-control-input"
                   name="forceUpdateParents"

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

@@ -136,7 +136,7 @@ class UserGroupUserFormByInput extends React.Component {
             clearButton
           />
         </div>
-        <div className="col-2 pl-0">
+        <div className="col-2 ps-0">
           <button
             type="button"
             className="btn btn-success"

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 ms-1 pl-0">
+      <div className="d-flex col text-left ms-1 ps-0">
         {!isMailerSetup ? (
           <label className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />
         ) : (

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

@@ -80,7 +80,7 @@ const UserMenu = (props: UserMenuProps) => {
   const renderAdminMenu = useCallback(() => {
     return (
       <>
-        <li className="dropdown-divider pl-0"></li>
+        <li className="dropdown-divider ps-0"></li>
         <li className="dropdown-header">{t('user_management.user_table.administrator_menu')}</li>
         <li>
           {user.admin ? <RevokeAdminMenuItem user={user} /> : <GrantAdminButton user={user} />}

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

@@ -250,7 +250,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
             />
           ) : (
             <>
-              <div className="grw-foldertree-title-anchor pl-2">
+              <div className="grw-foldertree-title-anchor ps-2">
                 <p className="text-truncate m-auto ">{name}</p>
               </div>
             </>

apps/app/src/components/LoginForm.tsx

@@ -597,7 +597,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             </ReactCardFlip>
           </div>
         </div>
-        <a href="https://growi.org" className="link-growi-org pl-3">
+        <a href="https://growi.org" className="link-growi-org ps-3">
           <span className="growi">GROWI</span>.<span className="org">org</span>
         </a>
       </div>

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 ms-3`}>
+            <ul className={`${AuthorInfoStyles['grw-author-info']} text-nowrap border-start d-none d-lg-block d-edit-none py-2 ps-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/PageAlert/FixPageGrantAlert.tsx

@@ -261,7 +261,7 @@ export const FixPageGrantAlert = (): JSX.Element => {
 
   return (
     <>
-      <div className="alert alert-warning py-3 pl-4 d-flex flex-column flex-lg-row">
+      <div className="alert alert-warning py-3 ps-4 d-flex flex-column flex-lg-row">
         <div className="flex-grow-1 d-flex align-items-center">
           <i className="icon-fw icon-exclamation ms-1" aria-hidden="true" />
           {t('fix_page_grant.alert.description')}

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

@@ -112,7 +112,7 @@ export const TrashPageAlert = (): JSX.Element => {
 
   return (
     <>
-      <div className="alert alert-warning py-3 pl-4 d-flex flex-column flex-lg-row" data-testid="trash-page-alert">
+      <div className="alert alert-warning py-3 ps-4 d-flex flex-column flex-lg-row" data-testid="trash-page-alert">
         <div className="flex-grow-1">
           This page is in the trash <i className="icon-trash" aria-hidden="true"></i>.
           <br />

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

@@ -24,7 +24,7 @@ export const PageAttachmentList = (props: Props): JSX.Element => {
 
   return (
     <div>
-      <ul className="pl-2">
+      <ul className="ps-2">
         {attachments.map((attachment) => {
           return (
             <Attachment

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

@@ -232,7 +232,7 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
   const renderNavbar = () => {
     return (
       <div className="m-0 navbar navbar-default navbar-editor" data-testid="navbar-editor" style={{ minHeight: 'unset' }}>
-        <ul className="pl-2 nav nav-navbar">
+        <ul className="ps-2 nav nav-navbar">
           { navBarItems.map((item, idx) => {
             // eslint-disable-next-line react/no-array-index-key
             return <li key={`navbarItem-${idx}`}>{item}</li>;

apps/app/src/components/PrivateLegacyPages.tsx

@@ -338,7 +338,7 @@ const PrivateLegacyPages = (): JSX.Element => {
 
   const renderOpenModalButton = useCallback(() => {
     return (
-      <div className="d-flex pl-md-2">
+      <div className="d-flex ps-md-2">
         <button type="button" className="btn btn-light" onClick={() => openConvertModalHandler()}>
           {t('private_legacy_pages.input_path_to_convert')}
         </button>
@@ -351,7 +351,7 @@ const PrivateLegacyPages = (): JSX.Element => {
 
     return (
       <div className="search-control d-flex align-items-center">
-        <div className="d-flex pl-md-2">
+        <div className="d-flex ps-md-2">
           <OperateAllControl
             ref={selectAllControlRef}
             isCheckboxDisabled={isCheckboxDisabled}

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

@@ -56,7 +56,7 @@ export const RichAttachment: React.FC<{
           <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">
+          <div className="ps-0">
             <div className="d-inline-block">
               <a target="_blank" rel="noopener noreferrer" href={filePathProxied}>
                 {attachmentName || originalName}
@@ -73,7 +73,7 @@ export const RichAttachment: React.FC<{
               <span className="ms-2 text-muted">
                 {new Date(createdAt).toLocaleString('en-US')}
               </span>
-              <span className="ms-2 pl-2 border-start text-muted">{prettyBytes(fileSize)}</span>
+              <span className="ms-2 ps-2 border-start text-muted">{prettyBytes(fileSize)}</span>
             </div>
           </div>
         </div>

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

@@ -17,7 +17,7 @@ export const Bookmarks = () : JSX.Element => {
         <h3 className="mb-0">{t('Bookmarks')}</h3>
       </div>
       {isGuestUser ? (
-        <h4 className="pl-3">
+        <h4 className="ps-3">
           { t('Not available for guest') }
         </h4>
       ) : (

apps/app/src/components/SlackNotification.tsx

@@ -52,7 +52,7 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
           </div>
         </label>
         <input
-          className="grw-form-control-slack-notification form-control align-top pl-0"
+          className="grw-form-control-slack-notification form-control align-top ps-0"
           id={idForSlackPopover}
           type="text"
           value={slackChannels}

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="ms-auto pl-2 ">
+          <span className="ms-auto ps-2 ">
             <button
               type="button"
               className={`btn btn-sm grw-expand-compress-btn ${isExpanded ? 'active' : ''}`}

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

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