Skip to content

Commit 0ecabb6

Browse files
pettinarippettinarip
authored
Merge pull request #13723 from saurabhburade/shadcn-migration/PageHero
Shadcn migration - PageHero
2 parents 77c35fe + c2a626f commit 0ecabb6

File tree

8 files changed

+79
-92
lines changed

8 files changed

+79
-92
lines changed

‎src/components/Logo/Logo.stories.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,5 @@ export default meta
1313
type Story = StoryObj<typeof meta>
1414

1515
export const Logo: Story = {
16-
render: () => (
17-
<LogoComponent />
18-
),
19-
}
16+
render: () => <LogoComponent />,
17+
}

‎src/components/PageHero.tsx

Lines changed: 57 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import type { ReactNode } from "react"
2-
import { Box, Center, Flex, Heading, Wrap, WrapItem } from "@chakra-ui/react"
2+
3+
import { type ImageProps, TwImage } from "@/components/Image"
4+
5+
import { cn } from "@/lib/utils/cn"
6+
import { type MatomoEventOptions } from "@/lib/utils/matomo"
37

48
import {
59
Button,
610
ButtonLink,
7-
type ButtonLinkProps,
8-
type ButtonProps,
9-
} from "@/components/Buttons"
10-
import { Image, type ImageProps } from "@/components/Image"
11-
import Text from "@/components/OldText"
12-
13-
import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
11+
ButtonLinkProps,
12+
ButtonProps,
13+
} from "./ui/buttons/Button"
14+
import { Center, Flex } from "./ui/flex"
1415

