@@ -11,25 +11,21 @@ import {
11
11
Heading ,
12
12
SimpleGrid ,
13
13
Text ,
14
- useTheme ,
15
14
chakra ,
16
- calc ,
17
15
Grid ,
18
16
Image ,
19
17
UnorderedList ,
18
+ useToken ,
19
+ Show ,
20
20
} from "@chakra-ui/react"
21
21
22
22
import ButtonLink from "../components/ButtonLink"
23
- import ButtonDropdown , {
24
- List as ButtonDropdownList ,
25
- } from "../components/ButtonDropdown"
23
+ import { List as ButtonDropdownList } from "../components/ButtonDropdown"
26
24
import Card from "../components/Card"
27
25
import ExpandableCard from "../components/ExpandableCard"
28
26
import DocLink from "../components/DocLink"
29
27
import Contributors from "../components/Contributors"
30
- import SharedInfoBanner , {
31
- IProps as ISharedInfoBannerProps ,
32
- } from "../components/InfoBanner"
28
+ import InfoBanner from "../components/InfoBanner"
33
29
import UpgradeStatus from "../components/UpgradeStatus"
34
30
import Link from "../components/Link"
35
31
import MarkdownTable from "../components/MarkdownTable"
@@ -63,6 +59,16 @@ import { getImage } from "../utils/image"
63
59
64
60
import { ChildOnlyProp , Context } from "../types"
65
61
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
+
66
72
// Apply styles for classes within markdown here
67
73
const Divider = ( props : ChildOnlyProp ) => (
68
74
< Box my = { 16 } w = "10%" h = { 1 } bgColor = "homeDivider" { ...props } />
@@ -254,18 +260,6 @@ const SummaryPoint = (props: ChildOnlyProp) => (
254
260
< chakra . li color = "text300" { ...props } />
255
261
)
256
262
257
- const Container = ( props : ChildOnlyProp ) => (
258
- < Box
259
- position = "relative"
260
- sx = { {
261
- "*" : {
262
- scrollMarginTop : 1 ,
263
- } ,
264
- } }
265
- { ...props }
266
- />
267
- )
268
-
269
263
const HeroContainer = ( props : ChildOnlyProp ) => {
270
264
return (
271
265
< Flex
@@ -281,10 +275,6 @@ const HeroContainer = (props: ChildOnlyProp) => {
281
275
)
282
276
}
283
277
284
- const InfoBanner = ( props : ISharedInfoBannerProps ) => (
285
- < SharedInfoBanner my = { 8 } { ...props } />
286
- )
287
-
288
278
const TableContainer = ( props : BoxProps ) => (
289
279
< Box
290
280
w = "fit-content"
@@ -348,6 +338,9 @@ const StakingPage = ({
348
338
data : { pageData : mdx } ,
349
339
location,
350
340
} : PageProps < Queries . StakingPageQuery , Context > ) => {
341
+ // TODO: Replace with direct token implementation after UI migration is completed
342
+ const lgBp = useToken ( "breakpoints" , "lg" )
343
+
351
344
if ( ! mdx ?. frontmatter )
352
345
throw new Error (
353
346
"Staking page template query does not return expected values"
@@ -358,7 +351,6 @@ const StakingPage = ({
358
351
const isRightToLeft = isLangRightToLeft ( mdx . frontmatter . lang as Lang )
359
352
const tocItems = mdx . tableOfContents ?. items as ItemTableOfContents [ ]
360
353
const { summaryPoints } = mdx . frontmatter
361
- const theme = useTheme ( )
362
354
363
355
const dropdownLinks : ButtonDropdownList = {
364
356
text : "Staking Options" ,
@@ -413,7 +405,7 @@ const StakingPage = ({
413
405
}
414
406
415
407
return (
416
- < Container >
408
+ < Box position = "relative" width = "full" >
417
409
< HeroContainer >
418
410
< Flex direction = "column" justify = "flex-start" w = "full" p = { 8 } >
419
411
< Breadcrumbs slug = { location . pathname } />
@@ -447,97 +439,40 @@ const StakingPage = ({
447
439
objectFit = "contain"
448
440
/>
449
441
</ 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" } >
459
443
< PageMetadata
460
444
title = { mdx . frontmatter . title }
461
445
description = { mdx . frontmatter . description }
462
446
/>
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 >
482
452
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" >
514
462
< MDXProvider components = { components } >
515
463
< MDXRenderer > { mdx . body } </ MDXRenderer >
516
464
</ MDXProvider >
517
465
< StakingCommunityCallout />
518
466
< 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 >
541
476
)
542
477
}
543
478
0 commit comments