From 18db710df42904ad9fb541ea6a5546db9033786a Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Mon, 26 Aug 2024 17:40:31 +0530
Subject: [PATCH 1/4] feat: migrate PageHero to tailwind

---
 src/components/PageHero.tsx | 139 ++++++++++++++++--------------------
 src/styles/global.css       |   6 +-
 tailwind.config.ts          |   5 +-
 3 files changed, 69 insertions(+), 81 deletions(-)

diff --git a/src/components/PageHero.tsx b/src/components/PageHero.tsx
index 16b749734a4..a94c91f22bf 100644
--- a/src/components/PageHero.tsx
+++ b/src/components/PageHero.tsx
@@ -1,16 +1,17 @@
 import type { ReactNode } from "react"
-import { Box, Center, Flex, Heading, Wrap, WrapItem } from "@chakra-ui/react"
+
+import { type ImageProps, TwImage } from "@/components/Image"
+
+import { cn } from "@/lib/utils/cn"
+import { type MatomoEventOptions } from "@/lib/utils/matomo"
 
 import {
   Button,
   ButtonLink,
-  type ButtonLinkProps,
-  type ButtonProps,
-} from "@/components/Buttons"
-import { Image, type ImageProps } from "@/components/Image"
-import Text from "@/components/OldText"
-
-import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
+  ButtonLinkProps,
+  ButtonProps,
+} from "./ui/buttons/Button"
+import { Center, Flex } from "./ui/flex"
 
 type ButtonLinkType = Omit<ButtonLinkProps, "content"> & {
   content: ReactNode
@@ -48,113 +49,93 @@ const PageHero = ({
   children,
   className,
 }: PageHeroProps) => (
-  <Box py={4} px={8} width="full">
+  <div className="w-full px-8 py-4">
     <Flex
-      justifyContent="space-between"
-      mt={8}
-      px={{ base: 0, lg: 16 }}
-      direction={{ base: isReverse ? "column" : "column-reverse", lg: "row" }}
-      className={className}
+      className={cn(
+        "mt-8 justify-between px-0 lg:px-16",
+        isReverse ? "flex-col" : "flex-col-reverse",
+        "lg:flex-row",
+        className
+      )}
     >
-      <Box
-        maxW={{ base: "full", lg: "container.sm" }}
-        pt={{ base: isReverse ? 0 : 8, lg: 32 }}
-        pb={{ base: isReverse ? 8 : 0, lg: 32 }}
-        ps={{ base: 0, lg: 8 }}
-        me={{ base: 0, lg: 4 }}
+      <div
+        // TODO: container.sm width unavailable
+        className={cn(
+          "max-w-full lg:max-w-[640px]",
+
+          isReverse ? "pb-8 pt-0" : "pb-0 pt-8",
+          "lg:py-32",
+          "ps-0 lg:ps-8",
+          "me-0 lg:me-4"
+        )}
       >
-        <Heading
-          as="h1"
-          textTransform="uppercase"
-          fontSize="md"
-          fontWeight="normal"
-          mt={{ base: 0, lg: 8 }}
-          mb={4}
-          color="text300"
-          lineHeight={1.4}
-        >
+        <h1 className="mb-4 mt-0 text-md font-normal uppercase !leading-[1.4] text-text-300 lg:mt-8">
           {title}
-        </Heading>
-        <Heading
-          as="h2"
-          fontWeight="bold"
-          fontSize={{ base: "2.5rem", lg: "5xl" }}
-          maxW="full"
-          mb={0}
-          mt={{ base: 8, lg: 12 }}
-          color="text00"
-          lineHeight={1.4}
-        >
+        </h1>
+
+        <h2 className="mb-0 mt-8 max-w-full text-[2.5rem] font-bold !leading-[1.4] lg:mt-12 lg:text-5xl">
           {header}
-        </Heading>
-        <Text
-          fontSize={{ base: "xl", lg: "2xl" }}
-          lineHeight={1.4}
-          color="text200"
-          mt={4}
-          mb={8}
-        >
+        </h2>
+        <p className="mb-8 mt-4 text-xl !leading-[1.4] text-text-200 lg:text-2xl">
           {subtitle}
-        </Text>
+        </p>
+
         {buttons && (
-          <Wrap spacing={2} overflow="visible" sx={{ ul: { m: 0 } }}>
+          <Flex className="gap-2 overflow-visible [&_ul]:m-0">
             {buttons.map((button, idx) => {
               const isSecondary = idx !== 0
               if (isButtonLink(button)) {
                 return (
-                  <WrapItem key={idx}>
+                  <div key={idx}>
                     <ButtonLink
                       variant={button.variant}
                       href={button.href}
-                      onClick={() =>
-                        trackCustomEvent({
-                          eventCategory: button.matomo.eventCategory,
-                          eventAction: button.matomo.eventAction,
-                          eventName: button.matomo.eventName,
-                        })
-                      }
+                      customEventOptions={{
+                        eventCategory: button.matomo.eventCategory,
+                        eventAction: button.matomo.eventAction,
+                        eventName: button.matomo.eventName,
+                      }}
                       isSecondary={isSecondary}
                     >
                       {button.content}
                     </ButtonLink>
-                  </WrapItem>
+                  </div>
                 )
               }
 
               if (button.toId) {
                 return (
-                  <WrapItem key={idx}>
+                  <div key={idx}>
                     <Button
                       variant={button.variant}
                       toId={button.toId}
-                      onClick={() =>
-                        trackCustomEvent({
-                          eventCategory: button.matomo.eventCategory,
-                          eventAction: button.matomo.eventAction,
-                          eventName: button.matomo.eventName,
-                        })
-                      }
+                      customEventOptions={{
+                        eventCategory: button.matomo.eventCategory,
+                        eventAction: button.matomo.eventAction,
+                        eventName: button.matomo.eventName,
+                      }}
                       isSecondary={isSecondary}
                     >
                       {button.content}
                     </Button>
-                  </WrapItem>
+                  </div>
                 )
               }
             })}
-          </Wrap>
+          </Flex>
         )}
         {children}
-      </Box>
+      </div>
       <Center
-        flex="1 1 50%"
-        maxWidth={{ base: "560px", lg: "624px" }}
-        mt={{ base: 0, lg: 12 }}
-        ms={{ base: 0, lg: 12 }}
-        w="full"
-        alignSelf="center"
+        className={cn(
+          "flex-[1_1_50%]",
+          "max-w-[560px] lg:max-w-[624px]",
+          "mt-0 lg:mt-12",
+          "ms-0 lg:ms-12",
+          "w-full self-center"
+        )}
       >
-        <Image
+        <TwImage
           src={image}
           // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)
           sizes="(max-width: 992px) 100vw, 624px"
@@ -168,7 +149,7 @@ const PageHero = ({
         />
       </Center>
     </Flex>
-  </Box>
+  </div>
 )
 
 export default PageHero
diff --git a/src/styles/global.css b/src/styles/global.css
index cc8ed01a48c..52890cf1562 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -127,6 +127,8 @@
       rgba(145, 234, 228, 0.2) 100%
     );
     --search-background: var(--background);
+    --text-200: #666666;
+    --text-300: #4c4c4c;
   }
 
   [data-theme="dark"] {
@@ -195,6 +197,8 @@
       rgba(134, 253, 232, 0.08) 100%
     );
     --search-background: #4c4c4c;
+    --text-200: #b2b2b2;
+    --text-300: #cccccc;
   }
 }
 
