added deletion badge

src/components/node/NodeDeletedBadge/index.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import styles from './styles.scss';
+
+interface IProps {}
+
+const NodeDeletedBadge: FC<IProps> = ({}) => {
+  return <div className={styles.badge}>Эта ячейка заблокирована. Её не никто не увидит.</div>;
+};
+
+export { NodeDeletedBadge };

src/components/node/NodeDeletedBadge/styles.scss

@@ -0,0 +1,9 @@
+.badge {
+  padding: $gap;
+  text-align: center;
+  border-radius: $radius;
+  color: $red;
+  padding: $gap * 4 $gap;
+  text-transform: uppercase;
+  font: $font_18_semibold;
+}

src/containers/node/NodeLayout/index.tsx

@@ -19,6 +19,7 @@ import { CommentForm } from '~/components/node/CommentForm';
 import { selectUser } from '~/redux/auth/selectors';
 import pick from 'ramda/es/pick';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
+import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
@@ -108,6 +109,9 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
           is_loading={is_loading}
         />
 
+        {node.deleted_at ? (
+          <NodeDeletedBadge />
+        ) : (
           <Group>
             <Padder>
               <Group horizontal className={styles.content}>
@@ -157,6 +161,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
               </Group>
             </Padder>
           </Group>
+        )}
       </Card>
     );
   }