Fix footer display

CodeForAfrica · Oct 18, 2024 · 7d644f8 · 7d644f8
1 parent c483d49
commit 7d644f8
Showing 1 changed file with 90 additions and 82 deletions.
diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js
@@ -1,8 +1,7 @@
 import { QuickLinks, LogoButton, Copyright } from "@commons-ui/core";
 import { Link, StayInTouch } from "@commons-ui/next";
 import { RichText } from "@commons-ui/payload";
-import { Grid, useMediaQuery } from "@mui/material";
-import { useTheme } from "@mui/material/styles";
+import { Box, Grid } from "@mui/material";
 import React from "react";
 
 import useStyles from "./useStyles";
@@ -20,96 +19,105 @@ function Footer(props) {
   } = props;
   const classes = useStyles(props);
 
-  const theme = useTheme();
-
-  const isDesktop = useMediaQuery(theme.breakpoints.up("lg"));
   return (
-    !(variant === "explore" && isDesktop) && (
-      <div className={classes.root}>
-        <Section
-          classes={{
-            root: classes.section,
-          }}
-        >
-          <Grid container direction="row" justifyContent="space-between">
-            <Grid item xs={12} container>
-              {logoProps && (
-                <LogoButton
-                  {...logoProps}
-                  component="a"
-                  classes={{
-                    root: classes.logoButton,
-                  }}
-                />
-              )}
-            </Grid>
-            <Grid item xs={12} lg={6}>
-              {description && (
-                <RichText
-                  variant="body1"
-                  className={classes.description}
-                  elements={description}
-                  typographyProps={{
-                    LinkProps: {
-                      color: "text.secondary",
-                      sx: {
-                        textDecorationColor: "text.secondary",
-                        textDecoration: "underline",
-                      },
-                    },
-                  }}
-                />
-              )}
-              <Copyright
-                copyright={`© ${new Date().getFullYear()} ${title}`}
+    <Box
+      sx={(theme) => ({
+        display: {
+          xs: "block",
+          lg: variant !== "explore" ? "block" : "none",
+        },
+        background: theme.palette.grey.dark,
+        height: "auto",
+        padding: `${theme.typography.pxToRem(80)} 0`,
+        [theme.breakpoints.up("md")]: {
+          paddingTop: `${theme.typography.pxToRem(58)}`,
+          paddingBottom: `${theme.typography.pxToRem(82)}`,
+        },
+      })}
+    >
+      <Section
+        classes={{
+          root: classes.section,
+        }}
+      >
+        <Grid container direction="row" justifyContent="space-between">
+          <Grid item xs={12} container>
+            {logoProps && (
+              <LogoButton
+                {...logoProps}
+                component="a"
                 classes={{
-                  root: classes.copyright,
-                  text: classes.copyrightText,
+                  root: classes.logoButton,
                 }}
               />
-            </Grid>
-            <Grid item xs={12} lg={4}>
-              <Grid
-                container
-                classes={{
-                  root: classes.allLinks,
+            )}
+          </Grid>
+          <Grid item xs={12} lg={6}>
+            {description && (
+              <RichText
+                variant="body1"
+                className={classes.description}
+                elements={description}
+                typographyProps={{
+                  LinkProps: {
+                    color: "text.secondary",
+                    sx: {
+                      textDecorationColor: "text.secondary",
+                      textDecoration: "underline",
+                    },
+                  },
                 }}
-              >
-                <Grid item xs={12} lg={6}>
-                  {links && (
-                    <QuickLinks
-                      linkComponent={Link}
-                      {...links}
-                      classes={{
-                        root: classes.quickLinkRoot,
-                        list: classes.quickList,
-                        link: classes.quickLink,
-                        title: classes.quickLinksTitle,
-                      }}
-                    />
-                  )}
-                </Grid>
-                <Grid item xs={12} lg={6}>
-                  <StayInTouch
-                    {...connect}
-                    LinkProps={{
-                      component: Link,
-                      sx: { color: "text.secondary" },
-                    }}
-                    TitleProps={{
-                      variant: "footerCap",
-                      sx: { color: "text.secondary" },
+              />
+            )}
+            <Copyright
+              copyright={`© ${new Date().getFullYear()} ${title}`}
+              classes={{
+                root: classes.copyright,
+                text: classes.copyrightText,
+              }}
+            />
+          </Grid>
+          <Grid item xs={12} lg={4}>
+            <Grid
+              container
+              classes={{
+                root: classes.allLinks,
+              }}
+            >
+              <Grid item xs={12} lg={6}>
+                {links && (
+                  <QuickLinks
+                    linkComponent={Link}
+                    {...links}
+                    classes={{
+                      root: classes.quickLinkRoot,
+                      list: classes.quickList,
+                      link: classes.quickLink,
+                      title: classes.quickLinksTitle,
                     }}
-                    sx={{ gap: 2 }}
-                    direction="column"
                   />
-                </Grid>
+                )}
+              </Grid>
+              <Grid item xs={12} lg={6}>
+                <StayInTouch
+                  {...connect}
+                  LinkProps={{
+                    component: Link,
+                    sx: { color: "text.secondary" },
+                  }}
+                  TitleProps={{
+                    variant: "footerCap",
+                    sx: { color: "text.secondary" },
+                  }}
+                  sx={{ gap: 2 }}
+                  direction="column"
+                />
               </Grid>
             </Grid>
           </Grid>
-        </Section>
-      </div>
-    )
+        </Grid>
+      </Section>
+    </Box>
   );
 }