Add banners height to paratime picker offset

oasisprotocol · Jun 13, 2023 · df5b260 · df5b260
1 parent 9789935
commit df5b260
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 56 deletions.
diff --git a/src/app/components/PageLayout/Header.tsx b/src/app/components/PageLayout/Header.tsx
@@ -7,8 +7,6 @@ import { Logotype } from './Logotype'
 import { NetworkSelector } from './NetworkSelector'
 import Box from '@mui/material/Box'
 import { useScopeParam } from '../../hooks/useScopeParam'
-import { BuildBanner } from '../BuildBanner'
-import { NetworkOfflineBanner, RuntimeOfflineBanner } from '../OfflineBanner'
 import { useScreenSize } from '../../hooks/useScreensize'
 import useResizeObserver from 'use-resize-observer'
 
@@ -53,9 +51,6 @@ export const Header: FC = () => {
           : 'none',
       }}
     >
-      <BuildBanner />
-      <NetworkOfflineBanner />
-      {scope && <RuntimeOfflineBanner />}
       <Box sx={{ px: '15px' }}>
         <Grid
           container

diff --git a/src/app/components/PageLayout/index.tsx b/src/app/components/PageLayout/index.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode } from 'react'
+import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from 'react'
 import { Header } from './Header'
 import { Footer } from './Footer'
 import Box from '@mui/material/Box'
@@ -10,6 +10,7 @@ import { NetworkOfflineBanner, RuntimeOfflineBanner } from '../OfflineBanner'
 import { Search } from '../Search'
 import { useIsApiOffline } from '../OfflineBanner/hook'
 import { Network } from '../../../types/network'
