diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx index b6afb1afa7..a85fb01ca7 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx @@ -12,7 +12,6 @@ import { PAGE_LAYOUT_GRID_MARGIN } from '@/page-layout/constants/PageLayoutGridM import { PAGE_LAYOUT_GRID_ROW_HEIGHT } from '@/page-layout/constants/PageLayoutGridRowHeight'; import { usePageLayoutHandleLayoutChange } from '@/page-layout/hooks/usePageLayoutHandleLayoutChange'; import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow'; -import { useShouldUseWhiteBackground } from '@/page-layout/hooks/useShouldUseWhiteBackground'; import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState'; import { pageLayoutCurrentBreakpointComponentState } from '@/page-layout/states/pageLayoutCurrentBreakpointComponentState'; import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState'; @@ -37,13 +36,7 @@ import { } from 'react-grid-layout'; import { isDefined } from 'twenty-shared/utils'; -const StyledGridContainer = styled.div<{ - shouldUseWhiteBackground: boolean; -}>` - background: ${({ theme, shouldUseWhiteBackground }) => - shouldUseWhiteBackground - ? theme.background.primary - : theme.background.secondary}; +const StyledGridContainer = styled.div` box-sizing: border-box; flex: 1; min-height: 100%; @@ -111,8 +104,6 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => { const gridContainerRef = useRef(null); - const { shouldUseWhiteBackground } = useShouldUseWhiteBackground(); - const isPageLayoutInEditMode = useRecoilComponentValue( isPageLayoutInEditModeComponentState, ); @@ -152,10 +143,7 @@ export const PageLayoutGridLayout = ({ tabId }: PageLayoutGridLayoutProps) => { ); return ( - + {isPageLayoutInEditMode && ( <> diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx index 0c36a07ced..9eb8cbbc57 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListEditor.tsx @@ -1,4 +1,4 @@ -import { useShouldUseWhiteBackground } from '@/page-layout/hooks/useShouldUseWhiteBackground'; +import { usePageLayoutShouldUseWhiteBackground } from '@/page-layout/hooks/usePageLayoutShouldUseWhiteBackground'; import { pageLayoutDraggingWidgetIdComponentState } from '@/page-layout/states/pageLayoutDraggingWidgetIdComponentState'; import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget'; import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer'; @@ -42,7 +42,7 @@ export const PageLayoutVerticalListEditor = ({ }: PageLayoutVerticalListEditorProps) => { const droppableId = `page-layout-vertical-list-${useId()}`; - const { shouldUseWhiteBackground } = useShouldUseWhiteBackground(); + const { shouldUseWhiteBackground } = usePageLayoutShouldUseWhiteBackground(); const setDraggingWidgetId = useSetRecoilComponentState( pageLayoutDraggingWidgetIdComponentState, diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx index abd3ccc8bb..3d26d63afb 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutVerticalListViewer.tsx @@ -1,4 +1,4 @@ -import { useShouldUseWhiteBackground } from '@/page-layout/hooks/useShouldUseWhiteBackground'; +import { usePageLayoutShouldUseWhiteBackground } from '@/page-layout/hooks/usePageLayoutShouldUseWhiteBackground'; import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget'; import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer'; import styled from '@emotion/styled'; @@ -22,7 +22,7 @@ type PageLayoutVerticalListViewerProps = { export const PageLayoutVerticalListViewer = ({ widgets, }: PageLayoutVerticalListViewerProps) => { - const { shouldUseWhiteBackground } = useShouldUseWhiteBackground(); + const { shouldUseWhiteBackground } = usePageLayoutShouldUseWhiteBackground(); return ( { + const isMobile = useIsMobile(); + const { isInRightDrawer, layoutType } = useLayoutRenderingContext(); + + const shouldUseWhiteBackground = + layoutType === PageLayoutType.RECORD_PAGE && (isMobile || isInRightDrawer); + + return { shouldUseWhiteBackground }; +}; diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useShouldUseWhiteBackground.ts b/packages/twenty-front/src/modules/page-layout/hooks/useShouldUseWhiteBackground.ts deleted file mode 100644 index b368c0e7a6..0000000000 --- a/packages/twenty-front/src/modules/page-layout/hooks/useShouldUseWhiteBackground.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab'; -import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext'; -import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; - -export const useShouldUseWhiteBackground = () => { - const isMobile = useIsMobile(); - const { isInRightDrawer } = useLayoutRenderingContext(); - const { isInPinnedTab } = useIsInPinnedTab(); - - const shouldUseWhiteBackground = - (isMobile || isInRightDrawer) && !isInPinnedTab; - - return { shouldUseWhiteBackground }; -};