admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UI Fixes for Dark Mode (#3337)

Browse Source 
* Forced Scroll BG color fix

* pr requested changes
This commit is contained in:
Kanav Arora
2024-01-17 16:24:29 +05:30
committed by GitHub
parent 60e9864e52
commit 5cf0077e3d
1 changed files with 34 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
View File

@ -1,4 +1,5 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { css, Global, useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { AnimatePresence, LayoutGroup } from 'framer-motion'; import { AnimatePresence, LayoutGroup } from 'framer-motion';
@ -62,30 +63,39 @@ type DefaultLayoutProps = {
export const DefaultLayout = ({ children }: DefaultLayoutProps) => { export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
const onboardingStatus = useOnboardingStatus(); const onboardingStatus = useOnboardingStatus();
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const theme = useTheme();
return ( return (
<StyledLayout> <>
<CommandMenu /> <Global
<KeyboardShortcutMenu /> styles={css`
<StyledPageContainer> body {
<StyledAppNavigationDrawer /> background: ${theme.background.tertiary};
<StyledMainContainer> }
{onboardingStatus && `}
onboardingStatus !== OnboardingStatus.Completed ? ( />
<> <StyledLayout>
<SignInBackgroundMockPage /> <CommandMenu />
<AnimatePresence mode="wait"> <KeyboardShortcutMenu />
<LayoutGroup> <StyledPageContainer>
<AuthModal>{children}</AuthModal> <StyledAppNavigationDrawer />
</LayoutGroup> <StyledMainContainer>
</AnimatePresence> {onboardingStatus &&
</> onboardingStatus !== OnboardingStatus.Completed ? (
) : ( <>
<AppErrorBoundary>{children}</AppErrorBoundary> <SignInBackgroundMockPage />
)} <AnimatePresence mode="wait">
</StyledMainContainer> <LayoutGroup>
</StyledPageContainer> <AuthModal>{children}</AuthModal>
{isMobile && <MobileNavigationBar />} </LayoutGroup>
</StyledLayout> </AnimatePresence>
</>
) : (
<AppErrorBoundary>{children}</AppErrorBoundary>
)}
</StyledMainContainer>
</StyledPageContainer>
{isMobile && <MobileNavigationBar />}
</StyledLayout>
</>
); );
}; };