fixed image upload button at avatar

src/components/input/Button/styles.module.scss

@@ -10,6 +10,8 @@
 }
 
 .button {
+  @include outer_shadow();
+
   position: relative;
   height: $input_height;
   border: none;
@@ -34,12 +36,7 @@
   align-items: center;
   justify-content: center;
 
-  filter: grayscale(0);
-
   transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
-  opacity: 0.8;
-
-  @include outer_shadow();
 
   input {
     position: absolute;

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 && (
+      {canEdit && <Button iconLeft="photo_add" round iconOnly className={styles.can_edit} />}
-        <div className={styles.can_edit}>
-          <Icon icon="photo_add" />
-        </div>
-      )}
     </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;
+  right: -4px;
-  left: 0;
+  bottom: -4px;
-  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;
-  }
 }