From e14d1ad55448b63bf47f34da4e6de4bcd861a1ea Mon Sep 17 00:00:00 2001
From: soheil <soheilrasekh555@gmail.com>
Date: Thu, 20 Apr 2023 23:58:20 +0330
Subject: [PATCH 1/3] refactor(staking-template): migrate to chakra

---
 src/templates/staking.tsx | 589 +++++++++++++++++++++-----------------
 1 file changed, 320 insertions(+), 269 deletions(-)

diff --git a/src/templates/staking.tsx b/src/templates/staking.tsx
index f3c8619106d..ca6a4948ac7 100644
--- a/src/templates/staking.tsx
+++ b/src/templates/staking.tsx
@@ -1,10 +1,24 @@
-import React, { FC } from "react"
+import React from "react"
 import { graphql, PageProps } from "gatsby"
 import { MDXRenderer } from "gatsby-plugin-mdx"
 import { GatsbyImage } from "gatsby-plugin-image"
 import { MDXProvider } from "@mdx-js/react"
-import styled from "@emotion/styled"
-import { Badge, Box, BoxProps } from "@chakra-ui/react"
+import {
+  Badge,
+  Box,
+  BoxProps,
+  Flex,
+  Heading,
+  SimpleGrid,
+  Text,
+  useTheme,
+  chakra,
+  calc,
+  Grid,
+  Image,
+  UnorderedList,
+} from "@chakra-ui/react"
+
 import ButtonLink from "../components/ButtonLink"
 import ButtonDropdown, {
   List as ButtonDropdownList,
@@ -13,7 +27,9 @@ import Card from "../components/Card"
 import ExpandableCard from "../components/ExpandableCard"
 import DocLink from "../components/DocLink"
 import Contributors from "../components/Contributors"
-import SharedInfoBanner from "../components/InfoBanner"
+import SharedInfoBanner, {
+  IProps as ISharedInfoBannerProps,
+} from "../components/InfoBanner"
 import UpgradeStatus from "../components/UpgradeStatus"
 import Link from "../components/Link"
 import MarkdownTable from "../components/MarkdownTable"
@@ -27,14 +43,7 @@ import TableOfContents, {
 } from "../components/TableOfContents"
 import FeedbackCard from "../components/FeedbackCard"
 import SectionNav from "../components/SectionNav"
-import {
-  Divider,
-  Paragraph,
-  Header1,
-  Header4,
-  InfoGrid,
-} from "../components/SharedStyledComponents"
-import Emoji from "../components/OldEmoji"
+import Emoji from "../components/Emoji"
 import YouTube from "../components/YouTube"
 import Breadcrumbs from "../components/Breadcrumbs"
 import StakingLaunchpadWidget from "../components/Staking/StakingLaunchpadWidget"
@@ -49,268 +58,234 @@ import WithdrawalsTabComparison from "../components/Staking/WithdrawalsTabCompar
 import Callout from "../components/Callout"
 
 import { isLangRightToLeft, TranslationKey } from "../utils/translations"
-import { Context } from "../types"
 import { Lang } from "../utils/languages"
 import { getImage } from "../utils/image"
 
-const Page = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin: 0 auto 4rem;
-
-  @media (min-width: ${(props) => props.theme.breakpoints.l}) {
-    padding-top: 4rem;
-  }
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    flex-direction: column;
-  }
-`
-
-const InfoColumn = styled.aside`
-  display: flex;
-  flex-direction: column;
-  position: sticky;
-  top: 6.25rem; /* account for navbar */
-  height: calc(100vh - 80px);
-  flex: 0 1 330px;
-  margin: 0 2rem;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    display: none;
-  }
-`
-
-const MobileButton = styled.div`
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    background: ${(props) => props.theme.colors.background};
-    box-shadow: 0 -1px 0px ${(props) => props.theme.colors.border};
-    width: 100%;
-    bottom: 0;
-    position: sticky;
-    padding: 2rem;
-    z-index: 99;
-    margin-bottom: 0rem;
-  }
-`
+import { ChildOnlyProp, Context } from "../types"
 
 // Apply styles for classes within markdown here
-const ContentContainer = styled.article`
-  flex: 1 1 ${(props) => props.theme.breakpoints.l};
-  position: relative;
-  padding: 2rem;
-  padding-top: 0rem;
-
-  @media (min-width: ${({ theme }) => theme.breakpoints.l}) {
-    h2:first-of-type {
-      margin-top: 0;
-    }
-  }
-
-  .featured {
-    padding-left: 1rem;
-    margin-left: -1rem;
-    border-left: 1px dotted ${(props) => props.theme.colors.primary};
-  }
-
-  .citation {
-    p {
-      color: ${(props) => props.theme.colors.text200};
-    }
-  }
-`
-
-const Pre = styled.pre`
-  max-width: 100%;
-  overflow-x: scroll;
-  background-color: ${(props) => props.theme.colors.preBackground};
-  border-radius: 0.25rem;
-  padding: 1rem;
-  border: 1px solid ${(props) => props.theme.colors.preBorder};
-  white-space: pre-wrap;
-`
-
-const InfoTitle = styled.h2`
-  font-size: 3rem;
-  font-weight: 700;
-  text-align: right;
-  margin-top: 0rem;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    text-align: left;
-    font-size: 2.5rem
-    display: none;
-  }
-`
-
-const H2 = styled.h2`
-  font-size: 2rem;
-  font-weight: 700;
-  margin-top: 4rem;
-
-  a {
-    display: none;
-  }
-
-  /* Anchor tag styles */
-
-  a {
-    position: relative;
-    display: initial;
-    opacity: 0;
-    margin-left: -1.5em;
-    padding-right: 0.5rem;
-    font-size: 1rem;
-    vertical-align: middle;
-    &:hover {
-      display: initial;
-      fill: ${(props) => props.theme.colors.primary};
-      opacity: 1;
-    }
-  }
-
-  &:hover {
-    a {
-      display: initial;
-      fill: ${(props) => props.theme.colors.primary};
-      opacity: 1;
-    }
-  }
-`
-
-const H3 = styled.h3`
-  font-size: 1.5rem;
-  font-weight: 700;
-
-  a {
-    display: none;
-  }
-
-  /* Anchor tag styles */
-
-  a {
-    position: relative;
-    display: initial;
-    opacity: 0;
-    margin-left: -1.5em;
-    padding-right: 0.5rem;
-    font-size: 1rem;
-    vertical-align: middle;
-    &:hover {
-      display: initial;
-      fill: ${(props) => props.theme.colors.primary};
-      opacity: 1;
-    }
-  }
+const Divider = (props: ChildOnlyProp) => (
+  <Box my={16} w="10%" h={1} bgColor="homeDivider" {...props} />
+)
 
