From 0716536225320f6a51bc2d32ef6b6004073d7493 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Mon, 30 Sep 2024 19:29:22 +0530
Subject: [PATCH 1/3] feat: migrate BugBountyCards to tailwind

---
 src/components/BugBountyCards.tsx | 155 ++++++++++--------------------
 1 file changed, 53 insertions(+), 102 deletions(-)

diff --git a/src/components/BugBountyCards.tsx b/src/components/BugBountyCards.tsx
index 011668ddb15..e3e57785d85 100644
--- a/src/components/BugBountyCards.tsx
+++ b/src/components/BugBountyCards.tsx
@@ -1,105 +1,67 @@
+import { BaseHTMLAttributes } from "react"
 import { useTranslation } from "next-i18next"
-import {
-  Box,
-  type BoxProps,
-  Center,
-  type CenterProps,
-  Divider,
-  Flex,
-  type FlexProps,
-  Heading,
-  type HeadingProps,
-  type TextProps,
-  useToken,
-} from "@chakra-ui/react"
 
 import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
 
-import { ButtonLink, type ButtonLinkProps } from "@/components/Buttons"
-import Text from "@/components/OldText"
+import { cn } from "@/lib/utils/cn"
+
+import { ButtonLink, ButtonLinkProps } from "./ui/buttons/Button"
+import { Center, Flex, Stack } from "./ui/flex"
+
+type FlexProps = BaseHTMLAttributes<HTMLDivElement>
 
 const CardRow = ({ children }: ChildOnlyProp) => (
-  <Flex justifyContent="space-between" my="16" mx="4" flexWrap="wrap">
-    {children}
-  </Flex>
+  <Flex className="mx-4 my-16 flex-wrap justify-between">{children}</Flex>
 )
 
 const SubmitBugBountyButton = ({ children, ...props }: ButtonLinkProps) => (
-  <ButtonLink m="4" href="https://forms.gle/Gnh4gzGh66Yc3V7G8" {...props}>
+  <ButtonLink
+    className="m-4"
+    href="https://forms.gle/Gnh4gzGh66Yc3V7G8"
+    {...props}
+  >
     {children}
   </ButtonLink>
 )
 
 const Card = ({ children, ...props }: FlexProps) => {
-  const tableBoxShadow = useToken("colors", "tableBoxShadow")
-
   return (
-    <Flex
-      flexDir="column"
-      flex={{ base: "1 1 412px", xl: "1 1 260px" }}
-      justifyContent="space-between"
-      bg="background.base"
-      borderRadius="2px"
-      borderRad
-      boxShadow={tableBoxShadow}
-      border="1px solid"
-      borderColor="border"
-      m="4"
-      _hover={{
-        borderRadius: "base",
-        boxShadow: "tableBoxHover",
-        background: "tableBackgroundHover",
-        transition: "transform 0.1s",
-        transform: "scale(1.02)",
-      }}
+    <Stack
+      className={cn(
+        "flex-[1_1_412px] gap-0 xl:flex-[1_1_216px]",
+        "m-4 justify-between bg-background",
+        "rounded-sm border border-[#e5e5e5] shadow-table-box dark:border-[#333]",
+        "hover:scale-[1.02] hover:rounded hover:bg-[#f2f2f2] hover:shadow-table-box-hover hover:transition-transform hover:duration-100 dark:hover:bg-[rgba(255,115,36,.013)]"
+      )}
       {...props}
     >
       {children}
-    </Flex>
+    </Stack>
   )
 }
 
 type LabelVariant = "low" | "medium" | "high" | "critical"
 
