fix: icon size in the image box

andraderaul · Mar 15, 2022 · f7b22a4 · f7b22a4 · vercel · Mar 15, 2022
1 parent 1f9a18f
commit f7b22a4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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}