Modal Dark Mode

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%)`,
       }}

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;
+    @apply text-accents-8 transition scale-110 duration-100;
-  }
-
-  &.heart:hover svg {
-    fill: var(--accents-9);
   }
 
   &:last-child {
     @apply mr-0;
   }
+
+  &:focus {
+    outline: none;
+  }
 }

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>