added illustrations

src/containers/node/BorisLayout/index.tsx

@@ -4,6 +4,12 @@ import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectNode } from '~/redux/node/selectors';
 import { selectUser } from '~/redux/auth/selectors';
 import { connect } from 'react-redux';
+import { NodeComments } from '~/components/node/NodeComments';
+import styles from './styles.scss';
+import { CommentForm } from '~/components/node/CommentForm';
+import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+import { GodRays } from '~/components/main/GodRays';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
@@ -27,14 +33,26 @@ const id = 696;
 
 const BorisLayoutUnconnected: FC<IProps> = ({
   node: { is_loading, is_loading_comments, comments = [], current: node, related },
+  user: { is_user },
   nodeLoadNode,
 }) => {
   useEffect(() => {
     if (is_loading) return;
-    nodeLoadNode(id);
+    nodeLoadNode(id, 'DESC');
   }, [nodeLoadNode, id]);
 
-  return <div>{comments.length}</div>;
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.cover} />
+      <div className={styles.column} />
+
+      <Group className={styles.container}>
+        {is_user && <CommentForm id={0} />}
+
+        <NodeComments comments={comments} />
+      </Group>
+    </div>
+  );
 };
 
 const BorisLayout = connect(

src/containers/node/BorisLayout/styles.scss

@@ -0,0 +1,47 @@
+.wrap {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: row;
+}
+
+.container {
+  margin-top: 33vh;
+  flex: 3;
+  z-index: 2;
+  padding: $gap;
+  background: $content_bg;
+  border-radius: $radius;
+}
+
+.column {
+  flex: 1;
+  background: $content_bg;
+  height: 400px;
+  position: relative;
+  z-index: 2;
+  margin-top: 33vh;
+  margin-right: $gap;
+  border-radius: $radius;
+}
+
+.content {
+  padding: $gap;
+  text-align: center;
+  font: $font_24_bold;
+  text-transform: uppercase;
+  position: relative;
+  display: none;
+}
+
+.cover {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  // background: linear-gradient($red, transparentize($red, 1));
+  background: 50% 0% no-repeat/cover url('~/sprites/illustrate.svg');
+}