Merge pull request #582 from oasisprotocol/mz/picker

ParaTime picker internal feedback

.changelog/580.trivial.md

@@ -0,0 +1 @@
+Update ParaTime picker based on internal feedback

src/app/components/LayerStatus/index.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import ErrorIcon from '@mui/icons-material/Error'
+import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import { COLORS } from '../../../styles/theme/colors'
 
@@ -10,6 +11,17 @@ type LayerStatusProps = {
   withLabel?: boolean
 }
 
+type OutOfDateLayerStatusIconProps = {
+  tooltip?: boolean
+}
+
+const OutOfDateLayerStatusIcon: FC<OutOfDateLayerStatusIconProps> = ({ tooltip }) => {
+  const { t } = useTranslation()
+  const errorIcon = <ErrorIcon sx={{ marginLeft: 2 }} color="error" fontSize="small" />
+
+  return tooltip ? <Tooltip title={t('common.paraTimeOutOfDate')}>{errorIcon}</Tooltip> : errorIcon
+}
+
 export const LayerStatus: FC<LayerStatusProps> = ({ isOutOfDate, withLabel = false }) => {
   const { t } = useTranslation()
 
@@ -25,7 +37,7 @@ export const LayerStatus: FC<LayerStatusProps> = ({ isOutOfDate, withLabel = fal
         </Typography>
       )}
       {isOutOfDate ? (
-        <ErrorIcon sx={{ marginLeft: 2 }} color="error" fontSize="small" />
+        <OutOfDateLayerStatusIcon tooltip={!withLabel} />
       ) : (
         <CheckCircleIcon sx={{ marginLeft: 2 }} color="success" fontSize="small" />
       )}

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',

src/app/components/PageLayout/NetworkButton.tsx

@@ -29,28 +29,32 @@ export const StyledNetworkButton = styled(Button)(({ theme }) => ({
     transitionProperty: 'background-color, color',
     transitionDuration: `${theme.transitions.duration.standard}ms`,
     transitionTimingFunction: theme.transitions.easing.easeInOut,
-    height: '47px',
-    display: 'flex',
-    alignItems: 'center',
     padding: `0 ${theme.spacing(4)}`,
-    borderTopLeftRadius: '12px',
-    borderBottomLeftRadius: '12px',
-    borderRightWidth: theme.spacing(1),
-    borderRightStyle: 'solid',
-    borderRightColor: theme.palette.layout.secondary,
-    backgroundColor: COLORS.white,
+    margin: 0,
   },
 
   [`& .${buttonClasses.endIcon}`]: {
+    transitionProperty: 'background-color, color',
+    transitionDuration: `${theme.transitions.duration.standard}ms`,
+    transitionTimingFunction: theme.transitions.easing.easeInOut,
+    height: '47px',
+    display: 'flex',
+    alignItems: 'center',
     padding: `0 ${theme.spacing(4)}`,
+    borderTopRightRadius: '12px',
+    borderBottomRightRadius: '12px',
+    borderLeftWidth: theme.spacing(1),
+    borderLeftStyle: 'solid',
+    borderLeftColor: theme.palette.layout.secondary,
+    backgroundColor: COLORS.white,
   },
 
   '&:hover, &:focus-visible': {
     borderWidth: theme.spacing(1),
     color: COLORS.white,
     borderColor: theme.palette.layout.hoverBorder,
 
-    [`& .${buttonClasses.startIcon}`]: {
+    [`& .${buttonClasses.endIcon}`]: {
       color: COLORS.brandDark,
       backgroundColor: theme.palette.layout.secondaryBackground,
       borderColor: theme.palette.layout.hoverBorder,
@@ -63,7 +67,6 @@ export const StyledBox = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(3),
-  paddingLeft: theme.spacing(3),
 }))
 
 type NetworkButtonProps = {

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',

src/app/components/ParaTimePicker/LayerDetails.tsx

@@ -2,10 +2,12 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
 import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
 import { useTheme } from '@mui/material/styles'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import Link from '@mui/material/Link'
+import { styled } from '@mui/material/styles'
 import { Circle } from '../Circle'
 import { COLORS } from '../../../styles/theme/colors'
 import { Network, getNetworkNames } from '../../../types/network'
@@ -69,19 +71,32 @@ const getDetails = (t: TFunction): Details => ({
   },
 })
 
+export const StyledButton = styled(Button)(({ theme }) => ({
+  height: 30,
+  paddingLeft: 0,
+  marginRight: theme.spacing(3),
+  fontSize: 24,
+  color: COLORS.brandDark,
+  fontWeight: 700,
+  '&&:hover, &&:active': {
+    color: COLORS.brandDark,
+    textDecoration: 'none',
+  },
+}))
+
 type LayerDetailsProps = {
-  activeLayer: Layer
+  handleConfirm: () => void
   network: Network
   selectedLayer: Layer
 }
 
 // Prevent modal height from changing height when switching between layers
 const contentMinHeight = '270px'
 
-export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer }) => {
+export const LayerDetails: FC<LayerDetailsProps> = ({ handleConfirm, network, selectedLayer }) => {
   const { t } = useTranslation()
   const theme = useTheme()
-  const { isTablet } = useScreenSize()
+  const { isMobile, isTablet } = useScreenSize()
   const labels = getNetworkNames(t)
   const layerLabels = getLayerLabels(t)
   const icons = getNetworkIcons()
@@ -113,15 +128,15 @@ export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer })
           sx={{
             display: 'flex',
             alignItems: 'center',
-            pb: 2,
+            pb: 3,
           }}
         >
-          <Typography sx={{ fontSize: 24, color: COLORS.brandDark, fontWeight: 700, mr: 3 }} component="span">
+          <StyledButton variant="text" onClick={handleConfirm}>
             {getNameForScope(t, { network, layer })}
-          </Typography>
-          <LayerStatus isOutOfDate={isOutOfDate} withLabel />
+          </StyledButton>
+          <LayerStatus isOutOfDate={isOutOfDate} withLabel={!isMobile} />
         </Box>
-        <Typography sx={{ fontSize: '12px', color: COLORS.brandExtraDark, pb: 2 }}>
+        <Typography sx={{ fontSize: '14px', color: COLORS.brandExtraDark, pb: 4 }}>
           {details.description}
         </Typography>
 
@@ -161,7 +176,7 @@ export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer })
             display: 'flex',
             alignItems: 'center',
             gap: 2,
-            fontSize: '12px',
+            fontSize: '14px',
             fontWeight: 400,
           }}
         >

src/app/components/ParaTimePicker/LayerMenu.tsx

@@ -116,7 +116,7 @@ export const LayerMenu: FC<LayerMenuProps> = ({
     .sort(orderByLayer)
 
   return (
-    <MenuList sx={{ pt: 0 }}>
+    <MenuList>
       {options.map((option, index) => {
         if (!option.enabled) {
           return (

src/app/components/ParaTimePicker/NetworkMenu.tsx

@@ -85,7 +85,7 @@ export const NetworkMenu: FC<NetworkMenuProps> = ({ activeNetwork, selectedNetwo
 
   return (
     <>
-      <MenuList sx={{ pt: 0 }}>
+      <MenuList>
         {stableOptions.map((network, index) => (
           <NetworkMenuItem
             activeNetwork={activeNetwork}