Merge pull request #1042 from CodeForAfrica/fix/fix-data-indicators-a…

…lignment Fix icon alignment in DataIndicators
CodeForAfrica · Feb 5, 2025 · 2884581 · 2884581
2 parents 5c3f901 + bc1e262
commit 2884581
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.js
@@ -98,7 +98,10 @@ function DataIndicators({ indicators, title }) {
               sx: {
                 width: "100%",
                 textAlign: "center",
-                padding: `40px 0`,
+                padding: {
+                  xs: "40px 0",
+                  lg: "102px 0 80px",
+                },
               },
             }}
           >

diff --git a/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js b/apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js
@@ -28,7 +28,7 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
           class="MuiBox-root css-0"
         >
           <div
-            class="MuiBox-root css-1lz18kf"
+            class="MuiBox-root css-si27w0"
           >
             Indicators
           </div>
@@ -40,7 +40,7 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-18bgkre-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-72d9li-MuiButtonBase-root"
+              class="MuiButtonBase-root css-1t8yw3n-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
@@ -55,7 +55,7 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
                 />
               </div>
               <p
-                class="MuiTypography-root MuiTypography-body1 css-1eogcpa-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-k9091u-MuiTypography-root"
               >
                 Overview
               </p>

diff --git a/apps/climatemappedafrica/src/components/DataIndicators/Icon.js b/apps/climatemappedafrica/src/components/DataIndicators/Icon.js
@@ -10,7 +10,13 @@ function Icon({ item, handleIconClick, currentItemIndex, index }) {
     <ButtonBase
       onClick={handleIconClick}
       sx={{
-        display: { xs: "flex", lg: "block" },
+        display: "flex",
+        flexDirection: {
+          xs: "row",
+          lg: "column",
+        },
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <Box
@@ -28,7 +34,6 @@ function Icon({ item, handleIconClick, currentItemIndex, index }) {
       <Typography
         sx={({ typography }) => ({
           display: "flex",
-          marginLeft: typography.pxToRem(31),
           fontSize: typography.pxToRem(20),
           width: { xs: typography.pxToRem(200), lg: "auto" },
         })}