Merge pull request #11903 from ethereum/nx-rm-show-hide

Refactor Show/Hide component usage in layouts

Author: corwintines

src/components/MdComponents.tsx

@@ -234,6 +234,7 @@ export const MobileButton = (props: ChildOnlyProp) => {
   const borderColor = useToken("colors", "border")
   return (
     <Box
+      hideFrom="lg"
       bg="background.base"
       boxShadow={`0 -1px 0 ${borderColor}`}
       position="sticky"

src/layouts/Roadmap.tsx

@@ -2,7 +2,6 @@ import {
   Box,
   Center,
   Flex,
-  Show,
   SimpleGrid,
   useToken,
   Wrap,
@@ -199,11 +198,9 @@ export const RoadmapLayout: React.FC<IProps> = ({
           {children}
           <FeedbackCard />
         </ContentContainer>
-        <Show below="lg">
-          <MobileButton>
-            <MobileButtonDropdown list={dropdownLinks} />
-          </MobileButton>
-        </Show>
+        <MobileButton>
+          <MobileButtonDropdown list={dropdownLinks} />
+        </MobileButton>
       </Page>
     </Box>
   )

src/layouts/Staking.tsx

@@ -6,7 +6,6 @@ import {
   Flex,
   Grid,
   type HeadingProps,
-  Show,
   SimpleGrid,
   Text,
   UnorderedList,
@@ -292,12 +291,9 @@ export const StakingLayout: React.FC<IProps> = ({
           <StakingCommunityCallout my={16} />
           <FeedbackCard />
         </ContentContainer>
-        {/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
-        <Show below={lgBp}>
-          <MobileButton>
-            <MobileButtonDropdown list={dropdownLinks} />
-          </MobileButton>
-        </Show>
+        <MobileButton>
+          <MobileButtonDropdown list={dropdownLinks} />
+        </MobileButton>
       </Page>
     </Box>
   )

src/layouts/Upgrade.tsx

@@ -8,7 +8,6 @@ import {
   Icon,
   List,
   ListItem,
-  Show,
   Text,
   useToken,
 } from "@chakra-ui/react"
@@ -75,6 +74,7 @@ const HeroContainer = (props: ChildOnlyProp) => (
 
 const MoreContent = (props: ChildOnlyProp & { to: string }) => (
   <Flex
+    hideBelow="lg"
     as={BaseLink}
     bg="ednBackground"
     justify="center"
@@ -205,11 +205,9 @@ export const UpgradeLayout: React.FC<IProps> = ({
           />
         )}
       </HeroContainer>
-      <Show above={lgBreakpoint}>
-        <MoreContent to={"#" + MAIN_CONTENT_ID}>
-          <Icon as={MdExpandMore} fontSize="2xl" color="secondary" />
-        </MoreContent>
-      </Show>
+      <MoreContent to={"#" + MAIN_CONTENT_ID}>
+        <Icon as={MdExpandMore} fontSize="2xl" color="secondary" />
+      </MoreContent>
       <Page>
         {/* TODO: Switch to `above="lg"` after completion of Chakra Migration */}
         <LeftNavBar
@@ -222,11 +220,9 @@ export const UpgradeLayout: React.FC<IProps> = ({
           {children}
           <FeedbackCard />
         </ContentContainer>
-        <Show below={lgBreakpoint}>
-          <MobileButton>
-            <MobileButtonDropdown list={dropdownLinks} />
-          </MobileButton>
-        </Show>
+        <MobileButton>
+          <MobileButtonDropdown list={dropdownLinks} />
+        </MobileButton>
       </Page>
     </Container>
   )

src/layouts/UseCases.tsx

@@ -4,7 +4,6 @@ import { MdExpandMore } from "react-icons/md"
 import {
   Box,
   Flex,
-  Hide,
   Icon,
   ListItem,
   Text,
@@ -256,11 +255,9 @@ export const UseCasesLayout: React.FC<IProps> = ({
           {children}
           <FeedbackCard />
         </ContentContainer>
-        <Hide above={lgBp}>
-          <MobileButton>
-            <MobileButtonDropdown list={dropdownLinks} />
-          </MobileButton>
-        </Hide>
+        <MobileButton>
+          <MobileButtonDropdown list={dropdownLinks} />
+        </MobileButton>
       </Page>
     </Box>
   )

src/pages/staking/index.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from "react"
 import { GetStaticProps, InferGetStaticPropsType } from "next"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-import { Box, Flex, Grid, HeadingProps, Show, useToken } from "@chakra-ui/react"
+import { Box, Flex, Grid, HeadingProps, useToken } from "@chakra-ui/react"
 
 import type {
   BasePageProps,
@@ -742,12 +742,9 @@ const StakingPage = ({
             </Box>
           </Flex>
         </ContentContainer>
-        {/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
-        <Show below={lgBp}>
-          <MobileButton>
-            <MobileButtonDropdown list={dropdownLinks} />
-          </MobileButton>
-        </Show>
+        <MobileButton>
+          <MobileButtonDropdown list={dropdownLinks} />
+        </MobileButton>
       </Page>
     </PageContainer>
   )