Merge pull request #443 from kausaltech/feat/make-section-headers-con…

…sistent Feat/make section headers consistent
kausaltech · Dec 18, 2024 · 5f8a1c6 · 5f8a1c6
2 parents d8c1dd4 + b29ac04
commit 5f8a1c6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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};
   }
 `;