Replaced all the css into tailwind css on Swatch component (#1783)

OperationCode · Dec 6, 2023 · e85ba69 · e85ba69 · vercel · Dec 6, 2023
1 parent faef593
commit e85ba69
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 16 deletions.
diff --git a/components/Branding/Swatch/Swatch.js b/components/Branding/Swatch/Swatch.js
@@ -1,6 +1,5 @@
 import { string } from 'prop-types';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
-import styles from './Swatch.module.css';
 
 Swatch.propTypes = {
   colorName: string.isRequired,
@@ -9,10 +8,10 @@ Swatch.propTypes = {
 
 function Swatch({ colorName, hexCode }) {
   return (
-    <figure className={styles.Swatch}>
+    <figure className="border-1 border-solid border-[#333333] p-4 m-6 w-56">
       <ScreenReaderOnly>{`A block of the color ${colorName}`}</ScreenReaderOnly>
 
-      <div className={styles.colorBlock} style={{ backgroundColor: hexCode }} />
+      <div className="h-56 mb-4" style={{ backgroundColor: hexCode }} />
 
       <figcaption>
         <h6>{colorName.toUpperCase()}</h6>

diff --git a/components/Branding/Swatch/Swatch.module.css b/components/Branding/Swatch/Swatch.module.css
diff --git a/components/Branding/Swatch/__tests__/__snapshots__/Swatch.test.js.snap b/components/Branding/Swatch/__tests__/__snapshots__/Swatch.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`Swatch should render with required props 1`] = `
 <figure
-  className="Swatch"
+  className="border-1 border-solid border-[#333333] p-4 m-6 w-56"
 >
   <ScreenReaderOnly>
     A block of the color Blue
   </ScreenReaderOnly>
   <div
-    className="colorBlock"
+    className="h-56 mb-4"
     style={
       Object {
         "backgroundColor": "#0000FF",