From 6dd6a1b2da56764e0c5cf4ef9a026028b2cf4806 Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Mon, 6 Nov 2023 14:41:10 +0000
Subject: [PATCH 1/2] Replaced all the css into tailwind css on Card component

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

diff --git a/components/Cards/Card/Card.js b/components/Cards/Card/Card.js
index ebf81a6ec..d84436c85 100644
--- a/components/Cards/Card/Card.js
+++ b/components/Cards/Card/Card.js
@@ -1,7 +1,6 @@
 import { bool, node, string } from 'prop-types';
 import classNames from 'classnames';
 import { getDataAttributes } from 'common/utils/prop-utils';
-import styles from './Card.module.css';
 
 Card.propTypes = {
   children: node.isRequired,
@@ -19,7 +18,14 @@ function Card({ children, className, hasAnimationOnHover, ...props }) {
 
   return (
     <article
-      className={classNames(styles.Card, className, { [styles.animatedCard]: hasAnimationOnHover })}
+      className={classNames(
+        'items-center bg-white [&_svg]:fill-secondary text-secondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none',
+        className,
+        {
+          'shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg':
+            hasAnimationOnHover,
+        },
+      )}
       {...customDataAttributes}
     >
       {children}
diff --git a/components/Cards/Card/__tests__/__snapshots__/Card.test.js.snap b/components/Cards/Card/__tests__/__snapshots__/Card.test.js.snap
index e9419a518..9cd90de2b 100644
--- a/components/Cards/Card/__tests__/__snapshots__/Card.test.js.snap
+++ b/components/Cards/Card/__tests__/__snapshots__/Card.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Card should render with many props assigned 1`] = `
 <article
-  className="Card test-class animatedCard"
+  className="items-center bg-white [&_svg]:fill-secondary text-secondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none test-class shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg"
 >
   Test
 </article>
@@ -10,7 +10,7 @@ exports[`Card should render with many props assigned 1`] = `
 
 exports[`Card should render with required props 1`] = `
 <article
-  className="Card"
+  className="items-center bg-white [&_svg]:fill-secondary text-secondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none"
 >
   Test
 </article>

From 495b5b6e2488274258d586e014232d39c0708dc2 Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <subhajitstd07@gmail.com>
Date: Mon, 6 Nov 2023 14:43:34 +0000
Subject: [PATCH 2/2] Replaced all the css into tailwind css on Card component

---
 components/Cards/Card/Card.module.css | 31 ---------------------------
 1 file changed, 31 deletions(-)
 delete mode 100644 components/Cards/Card/Card.module.css

diff --git a/components/Cards/Card/Card.module.css b/components/Cards/Card/Card.module.css
deleted file mode 100644
index 8187f4267..000000000
--- a/components/Cards/Card/Card.module.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.Card {
-  align-items: center;
-  background-color: var(--white);
-  box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.12);
-  color: var(--secondary);
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-around;
-  margin: 1rem;
-  min-height: 100px;
-  min-width: 100px;
-  padding: 1.5rem;
-}
-
-.Card svg {
-  fill: var(--secondary);
-}
-
-.Card:focus-visible {
-  outline: none;
-}
-
-.animatedCard {
-  box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.12);
-  transition: 0.2s box-shadow linear;
-}
-
-.animatedCard:focus-visible,
-.animatedCard:hover {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
-}