1516
type ButtonLinkType = Omit<ButtonLinkProps, "content"> & {
1617
content: ReactNode
@@ -48,113 +49,89 @@ const PageHero = ({
4849
children,
4950
className,
5051
}: PageHeroProps) => (
51-
<Box py={4} px={8} width="full">
52+
<div className="w-full px-8 py-4">
5253
<Flex
53-
justifyContent="space-between"
54-
mt={8}
55-
px={{ base: 0, lg: 16 }}
56-
direction={{ base: isReverse ? "column" : "column-reverse", lg: "row" }}
57-
className={className}
54+
className={cn(
55+
"mt-8 justify-between px-0 lg:px-16",
56+
isReverse ? "flex-col" : "flex-col-reverse",
57+
"lg:flex-row",
58+
className
59+
)}
5860
>
59-
<Box
60-
maxW={{ base: "full", lg: "container.sm" }}
61-
pt={{ base: isReverse ? 0 : 8, lg: 16 }}
62-
pb={{ base: isReverse ? 8 : 0, lg: 32 }}
63-
ps={{ base: 0, lg: 8 }}
64-
me={{ base: 0, lg: 4 }}
61+
<div
62+
className={cn(
63+
"max-w-full lg:max-w-[640px]",
64+
isReverse ? "pb-8 pt-0" : "pb-0 pt-8",
65+
"lg:pb-32 lg:pt-16",
66+
"ps-0 lg:ps-8",
67+
"me-0 lg:me-4"
68+
)}
6569
>
66-
<Heading
67-
as="h1"
68-
textTransform="uppercase"
69-
fontSize="md"
70-
fontWeight="normal"
71-
mt={{ base: 0, lg: 8 }}
72-
mb={4}
73-
color="text300"
74-
lineHeight={1.4}
75-
>
70+
<h1 className="mb-4 mt-0 text-md font-normal uppercase !leading-xs lg:mt-8">
7671
{title}
77-
</Heading>
78-
<Heading
79-
as="h2"
80-
fontWeight="bold"
81-
fontSize={{ base: "2.5rem", lg: "5xl" }}
82-
maxW="full"
83-
mb={0}
84-
mt={{ base: 8, lg: 12 }}
85-
color="text00"
86-
lineHeight={1.4}
87-
>
72+
</h1>
73+
74+
<h2 className="mb-0 mt-8 max-w-full text-[2.5rem] font-bold !leading-xs lg:mt-12 lg:text-5xl">
8875
{header}
89-
</Heading>
90-
<Text
91-
fontSize={{ base: "xl", lg: "2xl" }}
92-
lineHeight={1.4}
93-
color="text200"
94-
mt={4}
95-
mb={8}
96-
>
97-
{subtitle}
98-
</Text>
76+
</h2>
77+
<p className="mb-8 mt-4 text-xl !leading-xs lg:text-2xl">{subtitle}</p>
78+
9979
{buttons && (
100-
<Wrap spacing={2} overflow="visible" sx={{ ul: { m: 0 } }}>
80+
<Flex className="gap-2 overflow-visible [&_ul]:m-0">
10181
{buttons.map((button, idx) => {
10282
const isSecondary = idx !== 0
10383
if (isButtonLink(button)) {
10484
return (
105-
<WrapItem key={idx}>
85+
<div key={idx}>
10686
<ButtonLink
10787
variant={button.variant}
10888
href={button.href}
109-
onClick={() =>
110-
trackCustomEvent({
111-
eventCategory: button.matomo.eventCategory,
112-
eventAction: button.matomo.eventAction,
113-
eventName: button.matomo.eventName,
114-
})
115-
}
89+
customEventOptions={{
90+
eventCategory: button.matomo.eventCategory,
91+
eventAction: button.matomo.eventAction,
92+
eventName: button.matomo.eventName,
93+
}}
11694
isSecondary={isSecondary}
11795
>
11896
{button.content}
11997
</ButtonLink>
120-
</WrapItem>
98+
</div>
12199
)
122100
}
123101

124102
if (button.toId) {
125103
return (
126-
<WrapItem key={idx}>
104+
<div key={idx}>
127105
<Button
128106
variant={button.variant}
129107
toId={button.toId}
130-
onClick={() =>
131-
trackCustomEvent({
132-
eventCategory: button.matomo.eventCategory,
133-
eventAction: button.matomo.eventAction,
134-
eventName: button.matomo.eventName,
135-
})
136-
}
108+
customEventOptions={{
109+
eventCategory: button.matomo.eventCategory,
110+
eventAction: button.matomo.eventAction,
111+
eventName: button.matomo.eventName,
112+
}}
137113
isSecondary={isSecondary}
138114
>
139115
{button.content}
140116
</Button>
141-
</WrapItem>
117+
</div>
142118
)
143119
}
144120
})}
145-
</Wrap>
121+
</Flex>
146122
)}
147123
{children}
148-
</Box>
124+
</div>
149125
<Center
150-
flex="1 1 50%"
151-
maxWidth={{ base: "560px", lg: "624px" }}
152-
mt={{ base: 0, lg: 12 }}
153-
ms={{ base: 0, lg: 12 }}
154-
w="full"
155-
alignSelf="center"
126+
className={cn(
127+
"flex-[1_1_50%]",
128+
"max-w-[560px] lg:max-w-[624px]",
129+
"mt-0 lg:mt-12",
130+
"ms-0 lg:ms-12",
131+
"w-full self-center"
132+
)}
156133
>
157-
<Image
134+
<TwImage
158135
src={image}
159136
// TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
160137
sizes="(max-width: 992px) 100vw, 624px"
@@ -168,7 +145,7 @@ const PageHero = ({
168145
/>
169146
</Center>
170147
</Flex>
171-
</Box>
148+
</div>
172149
)
173150

174151
export default PageHero

‎src/data/wallets/wallet-data.ts

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -572,7 +572,8 @@ export const walletsData: WalletData[] = [
572572
withdraw_crypto: false,
573573
multisig: false,
574574
social_recovery: false,
575-
onboard_documentation: "https://support.token.im/hc/categories/360000925393",
575+
onboard_documentation:
576+
"https://support.token.im/hc/categories/360000925393",
576577
documentation: "https://support.token.im/hc/en-us",
577578
},
578579
{
@@ -1259,7 +1260,19 @@ export const walletsData: WalletData[] = [
12591260
brand_color: "#FFFFFF",
12601261
url: "https://rabby.io",
12611262
active_development_team: true,
1262-
languages_supported: ["en", "de", "es", "fr", "ja", "pt", "ru", "tr", "ua", "zh", "zh-hk"],
1263+
languages_supported: [
1264+
"en",
1265+
"de",
1266+
"es",
1267+
"fr",
1268+
"ja",
1269+
"pt",
1270+
"ru",
1271+
"tr",
1272+
"ua",
1273+
"zh",
1274+
"zh-hk",
1275+
],
12631276
twitter: "https://twitter.com/Rabby_io",
12641277
discord: "https://discord.com/invite/seFBCWmUre",
12651278
reddit: "",
@@ -1278,7 +1291,7 @@ export const walletsData: WalletData[] = [
12781291
security_audit: [
12791292
"https://github.com/RabbyHub/Rabby/blob/develop/docs/SlowMist%20Audit%20Report%20-%20Rabby%20Wallet-2023.07.20.pdf",
12801293
"https://github.com/RabbyHub/Rabby/blob/develop/docs/SlowMist%20Audit%20Report%20-%20Rabby%20browser%20extension%20wallet-2022.03.18.pdf",
1281-
"https://github.com/RabbyHub/Rabby/blob/develop/docs/Rabby%20chrome%20extension%20Penetration%20Testing%20Report.pdf"
1294+
"https://github.com/RabbyHub/Rabby/blob/develop/docs/Rabby%20chrome%20extension%20Penetration%20Testing%20Report.pdf",
12821295
],
12831296
scam_protection: true,
12841297
hardware_support: true,

‎src/pages/dapps.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1343,7 +1343,7 @@ const DappsPage = () => {
13431343
{
13441344
content: t("page-dapps-what-are-dapps"),
13451345
href: "#what-are-dapps",
1346-
variant: "outline",
1346+
variant: "outline" as const,
13471347
matomo: {
13481348
eventCategory: "dapp hero buttons",
13491349
eventAction: "click",

‎src/pages/stablecoins.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -394,7 +394,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
394394
{
395395
content: t("page-stablecoins-how-they-work-button"),
396396
toId: "how",
397-
variant: "outline",
397+
variant: "outline" as const,
398398
matomo: {
399399
eventCategory: "stablecoins hero buttons",
400400
eventAction: "click",

‎src/pages/wallets/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ const WalletsPage = () => {
183183
eventAction: "click",
184184
eventName: "How_to_use_wallet",
185185
},
186-
variant: "outline",
186+
variant: "outline" as const,
187187
},
188188
]
189189
: [

‎src/styles/global.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@
204204
}
205205

206206
a {
207-
@apply underline-offset-3 text-primary underline hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover;
207+
@apply text-primary underline underline-offset-3 hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover;
208208
}
209209

210210
h1,

‎tailwind.config.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@ const config = {
102102
800: "var(--orange-800)",
103103
900: "var(--orange-900)",
104104
},
105-
106105
primary: {
107106
DEFAULT: "var(--primary)",
108107
"high-contrast": "var(--primary-high-contrast)",

0 commit comments

Comments
 (0)