+import useResizeObserver from 'use-resize-observer'
 
 interface PageLayoutProps {
   mobileFooterAction?: ReactNode
@@ -21,15 +22,32 @@ export const StyledMain = styled('main')({
 
 export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, mobileFooterAction }) => {
   const theme = useTheme()
-  const { isMobile, isDesktop } = useScreenSize()
+  const { isMobile, isTablet, isDesktop } = useScreenSize()
   const scope = useScopeParam()
   const isApiOffline = useIsApiOffline(scope?.network || Network.mainnet)
+  const bannersRef = useRef<HTMLDivElement | null>(null)
+
+  const { height: bannersHeight } = useResizeObserver<Element>({
+    ref: bannersRef,
+  })
+
+  useEffect(() => {
+    if (!isTablet) {
+      return
+    }
+
+    if (bannersRef.current !== null) {
+      document.body.style.setProperty('--app-banners-height', `${bannersHeight?.toFixed(2) || 0}px`)
+    }
+  }, [isTablet, bannersHeight])
 
   return (
     <>
-      <BuildBanner />
-      <NetworkOfflineBanner />
-      {scope && <RuntimeOfflineBanner />}
+      <Box ref={bannersRef}>
+        <BuildBanner />
+        <NetworkOfflineBanner />
+        {scope && <RuntimeOfflineBanner />}
+      </Box>
       <Box
         sx={{
           minHeight: '100vh',

diff --git a/src/app/components/ParaTimePicker/index.tsx b/src/app/components/ParaTimePicker/index.tsx
@@ -35,7 +35,7 @@ const ParaTimePickerDrawer = styled(Drawer)(() => ({
 }))
 
 export const ParaTimePicker: FC<ParaTimePickerProps> = ({ onClose, onConfirm, open }) => (
-  <ParaTimePickerDrawer anchor='top' open={open} onClose={onClose}>
+  <ParaTimePickerDrawer anchor="top" open={open} onClose={onClose}>
     <ParaTimePickerContent onClose={onClose} onConfirm={onConfirm} />
   </ParaTimePickerDrawer>
 )
@@ -102,45 +102,51 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
 
   return (
     <StyledParaTimePickerContent>
-      {!isTablet && (<>
-        <Box sx={{ mb: 5, color: 'red', position: 'relative' }}>
-          <Logotype color={COLORS.brandExtraDark} showText={true} />
-        </Box>
-        <IconButton
-          aria-label={t('paraTimePicker.toggleNetworkMenu')}
-          onClick={() => setShowNetworkMenu(!showNetworkMenu)}
-          sx={{
-            color: COLORS.brandDark,
-            ml: 3,
-          }}
-        >
-          {showNetworkMenu ? <KeyboardDoubleArrowLeftIcon /> : <KeyboardDoubleArrowRightIcon />}
-        </IconButton>
-      </>)}
-      <TabletActionBar>
-        {isTablet && tabletStep === ParaTimePickerTabletStep.ParaTime && (
-          <TabletBackButton
-            variant="text"
-            startIcon={<KeyboardArrowLeft />}
-            onClick={() => {
-              setTabletStep(ParaTimePickerTabletStep.Network)
+      {!isTablet && (
+        <>
+          <Box sx={{ mb: 5, color: 'red', position: 'relative' }}>
+            <Logotype color={COLORS.brandExtraDark} showText={true} />
+          </Box>
+          <IconButton
+            aria-label={t('paraTimePicker.toggleNetworkMenu')}
+            onClick={() => setShowNetworkMenu(!showNetworkMenu)}
+            sx={{
+              color: COLORS.brandDark,
+              ml: 3,
             }}
           >
-            {t('paraTimePicker.selectNetwork')}
-          </TabletBackButton>
-        )}
-        {isTablet && tabletStep === ParaTimePickerTabletStep.ParaTimeDetails && (
-          <TabletBackButton
-            variant="text"
-            startIcon={<KeyboardArrowLeft />}
-            onClick={() => {
-              setTabletStep(ParaTimePickerTabletStep.ParaTime)
-            }}
-          >
-            {t('paraTimePicker.selectParatime')}
-          </TabletBackButton>
-        )}
-      </TabletActionBar>
+            {showNetworkMenu ? <KeyboardDoubleArrowLeftIcon /> : <KeyboardDoubleArrowRightIcon />}
+          </IconButton>
+        </>
+      )}
+      {isTablet && (
+        <>
+          <TabletActionBar>
+            {tabletStep === ParaTimePickerTabletStep.ParaTime && (
+              <TabletBackButton
+                variant="text"
+                startIcon={<KeyboardArrowLeft />}
+                onClick={() => {
+                  setTabletStep(ParaTimePickerTabletStep.Network)
+                }}
+              >
+                {t('paraTimePicker.selectNetwork')}
+              </TabletBackButton>
+            )}
+            {tabletStep === ParaTimePickerTabletStep.ParaTimeDetails && (
+              <TabletBackButton
+                variant="text"
+                startIcon={<KeyboardArrowLeft />}
+                onClick={() => {
+                  setTabletStep(ParaTimePickerTabletStep.ParaTime)
+                }}
+              >
+                {t('paraTimePicker.selectParatime')}
+              </TabletBackButton>
+            )}
+          </TabletActionBar>
+        </>
+      )}
       <Divider />
       <StyledContent>
         <Grid container>
@@ -186,20 +192,20 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
         <ActionBar>
           <Button
             onClick={onClose}
-            color='secondary'
-            variant='outlined'
+            color="secondary"
+            variant="outlined"
             sx={{ textTransform: 'capitalize' }}
-            size='large'
+            size="large"
           >
             {t('common.cancel')}
           </Button>
 
           <Button
             onClick={() => onConfirm(selectedNetwork!, selectedLayer!)}
             disabled={selectedNetwork === network && selectedLayer === layer}
-            color='primary'
-            variant='contained'
-            size='large'
+            color="primary"
+            variant="contained"
+            size="large"
           >
             {t('common.select')}
           </Button>

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -3,6 +3,7 @@
 
 :root {
   --app-header-height: 0px;
+  --app-banners-height: 0px;
 }
 
 html {

diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
@@ -507,8 +507,8 @@ export const defaultTheme = createTheme({
         }),
         paper: ({ theme }) => ({
           [theme.breakpoints.down('md')]: {
-            height: `calc(100vh - var(--app-header-height))`,
-            top: `var(--app-header-height)`,
+            height: `calc(100vh - var(--app-header-height) - var(--app-banners-height))`,
+            top: `calc(var(--app-header-height) + var(--app-banners-height))`,
           },
         }),
       },