boris: highlight announce comments

src/components/comment/Comment/index.tsx

@@ -20,6 +20,7 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   group: ICommentGroup;
   isSame?: boolean;
   canEdit?: boolean;
+  highlighted?: boolean;
   saveComment: (data: IComment) => Promise<unknown>;
   onDelete: (id: IComment['id'], isLocked: boolean) => void;
   onShowImageModal: (images: IFile[], index: number) => void;
@@ -33,6 +34,7 @@ const Comment: FC<IProps> = memo(
     isSame,
     isLoading,
     className,
+    highlighted,
     canEdit,
     onDelete,
     onShowImageModal,
@@ -41,8 +43,9 @@ const Comment: FC<IProps> = memo(
   }) => {
     return (
       <CommentWrapper
-        className={classNames(className, {
+        className={classNames(styles.container, className, {
           [NEW_COMMENT_CLASSNAME]: group.hasNew,
+          [styles.highlighted]: highlighted,
         })}
         isEmpty={isEmpty}
         isLoading={isLoading}
@@ -53,23 +56,31 @@ const Comment: FC<IProps> = memo(
         <div className={styles.wrap}>
           {group.comments.map((comment, index) => {
             if (comment.deleted_at) {
-              return <CommendDeleted id={comment.id} onDelete={onDelete} key={comment.id} />;
+              return (
+                <CommendDeleted
+                  id={comment.id}
+                  onDelete={onDelete}
+                  key={comment.id}
+                />
+              );
             }
 
-            return (
-              <CommentContent
-                prefix={
-                  Math.abs(group.distancesInDays[index]) > 14 && (
+            const prefix = Math.abs(group.distancesInDays[index]) > 14 && (
               <CommentDistance
-                      firstDate={comment?.created_at ? parseISO(comment.created_at) : undefined}
+                firstDate={
+                  comment?.created_at ? parseISO(comment.created_at) : undefined
+                }
                 secondDate={
                   index > 0 && group.comments[index - 1]?.created_at
                     ? parseISO(group.comments[index - 1].created_at!)
                     : undefined
                 }
               />
-                  )
-                }
+            );
+
+            return (
+              <CommentContent
+                prefix={prefix}
                 saveComment={saveComment}
                 nodeId={nodeId}
                 comment={comment}
@@ -83,7 +94,7 @@ const Comment: FC<IProps> = memo(
         </div>
       </CommentWrapper>
     );
-  }
+  },
 );
 
 export { Comment };

src/components/comment/Comment/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 @keyframes appear {
   from {
@@ -11,3 +11,7 @@
 .wrap {
   animation: appear 1s;
 }
+
+.highlighted {
+  box-shadow: $color_primary 0 0 0px 2px;
+}

src/constants/boris/constants.ts

@@ -24,3 +24,6 @@ export const initialBackendStats: StatBackend = {
 };
 
 export const foundationDate = '2009-07-21 12:28:58';
+
+export const ANNOUNCE_USER_ID = 1;
+export const BORIS_NODE_ID = 696;

src/containers/node/NodeComments/index.tsx

@@ -2,6 +2,7 @@ import React, { FC, memo, useMemo } from 'react';
 
 import { Comment } from '~/components/comment/Comment';
 import { LoadMoreButton } from '~/components/input/LoadMoreButton';
+import { ANNOUNCE_USER_ID, BORIS_NODE_ID } from '~/constants/boris/constants';
 import { useGrouppedComments } from '~/hooks/node/useGrouppedComments';
 import { ICommentGroup } from '~/types';
 import { useCommentContext } from '~/utils/context/CommentContextProvider';
@@ -64,6 +65,9 @@ const NodeComments: FC<IProps> = memo(({ order }) => {
           nodeId={node.id!}
           key={group.ids.join()}
           group={group}
+          highlighted={
+            node.id === BORIS_NODE_ID && group.user.id === ANNOUNCE_USER_ID
+          }
           canEdit={canEditComment(group, user)}
           onDelete={onDeleteComment}
           onShowImageModal={onShowImageModal}

src/pages/boris.tsx

@@ -3,6 +3,7 @@ import React, { VFC } from 'react';
 import { observer } from 'mobx-react-lite';
 
 import { PageTitle } from '~/components/common/PageTitle';
+import { BORIS_NODE_ID } from '~/constants/boris/constants';
 import { useBoris } from '~/hooks/boris/useBoris';
 import { useNodeComments } from '~/hooks/comments/useNodeComments';
 import { useImageModal } from '~/hooks/navigation/useImageModal';
@@ -13,7 +14,7 @@ import { NodeContextProvider } from '~/utils/context/NodeContextProvider';
 import { getPageTitle } from '~/utils/ssr/getPageTitle';
 
 const BorisPage: VFC = observer(() => {
-  const { node, isLoading, update } = useLoadNode(696);
+  const { node, isLoading, update } = useLoadNode(BORIS_NODE_ID);
 
   const onShowImageModal = useImageModal();
   const {
@@ -24,7 +25,7 @@ const BorisPage: VFC = observer(() => {
     hasMore,
     isLoading: isLoadingComments,
     isLoadingMore,
-  } = useNodeComments(696);
+  } = useNodeComments(BORIS_NODE_ID);
   const { title, stats, isLoadingStats } = useBoris(comments);
 
   return (