From 74f0c5cdd1e97c9ae6e92df9d1c6daeb21b8235a Mon Sep 17 00:00:00 2001
From: baystef <daramola.adebayo@yahoo.com>
Date: Mon, 21 Oct 2024 11:04:32 +0100
Subject: [PATCH 1/3] refactor(withdrawalstabcomparison): migrate
 withdrawalstabcomparison to tailwind/shadcn

---
 .../Staking/WithdrawalsTabComparison.tsx      | 62 +++++++++----------
 1 file changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/components/Staking/WithdrawalsTabComparison.tsx b/src/components/Staking/WithdrawalsTabComparison.tsx
index 937f390f50d..eb4b1dc7fba 100644
--- a/src/components/Staking/WithdrawalsTabComparison.tsx
+++ b/src/components/Staking/WithdrawalsTabComparison.tsx
@@ -1,19 +1,10 @@
 import { useTranslation } from "next-i18next"
-import {
-  ListItem,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  UnorderedList,
-} from "@chakra-ui/react"
 
 import { ButtonLink } from "@/components/Buttons"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 import WithdrawalCredentials from "@/components/Staking/WithdrawalCredentials"
 import Translation from "@/components/Translation"
+import { ListItem, UnorderedList } from "@/components/ui/list"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
@@ -28,21 +19,28 @@ const WithdrawalsTabComparison = () => {
   }
 
   return (
-    <Tabs>
-      <TabList>
-        <Tab onClick={() => handleMatomoEvent("Current stakers")}>
+    <Tabs defaultValue="current">
+      <TabsList className="p-0">
+        <TabsTrigger
+          value="current"
+          onClick={() => handleMatomoEvent("Current stakers")}
+        >
           {t("comp-withdrawal-comparison-current-title")}
-        </Tab>
-        <Tab onClick={() => handleMatomoEvent("New stakers")}>
+        </TabsTrigger>
+        <TabsTrigger
+          value="new"
+          onClick={() => handleMatomoEvent("New stakers")}
+        >
           {t("comp-withdrawal-comparison-new-title")}
-        </Tab>
-      </TabList>
+        </TabsTrigger>
+      </TabsList>
 
-      <TabPanels>
-        <TabPanel>
-          <OldHeading as="h3">
-            {t("comp-withdrawal-comparison-current-title")}
-          </OldHeading>
+      <div>
+        <TabsContent
+          value="current"
+          className="space-y-4 bg-background-highlight"
+        >
+          <h3>{t("comp-withdrawal-comparison-current-title")}</h3>
           <UnorderedList>
             <ListItem>
               <Translation id="page-staking:comp-withdrawal-comparison-current-li-1" />{" "}
@@ -51,27 +49,25 @@ const WithdrawalsTabComparison = () => {
               <Translation id="page-staking:comp-withdrawal-comparison-current-li-2" />
             </ListItem>
           </UnorderedList>
-          <Text fontWeight="bold">
+          <p className="font-bold">
             <Translation id="page-staking:comp-withdrawal-comparison-current-p" />
-          </Text>
+          </p>
 
           <WithdrawalCredentials />
-        </TabPanel>
+        </TabsContent>
 
-        <TabPanel>
-          <OldHeading as="h3">
-            {t("comp-withdrawal-comparison-new-title")}
-          </OldHeading>
+        <TabsContent value="new" className="space-y-4 bg-background-highlight">
+          <h3>{t("comp-withdrawal-comparison-new-title")}</h3>
           <UnorderedList>
             <ListItem>{t("comp-withdrawal-comparison-new-li-1")}</ListItem>
             <ListItem>{t("comp-withdrawal-comparison-new-li-2")}</ListItem>
           </UnorderedList>
-          <Text fontWeight="bold">{t("comp-withdrawal-comparison-new-p")}</Text>
+          <p className="font-bold">{t("comp-withdrawal-comparison-new-p")}</p>
           <ButtonLink href="https://launchpad.ethereum.org/" hideArrow>
             {t("comp-withdrawal-comparison-new-link")}
           </ButtonLink>
-        </TabPanel>
-      </TabPanels>
+        </TabsContent>
+      </div>
     </Tabs>
   )
 }

From 89b082d0b636cb28c46c6a6c194c6dbda112298b Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 31 Oct 2024 14:54:34 +0100
Subject: [PATCH 2/3] use new ui button and cleanup code

