added profile quick info

src/containers/profile/ProfileQuickInfo/index.tsx

@@ -0,0 +1,42 @@
+import React, { FC, useMemo } from 'react';
+
+import { Avatar } from '~/components/common/Avatar';
+import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+import { useRandomPhrase } from '~/constants/phrases';
+import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
+import { IUser } from '~/types/auth';
+import { generateGradientFromColor } from '~/utils/color';
+import { path } from '~/utils/ramda';
+
+import styles from './styles.module.scss';
+
+interface ProfileQuickInfoProps {
+  user: IUser;
+}
+
+const ProfileQuickInfo: FC<ProfileQuickInfoProps> = ({ user }) => {
+  const style = useMemo(() => {
+    const color = user.photo?.metadata?.dominant_color;
+    const gradient = color && generateGradientFromColor(color);
+
+    return gradient ? { background: gradient } : undefined;
+  }, [user]);
+
+  return (
+    <Group className={styles.wrapper} style={style}>
+      <Group className={styles.top} horizontal>
+        <div>
+          <Avatar url={path(['photo', 'url'], user)} username={user.username} />
+        </div>
+
+        <Filler>
+          <h5 className={styles.fullname}>{user.fullname || user.username}</h5>
+          <div className={styles.username}>~{user.username}</div>
+        </Filler>
+      </Group>
+    </Group>
+  );
+};
+
+export { ProfileQuickInfo };

src/containers/profile/ProfileQuickInfo/styles.module.scss

@@ -0,0 +1,28 @@
+@import "src/styles/variables";
+
+.wrapper {
+  @include outer_shadow;
+
+  padding: $gap $gap * 2 $gap $gap;
+  border-radius: $radius;
+  min-width: 240px;
+}
+
+div.info {
+  font: $font_12_regular;
+  opacity: 0.5;
+}
+
+div.top.top {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.username {
+  font: $font_12_regular;
+  opacity: 0.5;
+}
+
+.fullname {
+  margin-bottom: 3px;
+}