added initial profile dialog

src/containers/App.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import { ConnectedRouter } from 'connected-react-router';
@@ -8,7 +8,6 @@ import { FlowLayout } from '~/containers/flow/FlowLayout';
 import { MainLayout } from '~/containers/main/MainLayout';
 import { ImageExample } from '~/containers/examples/ImageExample';
 import { EditorExample } from '~/containers/examples/EditorExample';
-import { HorizontalExample } from '~/containers/examples/HorizontalExample';
 import { Sprites } from '~/sprites/Sprites';
 import { URLS } from '~/constants/urls';
 import { Modal } from '~/containers/dialogs/Modal';
@@ -19,6 +18,7 @@ import { NodeLayout } from './node/NodeLayout';
 import { BottomContainer } from '~/containers/main/BottomContainer';
 import { BorisLayout } from './node/BorisLayout';
 import { ErrorNotFound } from './pages/ErrorNotFound';
+import { ProfileLayout } from './profile/ProfileLayout';
 
 const mapStateToProps = state => ({
   modal: selectModal(state),

src/containers/dialogs/ProfileDialog/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import { BetterScrollDialog } from '../BetterScrollDialog';
+import styles from './styles.scss';
+import { ProfileInfo } from '~/containers/profile/ProfileInfo';
+import { IDialogProps } from '~/redux/types';
+import { connect } from 'react-redux';
+import { selectAuthProfile } from '~/redux/auth/selectors';
+
+const mapStateToProps = selectAuthProfile;
+const mapDispatchToProps = {};
+
+type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & {};
+
+const ProfileDialogUnconnected: FC<IProps> = ({ onRequestClose, is_loading, user }) => (
+  <BetterScrollDialog
+    header={<ProfileInfo is_loading={is_loading} user={user} />}
+    onClose={onRequestClose}
+  >
+    <div className={styles.example} />
+  </BetterScrollDialog>
+);
+
+const ProfileDialog = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ProfileDialogUnconnected);
+
+export { ProfileDialog };

src/containers/node/BorisLayout/index.tsx

@@ -9,6 +9,7 @@ import styles from './styles.scss';
 import { CommentForm } from '~/components/node/CommentForm';
 import { Group } from '~/components/containers/Group';
 import boris from '~/sprites/boris_robot.svg';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
@@ -78,7 +79,11 @@ const BorisLayoutUnconnected: FC<IProps> = ({
         <Group className={styles.content}>
           {is_user && <CommentForm id={0} />}
 
-          <NodeComments comments={comments} />
+          {is_loading_comments ? (
+            <NodeNoComments is_loading />
+          ) : (
+            <NodeComments comments={comments} />
+          )}
         </Group>
       </div>
     </div>

src/containers/node/BorisLayout/styles.scss

@@ -11,6 +11,7 @@
   padding: $gap;
   background: $content_bg;
   border-radius: $radius;
+  flex: 0 1 $limited_width;
 }
 
 .column {
@@ -70,12 +71,13 @@
   align-items: flex-start;
   justify-content: center;
   flex-direction: row;
-  width: 80%;
-  margin: auto;
+  flex: 0 1 $limited_width;
+  width: 100%;
+  // margin: auto;
 
-  @include tablet {
-    width: 100%;
-  }
+  // @include tablet {
+  // width: 100%;
+  // }
 }
 
 .image {
@@ -101,9 +103,10 @@
 
 .caption {
   position: absolute;
-  left: 0;
+  left: 50%;
   bottom: 0;
-  width: 50%;
+  width: 100%;
+  max-width: $limited_width;
   height: 100%;
   display: flex;
   align-items: flex-start;
@@ -114,6 +117,7 @@
   flex-direction: column;
   padding-bottom: $gap * 2;
   padding: 0 10% $gap * 2;
+  transform: translate(-50%, 0);
 
   @include tablet {
     align-items: flex-start;

src/containers/profile/ProfileInfo/index.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { IUser } from '~/redux/auth/types';
+import styles from './styles.scss';
+import { Grid } from '~/components/containers/Grid';
+import { Group } from '~/components/containers/Group';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+
+interface IProps {
+  user?: IUser;
+  is_loading?: boolean;
+}
+
+const ProfileInfo: FC<IProps> = ({ user, is_loading = false }) => (
+  <Group className={styles.wrap} horizontal>
+    <div className={styles.avatar} />
+
+    <Group className={styles.field}>
+      <div className={styles.name}>{is_loading ? <Placeholder width="80%" /> : 'User Name'}</div>
+
+      <div className={styles.desription}>
+        {is_loading ? <Placeholder /> : 'Some description here'}
+      </div>
+    </Group>
+  </Group>
+);
+
+export { ProfileInfo };

src/containers/profile/ProfileInfo/styles.scss

@@ -0,0 +1,28 @@
+.wrap {
+  justify-content: flex-start;
+  align-items: flex-start !important;
+  // min-height: 64px;
+  padding: $gap;
+  box-sizing: border-box;
+}
+
+.avatar {
+  @include outer_shadow();
+
+  border-radius: $radius;
+  width: 140px;
+  height: 140px;
+  background: $content_bg;
+  position: absolute;
+  top: -60px;
+  left: $gap;
+}
+
+.field {
+  padding-left: 140px;
+  flex: 1;
+}
+
+.name {
+  font: $font_24_bold;
+}

src/containers/profile/ProfileLayout/index.tsx

@@ -0,0 +1,58 @@
+import React, { FC, useEffect, useState } from 'react';
+import { useRouteMatch, withRouter, RouteComponentProps } from 'react-router';
+import styles from './styles.scss';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { Grid } from '~/components/containers/Grid';
+import { CommentForm } from '~/components/node/CommentForm';
+import { ProfileInfo } from '../ProfileInfo';
+import * as NODE_ACTIONS from '~/redux/node/actions';
+import { connect } from 'react-redux';
+import { IUser } from '~/redux/auth/types';
+import { Group } from '~/components/containers/Group';
+
+const mapStateToProps = () => ({});
+const mapDispatchToProps = {
+  nodeSetCoverImage: NODE_ACTIONS.nodeSetCoverImage,
+};
+
+type IProps = RouteComponentProps & typeof mapDispatchToProps & {};
+
+const ProfileLayoutUnconnected: FC<IProps> = ({ history, nodeSetCoverImage }) => {
+  const {
+    params: { username },
+  } = useRouteMatch<{ username: string }>();
+  const [user, setUser] = useState<IUser>(null);
+
+  useEffect(() => {
+    if (user) setUser(null);
+  }, [username]);
+
+  useEffect(() => {
+    if (user && user.id && user.cover) {
+      nodeSetCoverImage(user.cover);
+      return () => nodeSetCoverImage(null);
+    }
+  }, [user]);
+
+  return (
+    <Group className={styles.wrap} horizontal>
+      <div className={styles.column}>
+        <ProfileInfo user={user} />
+      </div>
+
+      <Grid className={styles.content}>
+        <div className={styles.comments}>
+          <CommentForm id={0} />
+          <NodeNoComments is_loading={false} />
+        </div>
+      </Grid>
+    </Group>
+  );
+};
+
+const ProfileLayout = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withRouter(ProfileLayoutUnconnected));
+
+export { ProfileLayout };

src/containers/profile/ProfileLayout/styles.scss

@@ -0,0 +1,27 @@
+.wrap {
+  display: flex;
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+  flex-direction: row;
+  flex: 1;
+}
+
+.content {
+  flex: 3;
+  // flex: 0 1 $limited_width;
+  // padding: $gap;
+  box-sizing: border-box;
+}
+
+.column {
+  flex: 1;
+}
+
+.info {
+}
+
+.comments {
+  background: $node_bg;
+  border-radius: $radius;
+  padding: $gap;
+}