fixed shadows, added author panel

src/components/containers/CommentWrapper/index.tsx

@@ -2,14 +2,12 @@ import React, { FC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import styles from './styles.module.scss';
-import { Card } from '../Card';
 import { IUser } from '~/redux/auth/types';
-import { getURL } from '~/utils/dom';
 import { path } from 'ramda';
-import { PRESETS } from '~/constants/urls';
+import { CommentAvatar } from '~/components/comment/CommentAvatar';
+import { Card } from '~/components/containers/Card';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
-  // photo?: string;
   user: IUser;
   is_empty?: boolean;
   is_loading?: boolean;
@@ -26,22 +24,19 @@ const CommentWrapper: FC<IProps> = ({
   user,
   ...props
 }) => (
-  <Card
-    className={classNames(styles.wrap, className, { is_empty, is_loading, is_same })}
-    seamless
-    {...props}
-  >
+  <div className={classNames(styles.wrap, className, { is_empty, is_loading, is_same })} {...props}>
     <div className={styles.thumb}>
-      <div
+      <CommentAvatar
+        url={path(['photo', 'url'], user)}
+        username={user.username}
         className={styles.thumb_image}
-        style={{ backgroundImage: `url("${getURL(path(['photo'], user), PRESETS.avatar)}")` }}
-        onClick={() => window.postMessage({ type: 'username', username: user.username }, '*')}
       />
+
       <div className={styles.thumb_user}>~{path(['username'], user)}</div>
     </div>
 
     <div className={styles.text}>{children}</div>
-  </Card>
+  </div>
 );
 
 export { CommentWrapper };

src/components/containers/CommentWrapper/styles.module.scss

@@ -1,12 +1,14 @@
 @import "src/styles/variables";
 
 .wrap {
+  @include outer_shadow;
+
   background: $comment_bg;
   min-height: $comment_height;
   display: flex;
   position: relative;
-  box-shadow: none;
   min-width: 0;
+  border-radius: $radius;
 
   &:global(.is_empty) {
     opacity: 0.5;
@@ -54,7 +56,7 @@
   }
 }
 
-.thumb_image {
+div.thumb_image {
   height: $comment_height;
   background: transparentize(white, 0.97) no-repeat 50% 50%;
   border-radius: $panel_radius 0 0 $panel_radius;
@@ -65,6 +67,7 @@
 
   @include tablet {
     height: 32px;
+    width: 32px;
     flex: 0 0 32px;
     border-radius: $panel_radius;
   }

src/components/containers/TagField/styles.module.scss

@@ -7,6 +7,6 @@
   flex-wrap: wrap;
 
   &> * {
-    margin: 0 $gap $gap 0;
+    margin: $gap / 2;
   }
 }