From 1d8902984804a9e9c5a5e9ad7fdcb3ccad9856fa Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 12 Oct 2019 10:13:09 +0700
Subject: [PATCH] comment appearance

---
 .../containers/CommentWrapper/styles.scss       |  6 +++---
 src/components/node/Comment/index.tsx           |  2 --
 src/components/node/Comment/styles.scss         | 17 +++++++++--------
 src/styles/variables.scss                       |  1 +
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/containers/CommentWrapper/styles.scss b/src/components/containers/CommentWrapper/styles.scss
index c5c820d9..b06fd81c 100644
--- a/src/components/containers/CommentWrapper/styles.scss
+++ b/src/components/containers/CommentWrapper/styles.scss
@@ -1,6 +1,6 @@
 .wrap {
   background: $comment_bg;
-  min-height: 64px;
+  min-height: $comment_height;
   display: flex;
   box-shadow: $comment_shadow;
 
@@ -14,13 +14,13 @@
 }
 
 .thumb {
-  flex: 0 0 64px;
+  flex: 0 0 $comment_height;
   background: transparentize(black, 0.9);
   border-radius: $panel_radius 0 0 $panel_radius;
 }
 
 .thumb_image {
-  height: 64px;
+  height: $comment_height;
   background: transparentize(white, 0.97);
   border-radius: $panel_radius 0 0 $panel_radius;
 }
diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx
index 16af2215..e979c09e 100644
--- a/src/components/node/Comment/index.tsx
+++ b/src/components/node/Comment/index.tsx
@@ -4,8 +4,6 @@ import { IComment, IFile } from '~/redux/types';
 import * as styles from './styles.scss';
 import { formatCommentText, getURL } from '~/utils/dom';
 import { Group } from '~/components/containers/Group';
-import { ImageUpload } from '~/components/upload/ImageUpload';
-import { getFileType } from '~/utils/uploader';
 import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
 import reduce from 'ramda/es/reduce';
diff --git a/src/components/node/Comment/styles.scss b/src/components/node/Comment/styles.scss
index 6b60ef8b..a66f1d28 100644
--- a/src/components/node/Comment/styles.scss
+++ b/src/components/node/Comment/styles.scss
@@ -1,9 +1,13 @@
 @import 'flexbin/flexbin.scss';
 
 .text {
-  padding: $gap / 2;
+  @include outer_shadow();
+
+  padding: $gap;
   font-weight: 300;
   font: $font_16_regular;
+  min-height: $comment_height;
+  box-sizing: border-box;
 
   b {
     font-weight: 600;
@@ -11,9 +15,7 @@
 }
 
 .images {
-  // padding: $gap;
-
-  @include flexbin(240px, 10px);
+  @include flexbin(240px, 5px);
 
   img {
     border-radius: $radius;
@@ -21,12 +23,11 @@
 }
 
 .audios {
-  // padding: $gap;
-
   & > div {
-    height: 64px;
+    @include outer_shadow();
+
+    height: $comment_height;
     border-radius: $radius;
-    background: lighten($color: $comment_bg, $amount: 5%);
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 69e64a89..9bc1c575 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -5,6 +5,7 @@ $grid_line: 4px;
 $content_width: $cell * 4 + $grid_line * 3;
 $gap: 10px;
 $spc: $gap * 2;
+$comment_height: 72px;
 
 $radius: 6px;
 $cell_radius: 6px;