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>

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;
 }