float left and float right to s e

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

@@ -135,7 +135,7 @@ export const AdminNavigation = (): JSX.Element => {
           aria-haspopup="true"
           aria-expanded="false"
         >
-          <span className="float-left">
+          <span className="float-start">
             {/* eslint-disable no-multi-spaces */}
             {pathname === '/admin'                  && <MenuLabel menu="home" />}
             {isActiveMenu('/app')                   && <MenuLabel menu="app" />}

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

@@ -21,7 +21,7 @@ const LabeledProgressBar = (props: Props): JSX.Element => {
     <>
       <h6 className="my-1">
         {header}
-        <div className="float-right">{currentCount} / {totalCount}</div>
+        <div className="float-end">{currentCount} / {totalCount}</div>
       </h6>
       <Progress multi>
         <Progress bar max={totalCount} color={progressingColor} striped={isInProgress} animated={isInProgress} value={currentCount} />

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

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

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

@@ -44,7 +44,7 @@ const IndentForm = (props: Props) => {
           <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">
-              <span className="float-left">
+              <span className="float-start">
                 {adminPreferredIndentSize || 4}
               </span>
             </DropdownToggle>

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

@@ -196,7 +196,7 @@ class SecuritySetting extends React.Component {
           aria-haspopup="true"
           aria-expanded="true"
         >
-          <span className="float-left">
+          <span className="float-start">
             {t(getDeleteConfigValueForT(currentState))}
           </span>
         </button>
@@ -407,7 +407,7 @@ class SecuritySetting extends React.Component {
                 aria-haspopup="true"
                 aria-expanded="true"
               >
-                <span className="float-left">
+                <span className="float-start">
                   {currentRestrictGuestMode === 'Deny' && t('security_settings.guest_mode.deny')}
                   {currentRestrictGuestMode === 'Readonly' && t('security_settings.guest_mode.readonly')}
                 </span>

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

@@ -101,7 +101,7 @@ const PermissionSettingForEachPermissionTypeComponent = ({
             aria-haspopup="true"
             aria-expanded="true"
           >
-            <span className="float-left">
+            <span className="float-start">
               {currentPermissionType === PermissionTypes.ALLOW_ALL
               && t('admin:slack_integration.accordion.allow_all')}
               {currentPermissionType === PermissionTypes.DENY_ALL

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

@@ -93,7 +93,7 @@ const SinglePermissionSettingComponent = ({
             aria-haspopup="true"
             aria-expanded="true"
           >
-            <span className="float-left">
+            <span className="float-start">
               {permission === true && t('admin:slack_integration.accordion.allow_all')}
               {permission === false && t('admin:slack_integration.accordion.deny_all')}
               {Array.isArray(permission) && t('admin:slack_integration.accordion.allow_specified')}

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

@@ -57,7 +57,7 @@ export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element =>
         aria-haspopup="true"
         aria-expanded="false"
       >
-        <span className="float-left">
+        <span className="float-start">
           { Icon != null && <Icon /> } {i18n}
         </span>
       </button>

apps/app/src/components/InstallerForm.tsx

@@ -112,7 +112,7 @@ const InstallerForm = memo((): JSX.Element => {
                 aria-haspopup="true"
                 aria-expanded="true"
               >
-                <span className="float-left">
+                <span className="float-start">
                   {t('meta.display_name')}
                 </span>
               </button>

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

@@ -181,7 +181,7 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
                     data-toggle="dropdown"
                     disabled={selectedGrant !== PageGrant.GRANT_USER_GROUP} // disable when its radio input is not selected
                   >
-                    <span className="float-left ml-2">
+                    <span className="float-start ml-2">
                       {
                         selectedGroup == null
                           ? t('fix_page_grant.modal.select_group_default_text')

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

@@ -44,7 +44,7 @@ export const PageRedirectedAlert = React.memo((): JSX.Element => {
       <span>
         <strong>{ t('Redirected') }:</strong> { t('page_page.notice.redirected')} <code>{redirectFrom}</code> {t('page_page.notice.redirected_period')}
       </span>
-      <button type="button" id="unlink-page-button" onClick={unlinkButtonClickHandler} className="btn btn-outline-dark btn-sm float-right">
+      <button type="button" id="unlink-page-button" onClick={unlinkButtonClickHandler} className="btn btn-outline-dark btn-sm float-end">
         <i className="ti ti-unlink" aria-hidden="true"></i>
         {t('unlink_redirection')}
       </button>

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

@@ -211,7 +211,7 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
           <div className="d-lg-none col mb-3">
             <UncontrolledDropdown>
               <DropdownToggle caret type="button" outline className="w-100 text-right" disabled={isLoading}>
-                <span className="float-left">
+                <span className="float-start">
                   { (() => {
                     if (isLoading) {
                       return 'Loading..';
@@ -246,8 +246,8 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
               </div>
               <div className="col-6 d-flex justify-content-end">
                 <UncontrolledDropdown>
-                  <DropdownToggle caret type="button" outline className="float-right" disabled={selectedTemplateSummary == null}>
-                    <span className="float-left">{selectedTemplateLocale != null ? selectedTemplateLocale : t('Language')}</span>
+                  <DropdownToggle caret type="button" outline className="float-end" disabled={selectedTemplateSummary == null}>
+                    <span className="float-start">{selectedTemplateLocale != null ? selectedTemplateLocale : t('Language')}</span>
                   </DropdownToggle>
                   <DropdownMenu className="dropdown-menu" role="menu">
                     { selectedTemplateLocales != null && Array.from(selectedTemplateLocales).map((locale) => {