Merge pull request #14411 from Sambit03/migrate-Translatathon/StepByStepInstructions

Migrate StepByStepInstructions.tsx to Shadcn/tailwind

Author: pettinarip

src/components/Translatathon/StepByStepInstructions.tsx

@@ -1,9 +1,8 @@
-import { Center, Flex, Text } from "@chakra-ui/react"
-
-import { ButtonLink } from "@/components/Buttons"
-
 import { CROWDIN_PROJECT_URL } from "@/lib/constants"
 
+import { Button, ButtonLink } from "../ui/buttons/Button"
+import { Center, Flex } from "../ui/flex"
+
 import {
   APPLICATION_END_DATE,
   APPLICATION_START_DATE,
@@ -70,59 +69,42 @@ export const StepByStepInstructions = () => {
   const appLive = todaysDate >= appStartDate && todaysDate <= appEndDate
 
   return (
-    <Flex w="full" flexDir="column">
-      {instructions.map((instruction, index) => (
-        <Flex
-          key={index}
-          w="full"
-          justifyContent="space-between"
-          p={4}
-          borderBottom="1px solid"
-          borderColor="body.light"
-          gap={4}
-          flexDir={{ base: "column", md: "row" }}
-          alignItems={{ base: "left", md: "center" }}
-        >
+    <Flex className="w-full flex-col">
+      {instructions.map((instruction, index) => {
+        const isDisabled = instruction.ctaLink === APPLICATION_URL && !appLive
+
+        return (
           <Flex
-            gap={4}
-            flexDir={{ base: "column", md: "row" }}
-            alignItems={{ base: "left", md: "center" }}
+            key={index}
+            className="w-full flex-col items-start justify-between gap-4 border-b border-body-light p-4 md:flex-row md:items-center"
           >
-            <Center
-              minWidth="46px"
-              maxWidth="46px"
-              h="46px"
-              borderRadius={8}
-              background="background.base"
-              boxShadow="2px 6px 18px 0px rgba(0, 0, 0, 0.10)"
-              p={1}
-            >
-              <Text fontSize="4xl" fontWeight="bold" color="primary.base">
-                {index + 1}
-              </Text>
-            </Center>
-            <Flex flexDir="column">
-              <Text fontSize="xl" fontWeight="bold">
-                {instruction.title}
-              </Text>
-              <Text>{instruction.description}</Text>
+            <Flex className="flex-col items-start gap-4 md:flex-row md:items-center">
+              <Center className="h-[46px] min-w-[46px] max-w-[46px] rounded-lg bg-background p-1 shadow">
+                <p className="text-4xl font-bold text-primary">{index + 1}</p>
+              </Center>
+              <Flex className="flex-col">
+                <p className="text-xl font-bold">{instruction.title}</p>
+                <p>{instruction.description}</p>
+              </Flex>
             </Flex>
+            {instruction.ctaLink ? (
+              <Flex className="h-[42px]">
+                {isDisabled ? (
+                  <Button variant="outline" disabled>
+                    {instruction.ctaLabel}
+                  </Button>
+                ) : (
+                  <ButtonLink href={instruction.ctaLink} variant="outline">
+                    {instruction.ctaLabel}
+                  </ButtonLink>
+                )}
+              </Flex>
+            ) : (
+              <Flex className="w-[140px]" />
+            )}
           </Flex>
-          {instruction.ctaLink ? (
-            <Flex height="42px">
-              <ButtonLink
-                href={instruction.ctaLink}
-                variant="outline"
-                isDisabled={instruction.ctaLink === APPLICATION_URL && !appLive}
-              >
-                {instruction.ctaLabel}
-              </ButtonLink>
-            </Flex>
-          ) : (
-            <Flex w="140px" />
-          )}
-        </Flex>
-      ))}
+        )
+      })}
     </Flex>
   )
 }