chore: removes letter spacing in loading overlay for script languages (…

…#4769)
payloadcms · May 14, 2024 · bc9e591 · bc9e591
1 parent ad38011
commit bc9e591
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 20 deletions.
diff --git a/packages/payload/src/admin/Root.tsx b/packages/payload/src/admin/Root.tsx
@@ -19,6 +19,7 @@ import { ConfigProvider } from './components/utilities/Config'
 import { CustomProvider } from './components/utilities/CustomProvider'
 import { DocumentEventsProvider } from './components/utilities/DocumentEvents'
 import { I18n } from './components/utilities/I18n'
+import { LanguageWrap } from './components/utilities/LanguageWrap'
 import { LoadingOverlayProvider } from './components/utilities/LoadingOverlay'
 import { LocaleProvider } from './components/utilities/Locale'
 import { PreferencesProvider } from './components/utilities/Preferences'
@@ -46,21 +47,23 @@ const Root = ({ config: incomingConfig }: { config?: SanitizedConfig }) => {
                 <AuthProvider>
                   <PreferencesProvider>
                     <ThemeProvider>
-                      <SearchParamsProvider>
-                        <LocaleProvider>
-                          <StepNavProvider>
-                            <LoadingOverlayProvider>
-                              <DocumentEventsProvider>
-                                <NavProvider>
-                                  <CustomProvider>
-                                    <Routes />
-                                  </CustomProvider>
-                                </NavProvider>
-                              </DocumentEventsProvider>
-                            </LoadingOverlayProvider>
-                          </StepNavProvider>
-                        </LocaleProvider>
-                      </SearchParamsProvider>
+                      <LanguageWrap>
+                        <SearchParamsProvider>
+                          <LocaleProvider>
+                            <StepNavProvider>
+                              <LoadingOverlayProvider>
+                                <DocumentEventsProvider>
+                                  <NavProvider>
+                                    <CustomProvider>
+                                      <Routes />
+                                    </CustomProvider>
+                                  </NavProvider>
+                                </DocumentEventsProvider>
+                              </LoadingOverlayProvider>
+                            </StepNavProvider>
+                          </LocaleProvider>
+                        </SearchParamsProvider>
+                      </LanguageWrap>
                     </ThemeProvider>
                     <ModalContainer />
                   </PreferencesProvider>

diff --git a/packages/payload/src/admin/components/elements/Loading/index.tsx b/packages/payload/src/admin/components/elements/Loading/index.tsx
@@ -24,7 +24,6 @@ export const LoadingOverlay: React.FC<Props> = ({
   show = true,
 }) => {
   const { t } = useTranslation('general')
-
   return (
     <div
       className={[
@@ -59,25 +58,25 @@ type UseLoadingOverlayToggleT = {
 }
 export const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleT> = ({
   name: key,
+  type = 'fullscreen',
   loadingText,
   show,
-  type = 'fullscreen',
 }) => {
   const { toggleLoadingOverlay } = useLoadingOverlay()
 
   React.useEffect(() => {
     toggleLoadingOverlay({
+      type,
       isLoading: show,
       key,
       loadingText: loadingText || undefined,
-      type,
     })
 
     return () => {
       toggleLoadingOverlay({
+        type,
         isLoading: false,
         key,
-        type,
       })
     }
   }, [show, toggleLoadingOverlay, key, type, loadingText])
@@ -94,10 +93,10 @@ type FormLoadingOverlayToggleT = {
 }
 export const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleT> = ({
   name,
+  type = 'fullscreen',
   action,
   formIsLoading = false,
   loadingSuffix,
-  type = 'fullscreen',
 }) => {
   const isProcessing = useFormProcessing()
   const { i18n, t } = useTranslation('general')

diff --git a/packages/payload/src/admin/components/utilities/LanguageWrap/index.tsx b/packages/payload/src/admin/components/utilities/LanguageWrap/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import '../../../scss/app.scss'
+
+const scriptLanguages = ['ar', 'fa']
+
+export const LanguageWrap: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const { i18n } = useTranslation()
+  const currentLanguage = i18n?.language
+  const isScriptLanguage = currentLanguage && scriptLanguages.includes(currentLanguage)
+
+  return <div className={isScriptLanguage ? `script-language` : ''}>{children}</div>
+}
diff --git a/packages/payload/src/admin/scss/app.scss b/packages/payload/src/admin/scss/app.scss
@@ -200,4 +200,11 @@ dialog {
   z-index: var(--z-modal);
 }
 
+.script-language {
+  & > *,
+  & > * > * {
+    letter-spacing: 0 !important;
+  }
+}
+
 @import '~payload-user-css';