From 21e8ecdc0c9bfa09c8861cfe3050fa79070683c7 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 26 Dec 2023 11:18:45 +0700
Subject: [PATCH] fix hoverables

---
 .../common/Hoverable/styles.module.scss       |  2 +-
 .../components/CommentImageGrid/index.tsx     | 21 ++++++++++++-------
 .../CommentImageGrid/styles.module.scss       |  2 +-
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/common/Hoverable/styles.module.scss b/src/components/common/Hoverable/styles.module.scss
index bb4d7850..f5fa7d30 100644
--- a/src/components/common/Hoverable/styles.module.scss
+++ b/src/components/common/Hoverable/styles.module.scss
@@ -25,7 +25,7 @@
     &:hover {
       z-index: 10;
       transition: all 100ms;
-      transform: scale(1.025) translateY(-2%);
+      transform: translateY(-2px);
       box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 5px;
 
       &::after {
diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx
index 53368c75..20aa62b0 100644
--- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx
+++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx
@@ -2,6 +2,8 @@ import { FC } from 'react';
 
 import classNames from 'classnames';
 
+import { Hoverable } from '~/components/common/Hoverable';
+import { Icon } from '~/components/common/Icon';
 import { imagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
 import { getURL } from '~/utils/dom';
@@ -25,15 +27,20 @@ const CommentImageGrid: FC<CommentImageGridProps> = ({ files, onClick }) => {
       })}
     >
       {files.map((file) => (
-        <img
+        <Hoverable
           key={file.id}
-          className={styles.item}
           onClick={() => onClick(file)}
-          srcSet={getFileSrcSet(file)}
-          src={getURL(file, imagePresets['300'])}
-          alt={file.name}
-          sizes={files.length > 1 ? singleSrcSet : multipleSrcSet}
-        />
+          className={styles.item}
+          icon={<Icon icon="zoom" size={30} />}
+        >
+          <img
+            srcSet={getFileSrcSet(file)}
+            src={getURL(file, imagePresets['300'])}
+            alt={file.name}
+            className={styles.image}
+            sizes={files.length > 1 ? singleSrcSet : multipleSrcSet}
+          />
+        </Hoverable>
       ))}
     </div>
   );
diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/styles.module.scss b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/styles.module.scss
index cfdc9d71..de654b99 100644
--- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/styles.module.scss
+++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/styles.module.scss
@@ -22,7 +22,7 @@
 }
 
 .image {
-  max-height: 400px;
+  max-height: 500px;
   border-radius: $radius;
   max-width: 100%;