Mobile temp proposal

oasisprotocol · Jun 23, 2023 · 74948e5 · 74948e5
1 parent 8707f6f
commit 74948e5
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 72 deletions.
diff --git a/src/app/components/PageLayout/Header.tsx b/src/app/components/PageLayout/Header.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react'
+import { FC } from 'react'
 import AppBar from '@mui/material/AppBar'
 import Grid from '@mui/material/Unstable_Grid2'
 import useScrollTrigger from '@mui/material/useScrollTrigger'
@@ -8,35 +8,18 @@ import { NetworkSelector } from './NetworkSelector'
 import Box from '@mui/material/Box'
 import { useScopeParam } from '../../hooks/useScopeParam'
 import { useScreenSize } from '../../hooks/useScreensize'
-import useResizeObserver from 'use-resize-observer'
 
 export const Header: FC = () => {
   const theme = useTheme()
-  const { isMobile, isTablet } = useScreenSize()
+  const { isMobile } = useScreenSize()
   const scope = useScopeParam()
   const scrollTrigger = useScrollTrigger({
     disableHysteresis: true,
     threshold: 0,
   })
-  const headerRef = useRef<HTMLDivElement | null>(null)
-
-  const { height: headerHeight } = useResizeObserver<Element>({
-    ref: headerRef,
-  })
-
-  useEffect(() => {
-    if (!isTablet) {
-      return
-    }
-
-    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',

diff --git a/src/app/components/PageLayout/index.tsx b/src/app/components/PageLayout/index.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from 'react'
+import { FC, PropsWithChildren, ReactNode } from 'react'
 import { Header } from './Header'
 import { Footer } from './Footer'
 import Box from '@mui/material/Box'
@@ -10,7 +10,6 @@ import { NetworkOfflineBanner, RuntimeOfflineBanner } from '../OfflineBanner'
 import { Search } from '../Search'
 import { useIsApiReachable } from '../OfflineBanner/hook'
 import { Network } from '../../../types/network'
-import useResizeObserver from 'use-resize-observer'
 
 interface PageLayoutProps {
   mobileFooterAction?: ReactNode
@@ -25,29 +24,12 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
   const { isMobile, isTablet } = useScreenSize()
   const scope = useScopeParam()
   const isApiReachable = useIsApiReachable(scope?.network || Network.mainnet).reachable
-  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 (
     <>
-      <Box ref={bannersRef}>
-        <BuildBanner />
-        <NetworkOfflineBanner />
-        {scope?.valid && <RuntimeOfflineBanner />}
-      </Box>
+      <BuildBanner />
+      <NetworkOfflineBanner />
+      {scope?.valid && <RuntimeOfflineBanner />}
       <Box
         sx={{
           minHeight: '100vh',

diff --git a/src/app/components/ParaTimePicker/index.tsx b/src/app/components/ParaTimePicker/index.tsx
@@ -2,7 +2,7 @@ import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
-import Drawer, { drawerClasses } from '@mui/material/Drawer'
+import Drawer from '@mui/material/Drawer'
 import Divider from '@mui/material/Divider'
 import Grid from '@mui/material/Unstable_Grid2'
 import { Logotype } from '../PageLayout/Logotype'
@@ -24,16 +24,10 @@ type ParaTimePickerProps = {
   open: boolean
 }
 
-const ParaTimePickerDrawer = styled(Drawer)(() => ({
-  [`.${drawerClasses.root}`]: {
-    height: '100vh',
-  },
-}))
-
 export const ParaTimePicker: FC<ParaTimePickerProps> = ({ onClose, onConfirm, open }) => (
-  <ParaTimePickerDrawer anchor="top" open={open} onClose={onClose}>
+  <Drawer anchor="top" open={open} onClose={onClose}>
     <ParaTimePickerContent onClose={onClose} onConfirm={onConfirm} />
-  </ParaTimePickerDrawer>
+  </Drawer>
 )
 
 const StyledParaTimePickerContent = styled(Box)(({ theme }) => ({
@@ -83,7 +77,7 @@ enum ParaTimePickerTabletStep {
 }
 
 const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConfirm }) => {
-  const { isTablet } = useScreenSize()
+  const { isMobile, isTablet } = useScreenSize()
   const { t } = useTranslation()
   const { network, layer } = useRequiredScopeParam()
   const [selectedLayer, setSelectedLayer] = useState<Layer>(layer)
@@ -99,11 +93,9 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
 
   return (
     <StyledParaTimePickerContent>
-      {!isTablet && (
-        <Box sx={{ mb: 5, color: 'red', position: 'relative' }}>
-          <Logotype color={COLORS.brandExtraDark} showText={true} />
-        </Box>
-      )}
+      <Box sx={{ mb: isTablet ? 0 : 5, color: 'red', position: 'relative' }}>
+        <Logotype color={COLORS.brandExtraDark} showText={!isMobile} />
+      </Box>
       {isTablet && (
         <>
           <TabletActionBar>

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -1,11 +1,6 @@
 @import '../../node_modules/@fontsource-variable/figtree/index.css';
 @import '../../node_modules/@fontsource-variable/roboto-mono/index.css';
 
-:root {
-  --app-header-height: 0px;
-  --app-banners-height: 0px;
-}
-
 html {
   scroll-behavior: smooth;
 }
@@ -16,7 +11,8 @@ html {
   font-style: normal;
   font-display: swap;
   font-weight: 100 700;
-  src: url('../../node_modules/@fontsource-variable/figtree/files/figtree-latin-wght-normal.woff2') format('woff2');
+  src: url('../../node_modules/@fontsource-variable/figtree/files/figtree-latin-wght-normal.woff2')
+    format('woff2');
   unicode-range: U+2026;
 }
 

diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
@@ -6,7 +6,6 @@ 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 { modalClasses } from '@mui/material/Modal'
 
 declare module '@mui/material/styles' {
   interface Palette {
@@ -504,17 +503,9 @@ export const defaultTheme = createTheme({
           borderRadius: '0 0 12px 12px',
           padding: `${theme.spacing(4)} 5%`,
         }),
-        modal: ({ theme }) => ({
-          [theme.breakpoints.down('md')]: {
-            [`& .${modalClasses.backdrop}`]: {
-              background: 'transparent',
-            },
-          },
-        }),
         paper: ({ theme }) => ({
           [theme.breakpoints.down('md')]: {
-            height: `calc(100vh - var(--app-header-height) - var(--app-banners-height))`,
-            top: `calc(var(--app-header-height) + var(--app-banners-height))`,
+            height: '100vh',
           },
         }),
       },