From 0469d5b602b938eda24829499228fcfac0ea4d13 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Fri, 11 Nov 2022 11:53:49 +0100
Subject: [PATCH] adding a comment and different alignment

---
 explorer/src/components/MobileNav.tsx                    | 2 ++
 .../src/components/banners/MaintenanceBanner.tsx         | 9 +++++----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
index 3bd668cf26..26e078fe08 100644
--- a/explorer/src/components/MobileNav.tsx
+++ b/explorer/src/components/MobileNav.tsx
@@ -33,6 +33,7 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
   const theme = useTheme();
   const { navState, updateNavState } = useMainContext();
   const [drawerOpen, setDrawerOpen] = React.useState(false);
+  // Set maintenance banner to false by default to don't display it
   const [openMaintenance, setOpenMaintenance] = React.useState(true);
 
   const toggleDrawer = () => {
@@ -53,6 +54,7 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
       <AppBar
         sx={{
           background: theme.palette.nym.networkExplorer.topNav.appBar,
+          borderRadius: 0,
         }}
       >
         <MaintenanceBanner open={openMaintenance} onClick={() => setOpenMaintenance(false)} />
diff --git a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx
index f04e4249f9..64f28897c3 100644
--- a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx
+++ b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx
@@ -1,23 +1,25 @@
 import { Box, Collapse, Alert, IconButton, Typography, Divider } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
+import { SxProps } from '@mui/system';
 
 export interface BannerProps {
   open: boolean;
   onClick: () => void;
   height?: number;
+  sx?: SxProps;
 }
 
 export const MaintenanceBanner = (props: BannerProps) => {
-  const { open, onClick, height } = props;
+  const { open, onClick, height, sx } = props;
 
   return (
-    <Box sx={{ width: '100%' }} id="maintenance-banner">
+    <Box sx={{ width: '100%', ...sx }}>
       <Collapse in={open}>
         <Alert
           id="maintenance-banner"
           action={
             <IconButton aria-label="close" color="inherit" size="small" onClick={onClick}>
-              <CloseIcon fontSize="inherit" />
+              <CloseIcon fontSize="inherit" cursor="pointer" />
             </IconButton>
           }
           severity="success"
@@ -28,7 +30,6 @@ export const MaintenanceBanner = (props: BannerProps) => {
             borderRadius: 0,
             color: (t) => t.palette.nym.networkExplorer.nav.text,
             height: height || 'auto',
-            alignItems: 'center',
           }}
         >
           <Box display="flex">