From 65ed7ee6c9fad36d8caa306497cef4d43273b49c Mon Sep 17 00:00:00 2001
From: Joe Chen <jiajuncjoe@gmail.com>
Date: Sat, 1 Feb 2025 17:46:13 +0800
Subject: [PATCH 1/6] Migrate InfoBanner.tsx to Shadcn

---
 src/components/InfoBanner.tsx | 78 ++++++++++++++++++-----------------
 src/pages/dapps.tsx           |  2 +-
 src/pages/stablecoins.tsx     |  2 +-
 3 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/components/InfoBanner.tsx b/src/components/InfoBanner.tsx
index 0c1b60fee53..f780d9d71fe 100644
--- a/src/components/InfoBanner.tsx
+++ b/src/components/InfoBanner.tsx
@@ -1,16 +1,21 @@
 import type { ReactNode } from "react"
-import { Flex, type FlexProps, LightMode } from "@chakra-ui/react"
 
 import Emoji from "@/components/Emoji"
-import Text from "@/components/OldText"
 
-type InfoBannerProps = FlexProps & {
+import { cn } from "@/lib/utils/cn"
+
+import { Flex, VStack } from "./ui/flex"
+
+type InfoBannerProps = {
   children?: ReactNode
   emoji?: string
   isWarning?: boolean
   shouldCenter?: boolean
   shouldSpaceBetween?: boolean
   title?: string
+  id?: string
+  className?: string
+  onClick?: () => void
 }
 
 const InfoBanner = ({
@@ -20,47 +25,46 @@ const InfoBanner = ({
   shouldCenter,
   shouldSpaceBetween,
   title,
+  className,
+  onClick,
   ...props
 }: InfoBannerProps) => {
   const banner = (
-    <LightMode>
+    <VStack
+      className={cn(
+        "rounded-sm p-6 sm:flex-row",
+        shouldCenter ? "max-w-[55rem]" : "max-w-full",
+        isWarning ? "bg-orange-200" : "bg-indigo-100",
+        !onClick && "text-gray-600",
+        className
+      )}
+      onClick={onClick}
+      {...props}
+    >
+      {emoji && (
+        <Emoji
+          className="mb-2 me-0 flex-shrink-0 flex-grow-0 self-start text-4xl sm:mb-0 sm:me-6 sm:self-auto"
+          text={emoji}
+        />
+      )}
       <Flex
-        align="center"
-        p="6"
-        borderRadius="sm"
-        maxW={shouldCenter ? "55rem" : "100%"}
-        sx={{
-          ":not(button)": {
-            color: "black300 !important",
-          },
-        }}
-        bg={isWarning ? "warning" : "infoBanner"}
-        direction={{ base: "column", sm: "row" }}
-        {...props}
-      >
-        {emoji && (
-          <Emoji
-            className="mb-2 me-0 flex-shrink-0 flex-grow-0 self-start text-4xl sm:mb-0 sm:me-6 sm:self-auto"
-            text={emoji}
-          />
+        className={cn(
+          "block",
+          shouldSpaceBetween
+            ? "w-full items-center justify-between sm:flex"
+            : "w-auto sm:block"
         )}
-        <Flex
-          display={{ base: "block", sm: shouldSpaceBetween ? "flex" : "block" }}
-          align={shouldSpaceBetween ? "center" : "auto"}
-          w={shouldSpaceBetween ? "100%" : "auto"}
-          justify={shouldSpaceBetween ? "space-between" : "auto"}
-        >
-          {title && (
-            <Text fontSize="lg" fontWeight="bold">
-              {title}
-            </Text>
-          )}
-          {children}
-        </Flex>
+      >
+        {title && <p className="mb-6 text-lg font-bold">{title}</p>}
+        {children}
       </Flex>
-    </LightMode>
+    </VStack>
+  )
+  return shouldCenter ? (
+    <Flex className="justify-center">{banner}</Flex>
+  ) : (
+    banner
   )
-  return shouldCenter ? <Flex justify="center">{banner}</Flex> : banner
 }
 
 export default InfoBanner
diff --git a/src/pages/dapps.tsx b/src/pages/dapps.tsx
index 1caf83c655b..6c83315ba0f 100644
--- a/src/pages/dapps.tsx
+++ b/src/pages/dapps.tsx
@@ -295,7 +295,7 @@ const StyledH3 = (props: ChildOnlyProp) => (
 )
 
 const StyledInfoBanner = (props: ComponentPropsWithRef<typeof InfoBanner>) => (
-  <InfoBanner w={{ lg: "50%" }} {...props} />
+  <InfoBanner className="w-1/2" {...props} />
 )
 
 const Column = (props: ChildOnlyProp) => (
diff --git a/src/pages/stablecoins.tsx b/src/pages/stablecoins.tsx
index b0c082b9681..3ae105dc46a 100644
--- a/src/pages/stablecoins.tsx
+++ b/src/pages/stablecoins.tsx
@@ -546,7 +546,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
                 <MdHelpOutline className="ms-2 fill-body" size={16} />
               </Tooltip>
             </H3>
-            <InfoBanner emoji="⚠️" isWarning mb="4">
+            <InfoBanner className="mb-4" emoji="⚠️" isWarning>
               {t("page-stablecoins-algorithmic-disclaimer")}
             </InfoBanner>
             <p className="mb-6">

From b2fdeb2e7be3c9aa10cc8fe31f6e3a98b23d9c81 Mon Sep 17 00:00:00 2001
From: Joe Chen <jiajuncjoe@gmail.com>
Date: Sat, 1 Feb 2025 17:59:04 +0800
Subject: [PATCH 2/6] corrected className for gas.tsx

---
 src/pages/gas.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/gas.tsx b/src/pages/gas.tsx
index 3bd01704209..cf2311c13aa 100644
--- a/src/pages/gas.tsx
+++ b/src/pages/gas.tsx
@@ -179,7 +179,7 @@ const GasPage = () => {
           w="full"
         >
           <Box flex="60%" w="full" me={{ base: "auto", lg: 2 }}>
-            <InfoBanner mb={8} title={t("page-gas-summary-title")}>
+            <InfoBanner className="mb-8" title={t("page-gas-summary-title")}>
               <UnorderedList>
                 <ListItem>{t("page-gas-summary-item-1")}</ListItem>
                 <ListItem>{t("page-gas-summary-item-2")}</ListItem>

From 99dec9c62ee529d191b511ce4bb236e058251b4e Mon Sep 17 00:00:00 2001
From: Joe Chen <jiajuncjoe@gmail.com>
Date: Tue, 4 Feb 2025 03:40:02 +0800
Subject: [PATCH 3/6] Little correction

---
 src/components/InfoBanner.tsx | 1 -
 src/pages/dapps.tsx           | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/InfoBanner.tsx b/src/components/InfoBanner.tsx
index f780d9d71fe..db0d3c99f4c 100644
--- a/src/components/InfoBanner.tsx
+++ b/src/components/InfoBanner.tsx
@@ -35,7 +35,6 @@ const InfoBanner = ({
         "rounded-sm p-6 sm:flex-row",
         shouldCenter ? "max-w-[55rem]" : "max-w-full",
         isWarning ? "bg-orange-200" : "bg-indigo-100",
-        !onClick && "text-gray-600",
         className
       )}
       onClick={onClick}
diff --git a/src/pages/dapps.tsx b/src/pages/dapps.tsx
index 6c83315ba0f..c88a0632abd 100644
--- a/src/pages/dapps.tsx
+++ b/src/pages/dapps.tsx
@@ -295,7 +295,7 @@ const StyledH3 = (props: ChildOnlyProp) => (
 )
 
 const StyledInfoBanner = (props: ComponentPropsWithRef<typeof InfoBanner>) => (
-  <InfoBanner className="w-1/2" {...props} />
+  <InfoBanner className="lg:w-1/2" {...props} />
 )
 
 const Column = (props: ChildOnlyProp) => (

From 3bcb4decc26d3b67ace40df588b4fccb111707e7 Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Wed, 5 Feb 2025 09:35:12 +0100
Subject: [PATCH 4/6] set new bg colors for infobanner

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

diff --git a/src/components/InfoBanner.tsx b/src/components/InfoBanner.tsx
index db0d3c99f4c..b145678cc35 100644
--- a/src/components/InfoBanner.tsx
+++ b/src/components/InfoBanner.tsx
@@ -34,7 +34,7 @@ const InfoBanner = ({
       className={cn(
         "rounded-sm p-6 sm:flex-row",
         shouldCenter ? "max-w-[55rem]" : "max-w-full",
-        isWarning ? "bg-orange-200" : "bg-indigo-100",
+        isWarning ? "bg-warning-light" : "bg-primary-low-contrast",
         className
       )}
       onClick={onClick}

From 4b181d78ebc94f7884f980a16e7368e78b48c7d9 Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Wed, 5 Feb 2025 09:36:03 +0100
Subject: [PATCH 5/6] remove unnecessary onClick prop definition

---
 src/components/InfoBanner.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/InfoBanner.tsx b/src/components/InfoBanner.tsx
index b145678cc35..1200b8cf7c4 100644
--- a/src/components/InfoBanner.tsx
+++ b/src/components/InfoBanner.tsx
@@ -15,7 +15,6 @@ type InfoBannerProps = {
   title?: string
   id?: string
   className?: string
-  onClick?: () => void
 }
 
 const InfoBanner = ({
@@ -26,7 +25,6 @@ const InfoBanner = ({
   shouldSpaceBetween,
   title,
   className,
-  onClick,
   ...props
 }: InfoBannerProps) => {
   const banner = (
@@ -37,7 +35,6 @@ const InfoBanner = ({
         isWarning ? "bg-warning-light" : "bg-primary-low-contrast",
         className
       )}
-      onClick={onClick}
       {...props}
     >
       {emoji && (

From f6cdb0ec9130ceea3fe98d89df05be129c073ebd Mon Sep 17 00:00:00 2001
From: Pablo <pettinarip@gmail.com>
Date: Wed, 5 Feb 2025 09:39:19 +0100
Subject: [PATCH 6/6] adjust text color

---
 src/components/InfoBanner.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/InfoBanner.tsx b/src/components/InfoBanner.tsx
index 1200b8cf7c4..0c48db5f98d 100644
--- a/src/components/InfoBanner.tsx
+++ b/src/components/InfoBanner.tsx
@@ -32,7 +32,9 @@ const InfoBanner = ({
       className={cn(
         "rounded-sm p-6 sm:flex-row",
         shouldCenter ? "max-w-[55rem]" : "max-w-full",
-        isWarning ? "bg-warning-light" : "bg-primary-low-contrast",
+        isWarning
+          ? "bg-warning-light dark:text-body-inverse"
+          : "bg-primary-low-contrast",
         className
       )}
       {...props}