From a37d88174ef54d25865b84166c588a6049aeebed Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Tue, 3 Dec 2024 11:00:00 +0300
Subject: [PATCH] Fix review feedback

---
 .../src/assets/icons/x-logo.svg               |  1 +
 .../src/components/HURUmap/Chart/index.js     |  4 +-
 .../components/HURUmap/ChartFilter/index.js   | 73 ++++++++++++-------
 .../src/components/Select/index.js            |  3 +
 .../hurumap-core/src/Share/ShareButton.js     |  2 +-
 5 files changed, 54 insertions(+), 29 deletions(-)
 create mode 100644 apps/climatemappedafrica/src/assets/icons/x-logo.svg

diff --git a/apps/climatemappedafrica/src/assets/icons/x-logo.svg b/apps/climatemappedafrica/src/assets/icons/x-logo.svg
new file mode 100644
index 000000000..5526e4215
--- /dev/null
+++ b/apps/climatemappedafrica/src/assets/icons/x-logo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717  l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339  l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"/></svg>
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
index d5b67f381..ba7f1a382 100644
--- 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
index 3fdb9413c..32e1e1bc6 100644
--- 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
index 6850e4de9..5b8f6a486 100644
--- 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
index 9773811fb..373bebfec 100644
--- 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%",