@@ -204,7 +208,7 @@
   }
 
   a {
-    @apply underline-offset-3 text-primary underline hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover;
+    @apply text-primary underline underline-offset-3 hover:text-primary-hover focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-hover;
   }
 
   h1,
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 213fc3c7929..d631df7fc74 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -102,7 +102,10 @@ const config = {
           800: "var(--orange-800)",
           900: "var(--orange-900)",
         },
-
+        text: {
+          200: "var(--text-200)",
+          300: "var(--text-300)",
+        },
         primary: {
           DEFAULT: "var(--primary)",
           "high-contrast": "var(--primary-high-contrast)",

From 1f84b716d52b0f356d4629aa62cc1dc6def555cb Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 5 Sep 2024 11:42:56 +0200
Subject: [PATCH 2/4] default hero text color to white + cleanup

---
 src/components/PageHero.tsx | 6 ++----
 src/styles/global.css       | 4 ----
 tailwind.config.ts          | 4 ----
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/components/PageHero.tsx b/src/components/PageHero.tsx
index 7f0f092ebfa..ada8b21869f 100644
--- a/src/components/PageHero.tsx
+++ b/src/components/PageHero.tsx
@@ -59,24 +59,22 @@ const PageHero = ({
       )}
     >
       <div
-        // TODO: container.sm width unavailable
         className={cn(
           "max-w-full lg:max-w-[640px]",
-
           isReverse ? "pb-8 pt-0" : "pb-0 pt-8",
           "lg:pb-32 lg:pt-16",
           "ps-0 lg:ps-8",
           "me-0 lg:me-4"
         )}
       >
-        <h1 className="mb-4 mt-0 text-md font-normal uppercase !leading-[1.4] text-text-300 lg:mt-8">
+        <h1 className="mb-4 mt-0 text-md font-normal uppercase !leading-[1.4] lg:mt-8">
           {title}
         </h1>
 
         <h2 className="mb-0 mt-8 max-w-full text-[2.5rem] font-bold !leading-[1.4] lg:mt-12 lg:text-5xl">
           {header}
         </h2>
-        <p className="mb-8 mt-4 text-xl !leading-[1.4] text-text-200 lg:text-2xl">
+        <p className="mb-8 mt-4 text-xl !leading-[1.4] lg:text-2xl">
           {subtitle}
         </p>
 
diff --git a/src/styles/global.css b/src/styles/global.css
index f5bf6edf482..5a345a2b858 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -127,8 +127,6 @@
       rgba(145, 234, 228, 0.2) 100%
     );
     --search-background: var(--background);
