Address review comments

CodeForAfrica · Dec 10, 2024 · e248f09 · e248f09
1 parent 0ef5424
commit e248f09
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 22 deletions.
diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js
@@ -59,18 +59,20 @@ function AboutTeam({ title, members: membersProp }) {
           afterChange={scrollToTeam}
           responsive={responsive}
           DotListProps={{
-            display: {
-              xs: membersCount > 2 ? "flex" : "none",
-              md: membersCount > 4 ? "flex" : "none",
-            },
-            "& button": {
-              borderColor: "#000",
-              height: theme.typography.pxToRem(16),
-              marginRight: theme.typography.pxToRem(12),
-              width: theme.typography.pxToRem(16),
-            },
-            "& .react-multi-carousel-dot--active button": {
-              borderColor: "#000",
+            sx: {
+              display: {
+                xs: membersCount > 2 ? "flex" : "none",
+                md: membersCount > 4 ? "flex" : "none",
+              },
+              "& button": {
+                borderColor: "#000",
+                height: theme.typography.pxToRem(16),
+                marginRight: theme.typography.pxToRem(12),
+                width: theme.typography.pxToRem(16),
+              },
+              "& .react-multi-carousel-dot--active button": {
+                borderColor: "#000",
+              },
             },
           }}
         >

diff --git a/apps/climatemappedafrica/src/components/Card/ActionArea.js b/apps/climatemappedafrica/src/components/Card/ActionArea.js
@@ -27,7 +27,7 @@ function ActionArea({
         "& .MuiCardActionArea-root": {
           ...ActionAreaRootProps,
         },
-        "& ..MuiCardActionArea-focusHighlight": {
+        "& .MuiCardActionArea-focusHighlight": {
           background: "transparent",
           ...FocusHighlightProps,
         },

diff --git a/apps/climatemappedafrica/src/components/Card/Card.js b/apps/climatemappedafrica/src/components/Card/Card.js
@@ -1,5 +1,5 @@
 import { Link } from "@commons-ui/next";
-import { Card as MuiCard, useTheme } from "@mui/material";
+import { Card as MuiCard } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -27,7 +27,6 @@ function Card({
   sx,
 }) {
   const squareMedia = mediaProps?.square;
-  const theme = useTheme();
   const actionAreaProps = { href, onClick };
   const contentProps = {
     description,
@@ -76,14 +75,14 @@ function Card({
         <CardContent
           {...contentProps}
           TitleProps={{
-            sx: {
-              marginTop: theme.typography.pxToRem(squareMedia ? 20 : 40),
+            sx: ({ typography }) => ({
+              marginTop: typography.pxToRem(squareMedia ? 20 : 40),
               overflow: "hidden",
               display: "-webkit-box",
               WebkitLineClamp: 2,
               WebkitBoxOrient: "vertical",
               textOverflow: "ellipsis",
-            },
+            }),
           }}
           DescriptionProps={{
             sx: {

diff --git a/apps/climatemappedafrica/src/components/Carousel/Carousel.js b/apps/climatemappedafrica/src/components/Carousel/Carousel.js
@@ -46,7 +46,7 @@ const Carousel = React.forwardRef(function Carousel(props, ref) {
             borderColor: "#A0A0A0",
             background: "#000",
           },
-          ...DotListProps,
+          ...DotListProps?.sx,
         },
       })}
     >

diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js
@@ -60,7 +60,7 @@ function Menu({ children, explorePagePath, links, socialLinks, LinkProps }) {
                 padding: `${typography.pxToRem(16)} ${typography.pxToRem(30)} `,
                 border: "1px solid",
               },
-              ...LinkProps,
+              ...LinkProps?.sx,
             })}
           >
             <Typography

diff --git a/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js b/apps/climatemappedafrica/src/components/Navigation/MobileNavigation/index.js
@@ -158,8 +158,10 @@ function MobileNavigation({
               links={menus}
               socialLinks={socialLinks}
               LinkProps={{
-                padding: 0,
-                margin: `${theme.typography.pxToRem(10)} 0`,
+                sx: {
+                  padding: 0,
+                  margin: `${theme.typography.pxToRem(10)} 0`,
+                },
               }}
             >
               <DropdownSearch