From 9d50de79859e8dd8181d5cd5ebb76b783b313a71 Mon Sep 17 00:00:00 2001
From: Kevin Koech <koechkevin92@gmail.com>
Date: Fri, 8 Nov 2024 10:55:37 +0300
Subject: [PATCH] Updated hero component styles

---
 .../src/components/Hero/Hero.js               |  2 +-
 .../src/components/Hero/Hero.snap.js          | 16 +----------
 .../src/components/Hero/Legend.js             | 28 ++++++++-----------
 .../src/components/Hero/Map.js                | 10 ++-----
 4 files changed, 16 insertions(+), 40 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.js b/apps/climatemappedafrica/src/components/Hero/Hero.js
index 9af0e3106..91239fb64 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.js
@@ -104,7 +104,7 @@ function Hero({
           </Grid>
           {/* Since map is dynamic-ally loaded, no need for implementation="css" */}
 
-          <Grid item md={6} xs={12} justifyContent="center">
+          <Grid item md={6} xs={12} justifyContent="flex-end">
             {center ? (
               <Map
                 center={[center[1], center[0]]}
diff --git a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
index b21c29c23..a0e855047 100644
--- a/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
+++ b/apps/climatemappedafrica/src/components/Hero/Hero.snap.js
@@ -90,7 +90,7 @@ exports[`<Hero /> renders unchanged 1`] = `
           </div>
         </div>
         <div
-          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1uu4n02-MuiGrid-root"
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-g8r332-MuiGrid-root"
         >
           <div
             class="MuiBox-root css-ljsg2c"
@@ -102,39 +102,25 @@ exports[`<Hero /> renders unchanged 1`] = `
                 class="MuiBox-root css-70qvj9"
               >
                 <div
-                  aria-label="10 - 13"
                   class="MuiBox-root css-1wok3bd"
-                  data-mui-internal-clone-element="true"
                 />
                 <div
-                  aria-label="13 - 16"
                   class="MuiBox-root css-1fg12k3"
-                  data-mui-internal-clone-element="true"
                 />
                 <div
-                  aria-label="16 - 19"
                   class="MuiBox-root css-55biq3"
-                  data-mui-internal-clone-element="true"
                 />
                 <div
-                  aria-label="19 - 22"
                   class="MuiBox-root css-9qafv7"
-                  data-mui-internal-clone-element="true"
                 />
                 <div
-                  aria-label="22 - 25"
                   class="MuiBox-root css-5srxm6"
-                  data-mui-internal-clone-element="true"
                 />
                 <div
-                  aria-label="25 - 28"
                   class="MuiBox-root css-1kw6r8l"
-                  data-mui-internal-clone-element="true"
                 />
                 <div
-                  aria-label="28 - 31"
                   class="MuiBox-root css-oi5eih"
-                  data-mui-internal-clone-element="true"
                 />
               </div>
             </div>
diff --git a/apps/climatemappedafrica/src/components/Hero/Legend.js b/apps/climatemappedafrica/src/components/Hero/Legend.js
index f1a3f8139..77877f2a5 100644
--- a/apps/climatemappedafrica/src/components/Hero/Legend.js
+++ b/apps/climatemappedafrica/src/components/Hero/Legend.js
@@ -1,5 +1,5 @@
 import { RichTypography } from "@commons-ui/legacy";
-import { Box, Tooltip } from "@mui/material";
+import { Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useState, forwardRef } from "react";
 
@@ -21,23 +21,17 @@ const Legend = forwardRef(function Legend({ data, title }, ref) {
       </RichTypography>
       <Box ref={ref} display="flex" alignItems="center">
         {data.map((item) => (
-          <Tooltip
+          <Box
             key={`${item.min} - ${item.max}`}
-            title={`${item.min} - ${item.max}`}
-            placement="top"
-            arrow
-          >
-            <Box
-              onMouseEnter={() => handleMouseEnter(`${item.min} - ${item.max}`)}
-              onMouseLeave={handleMouseLeave}
-              sx={{
-                backgroundColor: item.color,
-                height: 24,
-                minWidth: 24,
-                cursor: "pointer",
-              }}
-            />
-          </Tooltip>
+            onMouseEnter={() => handleMouseEnter(`${item.min} - ${item.max}`)}
+            onMouseLeave={handleMouseLeave}
+            sx={{
+              backgroundColor: item.color,
+              height: 24,
+              minWidth: 24,
+              cursor: "pointer",
+            }}
+          />
         ))}
         {hoveredValue && (
           <RichTypography
diff --git a/apps/climatemappedafrica/src/components/Hero/Map.js b/apps/climatemappedafrica/src/components/Hero/Map.js
index 899508296..8e813eeb6 100644
--- a/apps/climatemappedafrica/src/components/Hero/Map.js
+++ b/apps/climatemappedafrica/src/components/Hero/Map.js
@@ -17,7 +17,6 @@ function Map({
   geoJSONStyles = {
     color: "#2A2A2C",
     weight: 1,
-    opacity: 1,
     dashArray: "2",
   },
   onLayerMouseOver,
@@ -40,10 +39,7 @@ function Map({
     });
 
     if (regionCodes.includes(feature.properties.code?.toLowerCase())) {
-      layer.setStyle({
-        weight: 1.5,
-        dashArray: 0,
-      });
+      layer.setStyle(geoJSONStyles);
       layer.on("mouseover", () => {
         onLayerMouseOver(feature.properties.name.toLowerCase());
         if (explorePageSlug) {
@@ -55,7 +51,7 @@ function Map({
       });
       layer.on("mouseout", () => {
         onLayerMouseOver(null);
-        layer.setStyle({ ...choroplethColor, fillOpacity: 1 });
+        layer.setStyle({ ...choroplethColor, fillOpacity: 1, weight: 1 });
       });
       layer.on("click", () => {
         if (explorePageSlug) {
@@ -68,7 +64,7 @@ function Map({
   };
 
   return (
-    <Box display="flex" justifyContent="center">
+    <Box display="flex" justifyContent={{ xs: "center", md: "flex-end" }}>
       <Box
         sx={{
           position: "relative",