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 = [
-  {
-    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]);
-
+const CommentAvatar: FC<Props> = ({ user, className }) => {
   return (
-    <Manager>
-      <Reference>
-        {({ ref }) => (
-          <Avatar
-            url={path(['photo', 'url'], user)}
-            username={user.username}
-            className={className}
-            onMouseOver={onMouseOver}
-            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>
+    <MenuButton
+      position="top"
+      icon={
+        <Avatar url={path(['photo', 'url'], user)} username={user.username} className={className} />
+      }
+    >
+      <ProfileQuickInfo user={user} />
+    </MenuButton>
   );
 };
 

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
-              style={style}
-              ref={ref}
-              className={classNames(styles.popper, { [styles.top]: placement === 'top-end' })}
-            >
+            <div style={style} ref={ref} className={classNames(styles.popper, styles[placement])}>
               {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;
+  }
 }