-    --text-200: #666666;
-    --text-300: #4c4c4c;
   }
 
   [data-theme="dark"] {
@@ -197,8 +195,6 @@
       rgba(134, 253, 232, 0.08) 100%
     );
     --search-background: #4c4c4c;
-    --text-200: #b2b2b2;
-    --text-300: #cccccc;
   }
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d631df7fc74..99341906484 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -102,10 +102,6 @@ const config = {
           800: "var(--orange-800)",
           900: "var(--orange-900)",
         },
-        text: {
-          200: "var(--text-200)",
-          300: "var(--text-300)",
-        },
         primary: {
           DEFAULT: "var(--primary)",
           "high-contrast": "var(--primary-high-contrast)",

From baca2b19f08d19898bfb467f8788c9303c4061da Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 5 Sep 2024 13:57:46 +0200
Subject: [PATCH 3/4] fix types

---
 src/pages/dapps.tsx         | 2 +-
 src/pages/stablecoins.tsx   | 2 +-
 src/pages/wallets/index.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/dapps.tsx b/src/pages/dapps.tsx
index e4121ae4ff7..456f18effd8 100644
--- a/src/pages/dapps.tsx
+++ b/src/pages/dapps.tsx
@@ -1343,7 +1343,7 @@ const DappsPage = () => {
       {
         content: t("page-dapps-what-are-dapps"),
         href: "#what-are-dapps",
-        variant: "outline",
+        variant: "outline" as const,
         matomo: {
           eventCategory: "dapp hero buttons",
           eventAction: "click",
diff --git a/src/pages/stablecoins.tsx b/src/pages/stablecoins.tsx
index 2e93a0ab03a..d8c4fe89c39 100644
--- a/src/pages/stablecoins.tsx
+++ b/src/pages/stablecoins.tsx
@@ -394,7 +394,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
       {
         content: t("page-stablecoins-how-they-work-button"),
         toId: "how",
-        variant: "outline",
+        variant: "outline" as const,
         matomo: {
           eventCategory: "stablecoins hero buttons",
           eventAction: "click",
diff --git a/src/pages/wallets/index.tsx b/src/pages/wallets/index.tsx
index 4d4827b9aa0..a3b4cdfd40b 100644
--- a/src/pages/wallets/index.tsx
+++ b/src/pages/wallets/index.tsx
@@ -183,7 +183,7 @@ const WalletsPage = () => {
                 eventAction: "click",
                 eventName: "How_to_use_wallet",
               },
-              variant: "outline",
+              variant: "outline" as const,
             },
           ]
         : [

From c2a626f7162e93f3df62bcbe9b3c107c1dbb825a Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Fri, 6 Sep 2024 09:50:13 +0200
Subject: [PATCH 4/4] use existing utility class for lineheight instead of
 custom sizes

---
 src/components/PageHero.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/PageHero.tsx b/src/components/PageHero.tsx
index ada8b21869f..15029253ad5 100644
--- a/src/components/PageHero.tsx
+++ b/src/components/PageHero.tsx
@@ -67,16 +67,14 @@ const PageHero = ({
           "me-0 lg:me-4"
         )}
       >
-        <h1 className="mb-4 mt-0 text-md font-normal uppercase !leading-[1.4] lg:mt-8">
+        <h1 className="mb-4 mt-0 text-md font-normal uppercase !leading-xs lg:mt-8">
           {title}
         </h1>
 
-        <h2 className="mb-0 mt-8 max-w-full text-[2.5rem] font-bold !leading-[1.4] lg:mt-12 lg:text-5xl">
+        <h2 className="mb-0 mt-8 max-w-full text-[2.5rem] font-bold !leading-xs lg:mt-12 lg:text-5xl">
           {header}
         </h2>
-        <p className="mb-8 mt-4 text-xl !leading-[1.4] lg:text-2xl">
-          {subtitle}
-        </p>
+        <p className="mb-8 mt-4 text-xl !leading-xs lg:text-2xl">{subtitle}</p>
 
         {buttons && (
           <Flex className="gap-2 overflow-visible [&_ul]:m-0">