added messages to profile dialog

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>