Make spacing consistent in sections

kausaltech · Nov 27, 2024 · 64998ab · 64998ab
1 parent 9ba1b2a
commit 64998ab
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/components/contentblocks/IndicatorGroupBlock.tsx b/components/contentblocks/IndicatorGroupBlock.tsx
@@ -14,7 +14,7 @@ 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,
@@ -83,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;
@@ -101,15 +105,15 @@ const IndicatorGroupBlock = ({ id = '', title, indicators }: Props) => {
         {displayHeader && displayHeader !== '-' ? (
           <SectionHeader>{displayHeader}</SectionHeader>
         ) : null}
-        <Row className="justify-content-center">
+        <StyledRow className="justify-content-center">
           {indicators.map((item) => (
             <IndicatorItem
               indicator={item.indicator}
               display={item.style}
               key={item.indicator.id}
             />
           ))}
-        </Row>
+        </StyledRow>
         <Row>
           <StyledColCentered>
             <IndicatorListLink>