added empty avatar placeholder

src/components/common/Avatar/index.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import { Square } from '~/components/common/Square';
 import { ImagePresets } from '~/constants/urls';
+import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { getURLFromString } from '~/utils/dom';
 import { DivProps } from '~/utils/types';
 
@@ -17,17 +18,20 @@ interface Props extends DivProps {
 }
 
 const Avatar = forwardRef<HTMLDivElement, Props>(
-  ({ url, username, size, className, preset = ImagePresets.avatar, ...rest }, ref) => {
+  (
+    { url, username, size, className, preset = ImagePresets.avatar, ...rest },
+    ref,
+  ) => {
     return (
       <Square
         {...rest}
-        image={getURLFromString(url, preset)}
+        image={getURLFromString(url, preset) || '/images/john_doe.svg'}
         className={classNames(styles.avatar, className)}
         size={size}
         ref={ref}
       />
     );
-  }
+  },
 );
 
 export { Avatar };

src/components/common/Square/index.tsx

@@ -19,14 +19,14 @@ const Square = forwardRef<HTMLDivElement, SquareProps>(
       <div
         {...rest}
         className={classNames(styles.wrapper, rest.className)}
-        style={{ backgroundImage, width: size }}
+        style={{ backgroundImage, width: size, height: size, flexBasis: size }}
         ref={ref}
       >
         <svg className={styles.svg} viewBox="0 0 1 1" />
         {!!children && <div className={styles.content}>{children}</div>}
       </div>
     );
-  }
+  },
 );
 
 export { Square };

src/components/main/UserButton/index.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 
+import { Avatar } from '~/components/common/Avatar';
 import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
 import { ImagePresets } from '~/constants/urls';
@@ -19,15 +20,7 @@ const UserButton: FC<IProps> = ({ username, photo, onClick }) => {
     <button className={styles.wrap} onClick={onClick}>
       <Group horizontal className={styles.user_button}>
         <div className={styles.username}>{username}</div>
-
-        <div
-          className={styles.user_avatar}
-          style={{
-            backgroundImage: `url('${getURL(photo, ImagePresets.avatar)}')`,
-          }}
-        >
-          {(!photo || !photo.id) && <Icon icon="profile" />}
-        </div>
+        <Avatar url={getURL(photo, ImagePresets.avatar)} size={32} />
       </Group>
     </button>
   );

src/components/profile/ProfileAvatar/index.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, FC, useCallback } from 'react';
 
+import { Avatar } from '~/components/common/Avatar';
 import { Button } from '~/components/input/Button';
 import { ImagePresets } from '~/constants/urls';
 import { IFile } from '~/types';
@@ -36,14 +37,7 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({
     : undefined;
 
   return (
-    <div
-      className={styles.avatar}
-      style={{
-        backgroundImage,
-        width: size,
-        height: size,
-      }}
-    >
+    <Avatar url={backgroundImage} size={size} className={styles.avatar}>
       {canEdit && <input type="file" onInput={onInputChange} />}
       {canEdit && (
         <Button
@@ -54,7 +48,7 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({
           className={styles.button}
         />
       )}
-    </div>
+    </Avatar>
   );
 };