From de8ca676459e4d817cfd5d2df7c4cb0d3906d237 Mon Sep 17 00:00:00 2001
From: Ashis Kumar <ashishsahoo389@gmail.com>
Date: Sat, 8 Feb 2025 23:58:11 +0530
Subject: [PATCH 1/4] Migrate the chakra imports to Tailwind.

---
 .../Staking/StakingConsiderations/index.tsx   | 43 ++++++-------------
 1 file changed, 12 insertions(+), 31 deletions(-)

diff --git a/src/components/Staking/StakingConsiderations/index.tsx b/src/components/Staking/StakingConsiderations/index.tsx
index ed0f0d9b1ef..da7b015595b 100644
--- a/src/components/Staking/StakingConsiderations/index.tsx
+++ b/src/components/Staking/StakingConsiderations/index.tsx
@@ -1,4 +1,5 @@
-import { Box, Flex, List, ListItem, useToken, VStack } from "@chakra-ui/react"
+import { List, ListItem } from "@chakra-ui/react"
+import { VStack, Flex } from "@/components/ui/flex"
 
 import type { StakingPage } from "@/lib/types"
 
@@ -8,8 +9,6 @@ import {
   GreenCheckProductGlyphIcon,
   WarningProductGlyphIcon,
 } from "@/components/icons/staking"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
@@ -37,11 +36,11 @@ const IndicatorGroup = ({
     return <WarningProductGlyphIcon style={style} />
   }
   return (
-    <VStack spacing={2} flex={1}>
+    <VStack className="flex-1 p-2">
       <IndicatorIcon style={styleObj} />
-      <Text fontSize="xs" textAlign="center" maxW="{40}">
+      <p className="max-w-[10rem] text-center text-xs">
         <Translation id={label} />
-      </Text>
+      </p>
     </VStack>
   )
 }
