From 53da6512ebb35e96bf7c5083812d2e38f8526630 Mon Sep 17 00:00:00 2001
From: Gala <calero.vg@gmail.com>
Date: Fri, 11 Nov 2022 07:50:34 +0100
Subject: [PATCH] second banner version

---
 explorer/src/components/MobileNav.tsx              |  8 ++++----
 explorer/src/components/Nav.tsx                    |  8 +++-----
 .../src/components/banners/MaintenanceBanner.tsx   | 14 +++++++-------
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
index 3bd668cf26..cd23cbffe9 100644
--- a/explorer/src/components/MobileNav.tsx
+++ b/explorer/src/components/MobileNav.tsx
@@ -53,9 +53,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 +155,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>
diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
index 29c720b983..efcd633ba2 100644
--- a/explorer/src/components/Nav.tsx
+++ b/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>
diff --git a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx
index f04e4249f9..ba7cd2b1e8 100644
--- a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx
+++ b/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">