fixed message delete appearance

src/components/profile/Message/index.tsx

@@ -1,25 +1,61 @@
 import React, { FC, useCallback } from 'react';
 import { IMessage } from '~/redux/types';
 import styles from './styles.scss';
-import { formatText, getURL, getPrettyDate } from '~/utils/dom';
+import { formatText, getPrettyDate, getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import classNames from 'classnames';
 import { Group } from '~/components/containers/Group';
 import { CommentMenu } from '~/components/node/CommentMenu';
 import { MessageForm } from '~/components/profile/MessageForm';
+import { Filler } from '~/components/containers/Filler';
+import { Button } from '~/components/input/Button';
 
 interface IProps {
   message: IMessage;
   incoming: boolean;
   onEdit: (id: number) => void;
   onDelete: (id: number) => void;
+  onRestore: (id: number) => void;
   onCancelEdit: () => void;
   isEditing: boolean;
 }
 
-const Message: FC<IProps> = ({ message, incoming, onEdit, onDelete, isEditing, onCancelEdit }) => {
-  const onEditClicked = useCallback(() => onEdit(message.id), [message.id]);
-  const onDeleteClicked = useCallback(() => onDelete(message.id), [message.id]);
+const Message: FC<IProps> = ({
+  message,
+  incoming,
+  onEdit,
+  onDelete,
+  isEditing,
+  onCancelEdit,
+  onRestore,
+}) => {
+  const onEditClicked = useCallback(() => onEdit(message.id), [onEdit, message.id]);
+  const onDeleteClicked = useCallback(() => onDelete(message.id), [onDelete, message.id]);
+  const onRestoreClicked = useCallback(() => onRestore(message.id), [onRestore, message.id]);
+
+  if (message.deleted_at) {
+    return (
+      <div className={classNames(styles.message)}>
+        <Group className={styles.deleted} horizontal>
+          <Filler>Сообщение удалено</Filler>
+          <Button
+            size="mini"
+            onClick={onRestoreClicked}
+            color="link"
+            iconLeft="restore"
+            className={styles.restore}
+          >
+            Восстановить
+          </Button>
+        </Group>
+
+        <div
+          className={styles.avatar}
+          style={{ backgroundImage: `url("${getURL(message.from.photo, PRESETS.avatar)}")` }}
+        />
+      </div>
+    );
+  }
 
   return (
     <div className={classNames(styles.message, { [styles.incoming]: incoming })}>

src/components/profile/Message/styles.scss

@@ -87,3 +87,15 @@ $outgoing_color: $comment_bg;
   padding: 2px $gap;
   border-radius: $radius;
 }
+
+.restore {
+  color: $red;
+  fill: $red;
+}
+
+.deleted {
+  background: mix($red, $content_bg, 50%);
+  border-radius: $radius $radius $radius 0;
+  padding: $gap / 2;
+  z-index: 2;
+}