@@ -51,9 +50,6 @@ export type StakingConsiderationsProps = {
 }
 
 const StakingConsiderations = ({ page }: StakingConsiderationsProps) => {
-  // TODO: Replace with direct token implementation after UI migration is completed
-  const mdBp = useToken("breakpoints", "md")
-
   const {
     StyledSvg,
     caution,
@@ -75,10 +71,10 @@ const StakingConsiderations = ({ page }: StakingConsiderationsProps) => {
   }
 
   return (
-    <Flex flexDir={{ base: "column", md: "row" }}>
+    <Flex className="flex-col md:flex-row">
       <ButtonDropdown list={dropdownLinks} className="mb-4 md:hidden" />
       {/* TODO: Improve a11y */}
-      <Box flex={1} hideBelow={mdBp}>
+      <div className="hidden flex-1 md:block">
         {!!pageData && (
           <List m={0}>
             {/* TODO: Make mobile responsive */}
@@ -107,27 +103,12 @@ const StakingConsiderations = ({ page }: StakingConsiderationsProps) => {
             ))}
           </List>
         )}
-      </Box>
-      <Flex
-        alignItems="center"
-        flexDir="column"
-        bg="background.highlight"
-        flex={2}
-        minH="410px"
-        p={6}
-      >
+      </div>
+      <Flex className="felx-col bg-highlight flex-2 min-h-[410px] items-center p-6">
         <StyledSvg />
-        <OldHeading
-          as="h3"
-          fontWeight={700}
-          fontSize="27px"
-          lineHeight={1.4}
-          mt={10}
-        >
-          {title}
-        </OldHeading>
-        <Text>{description}</Text>
-        <Flex gap={8} justifyContent="center" mt="auto">
+        <h3 className="mt-10 text-[27px] font-bold leading-[1.4]">{title}</h3>
+        <p>{description}</p>
+        <Flex className="mt-auto justify-center gap-8">
           {!!valid && (
             <IndicatorGroup
               label={valid}

From a8400a4cbbb4f27e57f76a087eae6f634aa0fde0 Mon Sep 17 00:00:00 2001
From: Ashis Kumar <ashishsahoo389@gmail.com>
Date: Mon, 10 Feb 2025 12:56:28 +0530
Subject: [PATCH 2/4] Migrate the ListItems,List.

---
 .../Staking/StakingConsiderations/index.tsx        | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/Staking/StakingConsiderations/index.tsx b/src/components/Staking/StakingConsiderations/index.tsx
index da7b015595b..a99bd96c588 100644
--- a/src/components/Staking/StakingConsiderations/index.tsx
+++ b/src/components/Staking/StakingConsiderations/index.tsx
@@ -1,4 +1,4 @@
-import { List, ListItem } from "@chakra-ui/react"
+import { List, ListItem } from "@/components/ui/list"
 import { VStack, Flex } from "@/components/ui/flex"
 
 import type { StakingPage } from "@/lib/types"
@@ -76,7 +76,7 @@ const StakingConsiderations = ({ page }: StakingConsiderationsProps) => {
       {/* TODO: Improve a11y */}
       <div className="hidden flex-1 md:block">
         {!!pageData && (
-          <List m={0}>
+          <List className="m-0">
             {/* TODO: Make mobile responsive */}
             {pageData.map(({ title, matomo }, idx) => (
               <ListItem
@@ -85,15 +85,7 @@ const StakingConsiderations = ({ page }: StakingConsiderationsProps) => {
                   handleSelection(idx)
                   trackCustomEvent(matomo)
                 }}
-                py={1}
-                cursor="pointer"
-                display="table"
-                w="full"
-                h={8}
-                p="3"
-                mb="0"
-                _hover={activeStyles}
-                position="relative"
+                className={`relative mb-0 table h-8 w-full cursor-pointer p-3 py-1 hover:[${activeStyles}]`}
                 {...(idx === activeIndex
                   ? activeStyles
                   : { color: "primary.base" })}

From e5cfb095b9a67d7803f09d86e56b115b5fcdbbe7 Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Mon, 10 Feb 2025 10:30:54 +0100
Subject: [PATCH 3/4] fix import order

---
 src/components/Staking/StakingConsiderations/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Staking/StakingConsiderations/index.tsx b/src/components/Staking/StakingConsiderations/index.tsx
index a99bd96c588..69a751092a4 100644
--- a/src/components/Staking/StakingConsiderations/index.tsx
+++ b/src/components/Staking/StakingConsiderations/index.tsx
@@ -1,6 +1,3 @@
-import { List, ListItem } from "@/components/ui/list"
-import { VStack, Flex } from "@/components/ui/flex"
-
 import type { StakingPage } from "@/lib/types"
 
 import ButtonDropdown from "@/components/ButtonDropdown"
@@ -10,6 +7,8 @@ import {
   WarningProductGlyphIcon,
 } from "@/components/icons/staking"
 import Translation from "@/components/Translation"
+import { Flex, VStack } from "@/components/ui/flex"
+import { List, ListItem } from "@/components/ui/list"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 

From ef223558ba8dc59e6d30ea38e50832aad8639aa5 Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Mon, 10 Feb 2025 14:47:26 +0100
Subject: [PATCH 4/4] fix multiple layout styles

---
 .../Staking/StakingConsiderations/index.tsx   | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/Staking/StakingConsiderations/index.tsx b/src/components/Staking/StakingConsiderations/index.tsx
index 69a751092a4..74e1259def8 100644
--- a/src/components/Staking/StakingConsiderations/index.tsx
+++ b/src/components/Staking/StakingConsiderations/index.tsx
@@ -10,6 +10,7 @@ import Translation from "@/components/Translation"
 import { Flex, VStack } from "@/components/ui/flex"
 import { List, ListItem } from "@/components/ui/list"
 
+import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import { useStakingConsiderations } from "@/hooks/useStakingConsiderations"
@@ -35,7 +36,7 @@ const IndicatorGroup = ({
     return <WarningProductGlyphIcon style={style} />
   }
   return (
-    <VStack className="flex-1 p-2">
+    <VStack className="flex-1 gap-2">
       <IndicatorIcon style={styleObj} />
       <p className="max-w-[10rem] text-center text-xs">
         <Translation id={label} />
@@ -63,12 +64,6 @@ const StakingConsiderations = ({ page }: StakingConsiderationsProps) => {
     activeIndex,
   } = useStakingConsiderations({ page })
 
-  const activeStyles = {
-    bg: "background.highlight",
-    color: "body.base",
-    transition: "background 0.5s, color 0.5s",
-  }
-
   return (
     <Flex className="flex-col md:flex-row">
       <ButtonDropdown list={dropdownLinks} className="mb-4 md:hidden" />
@@ -84,10 +79,12 @@ const StakingConsiderations = ({ page }: StakingConsiderationsProps) => {
                   handleSelection(idx)
                   trackCustomEvent(matomo)
                 }}
-                className={`relative mb-0 table h-8 w-full cursor-pointer p-3 py-1 hover:[${activeStyles}]`}
-                {...(idx === activeIndex
-                  ? activeStyles
-                  : { color: "primary.base" })}
+                className={cn(
+                  "transition-background relative mb-0 table h-8 w-full cursor-pointer p-3 duration-500 hover:bg-background-highlight hover:text-body",
+                  idx === activeIndex
+                    ? "bg-background-highlight text-body"
+                    : "text-primary"
+                )}
               >
                 {title}
               </ListItem>
@@ -95,9 +92,9 @@ const StakingConsiderations = ({ page }: StakingConsiderationsProps) => {
           </List>
         )}
       </div>
-      <Flex className="felx-col bg-highlight flex-2 min-h-[410px] items-center p-6">
+      <Flex className="min-h-[410px] flex-[2] flex-col items-center bg-background-highlight p-6">
         <StyledSvg />
-        <h3 className="mt-10 text-[27px] font-bold leading-[1.4]">{title}</h3>
+        <h3 className="mt-10 text-2xl font-bold leading-[1.4]">{title}</h3>
         <p>{description}</p>
         <Flex className="mt-auto justify-center gap-8">
           {!!valid && (