From 897f3c673325a7fb8e607ae58d38b6643c41b5e7 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 1 Nov 2023 21:54:01 +0600
Subject: [PATCH] improve like readability

---
 .../comment/CommentContent/styles.module.scss        |  3 ++-
 src/components/comment/CommentLike/index.tsx         |  2 +-
 .../comment/CommentLike/styles.module.scss           | 12 ++++++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/comment/CommentContent/styles.module.scss b/src/components/comment/CommentContent/styles.module.scss
index 4000befa..f516e104 100644
--- a/src/components/comment/CommentContent/styles.module.scss
+++ b/src/components/comment/CommentContent/styles.module.scss
@@ -57,6 +57,7 @@
 .content {
   width: 100%;
   position: relative;
+  z-index: 1;
 }
 
 .block {
@@ -111,7 +112,7 @@
   font: $font_12_medium;
   color: $gray_75;
   fill: $gray_75;
-  padding: 3px 6px;
+  padding: 3px 5px 3px 8px;
   z-index: 2;
   background: $content_bg_light;
   border-radius: 4px;
diff --git a/src/components/comment/CommentLike/index.tsx b/src/components/comment/CommentLike/index.tsx
index 95b55a55..12c6a565 100644
--- a/src/components/comment/CommentLike/index.tsx
+++ b/src/components/comment/CommentLike/index.tsx
@@ -34,7 +34,7 @@ const CommentLike: FC<CommentLikeProps> = ({
       })}
     >
       <div className={styles.icon}>
-        <Icon icon={count ? 'heart_full' : 'heart'} size={14} />
+        <Icon icon={count ? 'heart_full' : 'heart'} size={18} />
       </div>
 
       {Boolean(count) && <span className={styles.count}>{count}</span>}
diff --git a/src/components/comment/CommentLike/styles.module.scss b/src/components/comment/CommentLike/styles.module.scss
index 8cc3e5ac..b170f97a 100644
--- a/src/components/comment/CommentLike/styles.module.scss
+++ b/src/components/comment/CommentLike/styles.module.scss
@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 2px;
+  gap: 4px;
   position: relative;
 
   &.active {
@@ -13,7 +13,7 @@
     &::before {
       content: ' ';
       position: absolute;
-      inset: -10px -10px -8px -16px;
+      inset: -16px -10px -8px -40px;
     }
 
     &:not(.liked):hover .icon {
@@ -29,6 +29,10 @@
 
 .icon {
   position: relative;
-  width: 14px;
-  height: 14px;
+  width: 18px;
+  height: 18px;
+}
+
+.count {
+  font: $font_12_semibold;
 }