fixed image upload button at avatar

src/components/profile/ProfileAvatar/index.tsx

@@ -4,6 +4,7 @@ import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import { Icon } from '~/components/input/Icon';
 import { IFile } from '~/types';
+import { Button } from '~/components/input/Button';
 
 export interface ProfileAvatarProps {
   canEdit: boolean;
@@ -33,11 +34,7 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit }
       }}
     >
       {canEdit && <input type="file" onInput={onInputChange} />}
-      {canEdit && (
-        <div className={styles.can_edit}>
-          <Icon icon="photo_add" />
-        </div>
-      )}
+      {canEdit && <Button iconLeft="photo_add" round iconOnly className={styles.can_edit} />}
     </div>
   );
 };

src/components/profile/ProfileAvatar/styles.module.scss

@@ -21,35 +21,10 @@
     height: 100%;
     opacity: 0;
   }
-
-  &:hover {
-    svg {
-      fill: $red;
-    }
-  }
 }
 
 .can_edit {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  touch-action: none;
-  // background: red;
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  padding: $gap / 2;
-  box-sizing: border-box;
-  background: linear-gradient(330deg, $content_bg, transparentize($content_bg, 1));
-  border-radius: $radius;
-
-  svg {
-    width: 32px;
-    height: 32px;
-    fill: white;
-    transition: fill 0.25s;
-  }
+  right: -4px;
+  bottom: -4px;
 }