Simplify header height calculation

oasisprotocol · Jun 9, 2023 · fe5a22f · fe5a22f
1 parent 1cdf7f6
commit fe5a22f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 71 deletions.
diff --git a/src/app/components/BuildBanner/index.tsx b/src/app/components/BuildBanner/index.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, ForwardRefRenderFunction } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Alert from '@mui/material/Alert'
 import { styled } from '@mui/material/styles'
@@ -22,7 +22,7 @@ const StyledAlert = styled(Alert)(({ theme }) => ({
   },
 }))
 
-const BuildBannerCmp: ForwardRefRenderFunction<Alert | null> = (_, ref) => {
+export const BuildBanner: FC = () => {
   const { t } = useTranslation()
 
   if (window.location.origin === deploys.localhost) {
@@ -33,7 +33,7 @@ const BuildBannerCmp: ForwardRefRenderFunction<Alert | null> = (_, ref) => {
   }
   if (window.location.origin === deploys.staging) {
     return (
-      <StyledAlert ref={ref} severity="warning">
+      <StyledAlert severity="warning">
         {t('banner.buildStaging')}
         <Link
           component={RouterLink}
@@ -46,11 +46,5 @@ const BuildBannerCmp: ForwardRefRenderFunction<Alert | null> = (_, ref) => {
       </StyledAlert>
     )
   }
-  return (
-    <StyledAlert ref={ref} severity="warning">
-      {t('banner.buildPreview')}
-    </StyledAlert>
-  )
+  return <StyledAlert severity="warning">{t('banner.buildPreview')}</StyledAlert>
 }
-
-export const BuildBanner = forwardRef(BuildBannerCmp)
diff --git a/src/app/components/OfflineBanner/index.tsx b/src/app/components/OfflineBanner/index.tsx
@@ -1,4 +1,4 @@
-import { FC, forwardRef, ForwardRefRenderFunction } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Alert from '@mui/material/Alert'
 import { styled } from '@mui/material/styles'
@@ -22,39 +22,30 @@ const StyledAlert = styled(Alert)(({ theme }) => ({
   },
 }))
 
-const NetworkOfflineBannerCmp: ForwardRefRenderFunction<Alert | null, { wantedNetwork?: Network }> = (
-  { wantedNetwork },
-  ref,
-) => {
+export const NetworkOfflineBanner: FC<{ wantedNetwork?: Network }> = ({ wantedNetwork }) => {
   const scope = useScopeParam()
   const { t } = useTranslation()
   const targetNetwork = wantedNetwork || scope?.network || Network.mainnet
   const isNetworkOffline = useIsApiOffline(targetNetwork)
   const networkNames = getNetworkNames(t)
   const target = networkNames[targetNetwork]
   return isNetworkOffline ? (
-    <StyledAlert ref={ref} severity="warning">
-      {t('home.apiOffline', { target })}
-    </StyledAlert>
+    <StyledAlert severity="warning">{t('home.apiOffline', { target })}</StyledAlert>
   ) : null
 }
 
-export const NetworkOfflineBanner = forwardRef(NetworkOfflineBannerCmp)
-
-const RuntimeOfflineBannerCmp: ForwardRefRenderFunction<Alert | null> = (_, ref) => {
+export const RuntimeOfflineBanner: FC = () => {
   const scope = useRequiredScopeParam()
   const { t } = useTranslation()
 
   const { outOfDate, lastUpdate } = useRuntimeFreshness(scope)
   if (!outOfDate) return null
   const target = getNameForScope(t, scope)
   return (
-    <StyledAlert ref={ref} severity="warning">
+    <StyledAlert severity="warning">
       {lastUpdate
         ? t('home.runtimeOutOfDateSince', { target, lastUpdate })
         : t('home.runtimeOutOfDate', { target })}
     </StyledAlert>
   )
 }
-
-export const RuntimeOfflineBanner = forwardRef(RuntimeOfflineBannerCmp)
diff --git a/src/app/components/PageLayout/Header.tsx b/src/app/components/PageLayout/Header.tsx
@@ -1,4 +1,4 @@
-import { FC, useLayoutEffect, useRef } from 'react'
+import { FC, useEffect, useRef } from 'react'
 import AppBar from '@mui/material/AppBar'
 import Grid from '@mui/material/Unstable_Grid2'
 import useScrollTrigger from '@mui/material/useScrollTrigger'
@@ -10,51 +10,36 @@ import Box from '@mui/material/Box'
 import { useScopeParam } from '../../hooks/useScopeParam'
 import { BuildBanner } from '../BuildBanner'
 import { NetworkOfflineBanner, RuntimeOfflineBanner } from '../OfflineBanner'
-import Alert from '@mui/material/Alert'
+import useResizeObserver from 'use-resize-observer'
 
 export const Header: FC = () => {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  const isTablet = useMediaQuery(theme.breakpoints.down('md'))
   const scope = useScopeParam()
   const scrollTrigger = useScrollTrigger({
     disableHysteresis: true,
     threshold: 0,
   })
-  const buildBannerRef = useRef<(typeof Alert & HTMLElement) | null>(null)
-  const networkOfflineBannerRef = useRef<(typeof Alert & HTMLElement) | null>(null)
-  const runtimeOfflineBannerRef = useRef<(typeof Alert & HTMLElement) | null>(null)
+  const headerRef = useRef<HTMLDivElement | null>(null)
 
-  useLayoutEffect(() => {
-    if (!isMobile) {
-      return
-    }
-
-    const bodyStyles = document.body.style
-
-    if (buildBannerRef.current !== null) {
-      const buildBannerHeight = buildBannerRef.current?.clientHeight
-      bodyStyles.setProperty('--app-build-banner-height', `${buildBannerHeight?.toFixed(2) || 0}px`)
-    }
+  const { height: headerHeight } = useResizeObserver<Element>({
+    ref: headerRef,
+  })
 
-    if (networkOfflineBannerRef.current !== null) {
-      const networkOfflineBannerHeight = networkOfflineBannerRef.current?.clientHeight
-      bodyStyles.setProperty(
-        '--app-network-offline-banner-height',
-        `${networkOfflineBannerHeight?.toFixed(2) || 0}px`,
-      )
+  useEffect(() => {
+    if (!isTablet) {
+      return
     }
 
-    if (runtimeOfflineBannerRef.current !== null) {
-      const runtimeOfflineBannerHeight = runtimeOfflineBannerRef.current?.clientHeight
-      bodyStyles.setProperty(
-        '--app-runtime-offline-banner-height',
-        `${runtimeOfflineBannerHeight?.toFixed(2) || 0}px`,
-      )
+    if (headerRef.current !== null) {
+      document.body.style.setProperty('--app-header-height', `${headerHeight?.toFixed(2) || 0}px`)
     }
-  })
+  }, [isTablet, headerHeight])
 
   return (
     <AppBar
+      ref={headerRef}
       position="sticky"
       sx={{
         transitionProperty: 'background-color',
@@ -69,9 +54,9 @@ export const Header: FC = () => {
           : 'none',
       }}
     >
-      <BuildBanner ref={buildBannerRef} />
-      <NetworkOfflineBanner ref={networkOfflineBannerRef} />
-      {scope && <RuntimeOfflineBanner ref={runtimeOfflineBannerRef} />}
+      <BuildBanner />
+      <NetworkOfflineBanner />
+      {scope && <RuntimeOfflineBanner />}
       <Box sx={{ px: '15px' }}>
         <Grid
           container

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -2,9 +2,7 @@
 @import '../../node_modules/@fontsource/roboto-mono/variable.css';
 
 :root {
-  --app-build-banner-height: 0px;
-  --app-network-offline-banner-height: 0px;
-  --app-runtime-offline-banner-height: 0px;
+  --app-header-height: 0px;
 }
 
 html {

diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
@@ -6,8 +6,7 @@ import { inputBaseClasses } from '@mui/material/InputBase'
 import { inputAdornmentClasses } from '@mui/material/InputAdornment'
 import { tabClasses } from '@mui/material/Tab'
 import { menuItemClasses } from '@mui/material/MenuItem'
-import { drawerClasses } from '@mui/material/Drawer'
-import { modalClasses, paperClasses } from '@mui/material'
+import { modalClasses } from '@mui/material/Modal'
 
 declare module '@mui/material/styles' {
   interface Palette {
@@ -508,16 +507,8 @@ export const defaultTheme = createTheme({
         }),
         paper: ({ theme }) => ({
           [theme.breakpoints.down('md')]: {
-            height: `calc(100vh - var(--app-build-banner-height) - var(--app-network-offline-banner-height) - var(--app-runtime-offline-banner-height) - 82px)`,
-            top: `calc(var(--app-build-banner-height) + var(--app-network-offline-banner-height) + var(--app-runtime-offline-banner-height) + 82px)`,
-          },
-          [theme.breakpoints.down('sm')]: {
-            height: `calc(100vh - var(--app-build-banner-height) - var(--app-network-offline-banner-height) - var(--app-runtime-offline-banner-height) - ${theme.spacing(
-              6,
-            )})`,
-            top: `calc(var(--app-build-banner-height) + var(--app-network-offline-banner-height) + var(--app-runtime-offline-banner-height) + ${theme.spacing(
-              6,
-            )})`,
+            height: `calc(100vh - var(--app-header-height))`,
+            top: `var(--app-header-height)`,
           },
         }),
       },