From f7b22a4da86ccc650e2a0edf5f8dcb077571bb50 Mon Sep 17 00:00:00 2001
From: Raul Andrade <raul.andrade@mercadofavo.com>
Date: Tue, 15 Mar 2022 18:23:50 -0300
Subject: [PATCH] fix: icon size in the image box

---
 src/components/audio-player/audio-player.tsx  |  2 +-
 .../image-box/image-box.skeleton.tsx          | 21 ++++++++++++++++---
 src/components/image-box/image-box.tsx        |  4 ++--
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/audio-player/audio-player.tsx b/src/components/audio-player/audio-player.tsx
index 469f7fc..1f0ab5e 100644
--- a/src/components/audio-player/audio-player.tsx
+++ b/src/components/audio-player/audio-player.tsx
@@ -57,7 +57,7 @@ export const AudioPlayer = ({
       ) : (
         <PlayIcon
           aria-label="play-icon"
-          className="h-20 w-20 sm:h-10 sm:w-10 dark:fill-gray-100 fill-gray-600 cursor-pointer
+          className="h-14 w-14 sm:h-10 sm:w-10 dark:fill-gray-100 fill-gray-600 cursor-pointer
           hover:scale-110
           transition duration-200 ease-out hover:ease-in"
           onClick={handlePlay}
diff --git a/src/components/image-box/image-box.skeleton.tsx b/src/components/image-box/image-box.skeleton.tsx
index 42a2c74..fb6e041 100644
--- a/src/components/image-box/image-box.skeleton.tsx
+++ b/src/components/image-box/image-box.skeleton.tsx
@@ -26,9 +26,24 @@ export const ImageBoxSkeleton = () => {
           <div className="mt-4 mb-2 w-6/12 h-4 bg-gray-500 dark:bg-gray-200 rounded" />
 
           <div className="pt-2 pb-3 flex justify-around items-center">
-            <div className="rounded-full bg-gray-600 dark:bg-gray-100 h-8 w-8" />
-            <div className="rounded-full bg-gray-600 dark:bg-gray-100 h-8 w-8" />
-            <div className="rounded-full bg-gray-600 dark:bg-gray-100 h-8 w-8" />
+            <div
+              className="rounded-full bg-gray-600 
+              dark:bg-gray-100
+              h-12 w-12
+              sm:h-8 sm:w-8"
+            />
+            <div
+              className="rounded-full bg-gray-600 
+              dark:bg-gray-100
+              h-12 w-12 
+              sm:h-8 sm:w-8"
+            />
+            <div
+              className="rounded-full bg-gray-600 
+            dark:bg-gray-100
+            h-12 w-12 
+            sm:h-8 sm:w-8"
+            />
           </div>
         </div>
       </div>
diff --git a/src/components/image-box/image-box.tsx b/src/components/image-box/image-box.tsx
index 67768a8..973105f 100644
--- a/src/components/image-box/image-box.tsx
+++ b/src/components/image-box/image-box.tsx
@@ -56,7 +56,7 @@ export const ImageBox = ({
         <div className="flex justify-around items-center">
           <XIcon
             aria-label="dislike"
-            className="h-20 w-20 sm:h-10 sm:w-10 stroke-gray-600 dark:stroke-gray-50 hover:stroke-red-500
+            className="h-14 w-14 sm:h-10 sm:w-10 stroke-gray-600 dark:stroke-gray-50 hover:stroke-red-500
            hover:fill-red-500 hover:scale-110 cursor-pointer 
            transition duration-200 ease-out hover:ease-in"
             onClick={onDislike}
@@ -66,7 +66,7 @@ export const ImageBox = ({
 
           <HeartIcon
             aria-label="like"
-            className="h-20 w-20 sm:h-10 sm:w-10 stroke-gray-600 dark:stroke-gray-50 hover:stroke-spotifyGreen
+            className="h-14 w-14 sm:h-10 sm:w-10 stroke-gray-600 dark:stroke-gray-50 hover:stroke-spotifyGreen
            hover:fill-spotifyGreen hover:scale-110 cursor-pointer 
            transition duration-200 ease-out hover:ease-in"
             onClick={onLike}