-  &:hover {
-    a {
-      display: initial;
-      fill: ${(props) => props.theme.colors.primary};
-      opacity: 1;
-    }
-  }
-`
+const Paragraph = (props: ChildOnlyProp) => (
+  <Text fontSize="md" mt={8} mb={4} color="text300" {...props} />
+)
 
-const CardGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+const Header1 = (props: ChildOnlyProp) => (
+  <Heading
+    as="h1"
+    fontSize={{ base: "2.5rem", md: "5xl" }}
+    lineHeight={1.4}
+    fontWeight="bold"
+    _before={{
+      content: `""`,
+      display: "block",
+      h: "140px",
+      mt: "-140px",
+      visibility: "hidden",
+    }}
+    sx={{
+      a: {
+        display: "none",
+      },
+    }}
+    {...props}
+  />
+)
 
-  gap: 2rem;
-  h3 {
-    margin-top: 0;
-  }
+const Header4 = (props: ChildOnlyProp) => (
+  <Heading
+    as="h4"
+    fontSize={{ base: "md", md: "xl" }}
+    lineHeight={1.4}
+    fontWeight="semibold"
+    sx={{ position: "unset !important" }}
+    _before={{
+      content: `""`,
+      display: "block",
+      h: "120px",
+      mt: "-120px",
+      visibility: "hidden",
+    }}
+    {...props}
+  />
+)
 
-  @media (max-width: ${(props) => props.theme.breakpoints.m}) {
-    grid-template-columns: repeat(1, 1fr);
-    margin: auto;
-  }
-`
+const InfoGrid = (props: ChildOnlyProp) => (
+  <Grid
+    templateColumns="repeat(auto-fill, minmax(min(100%, 340px), 1fr))"
+    gap={8}
+    sx={{
+      "& > div": {
+        h: "fit-content",
+        m: 0,
+        "&:hover": {
+          transition: "0.1s",
+          transform: "scale(1.01)",
+          svg: {
+            transition: "0.1s",
+            transform: "scale(1.1)",
+          },
+        },
+      },
+    }}
+    {...props}
+  />
+)
 
-const Title = styled.h1`
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-top: 1rem;
-`
+const Pre = (props: ChildOnlyProp) => (
+  <Text
+    as="pre"
+    maxW="full"
+    overflowX="scroll"
+    bgColor="preBackground"
+    borderRadius="base"
+    p={4}
+    border="1px solid"
+    borderColor="preBorder"
+    whiteSpace="pre-wrap"
+    {...props}
+  />
+)
 
-const SummaryPoint = styled.li`
-  color: ${(props) => props.theme.colors.text300};
-`
+const InfoTitle = (props: ChildOnlyProp) => (
+  <Heading
+    fontSize="5xl"
+    lineHeight={1.4}
+    fontWeight="bold"
+    textAlign="right"
+    mt={0}
+    hideBelow="lg"
+    {...props}
+  />
+)
 
-const StyledButtonDropdown = styled(ButtonDropdown)`
-  margin-bottom: 2rem;
-  display: flex;
-  justify-content: flex-end;
-  text-align: center;
-  @media (min-width: ${(props) => props.theme.breakpoints.s}) {
-    align-self: flex-end;
-  }
-`
+const H2 = (props: ChildOnlyProp) => (
+  <Heading
+    fontSize="2rem"
+    lineHeight={1.4}
+    fontWeight="bold"
+    mt={16}
+    sx={{
+      a: {
+        position: "relative",
+        display: "initial",
+        opacity: 0,
+        ml: "-1.5em",
+        pr: 2,
+        fontSize: "md",
+        verticalAlign: "middle",
+
+        "&:hover": {
+          fill: "primary",
+          opacity: 1,
+        },
+      },
+    }}
+    _hover={{
+      a: {
+        fill: "primary",
+        opacity: 1,
+      },
+    }}
+    {...props}
+  />
+)
 
-const MobileButtonDropdown = styled(StyledButtonDropdown)`
-  margin-bottom: 0rem;
-  display: none;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    display: block;
-  }
-`
+const H3 = (props: ChildOnlyProp) => (
+  <Heading
+    as="h3"
+    fontSize="2xl"
+    lineHeight={1.4}
+    fontWeight="bold"
+    sx={{
+      a: {
+        position: "relative",
+        display: "initial",
+        opacity: 0,
+        ml: "-1.5em",
+        pr: 2,
+        fontSize: "md",
+        verticalAlign: "middle",
+
+        "&:hover": {
+          fill: "primary",
+          opacity: 1,
+        },
+      },
+    }}
+    _hover={{
+      a: {
+        fill: "primary",
+        opacity: 1,
+      },
+    }}
+    {...props}
+  />
+)
 
