added date

package-lock.json

@@ -963,12 +963,6 @@
       "integrity": "sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==",
       "dev": true
     },
-    "@types/howler": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.1.1.tgz",
-      "integrity": "sha512-YLwc9L853r85WqZk4xCiROGGodmlAYlKb0rQWABt4opLd6QHn2QLXIApa6vRNqjZxkzbiPs6eZskaRGOw5fDAA==",
-      "dev": true
-    },
     "@types/json-schema": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz",
@@ -7337,11 +7331,6 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
       "integrity": "sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg=="
     },
-    "howler": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/howler/-/howler-2.1.2.tgz",
-      "integrity": "sha512-oKrTFaVXsDRoB/jik7cEpWKTj7VieoiuzMYJ7E/EU5ayvmpRhumCv3YQ3823zi9VTJkSWAhbryHnlZAionGAJg=="
-    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",

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();
 }

src/styles/variables.scss

@@ -48,6 +48,8 @@ $font_12_semibold: $semibold 12px $font;
 $font_12_regular: $regular 12px $font;
 $font_10_regular: $regular 10px $font;
 $font_10_semibold: $semibold 10px $font;
+$font_8_regular: $regular 8px $font;
+$font_8_semibold: $semibold 8px $font;
 
 $font_cell_title: $font_24_bold;
 $font_hero_title: $font_48_semibold;

src/utils/dom.ts

@@ -1,4 +1,6 @@
 import { IFile } from '~/redux/types';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+import { ru } from 'date-fns/locale';
 
 export const getStyle = (oElm: any, strCssRule: string) => {
   if (document.defaultView && document.defaultView.getComputedStyle) {
@@ -75,3 +77,6 @@ export const formatCommentText = (author, text: string) =>
       index === 0 ? `${author ? `<p><b>${author}</b>: ` : ''}${el}</p>` : `<p>${el}</p>`
     )
     .join('');
+
+export const getPrettyDate = (date: string): string =>
+  formatDistanceToNow(new Date(date), { locale: ru, includeSeconds: true, addSuffix: true });