Thomas des Francs
ca7ffb97b9
## Summary - add a subtle left-side page card shadow in light and dark mode - preserve the existing border-ring box shadow - give the page card wrapper enough left padding for the shadow to render <img width="904" height="1116" alt="image" src="https://github.com/user-attachments/assets/2948fe4a-81ff-4045-ad6f-c0bc9b58be26" /> --------- Co-authored-by: Charles Bochet <charles@twenty.com>
82 lines
1.8 KiB
TypeScript
82 lines
1.8 KiB
TypeScript
import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
|
|
import { styled } from '@linaria/react';
|
|
import { type ReactNode } from 'react';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
type PageCardLayoutProps = {
|
|
header: ReactNode;
|
|
secondaryBar?: ReactNode;
|
|
children: ReactNode;
|
|
showInformationBanner?: boolean;
|
|
};
|
|
|
|
const StyledRoot = styled.div`
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
`;
|
|
|
|
const StyledMainCardWrapper = styled.div`
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
margin-left: -3px;
|
|
min-width: 0;
|
|
padding-left: 4px;
|
|
width: 0;
|
|
`;
|
|
|
|
// oxlint-disable-next-line twenty/no-hardcoded-colors
|
|
const StyledCard = styled.div`
|
|
background: ${themeCssVariables.background.primary};
|
|
border-radius: 16px 0 0 0;
|
|
box-shadow:
|
|
-4px 0 4px 0 rgba(0, 0, 0, 0.006),
|
|
0 0 0 1px ${themeCssVariables.border.color.medium};
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
|
|
.dark & {
|
|
box-shadow:
|
|
-4px 0 4px 0 rgba(0, 0, 0, 0.03),
|
|
0 0 0 1px ${themeCssVariables.border.color.medium};
|
|
}
|
|
`;
|
|
|
|
const StyledBodyContent = styled.div`
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
width: 100%;
|
|
`;
|
|
|
|
export const PageCardLayout = ({
|
|
header,
|
|
secondaryBar,
|
|
children,
|
|
showInformationBanner = true,
|
|
}: PageCardLayoutProps) => {
|
|
return (
|
|
<StyledRoot>
|
|
<StyledMainCardWrapper>
|
|
<StyledCard>
|
|
{header}
|
|
{secondaryBar}
|
|
<StyledBodyContent>
|
|
{showInformationBanner && <InformationBannerWrapper />}
|
|
{children}
|
|
</StyledBodyContent>
|
|
</StyledCard>
|
|
</StyledMainCardWrapper>
|
|
</StyledRoot>
|
|
);
|
|
};
|