diff --git a/src/components/node/CommentContent/index.tsx b/src/components/node/CommentContent/index.tsx index 916e1113..ae8b702f 100644 --- a/src/components/node/CommentContent/index.tsx +++ b/src/components/node/CommentContent/index.tsx @@ -1,7 +1,7 @@ import React, { FC, useMemo } from 'react'; import { IComment, IFile } from '~/redux/types'; import path from 'ramda/es/path'; -import { formatCommentText, getURL } from '~/utils/dom'; +import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom'; import { Group } from '~/components/containers/Group'; import * as styles from './styles.scss'; import { UPLOAD_TYPES } from '~/redux/uploads/constants'; @@ -36,6 +36,8 @@ const CommentContent: FC<IProps> = ({ comment }) => { __html: formatCommentText(path(['user', 'username'], comment), comment.text), }} /> + + <div className={styles.date}>{getPrettyDate(comment.created_at)}</div> </div> )} @@ -48,6 +50,8 @@ const CommentContent: FC<IProps> = ({ comment }) => { </div> ))} </div> + + <div className={styles.date}>{getPrettyDate(comment.created_at)}</div> </div> )} @@ -56,6 +60,8 @@ const CommentContent: FC<IProps> = ({ comment }) => { {groupped.audio.map(file => ( <div className={classnames(styles.block, styles.audio_block)} key={file.id}> <AudioPlayer file={file} /> + + <div className={styles.date}>{getPrettyDate(comment.created_at)}</div> </div> ))} </> @@ -71,7 +77,6 @@ export { CommentContent }; )} - <div className={styles.date}>{getPrettyDate(comment.created_at)}</div> diff --git a/src/components/node/CommentContent/styles.scss b/src/components/node/CommentContent/styles.scss index ccfb4e3d..6ac33fc5 100644 --- a/src/components/node/CommentContent/styles.scss +++ b/src/components/node/CommentContent/styles.scss @@ -6,6 +6,9 @@ display: flex; align-items: flex-start; justify-content: flex-start; + position: relative; + padding-bottom: 10px; + box-sizing: border-box; &:first-child { border-top-right-radius: $radius; @@ -41,7 +44,7 @@ right: 0; font: $font_12_regular; color: transparentize($color: white, $amount: 0.8); - padding: 2px 4px; + padding: 4px 6px 4px 4px; border-radius: 0 0 $radius 0; }