From 2aec3fb5222d692d32642c6c7da96ecbd14340ad Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 22 Oct 2020 18:49:21 -0300
Subject: [PATCH] Modal Dark Mode

---
 components/core/Avatar/Avatar.tsx          |  2 +-
 components/core/UserNav/UserNav.module.css | 10 +++++-----
 components/core/UserNav/UserNav.tsx        |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx
index 7dd3bc5bd..d8bea803a 100644
--- a/components/core/Avatar/Avatar.tsx
+++ b/components/core/Avatar/Avatar.tsx
@@ -12,7 +12,7 @@ const Avatar: FC<Props> = ({}) => {
 
   return (
     <div
-      className="inline-block h-8 w-8 rounded-full border-2 border-accents-2"
+      className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary transition linear-out duration-100"
       style={{
         backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
       }}
diff --git a/components/core/UserNav/UserNav.module.css b/components/core/UserNav/UserNav.module.css
index 96926796b..d76382671 100644
--- a/components/core/UserNav/UserNav.module.css
+++ b/components/core/UserNav/UserNav.module.css
@@ -13,14 +13,14 @@
   @apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center;
 
   &:hover {
-    @apply text-accents-8;
-  }
-
-  &.heart:hover svg {
-    fill: var(--accents-9);
+    @apply text-accents-8 transition scale-110 duration-100;
   }
 
   &:last-child {
     @apply mr-0;
   }
+
+  &:focus {
+    outline: none;
+  }
 }
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index bf5a5a4b2..70e2377f3 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -47,7 +47,7 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
             )}
           </li>
           <Link href="/wishlist">
-            <li className={cn(s.item, s.heart)}>
+            <li className={s.item}>
               <Heart />
             </li>
           </Link>