added profile quick info

src/components/comment/CommentAvatar/index.tsx

@@ -3,60 +3,26 @@ import React, { FC, useCallback, useState } from 'react';
 import { Manager, Popper, Reference } from 'react-popper';
 
 import { Avatar } from '~/components/common/Avatar';
-import { useRandomPhrase } from '~/constants/phrases';
+import { MenuButton } from '~/components/menu';
+import { ProfileQuickInfo } from '~/containers/profile/ProfileQuickInfo';
 import { IUser } from '~/types/auth';
 import { path } from '~/utils/ramda';
 
-import styles from './styles.module.scss';
-
 interface Props {
   user: IUser;
-  withDetails: boolean;
   className?: string;
 }
 
-const modifiers = [
+const CommentAvatar: FC<Props> = ({ user, className }) => {
-  {
-    name: 'offset',
-    options: {
-      offset: [0, 10],
-    },
-  },
-];
-
-const CommentAvatar: FC<Props> = ({ user, withDetails, className }) => {
-  const [hovered, setHovered] = useState(false);
-  const randomPhrase = useRandomPhrase('USER_DESCRIPTION');
-
-  const onMouseOver = useCallback(() => setHovered(true), [setHovered]);
-  const onMouseOut = useCallback(() => setHovered(false), [setHovered]);
-
   return (
-    <Manager>
+    <MenuButton
-      <Reference>
+      position="top"
-        {({ ref }) => (
+      icon={
-          <Avatar
+        <Avatar url={path(['photo', 'url'], user)} username={user.username} className={className} />
-            url={path(['photo', 'url'], user)}
+      }
-            username={user.username}
+    >
-            className={className}
+      <ProfileQuickInfo user={user} />
-            onMouseOver={onMouseOver}
+    </MenuButton>
-            onMouseOut={onMouseOut}
-            ref={ref}
-          />
-        )}
-      </Reference>
-
-      {hovered && withDetails && (
-        <Popper placement="right" modifiers={modifiers} strategy="fixed">
-          {({ style, ref }) => (
-            <div style={style} ref={ref} className={styles.popper}>
-              <h4 className={styles.username}>{user.fullname || user.username}</h4>
-              <div className={styles.description}>{user.description || randomPhrase}</div>
-            </div>
-          )}
-        </Popper>
-      )}
-    </Manager>
   );
 };
 

src/components/common/Avatar/index.tsx

@@ -19,14 +19,11 @@ interface Props extends DivProps {
 
 const Avatar = forwardRef<HTMLDivElement, Props>(
   ({ url, username, size, className, preset = ImagePresets.avatar, ...rest }, ref) => {
-    const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
-
     return (
       <Square
         {...rest}
         image={getURLFromString(url, preset)}
         className={classNames(styles.avatar, className)}
-        onClick={onOpenProfile}
         size={size}
         ref={ref}
       />

src/components/containers/CommentWrapper/index.tsx

@@ -36,7 +36,7 @@ const CommentWrapper: FC<IProps> = ({
     {...props}
   >
     <div className={styles.thumb}>
-      <CommentAvatar user={user} className={styles.thumb_image} withDetails={!isForm} />
+      <CommentAvatar user={user} className={styles.thumb_image} />
       <div className={styles.thumb_user}>~{path(['username'], user)}</div>
     </div>
 

src/components/menu/MenuButton/index.tsx

@@ -9,6 +9,7 @@ import { useFocusEvent } from '~/hooks/dom/useFocusEvent';
 import styles from './styles.module.scss';
 
 interface MenuButtonProps {
+  position?: 'top-end' | 'bottom-end' | 'top-start' | 'bottom-start' | 'top' | 'bottom';
   icon?: ReactNode;
   className?: string;
 }
@@ -23,11 +24,12 @@ const modifiers = [
 ];
 
 const MenuButton: FC<MenuButtonProps> = ({
+  position = 'bottom-end',
   children,
   className,
   icon = <Icon icon="dots-vertical" size={24} />,
 }) => {
-  const { focused, onFocus, onBlur } = useFocusEvent(false, 150);
+  const { focused, onFocus, onBlur } = useFocusEvent(true, 150);
 
   return (
     <Manager>
@@ -45,13 +47,9 @@ const MenuButton: FC<MenuButtonProps> = ({
       </Reference>
 
       {focused && (
-        <Popper placement="bottom-end" modifiers={modifiers}>
+        <Popper placement={position} modifiers={modifiers}>
           {({ style, ref, placement }) => (
-            <div
+            <div style={style} ref={ref} className={classNames(styles.popper, styles[placement])}>
-              style={style}
-              ref={ref}
-              className={classNames(styles.popper, { [styles.top]: placement === 'top-end' })}
-            >
               {children}
             </div>
           )}

src/components/menu/MenuButton/styles.module.scss

@@ -31,10 +31,29 @@
     right: 10px;
   }
 
-  &.top::after {
+  &.top-end::after {
     border-width: 10px 10px 0 10px;
     border-color: darken($menu_bg, 8%) transparent transparent transparent;
     top: auto;
     bottom: -11px;
   }
+
+  &.top-start::after {
+    border-width: 10px 10px 0 10px;
+    border-color: darken($menu_bg, 8%) transparent transparent transparent;
+    top: auto;
+    bottom: -11px;
+    right: auto;
+    left: 10px;
+  }
+
+  &.top::after {
+    border-width: 10px 10px 0 10px;
+    border-color: darken($menu_bg, 8%) transparent transparent transparent;
+    top: auto;
+    bottom: -11px;
+    right: auto;
+    left: 50%;
+    margin-left: -10px;
+  }
 }

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

src/hooks/color/useColorGradientFromString.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { adjustHue } from 'color2k';
 
-import { normalizeBrightColor } from '~/utils/color';
+import { generateGradientFromColor, normalizeBrightColor } from '~/utils/color';
 import { stringToColour } from '~/utils/dom';
 
 export const useColorGradientFromString = (
@@ -16,9 +16,5 @@ export const useColorGradientFromString = (
       return '';
     }
 
-    const color = normalizeBrightColor(stringToColour(val), saturation, lightness);
+    return generateGradientFromColor(val, saturation, lightness, angle);
-    const second = normalizeBrightColor(adjustHue(color, 45), saturation, lightness);
-    const third = normalizeBrightColor(adjustHue(color, 90), saturation, lightness);
-
-    return `linear-gradient(${angle}deg, ${color}, ${second}, ${third})`;
   }, [angle, lightness, saturation, val]);

src/utils/color.ts

@@ -1,6 +1,7 @@
-import { darken, desaturate, parseToHsla } from 'color2k';
+import { adjustHue, darken, desaturate, parseToHsla } from 'color2k';
 
 import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
+import { stringToColour } from '~/utils/dom';
 
 export const normalizeBrightColor = (color?: string, saturationExp = 3, lightnessExp = 3) => {
   if (!color) {
@@ -14,3 +15,23 @@ export const normalizeBrightColor = (color?: string, saturationExp = 3, lightnes
   const desaturated = saturationExp > 1 ? desaturate(color, saturation ** saturationExp) : color;
   return lightnessExp > 1 ? darken(desaturated, lightness ** lightnessExp) : desaturated;
 };
+
+export const generateColorTriplet = (val: string, saturation: number, lightness: number) => {
+  const color = normalizeBrightColor(stringToColour(val), saturation, lightness);
+
+  return [
+    color,
+    normalizeBrightColor(adjustHue(color, 45), saturation, lightness),
+    normalizeBrightColor(adjustHue(color, 90), saturation, lightness),
+  ];
+};
+
+export const generateGradientFromColor = (
+  val: string,
+  saturation = 3,
+  lightness = 3,
+  angle = 155
+) => {
+  const [color, second, third] = generateColorTriplet(val, saturation, lightness);
+  return `linear-gradient(${angle}deg, ${color}, ${second}, ${third})`;
+};