From e9f826e70535d8919b7726cbafdedc70fa4ceca5 Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 10 Nov 2022 20:11:59 +0100 Subject: [PATCH 1/5] adding a mintenance banner --- explorer/src/components/MobileNav.tsx | 3 ++ explorer/src/components/Nav.tsx | 6 +++ .../components/banners/MaintenanceBanner.tsx | 51 +++++++++++++++++++ 3 files changed, 60 insertions(+) create mode 100644 ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx index cab6e50e5b..3bd668cf26 100644 --- a/explorer/src/components/MobileNav.tsx +++ b/explorer/src/components/MobileNav.tsx @@ -17,6 +17,7 @@ import { } from '@mui/material'; import { Menu } from '@mui/icons-material'; import { NymLogo } from '@nymproject/react/logo/NymLogo'; +import { MaintenanceBanner } from '@nymproject/react/banners/MaintenanceBanner'; import { useMainContext } from '../context/main'; import { MobileDrawerClose } from '../icons/MobileDrawerClose'; import { Footer } from './Footer'; @@ -32,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); + const [openMaintenance, setOpenMaintenance] = React.useState(true); const toggleDrawer = () => { setDrawerOpen(!drawerOpen); @@ -53,6 +55,7 @@ export const MobileNav: React.FC<{ children: React.ReactNode }> = ({ children }: background: theme.palette.nym.networkExplorer.topNav.appBar, }} > + setOpenMaintenance(false)} /> ({ width: drawerWidth, @@ -232,6 +234,8 @@ export const Nav: React.FC = ({ children }) => { const { updateNavState, navState } = useMainContext(); const [drawerIsOpen, setDrawerToOpen] = React.useState(false); const [fixedOpen, setFixedOpen] = React.useState(false); + // Set maintenance banner to false by default to don't display it + const [openMaintenance, setOpenMaintenance] = React.useState(true); const theme = useTheme(); const setToActive = (id: number) => { @@ -268,6 +272,7 @@ export const Nav: React.FC = ({ children }) => { borderRadius: 0, }} > + setOpenMaintenance(false)} height={bannerHeight} /> { style: { background: theme.palette.nym.networkExplorer.nav.background, borderRadius: 0, + top: openMaintenance ? bannerHeight : 0, }, }} > diff --git a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx new file mode 100644 index 0000000000..e4e969990c --- /dev/null +++ b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx @@ -0,0 +1,51 @@ +import { Box, Collapse, Alert, IconButton, Typography, Divider } from '@mui/material'; +import CloseIcon from '@mui/icons-material/Close'; + +export interface BannerProps { + open: boolean; + onClick: () => void; + height?: number; +} + +export const MaintenanceBanner = (props: BannerProps) => { + const { open, onClick, height } = props; + + return ( + + + + + + } + severity="success" + icon={false} + sx={{ + width: '100%', + backgroundColor: (t) => t.palette.nym.highlight, + borderRadius: 0, + color: (t) => t.palette.nym.networkExplorer.nav.text, + height: height || 'auto', + }} + > + + + SCHEDULED DISRUPTION + + + + On Tuesday 15th of November, 10AM GMT the migration to the new mixnet contract begins. This means all Nym + apps and{' '} + services will be temporarily on hold while the upgrade takes place.{' '} + Bonding/unbonding, delegating/delegating{' '} + will be frozen for up to 36 hours. You will still be able to transfer + tokens between accounts, and use IBC. + + + + + + ); +}; From ba55affe0afd2fc3d13b4c1a92a1f1ae0c00c994 Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 10 Nov 2022 20:43:09 +0100 Subject: [PATCH 2/5] reducing ne banner height --- explorer/src/components/Nav.tsx | 2 +- .../src/components/banners/MaintenanceBanner.tsx | 15 ++++++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx index 2722637a6b..29c720b983 100644 --- a/explorer/src/components/Nav.tsx +++ b/explorer/src/components/Nav.tsx @@ -25,7 +25,7 @@ import { DarkLightSwitchDesktop } from './Switch'; import { NavOptionType } from '../context/nav'; const drawerWidth = 255; -const bannerHeight = 149; +const bannerHeight = 113; const openedMixin = (theme: Theme): CSSObject => ({ width: drawerWidth, diff --git a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx index e4e969990c..ca6b8513a4 100644 --- a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx +++ b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx @@ -28,6 +28,7 @@ export const MaintenanceBanner = (props: BannerProps) => { borderRadius: 0, color: (t) => t.palette.nym.networkExplorer.nav.text, height: height || 'auto', + alignItems: 'center', }} > @@ -37,11 +38,15 @@ export const MaintenanceBanner = (props: BannerProps) => { On Tuesday 15th of November, 10AM GMT the migration to the new mixnet contract begins. This means all Nym - apps and{' '} - services will be temporarily on hold while the upgrade takes place.{' '} - Bonding/unbonding, delegating/delegating{' '} - will be frozen for up to 36 hours. You will still be able to transfer - tokens between accounts, and use IBC. + apps and + + services will be temporarily on hold while the upgrade takes place. + + Bonding/unbonding, delegating/delegating + + will be frozen for up to 36 hours. + + You will still be able to transfer tokens between accounts, and use IBC. From 64757ebc83370351e04ce40030734cccd01a8b84 Mon Sep 17 00:00:00 2001 From: Gala Date: Fri, 11 Nov 2022 07:16:13 +0100 Subject: [PATCH 3/5] adding missing spaces --- .../src/components/banners/MaintenanceBanner.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx index ca6b8513a4..f04e4249f9 100644 --- a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx +++ b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx @@ -38,14 +38,14 @@ export const MaintenanceBanner = (props: BannerProps) => { On Tuesday 15th of November, 10AM GMT the migration to the new mixnet contract begins. This means all Nym - apps and + apps and{' '} services will be temporarily on hold while the upgrade takes place. - - Bonding/unbonding, delegating/delegating + {' '} + Bonding/unbonding, delegating/delegating{' '} will be frozen for up to 36 hours. - + {' '} You will still be able to transfer tokens between accounts, and use IBC. From 0469d5b602b938eda24829499228fcfac0ea4d13 Mon Sep 17 00:00:00 2001 From: Gala Date: Fri, 11 Nov 2022 11:53:49 +0100 Subject: [PATCH 4/5] 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 }: 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 ( - + - + } 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', }} > From 05820cfca7e89bc9a0cc8537cefb02e815aabed4 Mon Sep 17 00:00:00 2001 From: Gala Date: Mon, 14 Nov 2022 12:58:49 +0000 Subject: [PATCH 5/5] mantenance banner text update --- .../src/components/banners/MaintenanceBanner.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx index 64f28897c3..081e9b646a 100644 --- a/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx +++ b/ts-packages/react-components/src/components/banners/MaintenanceBanner.tsx @@ -34,14 +34,14 @@ export const MaintenanceBanner = (props: BannerProps) => { > - SCHEDULED DISRUPTION + SCHEDULED MAINTENANCE - On Tuesday 15th of November, 10AM GMT the migration to the new mixnet contract begins. This means all Nym - apps and{' '} + On Tuesday 15th of November 10AM GMT, the migration to the new mixnet contract begins. This means all Nym + apps and services{' '} - services will be temporarily on hold while the upgrade takes place. + will be temporarily on hold while the upgrade takes place. {' '} Bonding/unbonding, delegating/delegating{' '}