Skip to content

Commit f769845

Browse files
committed
reuse components from use-cases template and fix layout for responsive design
1 parent e14d1ad commit f769845

File tree

4 files changed

+60
-115
lines changed

4 files changed

+60
-115
lines changed

src/components/TableOfContents/TableOfContentsMobile.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
Icon,
88
List,
99
Show,
10+
useToken,
1011
} from "@chakra-ui/react"
1112
import React from "react"
1213
import { MdExpandMore } from "react-icons/md"
@@ -20,6 +21,9 @@ export interface IPropsTableOfContentsMobile {
2021
}
2122

2223
const Mobile: React.FC<IPropsTableOfContentsMobile> = ({ items, maxDepth }) => {
24+
// TODO: Replace with direct token implementation after UI migration is completed
25+
const lgBp = useToken("breakpoints", "lg")
26+
2327
const { getButtonProps, getDisclosureProps, isOpen } = useDisclosure({
2428
defaultIsOpen: false,
2529
})
@@ -28,7 +32,7 @@ const Mobile: React.FC<IPropsTableOfContentsMobile> = ({ items, maxDepth }) => {
2832
}
2933

3034
return (
31-
<Show below="l">
35+
<Show below={lgBp}>
3236
{/* TODO: switch `l` to `lg` after UI migration and use `hideBelow` prop */}
3337
<Box
3438
as="aside"

src/components/TableOfContents/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
ListItem,
1313
Show,
1414
Switch,
15+
useToken,
1516
} from "@chakra-ui/react"
1617
import { FaGithub } from "react-icons/fa"
1718
import { useActiveHash } from "../../hooks/useActiveHash"
@@ -44,6 +45,8 @@ const TableOfContents: React.FC<IProps> = ({
4445
...rest
4546
}) => {
4647
const { isZenMode, handleZenModeChange } = useContext(ZenModeContext)
48+
// TODO: Replace with direct token implementation after UI migration is completed
49+
const lgBp = useToken("breakpoints", "lg")
4750

4851
const titleIds: Array<string> = []
4952

@@ -81,7 +84,7 @@ const TableOfContents: React.FC<IProps> = ({
8184

8285
return (
8386
// TODO: Switch to `above="lg"` after completion of Chakra Migration
84-
<Show breakpoint="(min-width: 1025px)">
87+
<Show above={lgBp}>
8588
<Box
8689
as="aside"
8790
position="sticky"

src/templates/staking.tsx

Lines changed: 42 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,21 @@ import {
1111
Heading,
1212
SimpleGrid,
1313
Text,
14-
useTheme,
1514
chakra,
16-
calc,
1715
Grid,
1816
Image,
1917
UnorderedList,
18+
useToken,
19+
Show,
2020
} from "@chakra-ui/react"
2121

2222
import ButtonLink from "../components/ButtonLink"
23-
import ButtonDropdown, {
24-
List as ButtonDropdownList,
25-
} from "../components/ButtonDropdown"
23+
import { List as ButtonDropdownList } from "../components/ButtonDropdown"
2624
import Card from "../components/Card"
2725
import ExpandableCard from "../components/ExpandableCard"
2826
import DocLink from "../components/DocLink"
2927
import Contributors from "../components/Contributors"
30-
import SharedInfoBanner, {
31-
IProps as ISharedInfoBannerProps,
32-
} from "../components/InfoBanner"
28+
import InfoBanner from "../components/InfoBanner"
3329
import UpgradeStatus from "../components/UpgradeStatus"
3430
import Link from "../components/Link"
3531
import MarkdownTable from "../components/MarkdownTable"
@@ -63,6 +59,16 @@ import { getImage } from "../utils/image"
6359

6460
import { ChildOnlyProp, Context } from "../types"
6561

62+
// TODO: move these components to a new folder under /components
63+
import {
64+
ContentContainer,
65+
InfoColumn,
66+
MobileButton,
67+
MobileButtonDropdown,
68+
Page,
69+
StyledButtonDropdown,
70+
} from "./use-cases"
71+
6672
// Apply styles for classes within markdown here
6773
const Divider = (props: ChildOnlyProp) => (
6874
<Box my={16} w="10%" h={1} bgColor="homeDivider" {...props} />
@@ -254,18 +260,6 @@ const SummaryPoint = (props: ChildOnlyProp) => (
254260
<chakra.li color="text300" {...props} />
255261
)
256262

257-
const Container = (props: ChildOnlyProp) => (
258-
<Box
259-
position="relative"
260-
sx={{
261-
"*": {
262-
scrollMarginTop: 1,
263-
},
264-
}}
265-
{...props}
266-
/>
267-
)
268-
269263
const HeroContainer = (props: ChildOnlyProp) => {
270264
return (
271265
<Flex
@@ -281,10 +275,6 @@ const HeroContainer = (props: ChildOnlyProp) => {
281275
)
282276
}
283277

284-
const InfoBanner = (props: ISharedInfoBannerProps) => (
285-
<SharedInfoBanner my={8} {...props} />
286-
)
287-
288278
const TableContainer = (props: BoxProps) => (
289279
<Box
290280
w="fit-content"
@@ -348,6 +338,9 @@ const StakingPage = ({
348338
data: { pageData: mdx },
349339
location,
350340
}: PageProps<Queries.StakingPageQuery, Context>) => {
341+
// TODO: Replace with direct token implementation after UI migration is completed
342+
const lgBp = useToken("breakpoints", "lg")
343+
351344
if (!mdx?.frontmatter)
352345
throw new Error(
353346
"Staking page template query does not return expected values"
@@ -358,7 +351,6 @@ const StakingPage = ({
358351
const isRightToLeft = isLangRightToLeft(mdx.frontmatter.lang as Lang)
359352
const tocItems = mdx.tableOfContents?.items as ItemTableOfContents[]
360353
const { summaryPoints } = mdx.frontmatter
361-
const theme = useTheme()
362354

363355
const dropdownLinks: ButtonDropdownList = {
364356
text: "Staking Options",
@@ -413,7 +405,7 @@ const StakingPage = ({
413405
}
414406

415407
return (
416-
<Container>
408+
<Box position="relative" width="full">
417409
<HeroContainer>
418410
<Flex direction="column" justify="flex-start" w="full" p={8}>
419411
<Breadcrumbs slug={location.pathname} />
@@ -447,97 +439,40 @@ const StakingPage = ({
447439
objectFit="contain"
448440
/>
449441
</HeroContainer>
450-
<Flex
451-
direction={{ base: "column", lg: "row" }}
452-
justify="space-between"
453-
w="full"
454-
mx="auto"
455-
mb={16}
456-
pt={{ lg: 16 }}
457-
dir={isRightToLeft ? "rtl" : "ltr"}
458-
>
442+
<Page dir={isRightToLeft ? "rtl" : "ltr"}>
459443
<PageMetadata
460444
title={mdx.frontmatter.title}
461445
description={mdx.frontmatter.description}
462446
/>
463-
<Flex
464-
as="aside"
465-
direction="column"
466-
position="sticky"
467-
top="6.25rem" // account for navbar
468-
h={calc.subtract("100vh", "80px")}
469-
flex="0 1 330px"
470-
mx={8}
471-
hideBelow="lg"
472-
>
473-
<Flex
474-
as={ButtonDropdown}
475-
mb={8}
476-
justify="flex-end"
477-
alignSelf={{ sm: "flex-end" }}
478-
textAlign="center"
479-
list={dropdownLinks}
480-
/>
481-
<InfoTitle>{mdx.frontmatter.title}</InfoTitle>
447+
{/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
448+
<Show above={lgBp}>
449+
<InfoColumn>
450+
<StyledButtonDropdown list={dropdownLinks} />
451+
<InfoTitle>{mdx.frontmatter.title}</InfoTitle>
482452

483-
{tocItems && (
484-
<UpgradeTableOfContents
485-
items={tocItems}
486-
maxDepth={mdx.frontmatter.sidebarDepth!}
487-
/>
488-
)}
489-
</Flex>
490-
<Box
491-
as="article"
492-
flex={`1 1 ${theme.breakpoints.lg}`}
493-
position="relative"
494-
px={8}
495-
pb={8}
496-
sx={{
497-
"h2:first-of-type": {
498-
mt: { lg: 0 },
499-
},
500-
".featured": {
501-
pl: 4,
502-
ml: -4,
503-
borderLeft: "1px dotted",
504-
borderLeftColor: "primary",
505-
},
506-
".citation": {
507-
p: {
508-
color: "text200",
509-
},
510-
},
511-
}}
512-
id="content"
513-
>
453+
{tocItems && (
454+
<UpgradeTableOfContents
455+
items={tocItems}
456+
maxDepth={mdx.frontmatter.sidebarDepth!}
457+
/>
458+
)}
459+
</InfoColumn>
460+
</Show>
461+
<ContentContainer id="content">
514462
<MDXProvider components={components}>
515463
<MDXRenderer>{mdx.body}</MDXRenderer>
516464
</MDXProvider>
517465
<StakingCommunityCallout />
518466
<FeedbackCard />
519-
</Box>
520-
<Box
521-
bg="background"
522-
boxShadow={`0 -1px 0px ${theme.colors.border}`}
523-
w="full"
524-
bottom={0}
525-
position="sticky"
526-
p={8}
527-
zIndex={99}
528-
hideFrom="lg"
529-
>
530-
<Flex
531-
as={ButtonDropdown}
532-
justify="flex-end"
533-
alignSelf={{ sm: "flex-end" }}
534-
textAlign="center"
535-
hideFrom="lg"
536-
list={dropdownLinks}
537-
/>
538-
</Box>
539-
</Flex>
540-
</Container>
467+
</ContentContainer>
468+
{/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
469+
<Show below={lgBp}>
470+
<MobileButton>
471+
<MobileButtonDropdown list={dropdownLinks} />
472+
</MobileButton>
473+
</Show>
474+
</Page>
475+
</Box>
541476
)
542477
}
543478

src/templates/use-cases.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -191,19 +191,20 @@ const HeroImage = chakra(GatsbyImage, {
191191
},
192192
})
193193

194-
const Page = (props: FlexProps) => (
194+
export const Page = (props: FlexProps) => (
195195
<Flex
196196
flexDirection={{ base: "column", lg: "row" }}
197197
justifyContent="space-between"
198198
mx="auto"
199199
mb={16}
200200
pt={{ lg: 16 }}
201201
width="full"
202+
sx={{ "h2:first-of-type": { mt: { lg: 0 } } }}
202203
{...props}
203204
/>
204205
)
205206

206-
const InfoColumn = (props: ChildOnlyProp) => (
207+
export const InfoColumn = (props: ChildOnlyProp) => (
207208
<Flex
208209
flexDirection="column"
209210
flex="0 1 400px"
@@ -227,7 +228,9 @@ const InfoTitle = (props: ChildOnlyProp) => (
227228

228229
type ButtonDropdownProps = Parameters<typeof ButtonDropdown>[0]
229230

230-
const StyledButtonDropdown = (props: FlexProps & ButtonDropdownProps) => (
231+
export const StyledButtonDropdown = (
232+
props: FlexProps & ButtonDropdownProps
233+
) => (
231234
<Flex
232235
as={ButtonDropdown}
233236
alignSelf={{ sm: "flex-end" }}
@@ -238,11 +241,11 @@ const StyledButtonDropdown = (props: FlexProps & ButtonDropdownProps) => (
238241
/>
239242
)
240243

241-
const MobileButtonDropdown = (props: ButtonDropdownProps) => (
244+
export const MobileButtonDropdown = (props: ButtonDropdownProps) => (
242245
<StyledButtonDropdown mb={0} {...props} />
243246
)
244247

245-
const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => (
248+
export const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => (
246249
<Box
247250
as="article"
248251
flex="1 1 1024px"
@@ -264,7 +267,7 @@ const ContentContainer = (props: Pick<BoxProps, "id" | "children">) => (
264267
/>
265268
)
266269

267-
const MobileButton = (props: ChildOnlyProp) => {
270+
export const MobileButton = (props: ChildOnlyProp) => {
268271
const borderColor = useToken("colors", "border")
269272
return (
270273
<Box

0 commit comments

Comments
 (0)