Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

fix: demo banner zIndex, display on top (#5776)

Browse Source 
This PR does 2 things:
- Fixes the `DemoBanner` zIndex to be the same as the sticky banners (no
longer displays on top of modals)
- Moves the `Demo` wrapper to `App` instead of `MainLayout`, always
displaying the demo banner before other banners


![image](https://github.com/Unleash/unleash/assets/14320932/b115ee7f-26e0-468f-91aa-1f82335a6538)
This commit is contained in:
Nuno Góis 2024-01-05 14:57:34 +00:00 committed by GitHub
parent 1724219487
commit c6ba9603c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 89 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
frontend/src/component/App.tsx
View File

@ -23,6 +23,7 @@ import { InitialRedirect } from './InitialRedirect';
import { InternalBanners } from './banners/internalBanners/InternalBanners';
import { ExternalBanners } from './banners/externalBanners/ExternalBanners';
import { LicenseBanner } from './banners/internalBanners/LicenseBanner';
import { Demo } from './demo/Demo';
const StyledContainer = styled('div')(() => ({
'& ul': {
@ -59,58 +60,62 @@ export const App = () => {
condition={!hasFetchedAuth}
show={<Loader />}
elseShow={
<>
<ConditionallyRender
condition={Boolean(
uiConfig?.maintenanceMode,
)}
show={<MaintenanceBanner />}
/>
<LicenseBanner />
<ExternalBanners />
<InternalBanners />
<StyledContainer>
<ToastRenderer />
<Routes>
{availableRoutes.map(
(route) => (
<Route
key={route.path}
path={route.path}
element={
<LayoutPicker
isStandalone={
route.isStandalone ===
true
}
>
<ProtectedRoute
route={
route
}
/>
</LayoutPicker>
}
/>
),
<Demo>
<>
<ConditionallyRender
condition={Boolean(
uiConfig?.maintenanceMode,
)}
<Route
path='/'
element={
<InitialRedirect />
}
/>
<Route
path='*'
element={<NotFound />}
/>
</Routes>
show={<MaintenanceBanner />}
/>
<LicenseBanner />
<ExternalBanners />
<InternalBanners />
<StyledContainer>
<ToastRenderer />
<Routes>
{availableRoutes.map(
(route) => (
<Route
key={route.path}
path={
route.path
}
element={
<LayoutPicker
isStandalone={
route.isStandalone ===
true
}
>
<ProtectedRoute
route={
route
}
/>
</LayoutPicker>
}
/>
),
)}
<Route
path='/'
element={
<InitialRedirect />
}
/>
<Route
path='*'
element={<NotFound />}
/>
</Routes>
<FeedbackNPS openUrl='http://feedback.unleash.run' />
<FeedbackNPS openUrl='http://feedback.unleash.run' />
<SplashPageRedirect />
</StyledContainer>
</>
<SplashPageRedirect />
</StyledContainer>
</>
</Demo>
}
/>
</Suspense>

2
frontend/src/component/demo/DemoBanner/DemoBanner.tsx
View File

@ -3,7 +3,7 @@ import { Sticky } from 'component/common/Sticky/Sticky';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
const StyledBanner = styled(Sticky)(({ theme }) => ({
zIndex: theme.zIndex.sticky,
zIndex: theme.zIndex.sticky - 100,
display: 'flex',
gap: theme.spacing(1),
justifyContent: 'center',

82
frontend/src/component/layout/MainLayout/MainLayout.tsx
View File

@ -14,7 +14,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { DraftBanner } from './DraftBanner/DraftBanner';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
import { Demo } from 'component/demo/Demo';
import { useUiFlag } from 'hooks/useUiFlag';
interface IMainLayoutProps {
@ -111,55 +110,42 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
return (
<>
<SkipNavLink />
<Demo>
<>
<Header />
<SkipNavTarget />
<MainLayoutContainer>
<MainLayoutContentWrapper>
<ConditionallyRender
condition={Boolean(
projectId &&
isChangeRequestConfiguredInAnyEnv(),
)}
show={
<DraftBanner
project={projectId || ''}
/>
}
<Header />
<SkipNavTarget />
<MainLayoutContainer>
<MainLayoutContentWrapper>
<ConditionallyRender
condition={Boolean(
projectId &&
isChangeRequestConfiguredInAnyEnv(),
)}
show={<DraftBanner project={projectId || ''} />}
/>
<StyledMainLayoutContent item xs={12} sm={12} my={2}>
<MainLayoutContentContainer ref={ref}>
<BreadcrumbNav />
<Proclamation toast={uiConfig.toast} />
{children}
</MainLayoutContentContainer>
</StyledMainLayoutContent>
<ThemeMode
darkmode={
<StyledImg
style={{ opacity: 0.06 }}
src={formatAssetPath(textureImage)}
alt=''
/>
<StyledMainLayoutContent
item
xs={12}
sm={12}
my={2}
>
<MainLayoutContentContainer ref={ref}>
<BreadcrumbNav />
<Proclamation toast={uiConfig.toast} />
{children}
</MainLayoutContentContainer>
</StyledMainLayoutContent>
<ThemeMode
darkmode={
<StyledImg
style={{ opacity: 0.06 }}
src={formatAssetPath(textureImage)}
alt=''
/>
}
lightmode={
<StyledImg
src={formatAssetPath(textureImage)}
alt=''
/>
}
}
lightmode={
<StyledImg
src={formatAssetPath(textureImage)}
alt=''
/>
</MainLayoutContentWrapper>
<Footer />
</MainLayoutContainer>
</>
</Demo>
}
/>
</MainLayoutContentWrapper>
<Footer />
</MainLayoutContainer>
</>
);
},