text right to text end

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

@@ -739,7 +739,7 @@ class CodeMirrorEditor extends AbstractEditor {
       <div className="overlay overlay-gfm-cheatsheet mt-1 p-3">
         { this.state.isSimpleCheatsheetShown
           ? (
-            <div className="text-right">
+            <div className="text-end">
               {cheatsheetModalButton}
               <div className="mb-2 d-none d-md-block">
                 <SimpleCheatsheet />

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

@@ -50,7 +50,7 @@ const MailSetting = (props: Props) => {
         <div className="alert alert-danger"><i className="icon-exclamation"></i> {t('admin:app_setting.mailer_is_not_set_up')}</div>
       )}
       <div className="row form-group mb-5">
-        <label className="col-md-3 col-form-label text-right">{t('admin:app_setting.from_e-mail_address')}</label>
+        <label className="col-md-3 col-form-label text-end">{t('admin:app_setting.from_e-mail_address')}</label>
         <div className="col-md-6">
           <input
             className="form-control"

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

@@ -127,7 +127,7 @@ export const AdminNavigation = (): JSX.Element => {
       {/* Dropdown */}
       <div className="dropdown d-block d-lg-none mb-5">
         <button
-          className="btn btn-outline-primary btn-lg dropdown-toggle col-12 text-right"
+          className="btn btn-outline-primary btn-lg dropdown-toggle col-12 text-end"
           type="button"
           id="dropdown-admin-navigation"
           data-display="static"

apps/app/src/components/Admin/Customize/CustomizeCssSetting.tsx

@@ -50,7 +50,7 @@ const CustomizeCssSetting = (props: Props): JSX.Element => {
               onChange={(e) => { adminCustomizeContainer.changeCustomizeCss(e.target.value) }}
             />
             {/* disabled in v6.0.0 temporarily -- 2022.12.19 Yuki Takei
-            <p className="form-text text-muted text-right">
+            <p className="form-text text-muted text-end">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
               {t('admin:customize_settings.ctrl_space')}
             </p>

apps/app/src/components/Admin/Customize/CustomizeNoscriptSetting.tsx

@@ -54,7 +54,7 @@ const CustomizeNoscriptSetting = (props: Props): JSX.Element => {
               onChange={(e) => { adminCustomizeContainer.changeCustomizeNoscript(e.target.value) }}
             />
             {/* disabled in v6.0.0 temporarily -- 2022.12.19 Yuki Takei
-            <span className="form-text text-muted text-right">
+            <span className="form-text text-muted text-end">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
               {t('admin:customize_settings.ctrl_space')}
             </span>

apps/app/src/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -51,7 +51,7 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
               onChange={(e) => { adminCustomizeContainer.changeCustomizeScript(e.target.value) }}
             />
             {/* disabled in v6.0.0 temporarily -- 2022.12.19 Yuki Takei
-            <span className="form-text text-muted text-right">
+            <span className="form-text text-muted text-end">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
               {t('admin:customize_settings.ctrl_space')}
             </span>

apps/app/src/components/Admin/Customize/PagingSizeUncontrolledDropdown.jsx

@@ -23,7 +23,7 @@ const PagingSizeUncontrolledDropdown = (props) => {
             <label>{props.label}</label>
           </div>
           <UncontrolledDropdown>
-            <DropdownToggle className="text-right col-6" caret>
+            <DropdownToggle className="text-end col-6" caret>
               <span className="float-start">{props.toggleLabel}</span>
             </DropdownToggle>
             <DropdownMenu className="dropdown-menu" role="menu">

apps/app/src/components/Admin/MarkdownSetting/IndentForm.tsx

@@ -43,7 +43,7 @@ const IndentForm = (props: Props) => {
         <div>
           <label htmlFor="adminPreferredIndentSize">{t('markdown_settings.indent_options.indentSize')}</label>
           <UncontrolledDropdown id="adminPreferredIndentSize">
-            <DropdownToggle caret className="col-3 col-sm-2 col-md-5 col-lg-5 col-xl-3 text-right">
+            <DropdownToggle caret className="col-3 col-sm-2 col-md-5 col-lg-5 col-xl-3 text-end">
               <span className="float-start">
                 {adminPreferredIndentSize || 4}
               </span>

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

@@ -104,7 +104,7 @@ class GitHubSecurityManagementContents extends React.Component {
             <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
 
             <div className="row mb-5">
-              <label htmlFor="githubClientId" className="col-3 text-right py-2">{t('security_settings.clientID')}</label>
+              <label htmlFor="githubClientId" className="col-3 text-end py-2">{t('security_settings.clientID')}</label>
               <div className="col-6">
                 <input
                   className="form-control"
@@ -120,7 +120,7 @@ class GitHubSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="githubClientSecret" className="col-3 text-right py-2">{t('security_settings.client_secret')}</label>
+              <label htmlFor="githubClientSecret" className="col-3 text-end py-2">{t('security_settings.client_secret')}</label>
               <div className="col-6">
                 <input
                   className="form-control"

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

@@ -102,7 +102,7 @@ class GoogleSecurityManagementContents extends React.Component {
             <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
 
             <div className="row mb-5">
-              <label htmlFor="googleClientId" className="col-3 text-right py-2">{t('security_settings.clientID')}</label>
+              <label htmlFor="googleClientId" className="col-3 text-end py-2">{t('security_settings.clientID')}</label>
               <div className="col-6">
                 <input
                   className="form-control"
@@ -118,7 +118,7 @@ class GoogleSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="googleClientSecret" className="col-3 text-right py-2">{t('security_settings.client_secret')}</label>
+              <label htmlFor="googleClientSecret" className="col-3 text-end py-2">{t('security_settings.client_secret')}</label>
               <div className="col-6">
                 <input
                   className="form-control"

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

@@ -189,7 +189,7 @@ class SecuritySetting extends React.Component {
     return (
       <div className="dropdown">
         <button
-          className="btn btn-outline-secondary dropdown-toggle text-right"
+          className="btn btn-outline-secondary dropdown-toggle text-end"
           type="button"
           id="dropdownMenuButton"
           data-toggle="dropdown"
@@ -399,7 +399,7 @@ class SecuritySetting extends React.Component {
           <div className="col-md-9">
             <div className="dropdown">
               <button
-                className={`btn btn-outline-secondary dropdown-toggle text-right col-12
+                className={`btn btn-outline-secondary dropdown-toggle text-end col-12
                             col-md-auto ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}`}
                 type="button"
                 id="dropdownMenuButton"

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

@@ -94,7 +94,7 @@ const PermissionSettingForEachPermissionTypeComponent = ({
         </p>
         <div className="col dropdown">
           <button
-            className="btn btn-outline-secondary dropdown-toggle text-right col-12 col-md-auto"
+            className="btn btn-outline-secondary dropdown-toggle text-end col-12 col-md-auto"
             type="button"
             id="dropdownMenuButton"
             data-toggle="dropdown"

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

@@ -86,7 +86,7 @@ const SinglePermissionSettingComponent = ({
         <p className="col my-auto text-capitalize align-middle">{commandName}</p>
         <div className="col dropdown">
           <button
-            className="btn btn-outline-secondary dropdown-toggle text-right col-12 col-md-auto"
+            className="btn btn-outline-secondary dropdown-toggle text-end col-12 col-md-auto"
             type="button"
             id="dropdownMenuButton"
             data-toggle="dropdown"

apps/app/src/components/BookmarkButtons.tsx

@@ -100,7 +100,7 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
                 <>
                   { bookmarkedUsers.length > 0
                     ? (
-                      <div className="px-2 text-right user-list-content text-truncate text-muted">
+                      <div className="px-2 text-end user-list-content text-truncate text-muted">
                         <UserPictureList users={bookmarkedUsers} />
                       </div>
                     )

apps/app/src/components/CustomNavigation/CustomNav.tsx

@@ -51,7 +51,7 @@ export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element =>
   return (
     <div className="grw-custom-nav-dropdown btn-group btn-block">
       <button
-        className="btn btn-outline-primary btn-lg btn-block dropdown-toggle text-right"
+        className="btn btn-outline-primary btn-lg btn-block dropdown-toggle text-end"
         type="button"
         data-toggle="dropdown"
         aria-haspopup="true"

apps/app/src/components/InstallerForm.tsx

@@ -105,7 +105,7 @@ const InstallerForm = memo((): JSX.Element => {
               </div>
               <button
                 type="button"
-                className="btn btn-secondary dropdown-toggle form-control text-right rounded-end"
+                className="btn btn-secondary dropdown-toggle form-control text-end rounded-end"
                 id="dropdownLanguage"
                 data-testid="dropdownLanguage"
                 data-toggle="dropdown"

apps/app/src/components/LikeButtons.tsx

@@ -69,7 +69,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
           </button>
           <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-likes" toggle={togglePopover} trigger="legacy">
             <PopoverBody className="user-list-popover">
-              <div className="px-2 text-right user-list-content text-truncate text-muted">
+              <div className="px-2 text-end user-list-content text-truncate text-muted">
                 {props.likers?.length ? <UserPictureList users={props.likers} /> : t('No users have liked this yet.')}
               </div>
             </PopoverBody>

apps/app/src/components/LoginForm.tsx

@@ -282,7 +282,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           </span>
           <span className="btn-label-text">{t('Sign in')}</span>
         </button>
-        <div className="small text-right">by {auth} Account</div>
+        <div className="small text-end">by {auth} Account</div>
       </div>
     );
   }, [handleLoginWithExternalAuth, t]);
@@ -535,7 +535,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
         <div className="border-bottom"></div>
 
         <div className="row">
-          <div className="text-right col-12 mt-2 py-2">
+          <div className="text-end col-12 mt-2 py-2">
             <a
               href="#login"
               id="login"
@@ -569,7 +569,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                 {isLocalOrLdapStrategiesEnabled && renderLocalOrLdapLoginForm()}
                 {isSomeExternalAuthEnabled && renderExternalAuthLoginForm()}
                 {isLocalOrLdapStrategiesEnabled && isPasswordResetEnabled && (
-                  <div className="text-right mb-2">
+                  <div className="text-end mb-2">
                     <a href="/forgot-password" className="d-block link-switch">
                       <i className="icon-key"></i> {t('forgot_password.forgot_password')}
                     </a>
@@ -577,7 +577,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                 )}
                 {/* Sign up link */}
                 {isRegistrationEnabled && (
-                  <div className="text-right mb-2">
+                  <div className="text-end mb-2">
                     <a
                       href="#register"
                       id="register"

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

@@ -177,7 +177,7 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
                 <div className="dropdown ms-2">
                   <button
                     type="button"
-                    className="btn btn-secondary dropdown-toggle text-right w-100 border-0 shadow-none"
+                    className="btn btn-secondary dropdown-toggle text-end w-100 border-0 shadow-none"
                     data-toggle="dropdown"
                     disabled={selectedGrant !== PageGrant.GRANT_USER_GROUP} // disable when its radio input is not selected
                   >

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 me-2">{error}</span>;
+    const errorMessage = <span className="text-danger text-end me-2">{error}</span>;
     const cancelButton = (
       <Button
         outline

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

@@ -210,7 +210,7 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
           {/* Dropdown */}
           <div className="d-lg-none col mb-3">
             <UncontrolledDropdown>
-              <DropdownToggle caret type="button" outline className="w-100 text-right" disabled={isLoading}>
+              <DropdownToggle caret type="button" outline className="w-100 text-end" disabled={isLoading}>
                 <span className="float-start">
                   { (() => {
                     if (isLoading) {

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

@@ -35,7 +35,7 @@ const SeenUserInfo: FC<Props> = (props: Props) => {
       </button>
       <Popover placement="bottom" isOpen={isPopoverOpen} target="btn-seen-user" toggle={togglePopover} trigger="legacy" disabled={disabled}>
         <PopoverBody className="user-list-popover">
-          <div className="px-2 text-right user-list-content text-truncate text-muted">
+          <div className="px-2 text-end user-list-content text-truncate text-muted">
             <UserPictureList users={seenUsers} />
           </div>
         </PopoverBody>

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

@@ -130,7 +130,7 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
             </div>
             <div className="container">
               <div className="row mt-4">
-                <div className="col-md-2 offset-md-5 font-weight-bold text-right align-items-center p-0">{t('questionnaire.no_answer')}</div>
+                <div className="col-md-2 offset-md-5 font-weight-bold text-end align-items-center p-0">{t('questionnaire.no_answer')}</div>
                 <div className="col-md-5 d-flex justify-content-between align-items-center">
                   <span className="font-weight-bold">{t('questionnaire.disagree')}</span>
                   <span className="font-weight-bold">{t('questionnaire.agree')}</span>