comment undelete

src/components/input/Button/index.tsx

@@ -55,9 +55,9 @@ const Button: FC<IButtonProps> = memo(
         ...props,
       },
       [
-        iconLeft && <Icon icon={iconLeft} size={20} key={0} />,
+        iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />,
         title ? <span>{title}</span> : children || null,
-        iconRight && <Icon icon={iconRight} size={20} key={2} />,
+        iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />,
       ]
     )
 );

src/components/input/Button/styles.scss

@@ -122,7 +122,7 @@
     padding-right: 10px;
 
     svg {
-      margin: 0;
+      margin: 0 !important;
     }
   }
 
@@ -222,13 +222,13 @@
 }
 
 .icon_left {
-  margin-right: 10px;
+  margin-right: $gap / 2 !important;
   width: 20px;
   height: 20px;
 }
 
 .icon_right {
-  margin-left: 10px;
+  margin-left: $gap / 2 !important;
   width: 20px;
   height: 20px;
 }

src/components/node/CommendDeleted/index.tsx

@@ -0,0 +1,25 @@
+import React, { FC, useCallback } from 'react';
+import styles from './styles.scss';
+import { Button } from '~/components/input/Button';
+import { nodeLockComment } from '~/redux/node/actions';
+import { IComment } from '~/redux/types';
+
+interface IProps {
+  id: IComment['id'];
+  onDelete: typeof nodeLockComment;
+}
+
+const CommendDeleted: FC<IProps> = ({ id, onDelete }) => {
+  const onRestore = useCallback(() => onDelete(id, false), [onDelete]);
+
+  return (
+    <div className={styles.wrap}>
+      <div>Комментарий удалён</div>
+      <Button size="mini" onClick={onRestore} iconLeft="restore">
+        Восстановить
+      </Button>
+    </div>
+  );
+};
+
+export { CommendDeleted };

src/components/node/CommendDeleted/styles.scss

@@ -0,0 +1,13 @@
+.wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  padding: $gap;
+  text-transform: uppercase;
+
+  div {
+    flex: 1;
+    font: $font_14_semibold;
+  }
+}

src/components/node/Comment/index.tsx

@@ -6,6 +6,7 @@ import * as styles from './styles.scss';
 import { nodeLockComment, nodeEditComment } from '~/redux/node/actions';
 import { INodeState } from '~/redux/node/reducer';
 import { CommentForm } from '../CommentForm';
+import { CommendDeleted } from '../CommendDeleted';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
@@ -43,7 +44,7 @@ const Comment: FC<IProps> = memo(
         <div className={styles.wrap}>
           {comment_group.comments.map(comment => {
             if (comment.deleted_at) {
-              return <div key={comment.id}>deleted</div>;
+              return <CommendDeleted id={comment.id} onDelete={onDelete} key={comment.id} />;
             }
 
             if (Object.prototype.hasOwnProperty.call(comment_data, comment.id)) {

src/sprites/Sprites.tsx

@@ -202,6 +202,11 @@ const Sprites: FC<{}> = () => (
       <path d="M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z" />
     </g>
 
+    <g id="restore" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z" />
+    </g>
+
     <g id="youtube" stroke="none">
       <path fill="none" d="M0 0h24v24H0V0z" />
       <g transform="scale(0.1) translate(-30 -30)">