-const Container = styled.div`
-  position: relative;
-  * {
-    scroll-margin-top: 5.5rem;
-  }
-`
+const CardGrid = (props: ChildOnlyProp) => (
+  <SimpleGrid
+    columns={{ base: 1, md: 3 }}
+    spacing={8}
+    m={{ base: "auto", md: 0 }}
+    sx={{
+      h3: {
+        mt: 0,
+      },
+    }}
+    {...props}
+  />
+)
 
-const HeroContainer = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 2rem;
-  --height: 500px;
-  max-height: var(--height);
-  min-height: var(--height);
-  background: ${({ theme }) => theme.colors.layer2Gradient};
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    flex-direction: column;
-    max-height: 100%;
-    padding-left: 0;
-    padding-right: 0;
-  }
-`
+const Title = (props: ChildOnlyProp) => (
+  <Heading
+    as="h1"
+    fontSize="2.5rem"
+    lineHeight={1.4}
+    fontWeight="bold"
+    mt={4}
+    {...props}
+  />
+)
 
-const Image = styled(GatsbyImage)`
-  flex: 1 1 100%;
-  background-repeat: no-repeat;
-  right: 0;
-  bottom: 0;
-  max-width: 400px;
-  @media (max-width: ${({ theme }) => theme.breakpoints.l}) {
-    width: 100%;
-    height: 100%;
-    max-height: 340px;
-    max-width: min(400px, 98%);
-    overflow: initial;
-    align-self: center;
-    margin: 0;
-  }
-`
+const SummaryPoint = (props: ChildOnlyProp) => (
+  <chakra.li color="text300" {...props} />
+)
 
-const MobileTableOfContents = styled(TableOfContents)`
-  position: relative;
-  z-index: 2;
-`
+const Container = (props: ChildOnlyProp) => (
+  <Box
+    position="relative"
+    sx={{
+      "*": {
+        scrollMarginTop: 1,
+      },
+    }}
+    {...props}
+  />
+)
 
-const TitleCard = styled.div`
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  width: 100%;
-`
+const HeroContainer = (props: ChildOnlyProp) => {
+  return (
+    <Flex
+      direction={{ base: "column", lg: "row" }}
+      align="center"
+      py={8}
+      px={{ base: 0, lg: 8 }}
+      maxH={{ base: "full", lg: "500px" }}
+      minH="500px"
+      bg="layer2Gradient"
+      {...props}
+    />
+  )
+}
 
-const InfoBanner = styled(SharedInfoBanner)`
-  margin: 2rem 0;
-`
+const InfoBanner = (props: ISharedInfoBannerProps) => (
+  <SharedInfoBanner my={8} {...props} />
+)
 
-const TableContainer: FC<BoxProps> = (props) => (
+const TableContainer = (props: BoxProps) => (
   <Box
     w="fit-content"
     mx={["auto", null, null, 0]}
@@ -383,6 +358,7 @@ const StakingPage = ({
   const isRightToLeft = isLangRightToLeft(mdx.frontmatter.lang as Lang)
   const tocItems = mdx.tableOfContents?.items as ItemTableOfContents[]
   const { summaryPoints } = mdx.frontmatter
+  const theme = useTheme()
 
   const dropdownLinks: ButtonDropdownList = {
     text: "Staking Options",
@@ -439,33 +415,69 @@ const StakingPage = ({
   return (
     <Container>
       <HeroContainer>
-        <TitleCard>
+        <Flex direction="column" justify="flex-start" w="full" p={8}>
           <Breadcrumbs slug={location.pathname} />
           <Title>{mdx.frontmatter.title}</Title>
-          <ul>
+          <UnorderedList>
             {(summaryPoints || []).map((point, idx) => (
               <SummaryPoint key={idx}>{point}</SummaryPoint>
             ))}
-          </ul>
-          <MobileTableOfContents
+          </UnorderedList>
+          <TableOfContents
+            position="relative"
+            zIndex={2}
             items={tocItems}
             maxDepth={mdx.frontmatter.sidebarDepth!}
             isMobile
           />
-        </TitleCard>
+        </Flex>
         <Image
+          as={GatsbyImage}
+          flex="1 1 100%"
+          bgRepeat="no-repeat"
+          right={0}
+          bottom={0}
+          maxW={{ base: "min(400px, 98%)", lg: "400px" }}
+          maxH={{ base: "340px", lg: "none" }}
+          boxSize={{ base: "full", lg: "auto" }}
+          overflow={{ base: "initial", lg: "visible" }}
+          alignSelf={{ base: "center", lg: "auto" }}
           image={getImage(mdx.frontmatter.image)!}
           alt={mdx.frontmatter.alt || ""}
           objectFit="contain"
         />
       </HeroContainer>
-      <Page dir={isRightToLeft ? "rtl" : "ltr"}>
+      <Flex
+        direction={{ base: "column", lg: "row" }}
+        justify="space-between"
+        w="full"
+        mx="auto"
+        mb={16}
+        pt={{ lg: 16 }}
+        dir={isRightToLeft ? "rtl" : "ltr"}
+      >
         <PageMetadata
           title={mdx.frontmatter.title}
           description={mdx.frontmatter.description}
         />
-        <InfoColumn>
-          <StyledButtonDropdown list={dropdownLinks} />
+        <Flex
+          as="aside"
+          direction="column"
+          position="sticky"
+          top="6.25rem" // account for navbar
+          h={calc.subtract("100vh", "80px")}
+          flex="0 1 330px"
+          mx={8}
+          hideBelow="lg"
+        >
+          <Flex
+            as={ButtonDropdown}
+            mb={8}
+            justify="flex-end"
+            alignSelf={{ sm: "flex-end" }}
+            textAlign="center"
+            list={dropdownLinks}
+          />
           <InfoTitle>{mdx.frontmatter.title}</InfoTitle>
 
           {tocItems && (
@@ -474,18 +486,57 @@ const StakingPage = ({
               maxDepth={mdx.frontmatter.sidebarDepth!}
             />
           )}
-        </InfoColumn>
-        <ContentContainer id="content">
+        </Flex>
+        <Box
+          as="article"
+          flex={`1 1 ${theme.breakpoints.lg}`}
+          position="relative"
+          px={8}
+          pb={8}
+          sx={{
+            "h2:first-of-type": {
+              mt: { lg: 0 },
+            },
+            ".featured": {
+              pl: 4,
+              ml: -4,
+              borderLeft: "1px dotted",
+              borderLeftColor: "primary",
+            },
+            ".citation": {
+              p: {
+                color: "text200",
+              },
+            },
+          }}
+          id="content"
+        >
           <MDXProvider components={components}>
             <MDXRenderer>{mdx.body}</MDXRenderer>
           </MDXProvider>
           <StakingCommunityCallout />
           <FeedbackCard />
-        </ContentContainer>
-        <MobileButton>
-          <MobileButtonDropdown list={dropdownLinks} />
-        </MobileButton>
-      </Page>
+        </Box>
+        <Box
+          bg="background"
+          boxShadow={`0 -1px 0px ${theme.colors.border}`}
+          w="full"
+          bottom={0}
+          position="sticky"
+          p={8}
+          zIndex={99}
+          hideFrom="lg"
+        >
+          <Flex
+            as={ButtonDropdown}
+            justify="flex-end"
+            alignSelf={{ sm: "flex-end" }}
+            textAlign="center"
+            hideFrom="lg"
+            list={dropdownLinks}
+          />
+        </Box>
+      </Flex>
     </Container>
   )
 }

From f7698453c13e0ce0981bde60f8653271d2341de1 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Wed, 10 May 2023 17:48:07 -0300
Subject: [PATCH 2/3] reuse components from use-cases template and fix layout
 for responsive design

---
 .../TableOfContents/TableOfContentsMobile.tsx |   6 +-
 src/components/TableOfContents/index.tsx      |   5 +-
 src/templates/staking.tsx                     | 149 +++++-------------
 src/templates/use-cases.tsx                   |  15 +-
 4 files changed, 60 insertions(+), 115 deletions(-)

diff --git a/src/components/TableOfContents/TableOfContentsMobile.tsx b/src/components/TableOfContents/TableOfContentsMobile.tsx
index 93a69034d67..724bf8258bb 100644
--- a/src/components/TableOfContents/TableOfContentsMobile.tsx
+++ b/src/components/TableOfContents/TableOfContentsMobile.tsx
@@ -7,6 +7,7 @@ import {
   Icon,
   List,
   Show,
+  useToken,
 } from "@chakra-ui/react"
 import React from "react"
 import { MdExpandMore } from "react-icons/md"
@@ -20,6 +21,9 @@ export interface IPropsTableOfContentsMobile {
 }
 
 const Mobile: React.FC<IPropsTableOfContentsMobile> = ({ items, maxDepth }) => {
+  // TODO: Replace with direct token implementation after UI migration is completed
+  const lgBp = useToken("breakpoints", "lg")
+
   const { getButtonProps, getDisclosureProps, isOpen } = useDisclosure({
     defaultIsOpen: false,
   })
@@ -28,7 +32,7 @@ const Mobile: React.FC<IPropsTableOfContentsMobile> = ({ items, maxDepth }) => {
   }
 
   return (
-    <Show below="l">
+    <Show below={lgBp}>
       {/* TODO: switch `l` to `lg` after UI migration and use `hideBelow` prop */}
       <Box
         as="aside"
diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
index 1db648696d5..cfbb8145492 100644
--- a/src/components/TableOfContents/index.tsx
+++ b/src/components/TableOfContents/index.tsx
@@ -12,6 +12,7 @@ import {
   ListItem,
   Show,
   Switch,
+  useToken,
 } from "@chakra-ui/react"
 import { FaGithub } from "react-icons/fa"
 import { useActiveHash } from "../../hooks/useActiveHash"
@@ -44,6 +45,8 @@ const TableOfContents: React.FC<IProps> = ({
   ...rest
 }) => {
   const { isZenMode, handleZenModeChange } = useContext(ZenModeContext)
+  // TODO: Replace with direct token implementation after UI migration is completed
+  const lgBp = useToken("breakpoints", "lg")
 
   const titleIds: Array<string> = []
 
@@ -81,7 +84,7 @@ const TableOfContents: React.FC<IProps> = ({
 
   return (
     // TODO: Switch to `above="lg"` after completion of Chakra Migration
-    <Show breakpoint="(min-width: 1025px)">
+    <Show above={lgBp}>
       <Box
         as="aside"
         position="sticky"
diff --git a/src/templates/staking.tsx b/src/templates/staking.tsx
index ca6a4948ac7..6ae8678ae35 100644
--- a/src/templates/staking.tsx
+++ b/src/templates/staking.tsx
@@ -11,25 +11,21 @@ import {
   Heading,
   SimpleGrid,
   Text,
-  useTheme,
   chakra,
-  calc,
   Grid,
   Image,
   UnorderedList,
+  useToken,
+  Show,
 } from "@chakra-ui/react"
 
 import ButtonLink from "../components/ButtonLink"
-import ButtonDropdown, {
-  List as ButtonDropdownList,
-} from "../components/ButtonDropdown"
+import { List as ButtonDropdownList } from "../components/ButtonDropdown"
 import Card from "../components/Card"
 import ExpandableCard from "../components/ExpandableCard"
 import DocLink from "../components/DocLink"
 import Contributors from "../components/Contributors"
-import SharedInfoBanner, {
-  IProps as ISharedInfoBannerProps,
-} from "../components/InfoBanner"
+import InfoBanner from "../components/InfoBanner"
 import UpgradeStatus from "../components/UpgradeStatus"
 import Link from "../components/Link"
 import MarkdownTable from "../components/MarkdownTable"
@@ -63,6 +59,16 @@ import { getImage } from "../utils/image"
 
 import { ChildOnlyProp, Context } from "../types"
 
+// TODO: move these components to a new folder under /components
+import {
+  ContentContainer,
+  InfoColumn,
+  MobileButton,
+  MobileButtonDropdown,
+  Page,
+  StyledButtonDropdown,
+} from "./use-cases"
+
 // Apply styles for classes within markdown here
 const Divider = (props: ChildOnlyProp) => (
   <Box my={16} w="10%" h={1} bgColor="homeDivider" {...props} />
@@ -254,18 +260,6 @@ const SummaryPoint = (props: ChildOnlyProp) => (
   <chakra.li color="text300" {...props} />
 )
 
-const Container = (props: ChildOnlyProp) => (
-  <Box
-    position="relative"
-    sx={{
-      "*": {
-        scrollMarginTop: 1,
-      },
-    }}
-    {...props}
-  />
-)
-
 const HeroContainer = (props: ChildOnlyProp) => {
   return (
     <Flex
@@ -281,10 +275,6 @@ const HeroContainer = (props: ChildOnlyProp) => {
   )
 }
 
-const InfoBanner = (props: ISharedInfoBannerProps) => (
-  <SharedInfoBanner my={8} {...props} />
-)
-
 const TableContainer = (props: BoxProps) => (
   <Box
     w="fit-content"
@@ -348,6 +338,9 @@ const StakingPage = ({
   data: { pageData: mdx },
   location,
 }: PageProps<Queries.StakingPageQuery, Context>) => {
+  // TODO: Replace with direct token implementation after UI migration is completed
+  const lgBp = useToken("breakpoints", "lg")
+
   if (!mdx?.frontmatter)
     throw new Error(
       "Staking page template query does not return expected values"
@@ -358,7 +351,6 @@ const StakingPage = ({
   const isRightToLeft = isLangRightToLeft(mdx.frontmatter.lang as Lang)
   const tocItems = mdx.tableOfContents?.items as ItemTableOfContents[]
   const { summaryPoints } = mdx.frontmatter
-  const theme = useTheme()
 
   const dropdownLinks: ButtonDropdownList = {
     text: "Staking Options",
@@ -413,7 +405,7 @@ const StakingPage = ({
   }
 
   return (
-    <Container>
+    <Box position="relative" width="full">
       <HeroContainer>
         <Flex direction="column" justify="flex-start" w="full" p={8}>
           <Breadcrumbs slug={location.pathname} />
@@ -447,97 +439,40 @@ const StakingPage = ({
           objectFit="contain"
         />
       </HeroContainer>
-      <Flex
-        direction={{ base: "column", lg: "row" }}
-        justify="space-between"
-        w="full"
-        mx="auto"
-        mb={16}
-        pt={{ lg: 16 }}
-        dir={isRightToLeft ? "rtl" : "ltr"}
-      >
+      <Page dir={isRightToLeft ? "rtl" : "ltr"}>
         <PageMetadata
           title={mdx.frontmatter.title}
           description={mdx.frontmatter.description}
         />
-        <Flex
-          as="aside"
-          direction="column"
-          position="sticky"
-          top="6.25rem" // account for navbar
-          h={calc.subtract("100vh", "80px")}
-          flex="0 1 330px"
-          mx={8}
-          hideBelow="lg"
-        >
-          <Flex
-            as={ButtonDropdown}
-            mb={8}
-            justify="flex-end"
-            alignSelf={{ sm: "flex-end" }}
-            textAlign="center"
-            list={dropdownLinks}
-          />
-          <InfoTitle>{mdx.frontmatter.title}</InfoTitle>
+        {/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
+        <Show above={lgBp}>
+          <InfoColumn>
+            <StyledButtonDropdown list={dropdownLinks} />
+            <InfoTitle>{mdx.frontmatter.title}</InfoTitle>
 
-          {tocItems && (
-            <UpgradeTableOfContents
-              items={tocItems}
-              maxDepth={mdx.frontmatter.sidebarDepth!}
-            />
-          )}
-        </Flex>
-        <Box
-          as="article"
-          flex={`1 1 ${theme.breakpoints.lg}`}
-          position="relative"
-          px={8}
-          pb={8}
-          sx={{
-            "h2:first-of-type": {
-              mt: { lg: 0 },
-            },
-            ".featured": {
-              pl: 4,
-              ml: -4,
-              borderLeft: "1px dotted",
-              borderLeftColor: "primary",
-            },
-            ".citation": {
-              p: {
-                color: "text200",
-              },
-            },
-          }}
-          id="content"
-        >
+            {tocItems && (
+              <UpgradeTableOfContents
+                items={tocItems}
+                maxDepth={mdx.frontmatter.sidebarDepth!}
+              />
+            )}
+          </InfoColumn>
+        </Show>
+        <ContentContainer id="content">
           <MDXProvider components={components}>
             <MDXRenderer>{mdx.body}</MDXRenderer>
           </MDXProvider>
           <StakingCommunityCallout />
           <FeedbackCard />
-        </Box>
-        <Box
-          bg="background"
-          boxShadow={`0 -1px 0px ${theme.colors.border}`}
-          w="full"
-          bottom={0}
-          position="sticky"
-          p={8}
-          zIndex={99}
-          hideFrom="lg"
-        >
-          <Flex
-            as={ButtonDropdown}
-            justify="flex-end"
-            alignSelf={{ sm: "flex-end" }}
-            textAlign="center"
-            hideFrom="lg"
-            list={dropdownLinks}
-          />
-        </Box>
-      </Flex>
-    </Container>
+        </ContentContainer>
+        {/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
+        <Show below={lgBp}>
+          <MobileButton>
+            <MobileButtonDropdown list={dropdownLinks} />
+          </MobileButton>
+        </Show>
+      </Page>
+    </Box>
   )
 }
 
diff --git a/src/templates/use-cases.tsx b/src/templates/use-cases.tsx
index 83111eb650b..aa86ac7d33f 100644
--- a/src/templates/use-cases.tsx
+++ b/src/templates/use-cases.tsx
@@ -191,7 +191,7 @@ const HeroImage = chakra(GatsbyImage, {
   },
 })
 
-const Page = (props: FlexProps) => (
+export const Page = (props: FlexProps) => (
   <Flex
     flexDirection={{ base: "column", lg: "row" }}
     justifyContent="space-between"
@@ -199,11 +199,12 @@ const Page = (props: FlexProps) => (
     mb={16}
     pt={{ lg: 16 }}
     width="full"
+    sx={{ "h2:first-of-type": { mt: { lg: 0 } } }}
     {...props}
   />
 )
 
-const InfoColumn = (props: ChildOnlyProp) => (
+export const InfoColumn = (props: ChildOnlyProp) => (
   <Flex
     flexDirection="column"
     flex="0 1 400px"
@@ -227,7 +228,9 @@ const InfoTitle = (props: ChildOnlyProp) => (
 
 type ButtonDropdownProps = Parameters<typeof ButtonDropdown>[0]
 
-const StyledButtonDropdown = (props: FlexProps & ButtonDropdownProps) => (
+export const StyledButtonDropdown = (
+  props: FlexProps & ButtonDropdownProps
+) => (
   <Flex
     as={ButtonDropdown}
     alignSelf={{ sm: "flex-end" }}
@@ -238,11 +241,11 @@ const StyledButtonDropdown = (props: FlexProps & ButtonDropdownProps) => (
   />
 )
 
-const MobileButtonDropdown = (props: ButtonDropdownProps) => (
+export const MobileButtonDropdown = (props: ButtonDropdownProps) => (
   <StyledButtonDropdown mb={0} {...props} />
 )
 
-const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => (
+export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => (
   <Box
     as="article"
     flex="1 1 1024px"
@@ -264,7 +267,7 @@ const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => (
   />
 )
 
-const MobileButton = (props: ChildOnlyProp) => {
+export const MobileButton = (props: ChildOnlyProp) => {
   const borderColor = useToken("colors", "border")
   return (
     <Box

From a3f001da7a705a65eaff6da1d7818c35f318b012 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Fri, 12 May 2023 15:40:46 -0300
Subject: [PATCH 3/3] refactor the staking page to reuse already existing
 components from the use-case template

---
 src/pages/staking/index.tsx | 182 ++++++++++--------------------------
 src/templates/staking.tsx   |  13 +--
 src/templates/use-cases.tsx |  60 ++++++------
 3 files changed, 82 insertions(+), 173 deletions(-)

diff --git a/src/pages/staking/index.tsx b/src/pages/staking/index.tsx
index 3666a77c402..6dc9ee50d27 100644
--- a/src/pages/staking/index.tsx
+++ b/src/pages/staking/index.tsx
@@ -1,11 +1,9 @@
 import React, { ReactNode } from "react"
 import { graphql, PageProps } from "gatsby"
 import { useTranslation } from "gatsby-plugin-react-i18next"
-import { Box, Flex, Grid, Heading, useToken } from "@chakra-ui/react"
+import { Box, Flex, Grid, Heading, Show, useToken } from "@chakra-ui/react"
 
-import ButtonDropdown, {
-  List as ButtonDropdownList,
-} from "../../components/ButtonDropdown"
+import { List as ButtonDropdownList } from "../../components/ButtonDropdown"
 import ButtonLink from "../../components/ButtonLink"
 import Card from "../../components/Card"
 import Link from "../../components/Link"
@@ -20,12 +18,19 @@ import StakingCommunityCallout from "../../components/Staking/StakingCommunityCa
 import UpgradeTableOfContents from "../../components/UpgradeTableOfContents"
 
 import { getImage } from "../../utils/image"
-
+import type { TranslationKey } from "../../utils/translations"
 import type { ChildOnlyProp, Context } from "../../types"
 
-const Content = (props: ChildOnlyProp) => (
-  <Box p="1rem 2rem" w="full" {...props} />
-)
+// TODO: move these components to a new folder under /components
+import {
+  ContentContainer,
+  InfoColumn,
+  InfoTitle,
+  MobileButton,
+  MobileButtonDropdown,
+  Page,
+  StyledButtonDropdown,
+} from "../../templates/use-cases"
 
 const PageContainer = (props: ChildOnlyProp) => (
   <Flex flexDir="column" alignItems="center" w="full" m="0 auto" {...props} />
@@ -46,105 +51,6 @@ const HeroStatsWrapper = (props: ChildOnlyProp) => (
   />
 )
 
-const Page = (props: ChildOnlyProp) => (
-  <Flex
-    w="full"
-    justifyContent="space-between"
-    m="0 auto 4rem"
-    pt={16}
-    flexDirection={{ base: "column", lg: "row" }}
-    {...props}
-  />
-)
-
-const InfoTitle = (props: ChildOnlyProp) => (
-  <Heading
-    fontSize="5xl"
-    fontWeight="700"
-    lineHeight={1.4}
-    textAlign="right"
-    mt={0}
-    display={{ base: "none", lg: "block" }}
-    {...props}
-  />
-)
-
-// InfoColumn shows above xl
-const InfoColumn = (props: ChildOnlyProp) => (
-  <Flex
-    flexDir="column"
-    position="sticky"
-    top="6.25rem"
-    height="calc(100vh - 80px)"
-    flex="0 1 330px"
-    mx={8}
-    display={{ base: "none", lg: "initial" }}
-    {...props}
-  />
-)
-
-const StyledButtonDropdown = ({
-  list,
-  ...rest
-}: {
-  list: ButtonDropdownList
-}) => (
-  <Flex
-    justifyContent="flex-end"
-    textAlign="center"
-    alignSelf={{ base: "auto", lg: "flex-end" }}
-    mb={8}
-    {...rest}
-  >
-    <ButtonDropdown list={list} />
-  </Flex>
-)
-
-// ButtonDropdown for mobile only
-const MobileButton = ({ list, ...rest }: { list: ButtonDropdownList }) => {
-  const borderBoxShadowColor = useToken("colors", "border")
-
-  return (
-    <Box
-      position="sticky"
-      bottom="0"
-      w="full"
-      bg="background"
-      boxShadow={`0 -1px 0px ${borderBoxShadowColor}`}
-      zIndex="99"
-      p={8}
-      mb={0}
-      display={{ base: "block", lg: "none" }}
-      {...rest}
-    >
-      <ButtonDropdown list={list} />
-    </Box>
-  )
-}
-
-const ContentContainer = (props: { children: ReactNode; id: string }) => {
-  const [mdBp, lgBp] = useToken("breakpoints", ["md", "lg"])
-
-  return (
-    <Flex
-      flex={`1 1 ${lgBp}`}
-      flexBasis={mdBp}
-      position="relative"
-      padding={{ base: 0, md: "0 2rem 2rem" }}
-      gap={8}
-      direction="column"
-      alignItems="center"
-      sx={{
-        "h2:first-of-type, & > div:first-of-type": {
-          mt: 0,
-          pt: 0,
-        },
-      }}
-      {...props}
-    ></Flex>
-  )
-}
-
 const ComparisonGrid = (props: ChildOnlyProp) => {
   const gridAreas = {
     base: `"solo-title"