-type LabelProps = CenterProps & {
+type LabelProps = FlexProps & {
   variant: LabelVariant
 }
 
-const stylePropsByVariant = {
-  low: {
-    bg: "lowBug",
-    color: "black300",
-  },
-  medium: {
-    bg: "mediumBug",
-    color: "black300",
-  },
-  high: {
-    bg: "fail400",
-    color: "white",
-  },
-  critical: {
-    bg: "fail600",
-    color: "white",
-  },
+const classNameByVariant = {
+  low: "bg-[#ffe3d3] text-[#333]",
+  medium: "bg-[#ffab7b] text-[#333]",
+  high: "bg-[#c63333] text-white",
+  critical: "bg-[#930000] text-white",
 }
 
 const Label = ({ children, variant = "medium", ...props }: LabelProps) => {
-  const variantStyleProps = stylePropsByVariant[variant]
+  const variantClassName = classNameByVariant[variant]
 
   return (
     <Center
-      borderTopEndRadius="1px"
-      borderTopStartRadius="1px"
-      borderBottomEndRadius={0}
-      borderBottomStartRadius={0}
-      borderBottom="1px solid"
-      borderColor="border"
-      fontSize="sm"
-      px="0"
-      py="1"
-      textTransform="uppercase"
-      {...variantStyleProps}
+      className={cn(
+        "rounded-t-[1px] border-b border-[#e5e5e5] px-0 py-1 text-sm uppercase",
+        variantClassName
+      )}
       {...props}
     >
       {children}
@@ -107,48 +69,37 @@ const Label = ({ children, variant = "medium", ...props }: LabelProps) => {
   )
 }
 
-const H2 = ({ children, ...props }: HeadingProps) => (
-  <Heading
-    fontSize="2xl"
-    fontStyle="normal"
-    fontWeight="bold"
-    lineHeight="22px"
-    letterSpacing="normal"
-    p="4"
-    textAlign="start"
-    mb="-2"
-    mt="2"
+const H2 = ({ children, ...props }) => (
+  <h2
+    className={cn(
+      "-mb-2 mt-2 p-4",
+      "text-start text-2xl font-bold leading-[22px]"
+    )}
     {...props}
   >
     {children}
-  </Heading>
+  </h2>
 )
 
-const Description = ({ children, ...props }: TextProps) => (
-  <Text as="p" fontSize="xl" px="4" py="0" opacity="0.6" {...props}>
+const Description = ({ children, ...props }) => (
+  <p className="mb-6 px-4 py-0 text-xl opacity-60" {...props}>
     {children}
-  </Text>
+  </p>
 )
 
-const SubHeader = ({ children, ...props }: TextProps) => (
-  <Text
-    as="p"
-    textTransform="uppercase"
-    fontSize="sm"
-    ms="4"
-    mt="4"
-    mb="2"
-    opacity="0.6"
-    {...props}
-  >
+const SubHeader = ({ children, ...props }) => (
+  <p className="mb-2 ms-4 mt-4 text-sm uppercase opacity-60" {...props}>
     {children}
-  </Text>
+  </p>
 )
 
-const TextBox = ({ children, ...props }: BoxProps) => (
-  <Box m="4" mt="2" {...props}>
+const TextBox = ({
+  children,
+  ...props
+}: BaseHTMLAttributes<HTMLDivElement>) => (
+  <div className="m-4 mt-2" {...props}>
     {children}
-  </Box>
+  </div>
 )
 
 export interface BugBountyCardInfo {
@@ -246,7 +197,7 @@ const BugBountyCards = () => {
           <H2>{t(card.h2TranslationId)}</H2>
           <Description>{t(card.descriptionTranslationId)}</Description>
           <SubHeader>{t(card.subDescriptionTranslationId)}</SubHeader>
-          <Divider opacity="1" />
+
           <SubHeader>{t(card.subHeader1TranslationId)}</SubHeader>
           <TextBox>
             <ul>
@@ -258,7 +209,7 @@ const BugBountyCards = () => {
               ))}
             </ul>
           </TextBox>
-          <Divider opacity="1" />
+
           <SubHeader>{t(card.subHeader2TranslationId)}</SubHeader>
           <TextBox>{t(card.textTranslationId)}</TextBox>
           <SubmitBugBountyButton>

From 9c28275d54aaa7d3c6aad3bf2263508c19afc747 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Wed, 2 Oct 2024 22:26:32 +0530
Subject: [PATCH 2/3] chore: update with suggested changes

---
 src/components/BugBountyCards.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/BugBountyCards.tsx b/src/components/BugBountyCards.tsx
index e3e57785d85..8e8da796947 100644
--- a/src/components/BugBountyCards.tsx
+++ b/src/components/BugBountyCards.tsx
@@ -30,8 +30,8 @@ const Card = ({ children, ...props }: FlexProps) => {
       className={cn(
         "flex-[1_1_412px] gap-0 xl:flex-[1_1_216px]",
         "m-4 justify-between bg-background",
-        "rounded-sm border border-[#e5e5e5] shadow-table-box dark:border-[#333]",
-        "hover:scale-[1.02] hover:rounded hover:bg-[#f2f2f2] hover:shadow-table-box-hover hover:transition-transform hover:duration-100 dark:hover:bg-[rgba(255,115,36,.013)]"
+        "rounded-sm border shadow-table-box",
+        "hover:scale-[1.02] hover:rounded hover:bg-background-highlight hover:shadow-table-box-hover hover:transition-transform hover:duration-100"
       )}
       {...props}
     >
@@ -59,7 +59,7 @@ const Label = ({ children, variant = "medium", ...props }: LabelProps) => {
   return (
     <Center
       className={cn(
-        "rounded-t-[1px] border-b border-[#e5e5e5] px-0 py-1 text-sm uppercase",
+        "rounded-t-[1px] border-b px-0 py-1 text-sm uppercase",
         variantClassName
       )}
       {...props}
@@ -71,10 +71,7 @@ const Label = ({ children, variant = "medium", ...props }: LabelProps) => {
 
 const H2 = ({ children, ...props }) => (
   <h2
-    className={cn(
-      "-mb-2 mt-2 p-4",
-      "text-start text-2xl font-bold leading-[22px]"
-    )}
+    className={cn("-mb-2 mt-2 p-4", "text-start text-2xl font-bold leading-6")}
     {...props}
   >
     {children}

From 1fb841a34d50341bbdfc733fffb8c3874d51b02a Mon Sep 17 00:00:00 2001
From: Nuno Loureiro <loureironuno@gmail.com>
Date: Wed, 23 Oct 2024 06:11:53 +0100
Subject: [PATCH 3/3] Update src/components/BugBountyCards.tsx

I like it

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
---
 src/components/BugBountyCards.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/BugBountyCards.tsx b/src/components/BugBountyCards.tsx
index 8e8da796947..fb017ea3611 100644
--- a/src/components/BugBountyCards.tsx
+++ b/src/components/BugBountyCards.tsx
@@ -47,10 +47,10 @@ type LabelProps = FlexProps & {
 }
 
 const classNameByVariant = {
-  low: "bg-[#ffe3d3] text-[#333]",
-  medium: "bg-[#ffab7b] text-[#333]",
-  high: "bg-[#c63333] text-white",
-  critical: "bg-[#930000] text-white",
+  low: "bg-red-100 text-black",
+  medium: "bg-red-300 text-black",
+  high: "bg-red-700 text-white",
+  critical: "bg-red-900 text-white",
 }
 
 const Label = ({ children, variant = "medium", ...props }: LabelProps) => {