diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx index 853311f6..0346b3e7 100644 --- a/src/components/input/Button/index.tsx +++ b/src/components/input/Button/index.tsx @@ -55,9 +55,9 @@ const Button: FC = memo( ...props, }, [ - iconLeft && , + iconLeft && , title ? {title} : children || null, - iconRight && , + iconRight && , ] ) ); diff --git a/src/components/input/Button/styles.scss b/src/components/input/Button/styles.scss index 07761529..5dd24338 100644 --- a/src/components/input/Button/styles.scss +++ b/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; } diff --git a/src/components/node/CommendDeleted/index.tsx b/src/components/node/CommendDeleted/index.tsx new file mode 100644 index 00000000..e2fccb91 --- /dev/null +++ b/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 = ({ id, onDelete }) => { + const onRestore = useCallback(() => onDelete(id, false), [onDelete]); + + return ( +
+
Комментарий удалён
+ +
+ ); +}; + +export { CommendDeleted }; diff --git a/src/components/node/CommendDeleted/styles.scss b/src/components/node/CommendDeleted/styles.scss new file mode 100644 index 00000000..19f37344 --- /dev/null +++ b/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; + } +} diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx index e43c244b..bf9c01dd 100644 --- a/src/components/node/Comment/index.tsx +++ b/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 & { is_empty?: boolean; @@ -43,7 +44,7 @@ const Comment: FC = memo(
{comment_group.comments.map(comment => { if (comment.deleted_at) { - return
deleted
; + return ; } if (Object.prototype.hasOwnProperty.call(comment_data, comment.id)) { diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index 3ebcd592..9d8e9a01 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -202,6 +202,11 @@ const Sprites: FC<{}> = () => ( + + + + +