Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: migrate Card to tailwind #14683

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: migrate Card to tailwind #14683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 27 additions & 23 deletions src/components/Card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,44 @@
import { ReactNode } from "react"
import { Heading, Stack, StackProps, Text } from "@chakra-ui/react"

import Emoji from "@/components/Emoji"

export type CardProps = Omit<StackProps, "children" | "title"> & {
import { cn } from "@/lib/utils/cn"

export type CardProps = {
children?: ReactNode
emoji?: string
title?: ReactNode
description?: ReactNode
className?: string
}

const Card = ({ emoji, title, description, children, ...props }: CardProps) => (
<Stack
spacing="4"
justifyContent="space-between"
bg="ednBackground"
borderRadius="sm"
border="1px"
borderStyle="solid"
borderColor="lightBorder"
p="6"
const Card = ({
emoji,
title,
description,
children,
className,
...props
}: CardProps) => (
<div
className={cn(
"flex flex-col justify-between space-y-4",
"rounded-sm bg-ednBackground",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"rounded-sm bg-ednBackground",
"rounded-sm bg-background-highlight",

"border border-solid border-lightBorder",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"border border-solid border-lightBorder",
"border border-solid border-low-contrast",

"p-6",
className
)}
{...props}
>
<Stack spacing="4">
<div className="flex flex-col space-y-4">
{emoji && <Emoji className="text-5xl leading-none" text={emoji} />}
<Stack spacing="8">
{title && (
<Heading as="h3" fontSize="2xl">
{title}
</Heading>
)}
{description && <Text>{description}</Text>}
</Stack>
</Stack>
<div className="flex flex-col space-y-8">
{title && <h3 className="text-2xl leading-[1.4]">{title}</h3>}
{description && <p>{description}</p>}
</div>
</div>
{children}
</Stack>
</div>
)

export default Card
4 changes: 2 additions & 2 deletions src/components/Trilemma/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ const Trilemma = () => {
{t("page-roadmap-vision-trilemma-modal-tip")}:
</p>
</VStack>
<Card {...cardDetail} minH="300px" hideBelow="lg" mt="6" />
<Card {...cardDetail} className="mt-6 hidden min-h-[300px] lg:block" />
</Stack>
<Sheet open={mobileModalOpen} onOpenChange={handleModalClose}>
<SheetContent side="bottom" className="rounded-t-[16px]">
<Card {...cardDetail} background="none" border="none" my="8" />
<Card {...cardDetail} className="my-8 border-none bg-transparent" />
<SheetClose className="absolute right-3 top-5">
<span className="sr-only">Close</span>
<svg
Expand Down
3 changes: 1 addition & 2 deletions src/layouts/md/Translatathon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,7 @@ const EmojiCard = ({ emoji, title, description }) => (
emoji={emoji}
title={title}
description={description}
flex="1 1 30%"
p={6}
className="flex-[1_1_30%] p-6"
/>
)

Expand Down
4 changes: 2 additions & 2 deletions src/pages/bug-bounty.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ const StyledCardContainer = (props: ChildOnlyProp) => (
)

const StyledCard = ({ children, ...props }) => (
<Card flex="1 1 464px" m="4" p="6" justifyContent="flex-start" {...props}>
<Card className="m-4 flex-[1_1_464px] justify-start p-6" {...props}>
{children}
</Card>
)
Expand Down Expand Up @@ -473,7 +473,7 @@ const BugBountiesPage = () => {
title={t("page-upgrades-bug-bounty-meta-title")}
description={t("page-upgrades-bug-bounty-meta-description")}
/>
{ /* TODO: Remove on the 25th of January */ }
{/* TODO: Remove on the 25th of January */}
<BugBountyBanner />
<Content>
<HeroCard>
Expand Down
6 changes: 1 addition & 5 deletions src/pages/community.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,11 +251,7 @@ const CommunityPage = () => {
<CardContainer>
{whyGetInvolvedCards.map((card, idx) => (
<Card
m={4}
p={6}
flex="1 0 30%"
minW="280px"
maxW={{ base: "full", md: "46%", lg: "31%" }}
className="m-4 min-w-[280px] max-w-full flex-[1_0_30%] p-6 md:max-w-[46%] lg:max-w-[31%]"
key={idx}
emoji={card.emoji}
title={card.title}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/dapps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1821,7 +1821,7 @@ const DappsPage = () => {
{(categories[selectedCategory].benefits || []).map(
(art, idx) => (
<Card
textAlign="center"
className="text-center"
key={idx}
emoji={art.emoji}
title={art.title}
Expand Down
14 changes: 1 addition & 13 deletions src/pages/developers/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
SimpleGrid,
Stack,
TextProps,
useColorModeValue,
} from "@chakra-ui/react"

import { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
Expand Down Expand Up @@ -115,21 +114,10 @@ const IntroColumn = (props: ChildOnlyProp) => (
)

const StyledCard = (props: CardProps) => {
const tableBoxShadow = useColorModeValue("tableBox.light", "tableBox.dark")

return (
<Card
boxShadow={tableBoxShadow}
m={4}
p={6}
className={`m-4 p-6 shadow-[0px_1px_3px_rgba(0,0,0,0.1)] transition-transform duration-100 hover:scale-105 hover:rounded hover:bg-background-highlight hover:shadow-[0px_8px_17px_rgba(0,0,0,0.15)] dark:shadow-[0px_1px_3px_rgba(60,60,60,0.1)]`}
{...props}
_hover={{
borderRadius: "4px",
boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
background: "tableBackgroundHover",
transition: "transform 0.1s",
transform: "scale(1.02)",
}}
/>
)
}
Expand Down
6 changes: 1 addition & 5 deletions src/pages/eth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,11 +78,7 @@ const Intro = (props: ChildOnlyProp) => (

const StyledCard = (props: ComponentProps<typeof Card>) => (
<Card
m={4}
p={6}
flex="1 0 30%"
minW="280px"
maxW={{ base: "full", md: "46%", lg: "31%" }}
className="m-4 min-w-[280px] max-w-full flex-[1_0_30%] p-6 md:max-w-[46%] lg:max-w-[31%]"
{...props}
/>
)
Expand Down
5 changes: 1 addition & 4 deletions src/pages/gas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,7 @@ const Page = (props: FlexProps) => (

export const StyledCard = (props: ComponentPropsWithRef<typeof Card>) => (
<Card
flex="1 1 30%"
minW="280px"
maxW={{ base: "full", lg: "46%" }}
p={6}
className="min-w-[280px] max-w-full flex-[1_0_30%] p-6 md:max-w-[46%]"
{...props}
/>
)
Expand Down
13 changes: 2 additions & 11 deletions src/pages/learn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,7 @@ import whatIsEth from "@/public/images/what-is-ethereum.png"

// TODO: Migrate the original Card component before updating this
const Card = ({ children, ...props }: OriginalCardProps) => (
<OriginalCard
justifyContent="space-between"
sx={{
h3: {
mt: 0,
},
}}
{...props}
>
<OriginalCard className="justify-between [&_h3]:mt-0" {...props}>
{children}
</OriginalCard>
)
Expand Down Expand Up @@ -454,8 +446,7 @@ const LearnPage = () => {
</>
</Card>
<Card
justifyContent="start"
bg="cardGradient"
className="justify-start bg-gradient-main"
title={t("emerging-use-cases-title")}
description={t("emerging-use-cases-description")}
>
Expand Down
8 changes: 1 addition & 7 deletions src/pages/roadmap/vision.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,13 +89,7 @@ const ProblemCardContainer = (props: ChildOnlyProp) => {

const CentreCard = (props: ComponentPropsWithRef<typeof Card>) => (
<Card
flex="1 1 30%"
minW="240px"
m={4}
page-upgrades-proof-stake-link
p={6}
border={0}
textAlign="center"
className="m-4 min-w-[240px] flex-[1_1_30%] border-0 p-6 text-center"
{...props}
/>
)
Expand Down
8 changes: 1 addition & 7 deletions src/pages/staking/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,13 +108,7 @@ const StyledCard = (props: {
emoji={props.emoji}
key={props.key}
description={props.description}
sx={{
justifyContent: "flex-start",
h3: {
fontWeight: "700",
margin: "0 0 1rem",
},
}}
className="justify-start [&_h3]:mb-1 [&_h3]:mt-0 [&_h3]:font-bold"
>
{props.children}
</Card>
Expand Down
6 changes: 1 addition & 5 deletions src/pages/wallets/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,11 +107,7 @@ const CardContainer = (props: BoxProps) => (

export const StyledCard = (props: ComponentPropsWithRef<typeof Card>) => (
<Card
flex="1 1 30%"
minW="280px"
maxW={{ base: "full", md: "46%", lg: "31%" }}
m={4}
p={6}
className="m-4 min-w-[280px] max-w-full flex-1 p-6 md:max-w-[46%] lg:max-w-[31%]"
{...props}
/>
)
Expand Down
5 changes: 1 addition & 4 deletions src/pages/what-is-ethereum.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,10 +384,7 @@ const WhatIsEthereumPage = ({
emoji={card.emoji}
title={card.title}
description={card.description}
flex="1 1 30%"
minW="240px"
m={4}
p={6}
className="m-4 min-w-[240px] flex-[1_1_30%] p-6"
/>
))}
</CardContainer>
Expand Down
6 changes: 6 additions & 0 deletions src/styles/semantic-tokens.css
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes mentioned before would avoid adding these colors as we don't want to support them anymore.

Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,9 @@
--staking-blue-fill: #f1fcf5;
--staking-red: #a0524c;
--staking-red-fill: #f8fbf9;

--edn-background: #f7f7f7;
--light-border: #ececec;
}

/* Dark mode token declarations */
Expand Down Expand Up @@ -224,5 +227,8 @@
--staking-blue-fill: #2b352f;
--staking-red: #d6bbb9;
--staking-red-fill: #313432;

--edn-background: #1a1a1a;
--light-border: #404040;
}
}
2 changes: 2 additions & 0 deletions tailwind.config.ts
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,8 @@ const config = {
},

disabled: "hsla(var(--disabled))",
ednBackground: "var(--edn-background)",
lightBorder: "var(--light-border)",

background: {
DEFAULT: "hsla(var(--background))",
Expand Down
Loading