added messages to profile dialog

src/containers/dialogs/BetterScrollDialog/styles.scss

@@ -5,8 +5,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 40px;
+  padding: 70px 20px 40px 20px;
   box-sizing: border-box;
+
+  @include tablet {
+    padding: 70px 5px 5px 5px;
+  }
 }
 
 .container {

src/containers/dialogs/ProfileDialog/index.tsx

@@ -5,6 +5,8 @@ import { ProfileInfo } from '~/containers/profile/ProfileInfo';
 import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
 import { selectAuthProfile } from '~/redux/auth/selectors';
+import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { CommentForm } from '~/components/node/CommentForm';
 
 const mapStateToProps = selectAuthProfile;
 const mapDispatchToProps = {};
@@ -14,9 +16,14 @@ type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & {};
 const ProfileDialogUnconnected: FC<IProps> = ({ onRequestClose, is_loading, user }) => (
   <BetterScrollDialog
     header={<ProfileInfo is_loading={is_loading} user={user} />}
+    footer={<CommentForm id="0" />}
     onClose={onRequestClose}
   >
-    <div className={styles.example} />
+    <div className={styles.messages}>
+      <NodeNoComments />
+      <NodeNoComments />
+      <NodeNoComments />
+    </div>
   </BetterScrollDialog>
 );
 

src/containers/dialogs/ProfileDialog/styles.scss

@@ -0,0 +1,3 @@
+.messages {
+  padding: $gap;
+}

src/containers/profile/ProfileInfo/index.tsx

@@ -1,9 +1,10 @@
 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';
+import { getURL, getPrettyDate } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
 
 interface IProps {
   user?: IUser;
@@ -11,14 +12,23 @@ interface IProps {
 }
 
 const ProfileInfo: FC<IProps> = ({ user, is_loading = false }) => (
-  <Group className={styles.wrap} horizontal>
-    <div className={styles.avatar} />
+  <Group>
+    <Group className={styles.wrap} horizontal>
+      <div
+        className={styles.avatar}
+        style={{
+          backgroundImage: `url("${user && getURL(user.photo, PRESETS.avatar)}")`,
+        }}
+      />
 
-    <Group className={styles.field}>
-      <div className={styles.name}>{is_loading ? <Placeholder width="80%" /> : 'User Name'}</div>
+      <div className={styles.field}>
+        <div className={styles.name}>
+          {is_loading ? <Placeholder width="80%" /> : user.username}
+        </div>
 
-      <div className={styles.desription}>
-        {is_loading ? <Placeholder /> : 'Some description here'}
+        <div className={styles.description}>
+          {is_loading ? <Placeholder /> : getPrettyDate(user.last_seen)}
+        </div>
       </div>
     </Group>
   </Group>

src/containers/profile/ProfileInfo/styles.scss

@@ -2,27 +2,35 @@
   justify-content: flex-start;
   align-items: flex-start !important;
   // min-height: 64px;
-  padding: $gap;
+  // padding: $gap;
   box-sizing: border-box;
+  position: relative;
 }
 
 .avatar {
   @include outer_shadow();
 
   border-radius: $radius;
-  width: 140px;
-  height: 140px;
-  background: $content_bg;
+  width: 100px;
+  height: 100px;
+  background: $content_bg 50% 50% no-repeat/cover;
   position: absolute;
-  top: -60px;
-  left: $gap;
+  bottom: 0;
+  left: 0;
 }
 
 .field {
-  padding-left: 140px;
+  padding-left: 110px;
   flex: 1;
+  padding-bottom: 5px;
 }
 
 .name {
   font: $font_24_bold;
+  margin-bottom: 4px;
+}
+
+.description {
+  color: transparentize($color: white, $amount: 0.7);
+  font: $font_14_regular;
 }