From a6434399ba4cb2d77e460674778e8d3a5c729fd4 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 9 Oct 2019 19:40:17 +0700
Subject: [PATCH] better image thumbs on comments

---
 package-lock.json                       |  5 +++++
 package.json                            |  1 +
 src/components/node/Comment/index.tsx   |  4 +++-
 src/components/node/Comment/styles.scss | 11 ++++++++---
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 05b338a7..9fcf1aeb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8124,6 +8124,11 @@
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
       "dev": true
     },
+    "flexbin": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/flexbin/-/flexbin-0.2.0.tgz",
+      "integrity": "sha1-ASYwbT1ZX8t9/LhxSbnJWZ/49Ok="
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
diff --git a/package.json b/package.json
index 4c9f4b34..3aad82fb 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.7.0",
+    "flexbin": "^0.2.0",
     "history": "^4.7.2",
     "http-errors": "~1.6.2",
     "less": "^3.8.1",
diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx
index f7f4cfd2..19b02f8a 100644
--- a/src/components/node/Comment/index.tsx
+++ b/src/components/node/Comment/index.tsx
@@ -27,7 +27,9 @@ const Comment: FC<IProps> = ({ comment, is_empty, is_loading, className, photo,
     {comment.files && comment.files.length > 0 && (
       <div className={styles.images}>
         {comment.files.map(file => (
-          <ImageUpload thumb={getURL(file.url)} />
+          <div>
+            <img src={getURL(file.url)} />
+          </div>
         ))}
       </div>
     )}
diff --git a/src/components/node/Comment/styles.scss b/src/components/node/Comment/styles.scss
index a16c122a..44c9c035 100644
--- a/src/components/node/Comment/styles.scss
+++ b/src/components/node/Comment/styles.scss
@@ -7,9 +7,14 @@
   }
 }
 
+@import 'flexbin/flexbin.scss';
+
 .images {
   padding: 10px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  column-gap: $grid_line;
+
+  @include flexbin(150px, 10px);
+
+  img {
+    border-radius: 4px;
+  }
 }