fixed shadows, added author panel

src/components/comment/CommentAvatar/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC, useCallback } from 'react';
+import { getURLFromString } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { openUserProfile } from '~/utils/user';
+
+interface Props {
+  url?: string;
+  username?: string;
+  size?: number;
+  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]);
+
+  return (
+    <div
+      className={classNames(styles.avatar, className)}
+      style={{ backgroundImage }}
+      onClick={onOpenProfile}
+    />
+  );
+};
+
+export { CommentAvatar };

src/components/comment/CommentAvatar/styles.module.scss

@@ -0,0 +1,19 @@
+@import "~/styles/variables";
+
+.avatar {
+  @include outer_shadow;
+
+  width: $comment_height;
+  height: $comment_height;
+  background-color: transparentize(black, 0.9);
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: $radius;
+  background-position: center;
+  background-size: cover;
+  cursor: pointer;
+
+  img {
+    object-fit: cover;
+  }
+}

src/components/comment/CommentContent/styles.module.scss

@@ -3,6 +3,7 @@
 
 .wrap {
   position: relative;
+  @include row_shadow;
 }
 
 .lock,
@@ -51,13 +52,10 @@
 
 .edit {
   top: 28px;
-  background: blue;
 }
 
 .block {
-  @include outer_shadow();
   min-height: $comment_height;
-  // box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -108,7 +106,7 @@
 
 .date {
   position: absolute;
-  bottom: 0;
+  bottom: 1px;
   right: 0;
   font: $font_12_regular;
   color: transparentize($color: white, $amount: 0.8);

src/components/comment/CommentEmbedBlock/styles.module.scss

@@ -43,7 +43,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: transparentize($comment_bg, 0.15) 50% 50%;
+  background: transparentize($content_bg, 0.15) 50% 50%;
   background-size: cover;
   z-index: 15;
   border-radius: $radius;

src/components/comment/CommentForm/styles.module.scss

@@ -10,10 +10,9 @@
 }
 
 .input {
-  @include outer_shadow();
   position: relative;
   flex: 1;
-  padding: ($gap / 2) ($gap / 2 + 1px);
+  padding: 5px;
 }
 
 .buttons {