Remove useStyles from HURUMap

[kelvinkipruto]

Description

This PR removes useStyles from HURUMap

Type of change

• New feature (non-breaking change which adds functionality)

Screenshots

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation

[kilemensi]

👍🏽

---

Haven't checked the code but you've changed heading spacing and things look unbalanced.

[kilemensi]

Headings look good now @kelvinkipruto but Select looks off.

[m453h]

Mostly looks good to me 🚀 I only have a few very minor issues

1. There’s an issue with the Pin and Compare component when focused, I can see the shadow/tint slightly overlaps the border radius. Although this is visible in the deployed app, it’s more noticeable in the current version 👇

I played a bit with the CSS on the browser but explicitly setting the borderRadius on focus state kinda solves the problem:

 "& .MuiSelect-filled:focus": {
            borderRadius: theme.typography.pxToRem(6),
 },

2. Some of these icons look like they are cut at the bottom, Not sure why this is happening though might be a good idea to fix them on the same PR, and I was just thinking out loud since we are using 𝕏 instead of the bird as one of the social media icons on the footer, don't we need to update this one as well 🤔