style(experience): update the devTenantNotification style (#6745)

update the devTenantNotification style

Author: simeng-li

packages/experience-legacy/src/App.tsx

@@ -7,6 +7,7 @@ import LoadingLayerProvider from './Providers/LoadingLayerProvider';
 import PageContextProvider from './Providers/PageContextProvider';
 import SettingsProvider from './Providers/SettingsProvider';
 import UserInteractionContextProvider from './Providers/UserInteractionContextProvider';
+import DevelopmentTenantNotification from './containers/DevelopmentTenantNotification';
 import Callback from './pages/Callback';
 import Consent from './pages/Consent';
 import Continue from './pages/Continue';
@@ -50,6 +51,7 @@ const App = () => {
       <PageContextProvider>
         <SettingsProvider>
           <UserInteractionContextProvider>
+            <DevelopmentTenantNotification />
             <AppBoundary>
               <Routes>
                 <Route element={<LoadingLayerProvider />}>

packages/experience-legacy/src/Layout/AppLayout/index.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import { Outlet } from 'react-router-dom';
 
 import LogtoSignature from '@/components/LogtoSignature';
-import DevelopmentTenantNotification from '@/containers/DevelopmentTenantNotification';
 import usePlatform from '@/hooks/use-platform';
 import { layoutClassNames } from '@/utils/consts';
 
@@ -17,7 +16,6 @@ const AppLayout = () => {
       <div className={classNames(styles.container, layoutClassNames.pageContainer)}>
         {!isMobile && <CustomContent className={layoutClassNames.customContent} />}
         <main className={classNames(styles.main, layoutClassNames.mainContent)}>
-          <DevelopmentTenantNotification />
           <Outlet />
           <LogtoSignature className={classNames(styles.signature, layoutClassNames.signature)} />
         </main>

packages/experience-legacy/src/containers/DevelopmentTenantNotification/index.tsx

@@ -1,9 +1,9 @@
 import { useContext, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
 import DevIcon from '@/assets/icons/dev-icon.svg?react';
-import usePlatform from '@/hooks/use-platform';
 
 /**
  * Styles that may effect the visibility of a DOM element.
@@ -50,27 +50,29 @@ const DevelopmentTenantNotification = () => {
   const iconRef = useRef<HTMLSpanElement>(null);
   const { experienceSettings, isPreview } = useContext(PageContext);
   const { isDevelopmentTenant } = experienceSettings ?? {};
-  const { isMobile } = usePlatform();
 
   const styles: Record<string, string> = Object.freeze({
     display: 'flex',
     'align-items': 'center',
     'justify-content': 'center',
     'align-self': 'stretch',
     gap: '8px',
-    margin: isMobile ? '-16px -20px 16px' : '-24px -24px 0',
-    padding: '12px 16px',
-    'border-radius': isMobile ? 'unset' : '8px 8px 0 0',
-    background: 'var(--color-container-alert)',
+    padding: '6px 16px',
+    'border-radius': 'unset',
+    background: 'var(--color-container-on-alert)',
     font: 'var(--font-label-2)',
-    color: 'var(--color-type-primary)',
+    color: 'var(--color-static-white)',
+    position: 'fixed',
+    left: '0',
+    right: '0',
+    'z-index': '9999',
   });
 
   const iconStyles: Record<string, string> = Object.freeze({
     // Use 'display: inline-flex' and 'align-items: center' to vertically center the icon
     display: 'inline-flex',
     'align-items': 'center',
-    color: 'var(--color-container-on-alert)',
+    color: 'var(--color-container-alert)',
   });
 
   useEffect(() => {
@@ -86,13 +88,14 @@ const DevelopmentTenantNotification = () => {
     return null;
   }
 
-  return (
+  return createPortal(
     <div ref={ref}>
       <span ref={iconRef}>
         <DevIcon />
       </span>
       {t('development_tenant.notification')}
-    </div>
+    </div>,
+    document.body
   );
 };
 

packages/experience/src/App.tsx

@@ -7,6 +7,7 @@ import LoadingLayerProvider from './Providers/LoadingLayerProvider';
 import PageContextProvider from './Providers/PageContextProvider';
 import SettingsProvider from './Providers/SettingsProvider';
 import UserInteractionContextProvider from './Providers/UserInteractionContextProvider';
+import DevelopmentTenantNotification from './containers/DevelopmentTenantNotification';
 import Callback from './pages/Callback';
 import Consent from './pages/Consent';
 import Continue from './pages/Continue';
@@ -49,6 +50,7 @@ const App = () => {
       <PageContextProvider>
         <SettingsProvider>
           <UserInteractionContextProvider>
+            <DevelopmentTenantNotification />
             <AppBoundary>
               <Routes>
                 <Route element={<LoadingLayerProvider />}>

packages/experience/src/Layout/AppLayout/index.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import { Outlet } from 'react-router-dom';
 
 import LogtoSignature from '@/components/LogtoSignature';
-import DevelopmentTenantNotification from '@/containers/DevelopmentTenantNotification';
 import usePlatform from '@/hooks/use-platform';
 import { layoutClassNames } from '@/utils/consts';
 
@@ -17,7 +16,6 @@ const AppLayout = () => {
       <div className={classNames(styles.container, layoutClassNames.pageContainer)}>
         {!isMobile && <CustomContent className={layoutClassNames.customContent} />}
         <main className={classNames(styles.main, layoutClassNames.mainContent)}>
-          <DevelopmentTenantNotification />
           <Outlet />
           <LogtoSignature className={classNames(styles.signature, layoutClassNames.signature)} />
         </main>

packages/experience/src/containers/DevelopmentTenantNotification/index.tsx

@@ -1,9 +1,9 @@
 import { useContext, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
 import DevIcon from '@/assets/icons/dev-icon.svg?react';
-import usePlatform from '@/hooks/use-platform';
 
 /**
  * Styles that may effect the visibility of a DOM element.
@@ -50,27 +50,29 @@ const DevelopmentTenantNotification = () => {
   const iconRef = useRef<HTMLSpanElement>(null);
   const { experienceSettings, isPreview } = useContext(PageContext);
   const { isDevelopmentTenant } = experienceSettings ?? {};
-  const { isMobile } = usePlatform();
 
   const styles: Record<string, string> = Object.freeze({
     display: 'flex',
     'align-items': 'center',
     'justify-content': 'center',
     'align-self': 'stretch',
     gap: '8px',
-    margin: isMobile ? '-16px -20px 16px' : '-24px -24px 0',
-    padding: '12px 16px',
-    'border-radius': isMobile ? 'unset' : '8px 8px 0 0',
-    background: 'var(--color-container-alert)',
+    padding: '6px 16px',
+    'border-radius': 'unset',
+    background: 'var(--color-container-on-alert)',
     font: 'var(--font-label-2)',
-    color: 'var(--color-type-primary)',
+    color: 'var(--color-static-white)',
+    position: 'fixed',
+    left: '0',
+    right: '0',
+    'z-index': '9999',
   });
 
   const iconStyles: Record<string, string> = Object.freeze({
     // Use 'display: inline-flex' and 'align-items: center' to vertically center the icon
     display: 'inline-flex',
     'align-items': 'center',
-    color: 'var(--color-container-on-alert)',
+    color: 'var(--color-container-alert)',
   });
 
   useEffect(() => {
@@ -86,13 +88,14 @@ const DevelopmentTenantNotification = () => {
     return null;
   }
 
-  return (
+  return createPortal(
     <div ref={ref}>
       <span ref={iconRef}>
         <DevIcon />
       </span>
       {t('development_tenant.notification')}
-    </div>
+    </div>,
+    document.body
   );
 };