Replaced all the css into tailwind css on Card component (#1762)

OperationCode · Nov 6, 2023 · 15cc5aa · 15cc5aa · vercel · Nov 6, 2023
1 parent b995c61
commit 15cc5aa
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 35 deletions.
diff --git 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/Card.module.css b/components/Cards/Card/Card.module.css
diff --git a/components/Cards/Card/__tests__/__snapshots__/Card.test.js.snap b/components/Cards/Card/__tests__/__snapshots__/Card.test.js.snap
@@ -2,15 +2,15 @@
 
 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>
 `;
 
 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>