From 06eaa33924386a61e0a575efb4260fce2ce781d3 Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Fri, 5 Jan 2024 06:49:52 +0000
Subject: [PATCH 1/3] Replaced all the css into tailwind css on FlatCard 
 component

---
 components/Cards/FlatCard/FlatCard.js         | 23 ++++++++++++-------
 .../__snapshots__/FlatCard.test.js.snap       | 14 +++++------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/components/Cards/FlatCard/FlatCard.js b/components/Cards/FlatCard/FlatCard.js
index ceb5c48e3..ca2b7dd05 100644
--- a/components/Cards/FlatCard/FlatCard.js
+++ b/components/Cards/FlatCard/FlatCard.js
@@ -28,16 +28,19 @@ function FlatCard({ button: Button, children, className, header, image }) {
 
   return (
     <article
-      className={classNames(styles.FlatCard, className, {
-        [styles.cardWithImage]: hasImage,
+      className={classNames('box-border my-6 mx-4 relative max-w-[400px]', className, {
+        'pt-14': hasImage,
       })}
     >
-      <div className={styles.borderContainer}>
-        {header && <div className={styles.header}>{header}</div>}
+      <div className="p-8 border-4 border-solid border-themePrimary">
+        {header && <div className="order-2 text-center">{header}</div>}
 
         {hasImage && (
-          <div className={styles.rowCenter}>
-            <div data-testid={FLAT_CARD_IMAGE} className={styles.imageWrapper}>
+          <div className="flex justify-center">
+            <div
+              data-testid={FLAT_CARD_IMAGE}
+              className="border-solid border-themePrimary order-1 absolute -top-1 h-52 [&>img]:object-cover"
+            >
               <Image
                 src={image.source}
                 alt={image.alt ?? ''}
@@ -50,11 +53,15 @@ function FlatCard({ button: Button, children, className, header, image }) {
           </div>
         )}
 
-        {header && <hr className={styles.divider} />}
+        {header && <hr className="w-10/12 border-1 border-solid border-themePrimary" />}
 
         <div className={styles.children}>{children}</div>
 
-        {Button && <div className={styles.flatCardButton}>{Button}</div>}
+        {Button && (
+          <div className="text-center absolute left-0 right-0 -bottom-7 [&>button]:hover:bg-white [&>button]:hover:text-themeSecondary [&>button]:focus-visible:text-themePrimary [&>button]:focus-visible:bg-white [&>a]:hover:bg-white [&>a]:hover:text-themeSecondary [&>a]:focus-visible:bg-white [&>a]:focus-visible:text-themeSecondary ">
+            {Button}
+          </div>
+        )}
       </div>
     </article>
   );
diff --git a/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap b/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap
index 8b9bb62be..80e816046 100644
--- a/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap
+++ b/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`FlatCard should render with many props assigned 1`] = `
 <article
-  className="FlatCard test-class"
+  className="box-border my-6 mx-4 relative max-w-[400px] test-class"
 >
   <div
-    className="borderContainer"
+    className="p-8 border-4 border-solid border-themePrimary"
   >
     <div
-      className="header"
+      className="order-2 text-center"
     >
       <h1>
         Main heading
@@ -18,7 +18,7 @@ exports[`FlatCard should render with many props assigned 1`] = `
       </h6>
     </div>
     <hr
-      className="divider"
+      className="w-10/12 border-1 border-solid border-themePrimary"
     />
     <div
       className="children"
@@ -31,7 +31,7 @@ exports[`FlatCard should render with many props assigned 1`] = `
       </p>
     </div>
     <div
-      className="flatCardButton"
+      className="text-center absolute left-0 right-0 -bottom-7 [&>button]:hover:bg-white [&>button]:hover:text-themeSecondary [&>button]:focus-visible:text-themePrimary [&>button]:focus-visible:bg-white [&>a]:hover:bg-white [&>a]:hover:text-themeSecondary [&>a]:focus-visible:bg-white [&>a]:focus-visible:text-themeSecondary "
     >
       <a
         className="Button primary"
@@ -48,10 +48,10 @@ exports[`FlatCard should render with many props assigned 1`] = `
 
 exports[`FlatCard should render with required props 1`] = `
 <article
-  className="FlatCard"
+  className="box-border my-6 mx-4 relative max-w-[400px]"
 >
   <div
-    className="borderContainer"
+    className="p-8 border-4 border-solid border-themePrimary"
   >
     <div
       className="children"

From c3e5e454c051a6fb611e490be4ab4475c7c1eb10 Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Sun, 14 Jan 2024 14:59:19 +0000
Subject: [PATCH 2/3] Replaced all the css into tailwind css on FlatCard 
 component

---
 components/Cards/FlatCard/FlatCard.js         |  3 +-
 components/Cards/FlatCard/FlatCard.module.css | 66 -------------------
 .../__snapshots__/FlatCard.test.js.snap       |  8 +--
 3 files changed, 3 insertions(+), 74 deletions(-)
 delete mode 100644 components/Cards/FlatCard/FlatCard.module.css

diff --git a/components/Cards/FlatCard/FlatCard.js b/components/Cards/FlatCard/FlatCard.js
index ca2b7dd05..0244d0c89 100644
--- a/components/Cards/FlatCard/FlatCard.js
+++ b/components/Cards/FlatCard/FlatCard.js
@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import Image from 'next/image';
 import { FLAT_CARD_IMAGE } from 'common/constants/testIDs';
 import { getPlaceholder } from 'common/utils/next-utils';
-import styles from './FlatCard.module.css';
 
 FlatCard.propTypes = {
   button: element,
@@ -55,7 +54,7 @@ function FlatCard({ button: Button, children, className, header, image }) {
 
         {header && <hr className="w-10/12 border-1 border-solid border-themePrimary" />}
 
-        <div className={styles.children}>{children}</div>
+        <div>{children}</div>
 
         {Button && (
           <div className="text-center absolute left-0 right-0 -bottom-7 [&>button]:hover:bg-white [&>button]:hover:text-themeSecondary [&>button]:focus-visible:text-themePrimary [&>button]:focus-visible:bg-white [&>a]:hover:bg-white [&>a]:hover:text-themeSecondary [&>a]:focus-visible:bg-white [&>a]:focus-visible:text-themeSecondary ">
diff --git a/components/Cards/FlatCard/FlatCard.module.css b/components/Cards/FlatCard/FlatCard.module.css
deleted file mode 100644
index 8fa17643c..000000000
--- a/components/Cards/FlatCard/FlatCard.module.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.FlatCard {
-  box-sizing: border-box;
-  margin: 1.5rem 1rem;
-  position: relative;
-  max-width: 400px;
-}
-
-.rowCenter {
-  display: flex;
-  justify-content: center;
-}
-
-.imageWrapper {
-  border: 3px solid var(--primary);
-  order: 1;
-  position: absolute;
-  top: -1rem;
-  height: 200px;
-}
-
-.imageWrapper img {
-  object-fit: cover;
-}
-
-.header {
-  order: 2;
-  text-align: center;
-}
-
-.content {
-  order: 3;
-}
-
-.borderContainer {
-  padding: 2rem;
-  border: 3px solid var(--primary);
-}
-
-.cardWithImage {
-  padding-top: 60px;
-}
-
-.cardWithImage .borderContainer {
-  padding: 150px 2rem 2rem;
-}
-
-.divider {
-  width: 85%;
-  border: 1px solid var(--primary);
-}
-
-.flatCardButton {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -27.5px;
-}
-
-.FlatCard .flatCardButton button:focus-visible,
-.FlatCard .flatCardButton button:hover,
-.FlatCard .flatCardButton a:focus-visible,
-.FlatCard .flatCardButton a:hover {
-  background-color: var(--white);
-  color: var(--secondary);
-}
diff --git a/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap b/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap
index 80e816046..6340268dd 100644
--- a/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap
+++ b/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap
@@ -20,9 +20,7 @@ exports[`FlatCard should render with many props assigned 1`] = `
     <hr
       className="w-10/12 border-1 border-solid border-themePrimary"
     />
-    <div
-      className="children"
-    >
+    <div>
       <p>
         Example content goes here
       </p>
@@ -53,9 +51,7 @@ exports[`FlatCard should render with required props 1`] = `
   <div
     className="p-8 border-4 border-solid border-themePrimary"
   >
-    <div
-      className="children"
-    >
+    <div>
       <p>
         Example content goes here
       </p>

From 9878dffac05d556bf7aa52d27aff2485d418d4ee Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Tue, 16 Jan 2024 18:19:29 +0000
Subject: [PATCH 3/3] Replaced all the css into tailwind css on FlatCard 
 component

---
 components/Cards/FlatCard/FlatCard.js                         | 4 ++--
 .../FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/Cards/FlatCard/FlatCard.js b/components/Cards/FlatCard/FlatCard.js
index 0244d0c89..c2e31bf0c 100644
--- a/components/Cards/FlatCard/FlatCard.js
+++ b/components/Cards/FlatCard/FlatCard.js
@@ -38,7 +38,7 @@ function FlatCard({ button: Button, children, className, header, image }) {
           <div className="flex justify-center">
             <div
               data-testid={FLAT_CARD_IMAGE}
-              className="border-solid border-themePrimary order-1 absolute -top-1 h-52 [&>img]:object-cover"
+              className="border-solid border-themePrimary border-[3px] order-1 absolute -top-4 h-52 [&>img]:object-cover"
             >
               <Image
                 src={image.source}
@@ -52,7 +52,7 @@ function FlatCard({ button: Button, children, className, header, image }) {
           </div>
         )}
 
-        {header && <hr className="w-10/12 border-1 border-solid border-themePrimary" />}
+        {header && <hr className="w-10/12 border-solid border-themePrimary" />}
 
         <div>{children}</div>
 
diff --git a/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap b/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap
index 6340268dd..7f2c7f6ac 100644
--- a/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap
+++ b/components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap
@@ -18,7 +18,7 @@ exports[`FlatCard should render with many props assigned 1`] = `
       </h6>
     </div>
     <hr
-      className="w-10/12 border-1 border-solid border-themePrimary"
+      className="w-10/12 border-solid border-themePrimary"
     />
     <div>
       <p>