adding a comment

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,9 +54,9 @@ 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)} />
         <Toolbar
           disableGutters
           sx={{
@@ -155,9 +156,9 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }:
           </List>
         </Box>
       </Drawer>
-
-      <Box sx={{ width: '100%', p: 4, mt: 7 }}>
-        {children}
+      <Box>
+        <MaintenanceBanner open={openMaintenance} onClick={() => setOpenMaintenance(false)} sx={{ mt: 7 }} />
+        <Box sx={{ width: '100%', p: 4 }}>{children}</Box>
         <Footer />
       </Box>
     </Box>

explorer/src/components/Nav.tsx

@@ -25,7 +25,6 @@ import { DarkLightSwitchDesktop } from './Switch';
 import { NavOptionType } from '../context/nav';
 
 const drawerWidth = 255;
-const bannerHeight = 113;
 
 const openedMixin = (theme: Theme): CSSObject => ({
   width: drawerWidth,
@@ -272,7 +271,6 @@ export const Nav: React.FC = ({ children }) => {
           borderRadius: 0,
         }}
       >
-        <MaintenanceBanner open={openMaintenance} onClick={() => setOpenMaintenance(false)} height={bannerHeight} />
         <Toolbar
           disableGutters
           sx={{
@@ -337,7 +335,6 @@ export const Nav: React.FC = ({ children }) => {
           style: {
             background: theme.palette.nym.networkExplorer.nav.background,
             borderRadius: 0,
-            top: openMaintenance ? bannerHeight : 0,
           },
         }}
       >
@@ -376,8 +373,9 @@ export const Nav: React.FC = ({ children }) => {
           ))}
         </List>
       </Drawer>
-      <Box sx={{ width: '100%', py: 5, px: 6, mt: 7 }}>
-        {children}
+      <Box sx={{ width: '100%' }}>
+        <MaintenanceBanner open={openMaintenance} onClick={() => setOpenMaintenance(false)} sx={{ mt: 8 }} />
+        <Box sx={{ width: '100%', py: 5, px: 6 }}>{children}</Box>
         <Footer />
       </Box>
     </Box>

ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx

@@ -1,23 +1,24 @@
 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, 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" />
+            <IconButton aria-label="close" color="inherit" size="small" onClick={onClick} sx={{ paddingTop: 1 }}>
+              <CloseIcon fontSize="inherit" cursor="pointer" />
             </IconButton>
           }
           severity="success"
@@ -27,8 +28,7 @@ export const MaintenanceBanner = (props: BannerProps) => {
             backgroundColor: (t) => t.palette.nym.highlight,
             borderRadius: 0,
             color: (t) => t.palette.nym.networkExplorer.nav.text,
-            height: height || 'auto',
-            alignItems: 'center',
+            alignItems: 'flex-start',
           }}
         >
           <Box display="flex">