Merge pull request #754 from CodeForAfrica/fix/roboshield-ui

@/Roboshield fix mobile UI bugs
CodeForAfrica · Jul 5, 2024 · 62ba7ba · 62ba7ba
2 parents 3491ea1 + 5f0e873
commit 62ba7ba
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git 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
@@ -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: 24,
-            }}
-          />
-        </IconButton>
+        <NextImageButton
+          src={menuIcon}
+          alt="menu icon"
+          onClick={handleClickOpen}
+          width={32}
+          height={32}
+        />
         <DialogContainer
           fullScreen
           onClose={handleClose}