added date

src/components/containers/CommentWrapper/styles.scss

@@ -2,6 +2,8 @@
   background: $comment_bg;
   min-height: $comment_height;
   display: flex;
+  position: relative;
+  box-shadow: none;
   // box-shadow: $comment_shadow;
 
   &:global(.is_empty) {

src/components/node/Comment/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, HTMLAttributes, useMemo } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { IComment, IFile } from '~/redux/types';
 import * as styles from './styles.scss';
-import { formatCommentText, getURL } from '~/utils/dom';
+import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
 import { Group } from '~/components/containers/Group';
 import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
@@ -50,6 +50,8 @@ const Comment: FC<IProps> = ({ comment, is_empty, is_same, is_loading, className
         />
       )}
 
+      <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+
       {groupped.image && (
         <div className={styles.images}>
           {groupped.image.map(file => (

src/components/node/Comment/styles.scss

@@ -1,19 +1,30 @@
 @import 'flexbin/flexbin.scss';
 
 .text {
-  @include outer_shadow();
+  // @include outer_shadow();
 
   padding: $gap;
   font-weight: 300;
   font: $font_16_regular;
   min-height: $comment_height;
   box-sizing: border-box;
+  position: relative;
 
   b {
     font-weight: 600;
   }
 }
 
+.date {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  font: $font_12_regular;
+  color: transparentize($color: white, $amount: 0.8);
+  padding: 2px 4px;
+  border-radius: 0 0 $radius 0;
+}
+
 .images {
   @include flexbin(240px, 5px);
 

src/components/node/CommentForm/styles.scss

@@ -9,7 +9,7 @@
 
 .input {
   flex: 1;
-  padding: $gap / 2;
+  padding: ($gap / 2) ($gap / 2 + 1px);
 }
 
 .buttons {
@@ -24,5 +24,5 @@
     fill: transparentize(white, 0.9);
   }
 
-  @include outer_shadow();
+  // @include outer_shadow();
 }