diff --git a/src/components/Article/Comment.module.scss b/src/components/Article/Comment.module.scss index 96cdf800..61e01bb9 100644 --- a/src/components/Article/Comment.module.scss +++ b/src/components/Article/Comment.module.scss @@ -1,16 +1,17 @@ .comment { - margin: 0 -2.4rem 0.5em; - padding: 0.8rem 2.4rem; + margin: 0.5em 0; + padding: 1rem; transition: background-color 0.3s; position: relative; list-style: none; - @include media-breakpoint-down(sm) { - margin-right: -1.2rem; + &.isNew { + border-radius: 6px; + background: rgba(38, 56, 217, 0.05); } - &:last-child { - margin-bottom: 0; + @include media-breakpoint-down(sm) { + margin-right: -1.2rem; } .comment { @@ -196,6 +197,7 @@ .commentDetails { display: flex; + padding: 1rem 0.2rem 0; margin-bottom: 1.2rem; } diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx index 63ef6f9e..152b0945 100644 --- a/src/components/Article/Comment.tsx +++ b/src/components/Article/Comment.tsx @@ -13,6 +13,8 @@ import { useReactions } from '../../context/reactions' import { useSnackbar } from '../../context/snackbar' import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated' import { useLocalize } from '../../context/localize' +import Cookie from 'js-cookie' + const CommentEditor = lazy(() => import('../_shared/CommentEditor')) type Props = { @@ -20,6 +22,7 @@ type Props = { compact?: boolean isArticleAuthor?: boolean sortedComments?: Reaction[] + lastSeen?: Date } export const Comment = (props: Props) => { @@ -37,7 +40,7 @@ export const Comment = (props: Props) => { actions: { showSnackbar } } = useSnackbar() - const canEdit = createMemo(() => props.comment.createdBy?.slug === session()?.user?.slug) + const isCommentAuthor = createMemo(() => props.comment.createdBy?.slug === session()?.user?.slug) const comment = createMemo(() => props.comment) const body = createMemo(() => (comment().body || '').trim()) @@ -90,8 +93,9 @@ export const Comment = (props: Props) => { } } + const createdAt = new Date(comment()?.createdAt) return ( -