diff --git a/components/contentblocks/ActionListBlock.tsx b/components/contentblocks/ActionListBlock.tsx index 1f68dbcc..e1707f27 100644 --- a/components/contentblocks/ActionListBlock.tsx +++ b/components/contentblocks/ActionListBlock.tsx @@ -21,8 +21,8 @@ const GET_ACTION_LIST_FOR_BLOCK = gql` `; const ActionListSection = styled.div` - background-color: ${(props) => props.color}; - padding: ${(props) => props.theme.spaces.s400} 0}; + background-color: ${(props) => props.theme.neutralLight}; + padding: ${(props) => props.theme.spaces.s400} 0; `; const SectionHeader = styled.h2` @@ -61,7 +61,7 @@ const ActionListBlock = (props) => { const heading = t('actions', getActionTermContext(plan)); return ( - + {heading && {heading}} diff --git a/components/contentblocks/CategoryPageHeaderBlock.tsx b/components/contentblocks/CategoryPageHeaderBlock.tsx index 80afeb69..997f0cc9 100644 --- a/components/contentblocks/CategoryPageHeaderBlock.tsx +++ b/components/contentblocks/CategoryPageHeaderBlock.tsx @@ -45,41 +45,50 @@ enum IconSize { L = 'L', } -const CategoryHeader = styled.div` +const CategoryHeader = styled.div<{ + $bg?: string; + $hasImage?: boolean; +}>` width: 100%; position: relative; - background-color: ${(props) => (props.bg ? props.bg : props.theme.brandDark)}; + background-color: ${(props) => + props.$bg ? props.$bg : props.theme.neutralLight}; padding: 0 0 2rem; @media (min-width: ${(props) => props.theme.breakpointMd}) { display: flex; align-items: flex-start; - min-height: ${(props) => (props.hasImage ? '32rem' : '0')}; + min-height: ${(props) => (props.$hasImage ? '32rem' : '0')}; padding: 0; } @media (min-width: ${(props) => props.theme.breakpointLg}) { - ${(props) => (props.hasImage ? '28rem' : '0')}; + ${(props) => (props.$hasImage ? '28rem' : '0')}; } @media (min-width: ${(props) => props.theme.breakpointXl}) { - ${(props) => (props.hasImage ? '30rem' : '0')}; + ${(props) => (props.$hasImage ? '30rem' : '0')}; } `; -const CategoryHeaderImage = styled.div` - min-height: ${(props) => (props.image ? '14rem' : '0')}; +const CategoryHeaderImage = styled.div<{ + $bg?: string; + $image?: string; + $imageAlign?: string; +}>` + min-height: ${(props) => (props.$image ? '14rem' : '0')}; margin: 0 -1rem; background-size: cover; - background-color: ${(props) => (props.bg ? props.bg : props.theme.branddark)}; - background-position: ${(props) => props.imageAlign}; - background-image: url(${(props) => props.image}); + background-color: ${(props) => + props.$bg ? props.$bg : props.theme.brandDark}; + background-position: ${(props) => props.$imageAlign}; + background-image: url(${(props) => props.$image}); background-repeat: no-repeat; @media (min-width: ${(props) => props.theme.breakpointMd}) { position: absolute; width: 100%; - min-height: ${(props) => (props.image ? '32rem' : '0')}; + min-height: ${(props) => (props.$image ? '32rem' : '0')}; margin: 0; } `; @@ -144,7 +153,7 @@ const HeaderContent = styled.div<{ @media (min-width: ${(props) => props.theme.breakpointMd}) { margin-top: ${({ hasImage }) => (hasImage ? '14rem' : '3rem')}; - margin-bottom: ${({ hasImage }) => (hasImage ? '3rem' : undefined)}; + margin-bottom: 3rem; h1 { font-size: ${(props) => props.theme.fontSizeXl}; @@ -313,11 +322,11 @@ function CategoryPageHeaderBlock({ }; return ( - +