Merge pull request #435 from kausaltech/fix/visual-consistency-for-ca…

…tegory-page-blocks Fix/visual consistency for category page blocks
kausaltech · Nov 28, 2024 · 136cc73 · 136cc73
2 parents 7fc248c + c48b117
commit 136cc73
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/components/contentblocks/ActionListBlock.tsx b/components/contentblocks/ActionListBlock.tsx
@@ -35,7 +35,7 @@ const ActionListSection = styled.div`
   padding: ${(props) => props.theme.spaces.s400} 0;
 `;
 
-const SectionHeader = styled.h2`
+export const SectionHeader = styled.h2`
   text-align: center;
   padding: ${(props) => props.theme.spaces.s100};
   border-radius: ${(props) => props.theme.cardBorderRadius};

diff --git a/components/contentblocks/IndicatorGroupBlock.tsx b/components/contentblocks/IndicatorGroupBlock.tsx
@@ -10,10 +10,11 @@ import IndicatorHighlightCard from 'components/indicators/IndicatorHighlightCard
 import IndicatorVisualisation from 'components/indicators/IndicatorVisualisation';
 import Button from 'components/common/Button';
 import { useTranslations } from 'next-intl';
+import { SectionHeader } from 'components/contentblocks/ActionListBlock';
 
 const IndicatorGraphSection = styled.div`
   background-color: ${(props) => props.theme.neutralLight};
-  padding: ${(props) => props.theme.spaces.s300};
+  padding: ${(props) => props.theme.spaces.s400} 0;
   color: ${(props) =>
     readableColor(
       props.theme.neutralLight,
@@ -82,6 +83,10 @@ const StyledColCentered = styled(Col)`
   justify-content: center;
 `;
 
+const StyledRow = styled(Row)`
+  margin-top: ${(props) => props.theme.spaces.s400};
+`;
+
 type Props = {
   id?: string;
   title?: string;
@@ -91,20 +96,21 @@ type Props = {
 // TODO: Format as list for a11y
 const IndicatorGroupBlock = ({ id = '', title, indicators }: Props) => {
   const t = useTranslations();
+  const displayHeader = title === '-' ? null : title || t('indicators');
 
   return (
     <IndicatorGraphSection id={id}>
       <Container>
-        <h2>{title ?? t('indicators')}</h2>
-        <Row className="justify-content-center">
+        {displayHeader ? <SectionHeader>{displayHeader}</SectionHeader> : null}
+        <StyledRow className="justify-content-center">
           {indicators.map((item) => (
             <IndicatorItem
               indicator={item.indicator}
               display={item.style}
               key={item.indicator.id}
             />
           ))}
-        </Row>
+        </StyledRow>
         <Row>
           <StyledColCentered>
             <IndicatorListLink>