Refactor for the card theme (#838)

This PR standardizes our styles for the `Card` component. What has been done: - In many places we have set `padding={0}` for the `CardBody`. Let's set a single common padding for the Card component. - Updated header styles for the cards. - Removed the border for the `Card` component and the unneeded `elevated` variant. - Removed unneeded props that are already defined in the card theme. ⚠️ Important notice ⚠️ Many things probably still need to be improved, but I believe this PR cleans our code a bit. Let's make the next fixes and integrate with styleguide in the next steps.
thesis · Nov 13, 2024 · 04c516a · 04c516a
2 parents 9176c1e + 53f7d03
commit 04c516a
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 93 deletions.
diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
@@ -189,8 +189,9 @@ export default function ConnectWalletButton({
       rounded="lg"
       mb={3}
       _last={{ mb: 0 }}
+      p={0}
     >
-      <CardHeader p={0}>
+      <CardHeader>
         <ArrivingSoonTooltip shouldDisplayTooltip={connector.isDisabled}>
           <Button
             variant="ghost"
@@ -232,7 +233,6 @@ export default function ConnectWalletButton({
             initial="collapsed"
             animate="expanded"
             exit="collapsed"
-            p={0}
             overflow="hidden"
             sx={{ flex: undefined }} // To override the default flex: 1
           >

diff --git a/dapp/src/components/MezoBeehiveModal.tsx b/dapp/src/components/MezoBeehiveModal.tsx
@@ -59,10 +59,7 @@ function MezoBeehiveModalBase() {
         <VStack>
           <Card
             gap={2}
-            p={5}
-            rounded="xl"
             bg="grey.700"
-            borderWidth={0}
             color="gold.300"
             align="start"
             textAlign="start"
@@ -82,11 +79,11 @@ function MezoBeehiveModalBase() {
               translateY: "-100%",
             }}
           >
-            <CardHeader p={0} as={HStack}>
+            <CardHeader as={HStack}>
               <Icon as={IconChartPieFilled} color="brand.400" boxSize={5} />
             </CardHeader>
 
-            <CardBody p={0}>
+            <CardBody>
               <TextMd lineHeight={5}>
                 In the event of a reward distribution, your share is calculated
                 by deposit amount and duration, and you can claim it directly
@@ -95,11 +92,10 @@ function MezoBeehiveModalBase() {
             </CardBody>
           </Card>
 
-          <Card bg="gold.200" borderWidth={0} rounded="xl">
+          <Card>
             <CardBody
               as={HStack}
               spacing={6}
-              p={5}
               color="grey.700"
               textAlign="start"
             >

diff --git a/dapp/src/components/Sidebar.tsx b/dapp/src/components/Sidebar.tsx
@@ -93,7 +93,6 @@ export default function Sidebar() {
                     flexDirection="row"
                     justifyContent="space-between"
                     alignItems="center"
-                    py={0}
                     px={4}
                   >
                     <TextSm fontWeight="semibold">{name}</TextSm>

diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard.tsx
@@ -52,11 +52,9 @@ export default function AcrePointsCard(props: CardProps) {
     isCalculationInProgress || !!nextDropTimestamp || !!claimableBalance
 
   return (
-    <Card px={4} py={5} {...props}>
-      <CardHeader p={0} mb={2} as={HStack} justify="space-between">
-        <TextMd fontWeight="medium" color="grey.700">
-          Total Acre points
-        </TextMd>
+    <Card {...props}>
+      <CardHeader mb={2} as={HStack} justify="space-between">
+        <TextMd>Total Acre points</TextMd>
 
         {isConnected && (
           <InfoTooltip
@@ -67,7 +65,7 @@ export default function AcrePointsCard(props: CardProps) {
         )}
       </CardHeader>
 
-      <CardBody p={0}>
+      <CardBody>
         <UserDataSkeleton>
           <H4 fontWeight="semibold" mb={2}>
             {formattedTotalPointsAmount}

diff --git a/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx b/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx
@@ -24,16 +24,13 @@ export default function AcrePointsTemplateCard(props: CardProps) {
   return (
     <Card
       px="1.875rem" // 30px
-      py={5}
       {...props}
     >
-      <CardHeader p={0} mb={8}>
-        <TextMd fontWeight="bold" color="grey.700" textAlign="center">
-          Acre points
-        </TextMd>
+      <CardHeader mb={8}>
+        <TextMd>Acre points</TextMd>
       </CardHeader>
 
-      <CardBody p={0}>
+      <CardBody>
         <UserDataSkeleton>
           <VStack
             bgImg={acrePointsCardPlaceholderSrc}

diff --git a/dapp/src/pages/DashboardPage/BeehiveCard.tsx b/dapp/src/pages/DashboardPage/BeehiveCard.tsx
@@ -29,24 +29,16 @@ export default function BeehiveCard(props: CardProps) {
   }
 
   return (
-    <Card p={4} {...props}>
-      <CardHeader
-        p={0}
-        as={Flex}
-        alignItems="center"
-        justify="space-between"
-        gap={2}
-      >
-        <TextMd fontWeight="bold" color="grey.700">
-          Additional rewards
-        </TextMd>
+    <Card {...props}>
+      <CardHeader as={Flex} alignItems="center" justify="space-between" gap={2}>
+        <TextMd>Additional rewards</TextMd>
         <InfoTooltip
           label="Acre Beehive automatically collects rewards from our partner projects. Rewards are dropped daily, and your share is calculated based on your deposit amount and how long you HODL."
           w={56}
         />
       </CardHeader>
 
-      <CardBody p={0} as={VStack}>
+      <CardBody as={VStack}>
         <Image src={beehiveIllustrationSrc} boxSize={32} />
         <UserDataSkeleton w="100%" mt={-7}>
           <Box px={4} py={3} bg="gold.100" borderRadius="lg">

diff --git a/dapp/src/pages/DashboardPage/DashboardCard.tsx b/dapp/src/pages/DashboardPage/DashboardCard.tsx
@@ -7,7 +7,7 @@ import PositionDetails from "./PositionDetails"
 export default function DashboardCard(props: CardProps) {
   return (
     <Card p="dashboard_card_padding" overflow="hidden" {...props}>
-      <CardBody as={VStack} spacing={10} p={0}>
+      <CardBody as={VStack} spacing={10}>
         <ActivitiesList />
         <PositionDetails />
         <TransactionHistory />

diff --git a/dapp/src/pages/DashboardPage/GrantedSeasonPassCard.tsx b/dapp/src/pages/DashboardPage/GrantedSeasonPassCard.tsx
@@ -13,21 +13,15 @@ import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 
 export default function GrantedSeasonPassCard(props: CardProps) {
   return (
-    <Card size="md" px={5} py={4} gap={4} {...props}>
+    <Card size="md" gap={4} {...props}>
       <UserDataSkeleton>
-        <CardHeader as={HStack} spacing={1} alignItems="normal" p={0}>
-          <TextMd fontWeight="bold">Season 2 arriving soon</TextMd>
+        <CardHeader as={HStack} spacing={1} alignItems="normal">
+          <TextMd>Season 2 arriving soon</TextMd>
           <Icon as={IconLock} boxSize={5} />
         </CardHeader>
       </UserDataSkeleton>
       <UserDataSkeleton w="80%">
-        <CardBody
-          as={HStack}
-          spacing={2}
-          alignItems="center"
-          color="green.400"
-          p={0}
-        >
+        <CardBody as={HStack} spacing={2} alignItems="center" color="green.400">
           <Icon as={IconDiscountCheckFilled} boxSize={5} />
           <TextMd fontWeight="semibold">Your seat is secured.</TextMd>
         </CardBody>

diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -49,7 +49,8 @@ export default function PositionDetails() {
   return (
     <Flex w="100%" flexDirection="column" gap={5}>
       <VStack alignItems="start" spacing={0}>
-        <TextMd fontWeight="bold">
+        {/* TODO: Component should be moved to `CardHeader` */}
+        <TextMd>
           Your deposit
           {/* TODO: Uncomment when position will be implemented */}
           {/* {positionPercentage && (

diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -27,13 +27,8 @@ export default function TransactionTable() {
       <PaginationPage direction="column" spacing={2} pageSpacing={6}>
         {(pageData: Activity[]) =>
           pageData.map((activity) => (
-            <Card
-              key={activity.id}
-              role="group"
-              variant="elevated"
-              colorScheme="gold"
-            >
-              <CardBody as={Flex} flexDirection="column" gap={4} p={4}>
+            <Card key={activity.id} role="group" bg="gold.100" p={4}>
+              <CardBody as={Flex} flexDirection="column" gap={4}>
                 <Flex flexDirection="column">
                   <Flex justifyContent="space-between">
                     <TextSm

diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx
@@ -36,9 +36,7 @@ function TransactionHistoryContent() {
 export default function TransactionHistory(props: StackProps) {
   return (
     <VStack spacing={6} w="full" {...props}>
-      <TextMd fontWeight="bold" w="full">
-        Transactions
-      </TextMd>
+      <TextMd w="full">Transactions</TextMd>
       <TransactionHistoryContent />
     </VStack>
   )

diff --git a/dapp/src/theme/Card.ts b/dapp/src/theme/Card.ts
@@ -1,40 +1,29 @@
-import { ComponentMultiStyleConfig, StyleFunctionProps } from "@chakra-ui/react"
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 import { cardAnatomy as parts } from "@chakra-ui/anatomy"
 
-export const cardTheme: ComponentMultiStyleConfig = {
-  baseStyle: {
-    container: {
-      boxShadow: "none",
-      borderColor: "gold.100",
-      bg: "gold.200",
-    },
-  },
-  parts: parts.keys,
-  variants: {
-    elevated: ({ colorScheme }: StyleFunctionProps) => {
-      if (!colorScheme) return {}
+const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
 
-      return {
-        container: {
-          bg: "gold.100",
-          borderColor: "white",
-        },
-      }
-    },
-  },
-  sizes: {
-    md: {
-      container: {
-        borderWidth: "1px",
-      },
-    },
-    lg: {
-      container: {
-        borderWidth: "2px",
-      },
-    },
-  },
-  defaultProps: {
-    size: "lg",
-  },
-}
+const baseStyleContainer = defineStyle({
+  boxShadow: "none",
+  bg: "gold.200",
+  borderRadius: "xl",
+  p: 5,
+})
+
+const baseStyleHeader = defineStyle({
+  p: 0,
+})
+
+const baseStyleBody = defineStyle({
+  p: 0,
+})
+
+const baseStyle = multiStyleConfig.definePartsStyle({
+  container: baseStyleContainer,
+  header: baseStyleHeader,
+  body: baseStyleBody,
+})
+
+export const cardTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+})