From 3f095e2dfe4bfdd983b66228f23ceb2d07826a52 Mon Sep 17 00:00:00 2001
From: Michael Hudson Nkotagu <mnkotagu@gmail.com>
Date: Thu, 4 Jul 2024 15:24:43 +0300
Subject: [PATCH 1/2] fix: Implement misc fixes to mobile UI

---
 apps/roboshield/src/assets/icons/menu-icon.svg           | 9 ++++-----
 apps/roboshield/src/components/Hero/Hero.tsx             | 4 ++--
 .../src/components/MobileNavBar/MobileNavBar.tsx         | 2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/roboshield/src/assets/icons/menu-icon.svg b/apps/roboshield/src/assets/icons/menu-icon.svg
index 2a4912de7..335cb3138 100644
--- a/apps/roboshield/src/assets/icons/menu-icon.svg
+++ b/apps/roboshield/src/assets/icons/menu-icon.svg
@@ -1,5 +1,4 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 24H28" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4 16H28" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M4 8H28" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 6H20M4 12H20M4 18H20" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/apps/roboshield/src/components/Hero/Hero.tsx b/apps/roboshield/src/components/Hero/Hero.tsx
index 43117fb7b..cb1862f8a 100644
--- a/apps/roboshield/src/components/Hero/Hero.tsx
+++ b/apps/roboshield/src/components/Hero/Hero.tsx
@@ -1,6 +1,5 @@
 import RichText from "@/roboshield/components/RichText";
 import { Section } from "@commons-ui/core";
-import { RichTypography } from "@commons-ui/next";
 import { Box, Button, Typography } from "@mui/material";
 import React from "react";
 import ReactRotatingText from "react-rotating-text";
@@ -99,7 +98,8 @@ const Hero = (props: PageHero) => {
             a: {
               textDecoration: "none",
               padding: "0.5em",
-              margin: "0.5em",
+              margin: { md: "0.5em", xs: "0.75em" },
+              display: "inline-block",
               border: "1px solid",
               borderColor: "text.secondary",
             },
diff --git a/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx b/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx
index 4d8f1b471..1d00c1b43 100644
--- a/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx
+++ b/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx
@@ -91,7 +91,7 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(
             component={menuIcon}
             sx={{
               fill: { xs: "none" },
-              fontSize: 24,
+              fontSize: 32,
             }}
           />
         </IconButton>

From b462599831f060a493f1dcdf3b9f3606962790e5 Mon Sep 17 00:00:00 2001
From: Michael Hudson Nkotagu <mnkotagu@gmail.com>
Date: Fri, 5 Jul 2024 08:08:01 +0300
Subject: [PATCH 2/2] fix: use standard menu icon

---
 apps/roboshield/src/assets/icons/menu-icon.svg |  9 +++++----
 .../components/MobileNavBar/MobileNavBar.tsx   | 18 ++++++++----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/apps/roboshield/src/assets/icons/menu-icon.svg b/apps/roboshield/src/assets/icons/menu-icon.svg
index 335cb3138..2a4912de7 100644
--- a/apps/roboshield/src/assets/icons/menu-icon.svg
+++ b/apps/roboshield/src/assets/icons/menu-icon.svg
@@ -1,4 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6H20M4 12H20M4 18H20" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 24H28" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 16H28" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 8H28" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx b/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx
index 1d00c1b43..b4791d017 100644
--- a/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx
+++ b/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx
@@ -11,7 +11,7 @@ import {
 import { styled } from "@mui/material/styles";
 import React, { ForwardedRef } from "react";
 
-import menuIcon from "@/roboshield/assets/icons/menu-icon.svg";
+import menuIcon from "@/roboshield/assets/icons/menu-icon.svg?url";
 import CloseIcon from "@/roboshield/assets/icons/Type=x, Size=24, Color=CurrentColor.svg";
 import NavBarNavList from "@/roboshield/components/NavBarNavList";
 import NextImageButton from "@/roboshield/components/NextImageButton";
@@ -86,15 +86,13 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(
         />
       </Grid>
       <Grid item>
-        <IconButton color="inherit" onClick={handleClickOpen} sx={{ p: 0 }}>
-          <SvgIcon
-            component={menuIcon}
-            sx={{
-              fill: { xs: "none" },
-              fontSize: 32,
-            }}
-          />
-        </IconButton>
+        <NextImageButton
+          src={menuIcon}
+          alt="menu icon"
+          onClick={handleClickOpen}
+          width={32}
+          height={32}
+        />
         <DialogContainer
           fullScreen
           onClose={handleClose}