adding a comment and different alignment

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)} />

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">