added user profile popup

src/components/comment/Comment/index.tsx

@@ -31,10 +31,10 @@ const Comment: FC<IProps> = memo(
     return (
       <CommentWrapper
         className={className}
-        is_empty={is_empty}
-        is_loading={is_loading}
+        isEmpty={is_empty}
+        isLoading={is_loading}
         user={comment_group.user}
-        is_same={is_same}
+        isSame={is_same}
         {...props}
       >
         <div className={styles.wrap}>

src/components/comment/CommentAvatar/index.tsx

@@ -1,27 +1,59 @@
-import React, { FC, useCallback } from 'react';
-import { getURLFromString } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
+import React, { FC, useCallback, useState } from 'react';
+import { IUser } from '~/redux/auth/types';
+import { Avatar } from '~/components/common/Avatar';
+import { path } from 'ramda';
+import { Manager, Popper, Reference } from 'react-popper';
 import styles from './styles.module.scss';
-import classNames from 'classnames';
-import { openUserProfile } from '~/utils/user';
+import { useRandomPhrase } from '~/constants/phrases';
 
 interface Props {
-  url?: string;
-  username?: string;
-  size?: number;
+  user: IUser;
+  withDetails: boolean;
   className?: string;
 }
 
-const CommentAvatar: FC<Props> = ({ url, username, size, className }) => {
-  const backgroundImage = !!url ? `url('${getURLFromString(url, PRESETS.avatar)}')` : undefined;
-  const onOpenProfile = useCallback(() => openUserProfile(username), [username]);
+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]);
 
   return (
-    <div
-      className={classNames(styles.avatar, className)}
-      style={{ backgroundImage }}
-      onClick={onOpenProfile}
-    />
+    <Manager>
+      <Reference>
+        {({ ref }) => (
+          <Avatar
+            url={path(['photo', 'url'], user)}
+            username={user.username}
+            className={className}
+            innerRef={ref}
+            onMouseOver={onMouseOver}
+            onMouseOut={onMouseOut}
+          />
+        )}
+      </Reference>
+
+      {hovered && withDetails && (
+        <Popper placement="right" modifiers={modifiers}>
+          {({ 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/comment/CommentAvatar/styles.module.scss

@@ -1,19 +1,33 @@
-@import "~/styles/variables";
+@import "~/styles/variables.scss";
 
-.avatar {
+@keyframes appear {
+  0% { opacity: 0 }
+  100% { opacity: 1 }
+}
+
+.popper {
   @include outer_shadow;
 
-  width: $comment_height;
-  height: $comment_height;
-  background-color: transparentize(black, 0.9);
-  flex-shrink: 0;
-  overflow: hidden;
+  background-color: darken($content_bg, 4%);
+  padding: $gap;
+  box-sizing:border-box;
+  z-index: 4;
+  touch-action: none;
+  pointer-events: none;
   border-radius: $radius;
-  background-position: center;
-  background-size: cover;
-  cursor: pointer;
-
-  img {
-    object-fit: cover;
-  }
+  animation: appear forwards 250ms;
+}
+
+.username {
+  font: $font_18_semibold;
+  line-height: 1.25em;
+}
+
+.description {
+  @include clamp(2, 12px);
+
+  font: $font_12_regular;
+  opacity: 0.5;
+  margin-top: 3px;
+  line-height: 1.25em;
 }