Abdullah.
32efaee1bf
Removes the background color logic that was incorrectly added to PageLayoutGridLayout in PR #16870. Grid layouts are only used for dashboards where widgets have their own background colors set in WidgetCard.tsx, so the container background was causing visual mismatches in padding/gap areas. The background logic remains correctly applied in PageLayoutVerticalListViewer and PageLayoutVerticalListEditor where widgets need to inherit the container background. --------- Co-authored-by: Devessier <baptiste@devessier.fr>
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
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';
|
|
|
|
const StyledVerticalListContainer = styled.div<{
|
|
shouldUseWhiteBackground: boolean;
|
|
}>`
|
|
background: ${({ theme, shouldUseWhiteBackground }) =>
|
|
shouldUseWhiteBackground
|
|
? theme.background.primary
|
|
: theme.background.secondary};
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
type PageLayoutVerticalListViewerProps = {
|
|
widgets: PageLayoutWidget[];
|
|
};
|
|
|
|
export const PageLayoutVerticalListViewer = ({
|
|
widgets,
|
|
}: PageLayoutVerticalListViewerProps) => {
|
|
const { shouldUseWhiteBackground } = usePageLayoutShouldUseWhiteBackground();
|
|
|
|
return (
|
|
<StyledVerticalListContainer
|
|
shouldUseWhiteBackground={shouldUseWhiteBackground}
|
|
>
|
|
{widgets.map((widget) => (
|
|
<div key={widget.id}>
|
|
<WidgetRenderer widget={widget} />
|
|
</div>
|
|
))}
|
|
</StyledVerticalListContainer>
|
|
);
|
|
};
|