diff --git a/components/actions/ActionHighlightsList.tsx b/components/actions/ActionHighlightsList.tsx index 5e1f6761..dabe8e3a 100644 --- a/components/actions/ActionHighlightsList.tsx +++ b/components/actions/ActionHighlightsList.tsx @@ -74,8 +74,16 @@ export const GET_ACTION_LIST = gql` const ListHeader = styled(Col)` h2 { + text-align: center; + padding: ${(props) => props.theme.spaces.s100}; + border-radius: ${(props) => props.theme.cardBorderRadius}; + background-color: ${(props) => props.theme.themeColors.white}; + color: ${(props) => props.theme.headingsColor}; + margin-bottom: ${(props) => props.theme.spaces.s300}; + font-size: ${(props) => props.theme.fontSizeLg}; + + @media (min-width: ${(props) => props.theme.breakpointMd}) { font-size: ${(props) => props.theme.fontSizeXl}; - margin-bottom: ${(props) => props.theme.spaces.s400}; } `; diff --git a/components/contentblocks/CategoryListBlock.tsx b/components/contentblocks/CategoryListBlock.tsx index 5647c558..5df7284c 100644 --- a/components/contentblocks/CategoryListBlock.tsx +++ b/components/contentblocks/CategoryListBlock.tsx @@ -11,6 +11,7 @@ import { CommonContentBlockProps } from 'common/blocks.types'; import { readableColor } from 'polished'; import { Theme } from '@kausal/themes/types'; import { CATEGORY_FRAGMENT } from '@/fragments/category.fragment'; +import { SectionHeader } from 'components/contentblocks/ActionListBlock'; const getColor = (theme: Theme, darkFallback = theme.themeColors.black) => theme.section.categoryList?.color || @@ -25,11 +26,6 @@ const CategoryListSection = styled.div` `${props.theme.spaces.s400} 0 ${props.theme.spaces.s100} 0`}; color: ${({ theme }) => getColor(theme)}; - h2 { - font-size: ${(props) => props.theme.fontSizeLg}; - color: ${({ theme }) => getColor(theme, theme.headingsColor)}; - } - @media (min-width: ${(props) => props.theme.breakpointMd}) { h2 { font-size: ${(props) => props.theme.fontSizeXl}; @@ -72,12 +68,6 @@ const CategoryListSection = styled.div` } `; -const SectionHeader = styled.h2` - text-align: center; - color: ${(props) => props.theme.headingsColor}; - margin-bottom: ${(props) => props.theme.spaces.s100}; -`; - const CardHeader = styled.h3` color: ${(props) => props.theme.neutralDark}; font-size: ${(props) => props.theme.fontSizeMd}; diff --git a/components/indicators/IndicatorHighlightsList.tsx b/components/indicators/IndicatorHighlightsList.tsx index 5a490cf6..c7367c41 100644 --- a/components/indicators/IndicatorHighlightsList.tsx +++ b/components/indicators/IndicatorHighlightsList.tsx @@ -41,8 +41,16 @@ export const GET_INDICATOR_HIGHLIGHTS = gql` const ListHeader = styled(Col)` h2 { + text-align: center; + padding: ${(props) => props.theme.spaces.s100}; + border-radius: ${(props) => props.theme.cardBorderRadius}; + background-color: ${(props) => props.theme.themeColors.white}; + color: ${(props) => props.theme.headingsColor}; + margin-bottom: ${(props) => props.theme.spaces.s300}; + font-size: ${(props) => props.theme.fontSizeLg}; + + @media (min-width: ${(props) => props.theme.breakpointMd}) { font-size: ${(props) => props.theme.fontSizeXl}; - margin-bottom: ${(props) => props.theme.spaces.s400}; } `;