---
 .../Staking/WithdrawalsTabComparison.tsx      | 63 +++++++++----------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/components/Staking/WithdrawalsTabComparison.tsx b/src/components/Staking/WithdrawalsTabComparison.tsx
index eb4b1dc7fba..45b4f896a27 100644
--- a/src/components/Staking/WithdrawalsTabComparison.tsx
+++ b/src/components/Staking/WithdrawalsTabComparison.tsx
@@ -1,6 +1,5 @@
 import { useTranslation } from "next-i18next"
 
-import { ButtonLink } from "@/components/Buttons"
 import WithdrawalCredentials from "@/components/Staking/WithdrawalCredentials"
 import Translation from "@/components/Translation"
 import { ListItem, UnorderedList } from "@/components/ui/list"
@@ -8,6 +7,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import { ButtonLink } from "../ui/buttons/Button"
+
 const WithdrawalsTabComparison = () => {
   const { t } = useTranslation("page-staking")
   const handleMatomoEvent = (name: string): void => {
@@ -35,39 +36,37 @@ const WithdrawalsTabComparison = () => {
         </TabsTrigger>
       </TabsList>
 
-      <div>
-        <TabsContent
-          value="current"
-          className="space-y-4 bg-background-highlight"
-        >
-          <h3>{t("comp-withdrawal-comparison-current-title")}</h3>
-          <UnorderedList>
-            <ListItem>
-              <Translation id="page-staking:comp-withdrawal-comparison-current-li-1" />{" "}
-            </ListItem>
-            <ListItem>
-              <Translation id="page-staking:comp-withdrawal-comparison-current-li-2" />
-            </ListItem>
-          </UnorderedList>
-          <p className="font-bold">
-            <Translation id="page-staking:comp-withdrawal-comparison-current-p" />
-          </p>
+      <TabsContent
+        value="current"
+        className="space-y-4 bg-background-highlight"
+      >
+        <h3>{t("comp-withdrawal-comparison-current-title")}</h3>
+        <UnorderedList>
+          <ListItem>
+            <Translation id="page-staking:comp-withdrawal-comparison-current-li-1" />{" "}
+          </ListItem>
+          <ListItem>
+            <Translation id="page-staking:comp-withdrawal-comparison-current-li-2" />
+          </ListItem>
+        </UnorderedList>
+        <p className="font-bold">
+          <Translation id="page-staking:comp-withdrawal-comparison-current-p" />
+        </p>
 
-          <WithdrawalCredentials />
-        </TabsContent>
+        <WithdrawalCredentials />
+      </TabsContent>
 
-        <TabsContent value="new" className="space-y-4 bg-background-highlight">
-          <h3>{t("comp-withdrawal-comparison-new-title")}</h3>
-          <UnorderedList>
-            <ListItem>{t("comp-withdrawal-comparison-new-li-1")}</ListItem>
-            <ListItem>{t("comp-withdrawal-comparison-new-li-2")}</ListItem>
-          </UnorderedList>
-          <p className="font-bold">{t("comp-withdrawal-comparison-new-p")}</p>
-          <ButtonLink href="https://launchpad.ethereum.org/" hideArrow>
-            {t("comp-withdrawal-comparison-new-link")}
-          </ButtonLink>
-        </TabsContent>
-      </div>
+      <TabsContent value="new" className="space-y-4 bg-background-highlight">
+        <h3>{t("comp-withdrawal-comparison-new-title")}</h3>
+        <UnorderedList>
+          <ListItem>{t("comp-withdrawal-comparison-new-li-1")}</ListItem>
+          <ListItem>{t("comp-withdrawal-comparison-new-li-2")}</ListItem>
+        </UnorderedList>
+        <p className="font-bold">{t("comp-withdrawal-comparison-new-p")}</p>
+        <ButtonLink href="https://launchpad.ethereum.org/" hideArrow>
+          {t("comp-withdrawal-comparison-new-link")}
+        </ButtonLink>
+      </TabsContent>
     </Tabs>
   )
 }

From c3d30369de87ba86613c684fa4a89ca311cf2c05 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 31 Oct 2024 14:55:38 +0100
Subject: [PATCH 3/3] remove bg color from tab triggers

---
 src/components/ui/tabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 96214db4b3f..eeed667363c 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-background-highlight p-1",
+      "inline-flex h-10 items-center justify-center rounded-md p-1",
       className
     )}
     {...props}