From 56bf81882308568fcca9ba7f91d9f2d13f86e4fe Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Fri, 16 Aug 2024 16:26:44 +0530
Subject: [PATCH 1/6] feat: migrate BannerGrid to tailwind

---
 src/components/BannerGrid/index.tsx | 95 ++++-------------------------
 src/styles/global.css               | 13 ++++
 tailwind.config.ts                  |  2 +
 3 files changed, 26 insertions(+), 84 deletions(-)

diff --git a/src/components/BannerGrid/index.tsx b/src/components/BannerGrid/index.tsx
index 5e2adb460ee..29488cf627c 100644
--- a/src/components/BannerGrid/index.tsx
+++ b/src/components/BannerGrid/index.tsx
@@ -1,24 +1,12 @@
 import React from "react"
-import { Box, Flex, Grid, useToken } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
+import { Flex } from "@/components/ui/flex"
+
 export const Banner = ({ children }: ChildOnlyProp) => {
   return (
-    <Flex
-      w="full"
-      background="bannerGridGradient"
-      direction={{ base: "column", lg: "row" }}
-      wrap="nowrap"
-      sx={{
-        h2: {
-          mt: 0,
-        },
-        ul: {
-          mb: 0,
-        },
-      }}
-    >
+    <Flex className="flex-col flex-nowrap bg-banner-grid-gradient lg:flex-row [&_h2]:mt-0 [&_ul]:mb-0">
       {children}
     </Flex>
   )
@@ -26,92 +14,31 @@ export const Banner = ({ children }: ChildOnlyProp) => {
 
 export const BannerBody = ({ children }: ChildOnlyProp) => {
   return (
-    <Box flex={4} p={10}>
-      {children}
-    </Box>
+    <div className="flex-shrink-[1] flex-grow-[4] basis-0 p-10">{children}</div>
   )
 }
 
-export const BannerImage = ({ children }: ChildOnlyProp) => {
+export const BannerImage = ({ children }) => {
   return (
-    <Flex justifyContent="end" flex={2} alignSelf="end">
+    <div className="flex flex-shrink-[1] flex-grow-[2] basis-0 justify-end self-end">
       {children}
-    </Flex>
+    </div>
   )
 }
 
 export const BannerGrid = ({ children }: ChildOnlyProp) => {
   return (
-    <Grid
-      templateColumns={{
-        base: "repeat(1,1fr)",
-        md: "repeat(2,1fr)",
-        lg: "repeat(3,1fr)",
-      }}
-      templateRows={{
-        md: "repeat(3, 1fr)",
-        lg: "repeat(2, 1fr)",
-      }}
-      columnGap={0}
-      rowGap={0}
-    >
+    <div className="grid grid-cols-1 gap-0 md:grid-cols-2 md:grid-rows-3 lg:grid-cols-3 lg:grid-rows-2">
       {children}
-    </Grid>
+    </div>
   )
 }
 
 export const BannerGridCell = ({ children }: ChildOnlyProp) => {
-  const [medBp, lgBp] = useToken("breakpoints", ["md", "lg"])
-
   return (
     <Flex
-      px={{ base: 0, md: 12 }}
-      py={8}
-      direction="column"
-      borderTop="1px solid"
-      borderTopColor="searchBackground"
-      borderInlineStart={{ base: 0, md: "1px solid" }}
-      borderInlineStartColor={{ md: "searchBackground" }}
-      sx={{
-        "&:first-child": {
-          borderTop: 0,
-        },
-        [`@media (min-width: ${medBp})`]: {
-          "&:nth-child(-n + 2)": {
-            borderTop: 0,
-          },
-          "&:nth-child(2n + 1)": {
-            borderInlineStart: 0,
-          },
-        },
-        [`@media (min-width: ${lgBp})`]: {
-          "&:first-child": {
-            ps: 0,
-            borderInlineStart: 0,
-          },
-          "&:nth-child(-n + 2)": {
-            borderTop: "1px solid",
-            borderTopColor: "searchBackground",
-          },
-          "&:nth-child(2n + 1)": {
-            borderInlineStart: "1px solid",
-            borderInlineStartColor: "searchBackground",
-          },
-          "&:nth-child(-n + 3)": {
-            borderTop: 0,
-            justifyContent: "start",
-            paddingTop: 0,
-          },
-          "&:nth-child(3n + 1)": {
-            ps: 0,
-            borderInlineStart: 0,
-          },
-          "&:nth-child(n + 4)": {
-            justifyContent: "start",
-            paddingBottom: 0,
-          },
-        },
-      }}
+      // TODO:  refactor className to make it more readable
+      className={`flex-col border-t border-t-search-background px-0 py-8 first:border-t-0 md:border-l md:border-l-search-background md:px-12 lg:[&:first-child]:border-l-0 lg:[&:first-child]:ps-0 md:[&:nth-child(-n+2)]:border-t-0 lg:[&:nth-child(-n+2)]:border-t lg:[&:nth-child(-n+2)]:border-t-search-background lg:[&:nth-child(-n+3)]:justify-start lg:[&:nth-child(-n+3)]:border-t-0 lg:[&:nth-child(-n+3)]:pt-0 md:[&:nth-child(2n+1)]:border-l-0 lg:[&:nth-child(2n+1)]:border-l lg:[&:nth-child(2n+1)]:border-l-search-background lg:[&:nth-child(3n+1)]:border-l-0 lg:[&:nth-child(3n+1)]:ps-0 lg:[&:nth-child(n+4)]:justify-start lg:[&:nth-child(n+4)]:pb-0`}
     >
       {children}
     </Flex>
diff --git a/src/styles/global.css b/src/styles/global.css
index 34b40c21099..06e0ceb7df5 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -116,6 +116,13 @@
     --table-box-shadow: 0 14px 66px rgba(0, 0, 0, 0.07),
       0 10px 17px rgba(0, 0, 0, 0.03), 0 4px 7px rgba(0, 0, 0, 0.05);
     --table-item-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    --banner-grid-gradient: linear-gradient(
+      90deg,
+      rgba(127, 127, 213, 0.2) 0%,
+      rgba(132, 145, 221, 0.2) 50%,
+      rgba(145, 234, 228, 0.2) 100%
+    );
+    --search-background: var(--background);
   }
 
   [data-theme="dark"] {
@@ -176,6 +183,12 @@
     --table-box-shadow: 0 14px 66px hsla(0, 0%, 96.1%, 0.07),
       0 10px 17px hsla(0, 0%, 96.1%, 0.03), 0 4px 7px hsla(0, 0%, 96.1%, 0.05);
     --table-item-box-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.1);
+    --banner-grid-gradient: linear-gradient(
+      90deg,
+      rgba(172, 182, 229, 0.08) 0%,
+      rgba(134, 253, 232, 0.08) 100%
+    );
+    --search-background: #4c4c4c;
   }
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6108afb7b72..b1a349a981a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -127,6 +127,7 @@ const config = {
         "tooltip-shadow": "var(--tooltip-shadow)",
         "switch-background": "var(--switch-background)",
         "hub-hero-content-bg": "var(--hub-hero-content-bg)",
+        "search-background": "var(--search-background)",
         attention: {
           DEFAULT: "var(--attention)",
           light: "var(--attention-light)",
@@ -148,6 +149,7 @@ const config = {
       backgroundImage: {
         "main-gradient": "var(--main-gradient)",
         "feedback-gradient": "var(--feedback-gradient)",
+        "banner-grid-gradient": "var(--banner-grid-gradient)",
       },
       boxShadow: {
         "table-box": "var(--table-box-shadow)",

From 8ea1f944322208b96ecfbc18a427868d18b48d2c Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Fri, 16 Aug 2024 16:30:54 +0530
Subject: [PATCH 2/6] chore: reuse flex

---
 src/components/BannerGrid/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BannerGrid/index.tsx b/src/components/BannerGrid/index.tsx
index 29488cf627c..2d39d0b2906 100644
--- a/src/components/BannerGrid/index.tsx
+++ b/src/components/BannerGrid/index.tsx
@@ -20,9 +20,9 @@ export const BannerBody = ({ children }: ChildOnlyProp) => {
 
 export const BannerImage = ({ children }) => {
   return (
-    <div className="flex flex-shrink-[1] flex-grow-[2] basis-0 justify-end self-end">
+    <Flex className="flex-shrink-[1] flex-grow-[2] basis-0 justify-end self-end">
       {children}
-    </div>
+    </Flex>
   )
 }
 

From 32e0ab561ce15e1cdce37b2c1474a584c20e62a6 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Fri, 16 Aug 2024 23:22:16 +0530
Subject: [PATCH 3/6] chore: break classes for readability

---
 src/components/BannerGrid/index.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/BannerGrid/index.tsx b/src/components/BannerGrid/index.tsx
index 2d39d0b2906..619d825af6f 100644
--- a/src/components/BannerGrid/index.tsx
+++ b/src/components/BannerGrid/index.tsx
@@ -4,6 +4,8 @@ import { ChildOnlyProp } from "@/lib/types"
 
 import { Flex } from "@/components/ui/flex"
 
+import { cn } from "@/lib/utils/cn"
+
 export const Banner = ({ children }: ChildOnlyProp) => {
   return (
     <Flex className="flex-col flex-nowrap bg-banner-grid-gradient lg:flex-row [&_h2]:mt-0 [&_ul]:mb-0">
@@ -38,7 +40,20 @@ export const BannerGridCell = ({ children }: ChildOnlyProp) => {
   return (
     <Flex
       // TODO:  refactor className to make it more readable
-      className={`flex-col border-t border-t-search-background px-0 py-8 first:border-t-0 md:border-l md:border-l-search-background md:px-12 lg:[&:first-child]:border-l-0 lg:[&:first-child]:ps-0 md:[&:nth-child(-n+2)]:border-t-0 lg:[&:nth-child(-n+2)]:border-t lg:[&:nth-child(-n+2)]:border-t-search-background lg:[&:nth-child(-n+3)]:justify-start lg:[&:nth-child(-n+3)]:border-t-0 lg:[&:nth-child(-n+3)]:pt-0 md:[&:nth-child(2n+1)]:border-l-0 lg:[&:nth-child(2n+1)]:border-l lg:[&:nth-child(2n+1)]:border-l-search-background lg:[&:nth-child(3n+1)]:border-l-0 lg:[&:nth-child(3n+1)]:ps-0 lg:[&:nth-child(n+4)]:justify-start lg:[&:nth-child(n+4)]:pb-0`}
+      className={cn(
+        "px-0 py-8 md:px-12",
+        "flex-col",
+        "border-t border-t-search-background",
+        "md:border-l md:border-l-search-background",
+        "first:border-t-0",
+        "md:[&:nth-child(-n+2)]:border-t-0 md:[&:nth-child(2n+1)]:border-l-0",
+        "lg:[&:first-child]:border-l-0",
+        "lg:[&:nth-child(-n+2)]:border-t lg:[&:nth-child(-n+2)]:border-t-search-background",
+        "lg:[&:nth-child(2n+1)]:border-l lg:[&:nth-child(2n+1)]:border-l-search-background",
+        "lg:[&:nth-child(-n+3)]:justify-start lg:[&:nth-child(-n+3)]:border-t-0 lg:[&:nth-child(-n+3)]:pt-0",
+        "lg:[&:nth-child(3n+1)]:border-l-0 lg:[&:nth-child(3n+1)]:ps-0",
+        "lg:[&:nth-child(n+4)]:justify-start lg:[&:nth-child(n+4)]:pb-0"
+      )}
     >
       {children}
     </Flex>

From 6bb8abe5f04b6c10d0b6dfb0b7cd4c7546f1db1c Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Fri, 16 Aug 2024 23:25:03 +0530
Subject: [PATCH 4/6] chore: remove comment & refactor classes

---
 src/components/BannerGrid/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/BannerGrid/index.tsx b/src/components/BannerGrid/index.tsx
index 619d825af6f..c589306dead 100644
--- a/src/components/BannerGrid/index.tsx
+++ b/src/components/BannerGrid/index.tsx
@@ -39,17 +39,15 @@ export const BannerGrid = ({ children }: ChildOnlyProp) => {
 export const BannerGridCell = ({ children }: ChildOnlyProp) => {
   return (
     <Flex
-      // TODO:  refactor className to make it more readable
       className={cn(
         "px-0 py-8 md:px-12",
         "flex-col",
         "border-t border-t-search-background",
         "md:border-l md:border-l-search-background",
         "first:border-t-0",
-        "md:[&:nth-child(-n+2)]:border-t-0 md:[&:nth-child(2n+1)]:border-l-0",
         "lg:[&:first-child]:border-l-0",
-        "lg:[&:nth-child(-n+2)]:border-t lg:[&:nth-child(-n+2)]:border-t-search-background",
-        "lg:[&:nth-child(2n+1)]:border-l lg:[&:nth-child(2n+1)]:border-l-search-background",
+        "md:[&:nth-child(-n+2)]:border-t-0 lg:[&:nth-child(-n+2)]:border-t lg:[&:nth-child(-n+2)]:border-t-search-background",
+        "md:[&:nth-child(2n+1)]:border-l-0 lg:[&:nth-child(2n+1)]:border-l lg:[&:nth-child(2n+1)]:border-l-search-background",
         "lg:[&:nth-child(-n+3)]:justify-start lg:[&:nth-child(-n+3)]:border-t-0 lg:[&:nth-child(-n+3)]:pt-0",
         "lg:[&:nth-child(3n+1)]:border-l-0 lg:[&:nth-child(3n+1)]:ps-0",
         "lg:[&:nth-child(n+4)]:justify-start lg:[&:nth-child(n+4)]:pb-0"

From 14fd24eed7a1887fcacc24b728a429deca0152dc Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Mon, 19 Aug 2024 15:40:42 +0530
Subject: [PATCH 5/6] chore: refactor classes for rtl version

---
 src/components/BannerGrid/index.tsx | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/BannerGrid/index.tsx b/src/components/BannerGrid/index.tsx
index c589306dead..a9a6edec228 100644
--- a/src/components/BannerGrid/index.tsx
+++ b/src/components/BannerGrid/index.tsx
@@ -8,29 +8,23 @@ import { cn } from "@/lib/utils/cn"
 
 export const Banner = ({ children }: ChildOnlyProp) => {
   return (
-    <Flex className="flex-col flex-nowrap bg-banner-grid-gradient lg:flex-row [&_h2]:mt-0 [&_ul]:mb-0">
+    <Flex className="w-full flex-col flex-nowrap bg-banner-grid-gradient lg:flex-row [&_h2]:mt-0 [&_ul]:mb-0">
       {children}
     </Flex>
   )
 }
 
 export const BannerBody = ({ children }: ChildOnlyProp) => {
-  return (
-    <div className="flex-shrink-[1] flex-grow-[4] basis-0 p-10">{children}</div>
-  )
+  return <div className="w-full flex-[4] p-10">{children}</div>
 }
 
 export const BannerImage = ({ children }) => {
-  return (
-    <Flex className="flex-shrink-[1] flex-grow-[2] basis-0 justify-end self-end">
-      {children}
-    </Flex>
-  )
+  return <Flex className="flex-[2] justify-end self-end">{children}</Flex>
 }
 
 export const BannerGrid = ({ children }: ChildOnlyProp) => {
   return (
-    <div className="grid grid-cols-1 gap-0 md:grid-cols-2 md:grid-rows-3 lg:grid-cols-3 lg:grid-rows-2">
+    <div className="md:grid-rows-[repeat(3, 1fr)] lg:grid-rows-[repeat(2, 1fr)] grid w-full grid-cols-[repeat(1,1fr)] gap-0 md:grid-cols-[repeat(2,1fr)] lg:grid-cols-[repeat(3,1fr)]">
       {children}
     </div>
   )
@@ -43,13 +37,13 @@ export const BannerGridCell = ({ children }: ChildOnlyProp) => {
         "px-0 py-8 md:px-12",
         "flex-col",
         "border-t border-t-search-background",
-        "md:border-l md:border-l-search-background",
+        "md:border-s md:border-s-search-background",
         "first:border-t-0",
-        "lg:[&:first-child]:border-l-0",
+        "lg:[&:first-child]:border-s-0",
         "md:[&:nth-child(-n+2)]:border-t-0 lg:[&:nth-child(-n+2)]:border-t lg:[&:nth-child(-n+2)]:border-t-search-background",
-        "md:[&:nth-child(2n+1)]:border-l-0 lg:[&:nth-child(2n+1)]:border-l lg:[&:nth-child(2n+1)]:border-l-search-background",
+        "md:[&:nth-child(2n+1)]:border-s-0 lg:[&:nth-child(2n+1)]:border-s lg:[&:nth-child(2n+1)]:border-s-search-background",
         "lg:[&:nth-child(-n+3)]:justify-start lg:[&:nth-child(-n+3)]:border-t-0 lg:[&:nth-child(-n+3)]:pt-0",
-        "lg:[&:nth-child(3n+1)]:border-l-0 lg:[&:nth-child(3n+1)]:ps-0",
+        "lg:[&:nth-child(3n+1)]:border-s-0 lg:[&:nth-child(3n+1)]:ps-0",
         "lg:[&:nth-child(n+4)]:justify-start lg:[&:nth-child(n+4)]:pb-0"
       )}
     >

From 9ca4ac2ceb0bb7f4869b0381e1f4fe1c4d041c27 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Mon, 19 Aug 2024 15:42:04 +0530
Subject: [PATCH 6/6] chore: add ChildOnlyProp

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

diff --git a/src/components/BannerGrid/index.tsx b/src/components/BannerGrid/index.tsx
index a9a6edec228..a461be9381f 100644
--- a/src/components/BannerGrid/index.tsx
+++ b/src/components/BannerGrid/index.tsx
@@ -18,7 +18,7 @@ export const BannerBody = ({ children }: ChildOnlyProp) => {
   return <div className="w-full flex-[4] p-10">{children}</div>
 }
 
-export const BannerImage = ({ children }) => {
+export const BannerImage = ({ children }: ChildOnlyProp) => {
   return <Flex className="flex-[2] justify-end self-end">{children}</Flex>
 }