Fix review feedback

CodeForAfrica · Dec 3, 2024 · a37d881 · a37d881
1 parent 1cea12a
commit a37d881
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 29 deletions.
diff --git a/apps/climatemappedafrica/src/assets/icons/x-logo.svg b/apps/climatemappedafrica/src/assets/icons/x-logo.svg
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
@@ -17,8 +17,8 @@ import FacebookIcon from "@/climatemappedafrica/assets/icons/Facebook.svg";
 import LinkedInIcon from "@/climatemappedafrica/assets/icons/LinkedIn.svg";
 import InfoIcon from "@/climatemappedafrica/assets/icons/plus.svg";
 import ShareIcon from "@/climatemappedafrica/assets/icons/share.svg";
-import TwitterIcon from "@/climatemappedafrica/assets/icons/Twitter.svg";
 import WhatsAppIcon from "@/climatemappedafrica/assets/icons/WhatsApp.svg";
+import XLogo from "@/climatemappedafrica/assets/icons/x-logo.svg";
 import cfalogo from "@/climatemappedafrica/assets/logos/cfa.svg";
 import projectlogo from "@/climatemappedafrica/assets/logos/projectLogo.svg";
 import config, { hurumapArgs } from "@/climatemappedafrica/config";
@@ -213,7 +213,7 @@ function Chart({
     },
     {
       name: "Twitter",
-      icon: TwitterIcon,
+      icon: XLogo,
       props: { title, via: "Code4Africa", related: ["Code4Africa"] },
     },
     {

diff --git a/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js b/apps/climatemappedafrica/src/components/HURUmap/ChartFilter/index.js
@@ -1,33 +1,10 @@
-import { Box, Grid, IconButton, styled } from "@mui/material";
+import { Box, Grid, IconButton, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 
 import CloseIcon from "@/climatemappedafrica/assets/icons/x.svg";
 import Select from "@/climatemappedafrica/components/Select";
 
-const StyledSelect = styled(Select)(({ theme }) => ({
-  SelectProps: {
-    width: {
-      width: {
-        xs: theme.typography.pxToRem(165),
-        lg: theme.typography.pxToRem(200),
-      },
-      height: theme.typography.pxToRem(40),
-      paddingLeft: 0,
-      "& .MuiSelect-filled": {
-        padding: `${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(
-          40,
-        )} ${theme.typography.pxToRem(10)} ${theme.typography.pxToRem(20)} !important`,
-      },
-    },
-  },
-  MenuProps: {
-    "& .MuiMenu-paper": {
-      maxHeight: theme.typography.pxToRem(310),
-    },
-  },
-}));
-
 function ChartFilter({
   groups,
   onSelectValue,
@@ -47,6 +24,8 @@ function ChartFilter({
   const [attributeOptions, setAttributeOptions] = useState([]);
   const [valueOptions, setValueOptions] = useState([]);
 
+  const theme = useTheme();
+
   useEffect(() => {
     if (index === "default") {
       setAttributeOptions([selectedAttribute]);
@@ -116,12 +95,33 @@ function ChartFilter({
               marginRight: { md: typography.pxToRem(10) },
             })}
           >
-            <StyledSelect
+            <Select
               helperText={attributeText}
               options={attributeOptions}
               selected={selectedAttribute}
               onChange={onAtrributeChange}
               disabled={index === "default"}
+              SelectProps={{
+                width: theme.typography.pxToRem(205),
+                height: theme.typography.pxToRem(40),
+                paddingLeft: 0,
+                "& .MuiSelect-filled": {
+                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+                    10,
+                  )} ${theme.typography.pxToRem(15)} !important`,
+                },
+              }}
+              MenuProps={{
+                "& .MuiMenu-paper": {
+                  height: theme.typography.pxToRem(310),
+                  boxShadow: "none",
+                },
+                "& .MuiMenu-list": {
+                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+                    10,
+                  )} ${theme.typography.pxToRem(15)} !important`,
+                },
+              }}
             />
           </Grid>
         )}
@@ -132,12 +132,33 @@ function ChartFilter({
               marginRight: { md: typography.pxToRem(10) },
             })}
           >
-            <StyledSelect
+            <Select
               helperText={valueText}
               options={valueOptions}
               selected={selectedValue}
               label={selectedValue?.length ? "" : "Select a value"}
               onChange={onValueChange}
+              SelectProps={{
+                width: theme.typography.pxToRem(205),
+                height: theme.typography.pxToRem(40),
+                paddingLeft: 0,
+                "& .MuiSelect-filled": {
+                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+                    10,
+                  )} ${theme.typography.pxToRem(15)} !important`,
+                },
+              }}
+              MenuProps={{
+                "& .MuiMenu-paper": {
+                  height: theme.typography.pxToRem(310),
+                  boxShadow: "none",
+                },
+                "& .MuiMenu-list": {
+                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+                    10,
+                  )} ${theme.typography.pxToRem(15)} !important`,
+                },
+              }}
             />
           </Grid>
         )}

diff --git a/apps/climatemappedafrica/src/components/Select/index.js b/apps/climatemappedafrica/src/components/Select/index.js
@@ -145,6 +145,9 @@ function Input({
           "& .MuiSelect-filled": {
             color: value ? "#959696" : "unset",
           },
+          "& .MuiSelect-filled:focus": {
+            borderRadius: 0,
+          },
           ...SelectProps,
         })}
       >

diff --git a/packages/hurumap-core/src/Share/ShareButton.js b/packages/hurumap-core/src/Share/ShareButton.js
@@ -54,7 +54,7 @@ const ShareButton = React.forwardRef(function ShareButton(
         <CopyToClipboard text={url} onCopy={onCopy} {...ButtonProps}>
           <SvgIcon
             component={icon}
-            viewBox="0 0 24 24"
+            viewBox="0 0 28 28" // The copy icon has a different viewBox
             {...IconProps}
             sx={{
               width: "100%",