Converted all the css into Tailwind css of Drawer component (#1745)

Co-authored-by: Kyle Holmberg <[email protected]>
Co-authored-by: Kyle Holmberg <[email protected]>

components/Drawer/Drawer.js

@@ -1,6 +1,5 @@
 import { node, string, bool } from 'prop-types';
 import classNames from 'classnames';
-import styles from './Drawer.module.css';
 
 Drawer.propTypes = {
   children: node.isRequired,
@@ -16,12 +15,16 @@ Drawer.defaultProps = {
 function Drawer({ children, className, isVisible }) {
   return (
     <div
-      className={classNames(className, {
-        [styles.visible]: isVisible,
-        [styles.hidden]: !isVisible,
-      })}
+      className={classNames(
+        className,
+        'hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0  overflow-hidden width-full z-[2]',
+        {
+          '-left-0': isVisible,
+          '-left-[100%]': !isVisible,
+        },
+      )}
     >
-      <div className={styles.content}>{children}</div>
+      <div className="h-full w-full">{children}</div>
     </div>
   );
 }

components/Drawer/__tests__/__snapshots__/Drawer.test.js.snap

@@ -2,10 +2,10 @@
 
 exports[`Drawer should render with many props assigned 1`] = `
 <div
-  className="test-class visible"
+  className="test-class hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0  overflow-hidden width-full z-[2] -left-0"
 >
   <div
-    className="content"
+    className="h-full w-full"
   >
     Test
   </div>
@@ -14,10 +14,10 @@ exports[`Drawer should render with many props assigned 1`] = `
 
 exports[`Drawer should render with required props 1`] = `
 <div
-  className="hidden"
+  className="hidden lg:block transition-all ease-in-out duration-1000 fixed top-0 bottom-0  overflow-hidden width-full z-[2] -left-[100%]"
 >
   <div
-    className="content"
+    className="h-full w-full"
   >
     Test
   </div>