From b5b21364ce88635bd72a04f3904d70a1ac108888 Mon Sep 17 00:00:00 2001
From: Martin Bavio <mbavio@gmail.com>
Date: Fri, 30 Oct 2020 22:39:28 -0300
Subject: [PATCH]  Fixes per review

---
 components/cart/CartEmpty/index.tsx         | 12 +++++++-----
 components/cart/CartEmpty/styles.module.css | 11 +++++++++++
 components/cart/CartSkeleton/index.tsx      |  4 +++-
 3 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 components/cart/CartEmpty/styles.module.css

diff --git a/components/cart/CartEmpty/index.tsx b/components/cart/CartEmpty/index.tsx
index dd5e7e971..ce79587eb 100644
--- a/components/cart/CartEmpty/index.tsx
+++ b/components/cart/CartEmpty/index.tsx
@@ -1,7 +1,9 @@
+import { FC } from 'react'
+import Link from 'next/link'
 import { Bag } from '@components/icons'
-import { Button } from '@components/ui'
+import styles from './styles.module.css'
 
-const CartEmpty: React.FC = () => {
+const CartEmpty: FC = () => {
   return (
     <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
       <span className="border border-dashed border-secondary rounded-full flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
@@ -13,9 +15,9 @@ const CartEmpty: React.FC = () => {
       <p className="text-accents-6 px-10 text-center pt-2">
         Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
       </p>
-      <Button href="/" Component="a" className="block mt-8">
-        Continue Shopping
-      </Button>
+      <Link href="/">
+        <a className={styles.action}>Continue Shopping</a>
+      </Link>
     </div>
   )
 }
diff --git a/components/cart/CartEmpty/styles.module.css b/components/cart/CartEmpty/styles.module.css
new file mode 100644
index 000000000..bab8874ec
--- /dev/null
+++ b/components/cart/CartEmpty/styles.module.css
@@ -0,0 +1,11 @@
+.action {
+  @apply block mt-8 bg-secondary text-accents-1 px-10 rounded-sm leading-6 transition ease-in-out duration-150 shadow-sm font-semibold text-center uppercase py-4 border border-transparent;
+}
+
+.action:hover {
+  @apply bg-accents-0 text-primary border border-secondary;
+}
+
+.action:focus {
+  @apply shadow-outline outline-none;
+}
diff --git a/components/cart/CartSkeleton/index.tsx b/components/cart/CartSkeleton/index.tsx
index a93a8a27c..9588affc1 100644
--- a/components/cart/CartSkeleton/index.tsx
+++ b/components/cart/CartSkeleton/index.tsx
@@ -1,4 +1,6 @@
-const CartSkeleton: React.FC = () => {
+import { FC } from 'react'
+
+const CartSkeleton: FC = () => {
   return (
     <div className="grid lg:grid-cols-12">
       <div className="lg:col-span-8">