@@ -162,7 +68,7 @@ const ComparisonGrid = (props: ChildOnlyProp) => {
         "pool-risks"
         "pool-reqs"
         "pool-cta";`,
-    lg: `"solo-title saas-title pool-title"
+    xl: `"solo-title saas-title pool-title"
         "solo-rewards saas-rewards pool-rewards"
         "solo-risks saas-risks pool-risks"
         "solo-reqs saas-reqs pool-reqs"
@@ -172,7 +78,7 @@ const ComparisonGrid = (props: ChildOnlyProp) => {
     <Grid
       columnGap={12}
       gridAutoRows="minmax(64px, auto)"
-      gridTemplateColumns={{ base: "1fr", lg: "repeat(3, 1fr)" }}
+      gridTemplateColumns={{ base: "1fr", xl: "repeat(3, 1fr)" }}
       gridTemplateAreas={gridAreas}
       sx={{
         h4: {
@@ -242,6 +148,8 @@ const StakingPage = ({
   data,
 }: PageProps<Queries.StakingPageIndexQuery, Context>) => {
   const { t } = useTranslation()
+  // TODO: Replace with direct token implementation after UI migration is completed
+  const lgBp = useToken("breakpoints", "lg")
 
   const heroContent = {
     title: t("page-staking-hero-title"),
@@ -368,15 +276,18 @@ const StakingPage = ({
         <StakingStatsBox />
       </HeroStatsWrapper>
       <Page>
-        <InfoColumn>
-          <StyledButtonDropdown list={dropdownLinks} />
-          <InfoTitle>
-            <Translation id="page-staking-dom-info-title" />
-          </InfoTitle>
-          <UpgradeTableOfContents items={tocArray} />
-        </InfoColumn>
+        {/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
+        <Show above={lgBp}>
+          <InfoColumn>
+            <StyledButtonDropdown list={dropdownLinks} />
+            <InfoTitle>
+              <Translation id="page-staking-dom-info-title" />
+            </InfoTitle>
+            <UpgradeTableOfContents items={tocArray} />
+          </InfoColumn>
+        </Show>
         <ContentContainer id="content">
-          <Content>
+          <Box>
             <h2 id={tocItems.whatIsStaking.id}>
               {tocItems.whatIsStaking.title}
             </h2>
@@ -388,8 +299,8 @@ const StakingPage = ({
                 <Translation id="page-staking-section-what-link" />
               </Link>
             </p>
-          </Content>
-          <Content>
+          </Box>
+          <Box>
             <h2 id={tocItems.whyStakeYourEth.id}>
               {tocItems.whyStakeYourEth.title}
             </h2>
@@ -407,8 +318,8 @@ const StakingPage = ({
                 )
               )}
             </CardGrid>
-          </Content>
-          <Content>
+          </Box>
+          <Box>
             <h2 id={tocItems.howToStakeYourEth.id}>
               {tocItems.howToStakeYourEth.title}
             </h2>
@@ -418,15 +329,15 @@ const StakingPage = ({
             <p>
               <Translation id="page-staking-section-why-p2" />
             </p>
-          </Content>
+          </Box>
           <StakingHierarchy />
-          <Content>
+          <Box>
             <p style={{ marginTop: "1rem" }}>
               <Translation id="page-staking-hierarchy-subtext" />
             </p>
-          </Content>
+          </Box>
           <Divider />
-          <Content>
+          <Box>
             <h2 id={tocItems.comparisonOfOptions.id}>
               {tocItems.comparisonOfOptions.title}
             </h2>
@@ -619,10 +530,10 @@ const StakingPage = ({
                 />
               </div>
             </ComparisonGrid>
-          </Content>
+          </Box>
           <Divider />
           <StakingCommunityCallout id={tocItems.joinTheCommunity.id} />
-          <Content>
+          <Box>
             <h2 id={tocItems.faq.id}>{tocItems.faq.title}</h2>
             <ExpandableCard title={t("page-staking-faq-4-question")}>
               <p>
@@ -663,8 +574,8 @@ const StakingPage = ({
                 <Translation id="page-staking-faq-3-answer-p2" />
               </p>
             </ExpandableCard>
-          </Content>
-          <Content>
+          </Box>
+          <Box>
             <h2 id={tocItems.further.id}>{tocItems.further.title}</h2>
             <ul>
               <li>
@@ -738,12 +649,17 @@ const StakingPage = ({
                 </Link>
               </li>
             </ul>
-          </Content>
-          <Content>
+          </Box>
+          <Box>
             <FeedbackCard />
-          </Content>
+          </Box>
         </ContentContainer>
-        <MobileButton list={dropdownLinks} />
+        {/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
+        <Show below={lgBp}>
+          <MobileButton>
+            <MobileButtonDropdown list={dropdownLinks} />
+          </MobileButton>
+        </Show>
       </Page>
     </PageContainer>
   )
diff --git a/src/templates/staking.tsx b/src/templates/staking.tsx
index 6ae8678ae35..3fb686614eb 100644
--- a/src/templates/staking.tsx
+++ b/src/templates/staking.tsx
@@ -63,6 +63,7 @@ import { ChildOnlyProp, Context } from "../types"
 import {
   ContentContainer,
   InfoColumn,
+  InfoTitle,
   MobileButton,
   MobileButtonDropdown,
   Page,
@@ -155,18 +156,6 @@ const Pre = (props: ChildOnlyProp) => (
   />
 )
 
-const InfoTitle = (props: ChildOnlyProp) => (
-  <Heading
-    fontSize="5xl"
-    lineHeight={1.4}
-    fontWeight="bold"
-    textAlign="right"
-    mt={0}
-    hideBelow="lg"
-    {...props}
-  />
-)
-
 const H2 = (props: ChildOnlyProp) => (
   <Heading
     fontSize="2rem"
diff --git a/src/templates/use-cases.tsx b/src/templates/use-cases.tsx
index aa86ac7d33f..1d376f3092f 100644
--- a/src/templates/use-cases.tsx
+++ b/src/templates/use-cases.tsx
@@ -217,7 +217,7 @@ export const InfoColumn = (props: ChildOnlyProp) => (
   />
 )
 
-const InfoTitle = (props: ChildOnlyProp) => (
+export const InfoTitle = (props: ChildOnlyProp) => (
   <H2
     fontSize={{ base: "2.5rem", lg: "5xl" }}
     textAlign={{ base: "left", lg: "right" }}
@@ -245,27 +245,31 @@ export const MobileButtonDropdown = (props: ButtonDropdownProps) => (
   <StyledButtonDropdown mb={0} {...props} />
 )
 
-export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => (
-  <Box
-    as="article"
-    flex="1 1 1024px"
-    position="relative"
-    px={8}
-    pb={8}
-    {...props}
-    sx={{
-      ".featured": {
-        pl: 4,
-        ml: -4,
-        borderLeft: "1px dotted",
-        borderColor: "primary",
-      },
-      ".citation p": {
-        color: "text200",
-      },
-    }}
-  />
-)
+export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => {
+  const lgBp = useToken("breakpoints", "lg")
+
+  return (
+    <Box
+      as="article"
+      flex={`1 1 ${lgBp}`}
+      position="relative"
+      px={8}
+      pb={8}
+      {...props}
+      sx={{
+        ".featured": {
+          pl: 4,
+          ml: -4,
+          borderLeft: "1px dotted",
+          borderColor: "primary",
+        },
+        ".citation p": {
+          color: "text200",
+        },
+      }}
+    />
+  )
+}
 
 export const MobileButton = (props: ChildOnlyProp) => {
   const borderColor = useToken("colors", "border")
@@ -288,6 +292,8 @@ const UseCasePage = ({
   pageContext,
 }: PageProps<Queries.UseCasePageQuery, Context>) => {
   const { t } = useTranslation()
+  // TODO: Replace with direct token implementation after UI migration is completed
+  const lgBp = useToken("breakpoints", "lg")
 
   if (!siteData || !mdx?.frontmatter)
     throw new Error(
@@ -347,11 +353,9 @@ const UseCasePage = ({
     ],
   }
 
-  const lgBreakpoint = useToken("breakpoints", "lg")
-
   return (
     <Box position="relative" width="full">
-      <Show above={lgBreakpoint}>
+      <Show above={lgBp}>
         <BannerNotification shouldShow>
           <Emoji text=":pencil:" fontSize="2xl" mr={4} flexShrink={0} />
           <div>
@@ -393,7 +397,7 @@ const UseCasePage = ({
           }}
         />
       </HeroContainer>
-      <Show above={lgBreakpoint}>
+      <Show above={lgBp}>
         <Flex
           as={Link}
           to="#content"
@@ -413,7 +417,7 @@ const UseCasePage = ({
           title={mdx.frontmatter.title}
           description={mdx.frontmatter.description}
         />
-        <Show above={lgBreakpoint}>
+        <Show above={lgBp}>
           <InfoColumn>
             <StyledButtonDropdown list={dropdownLinks} />
             <InfoTitle>{mdx.frontmatter.title}</InfoTitle>
@@ -432,7 +436,7 @@ const UseCasePage = ({
           </MDXProvider>
           <FeedbackCard />
         </ContentContainer>
-        <Show below={lgBreakpoint}>
+        <Show below={lgBp}>
           <MobileButton>
             <MobileButtonDropdown list={dropdownLinks} />
           </MobileButton>