Remove useTheme

CodeForAfrica · Jan 10, 2025 · e415296 · e415296
1 parent 7f59a6a
commit e415296
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 53 deletions.
diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js
@@ -1,7 +1,7 @@
 import { Copyright, QuickLinks, StayInTouch } from "@commons-ui/core";
 import { Link } from "@commons-ui/next";
 import { RichText } from "@commons-ui/payload";
-import { Box, Grid, useTheme } from "@mui/material";
+import { Box, Grid } from "@mui/material";
 import React from "react";
 
 import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
@@ -16,7 +16,6 @@ function Footer(props) {
     links,
     variant,
   } = props;
-  const theme = useTheme();
 
   return (
     <Box
@@ -89,14 +88,14 @@ function Footer(props) {
             <Copyright
               copyright={`© ${new Date().getFullYear()} ${title}`}
               TypographyProps={{
-                sx: {
-                  color: theme.palette.text.secondary,
+                sx: ({ palette, typography }) => ({
+                  color: palette.text.secondary,
                   order: 5,
                   padding: {
-                    xs: `0 ${theme.typography.pxToRem(5)} 0 0`,
-                    lg: `0 ${theme.typography.pxToRem(10)} 0 0`,
+                    xs: `0 ${typography.pxToRem(5)} 0 0`,
+                    lg: `0 ${typography.pxToRem(10)} 0 0`,
                   },
-                },
+                }),
               }}
               sx={({ typography }) => ({
                 margin: 0,
@@ -131,43 +130,43 @@ function Footer(props) {
                 {links && (
                   <QuickLinks
                     {...links}
-                    sx={{
+                    sx={({ typography }) => ({
                       textAlign: {
                         xs: "center",
                         lg: "inherit",
                       },
                       padding: {
-                        xs: `${theme.typography.pxToRem(32)} 0 `,
+                        xs: `${typography.pxToRem(32)} 0 `,
                         lg: 0,
                       },
-                    }}
+                    })}
                     TitleProps={{
                       variant: "subtitle2",
-                      sx: {
-                        color: theme.palette.text.secondary,
+                      sx: ({ palette }) => ({
+                        color: palette.text.secondary,
                         fontWeight: "bold",
-                      },
+                      }),
                     }}
                     LinksProps={{
                       linkComponent: Link,
-                      sx: {
+                      sx: ({ palette, typography }) => ({
                         listStyle: "none",
-                        color: theme.palette.text.secondary,
+                        color: palette.text.secondary,
                         padding: 0,
-                        letterspacing: theme.typography.pxToRem(0.7),
+                        letterspacing: typography.pxToRem(0.7),
                         "& > li": {
-                          marginTop: theme.typography.pxToRem(16),
+                          marginTop: typography.pxToRem(16),
                         },
-                      },
+                      }),
                     }}
                     LinkProps={{
-                      sx: {
-                        color: theme.palette.text.secondary,
+                      sx: ({ palette }) => ({
+                        color: palette.text.secondary,
                         fontWeight: "normal",
                         "&:hover": {
-                          color: theme.palette.primary.light,
+                          color: palette.primary.light,
                         },
-                      },
+                      }),
                     }}
                   />
                 )}

diff --git a/packages/commons-ui-core/src/QuickLinks/QuickLinks.js b/packages/commons-ui-core/src/QuickLinks/QuickLinks.js
@@ -17,36 +17,12 @@ const QuickLinks = React.forwardRef(function QuickLinks(props, ref) {
       }}
       ref={ref}
     >
-      <Typography
-        {...TitleProps}
-        sx={{
-          lineHeight: "inherit",
-          ...TitleProps?.sx,
-        }}
-      >
-        {title}
-      </Typography>
-      <Typography
-        {...LinksProps}
-        sx={{
-          listStyle: "none",
-          padding: 0,
-          ...LinksProps?.sx,
-        }}
-        component="ul"
-      >
+      <Typography {...TitleProps}>{title}</Typography>
+      <Typography {...LinksProps} component="ul">
         {links &&
           links.map(({ label, ...others }) => (
             <li key={label}>
-              <LinkComponent
-                {...others}
-                underline="none"
-                {...LinkProps}
-                sx={{
-                  textDecoration: "none",
-                  ...LinkProps?.sx,
-                }}
-              >
+              <LinkComponent {...others} underline="none" {...LinkProps}>
                 {label}
               </LinkComponent>
             </li>

diff --git a/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js b/packages/commons-ui-core/src/QuickLinks/QuickLinks.snap.js
@@ -6,24 +6,24 @@ exports[`<QuickLinks /> renders inchanged 1`] = `
     class="MuiBox-root css-ufz638"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1517230-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
     >
       Quick Links
     </p>
     <ul
-      class="MuiTypography-root MuiTypography-body1 css-1f5quei-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
     >
       <li>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-1imuphz-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-r74m4g-MuiTypography-root-MuiLink-root"
           href="/"
         >
           Home
         </a>
       </li>
       <li>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-1imuphz-MuiTypography-root-MuiLink-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone css-r74m4g-MuiTypography-root-MuiLink-root"
           href="/about"
         >
           About