added initial profile dialog

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