remove custom classnames and migrate chakra styling from wrappers

Author: pettinarip

src/components/ActionCard.tsx

@@ -41,14 +41,14 @@ const ActionCard = ({
   return (
     <LinkBox
       className={cn(
-        "m-4 flex flex-none shadow-table hover:scale-[1.02] hover:rounded hover:bg-background-highlight hover:shadow-table-box-hover hover:duration-100 focus:scale-[1.02] focus:rounded focus:shadow-table-box-hover focus:duration-100",
+        "flex shadow-table hover:scale-[1.02] hover:rounded hover:bg-background-highlight hover:shadow-table-box-hover hover:duration-100 focus:scale-[1.02] focus:rounded focus:shadow-table-box-hover focus:duration-100",
         className
       )}
       {...props}
     >
       <Flex
         className={cn(
-          "action-card-image-wrapper flex h-[260px] flex-row bg-gradient-to-r from-accent-a/10 to-accent-c/10",
+          "flex h-[260px] flex-row bg-gradient-to-r from-accent-a/10 to-accent-c/10",
           isBottom ? "items-end" : "items-center",
           isRight ? "justify-end" : "justify-center"
         )}
@@ -57,10 +57,10 @@ const ActionCard = ({
           src={image}
           alt={alt || ""}
           width={imageWidth}
-          className="max-h-full object-cover"
+          className="max-h-full object-cover p-4"
         />
       </Flex>
-      <div className="action-card-content p-6">
+      <div className="flex flex-col justify-center p-6">
         <h3 className="mb-4 mt-2 text-2xl font-semibold leading-snug">
           <LinkOverlay asChild>
             <InlineLink

src/pages/community.tsx

@@ -299,15 +299,8 @@ const CommunityPage = () => {
           </Flex>
           <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={{ base: 8, lg: 0 }}>
             {cards.map((card, idx) => (
-              <Box
-                as={ActionCard}
-                minW={{ base: "min(100%, 240px)", lg: "440px" }}
-                m={{ base: 0, lg: 4 }}
-                borderRadius="sm"
-                border="1px solid"
-                borderColor="text"
-                bg="background.base"
-                boxShadow={theme.colors.cardBoxShadow}
+              <ActionCard
+                className="m-0 flex-col rounded-sm border lg:m-4"
                 key={idx}
                 title={card.title}
                 description={card.description}

src/pages/contributing/translation-program/acknowledgements.tsx

@@ -198,8 +198,9 @@ const TranslatorAcknowledgements = () => {
             "page-contributing-translation-program-acknowledgements-our-translators-1"
           )}
         </Text>
-        <Box
-          as={ActionCard}
+        <ActionCard
+          className="my-8"
+          imageWidth={260}
           href="/contributing/translation-program/contributors/"
           title={t(
             "page-contributing-translation-program-acknowledgements-our-translators-view-all"
@@ -208,25 +209,6 @@ const TranslatorAcknowledgements = () => {
             "page-contributing-translation-program-acknowledgements-our-translators-cta"
           )}
           image={whatIsEthereumImg}
-          display={{ base: "block", sm: "flex" }}
-          flex="none"
-          my={8}
-          mx={0}
-          sx={{
-            ".action-card-image-wrapper": {
-              p: 4,
-              minW: { sm: "260px" },
-            },
-            ".action-card-content": {
-              display: { sm: "flex" },
-              justifyContent: { sm: "center" },
-              flexDirection: { sm: "column" },
-              ms: { sm: 4 },
-            },
-            p: {
-              mb: 0,
-            },
-          }}
         />
       </Content>
 

src/pages/eth.tsx

@@ -241,29 +241,7 @@ const CentralColumn = (props: ChildOnlyProp) => (
 )
 
 const CentralActionCard = (props: ComponentProps<typeof ActionCard>) => (
-  <Box
-    as={ActionCard}
-    display={{ base: "block", sm: "flex" }}
-    flex="none"
-    my={8}
-    mx={0}
-    sx={{
-      ".action-card-image-wrapper": {
-        p: 4,
-        minW: { sm: "260px" },
-      },
-      ".action-card-content": {
-        display: { sm: "flex" },
-        justifyContent: { sm: "center" },
-        flexDirection: { sm: "column" },
-        ms: { sm: 4 },
-      },
-      p: {
-        mb: { sm: 0 },
-      },
-    }}
-    {...props}
-  />
+  <ActionCard className="my-8" imageWidth={260} {...props} />
 )
 
 export const getStaticProps = (async ({ locale }) => {