From a454b16fc95844f5078cb0b8c3a7d11e034e7608 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 11 Jan 2022 11:37:33 +0700
Subject: [PATCH] fixed image upload button at avatar

---
 .../input/Button/styles.module.scss           |  7 ++---
 .../profile/ProfileAvatar/index.tsx           |  7 ++---
 .../profile/ProfileAvatar/styles.module.scss  | 29 ++-----------------
 3 files changed, 6 insertions(+), 37 deletions(-)

diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss
index ba7951f1..6cd47353 100644
--- a/src/components/input/Button/styles.module.scss
+++ b/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;
diff --git a/src/components/profile/ProfileAvatar/index.tsx b/src/components/profile/ProfileAvatar/index.tsx
index e1723efe..75be4b4f 100644
--- a/src/components/profile/ProfileAvatar/index.tsx
+++ b/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>
   );
 };
diff --git a/src/components/profile/ProfileAvatar/styles.module.scss b/src/components/profile/ProfileAvatar/styles.module.scss
index bb3b6741..b4eb4dbb 100644
--- a/src/components/profile/ProfileAvatar/styles.module.scss
+++ b/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;
 }