uploading avatar

src/containers/profile/ProfileAvatar/index.tsx

@@ -16,6 +16,7 @@ import {
 import path from "ramda/es/path";
 import * as UPLOAD_ACTIONS from "~/redux/uploads/actions";
 import * as AUTH_ACTIONS from "~/redux/auth/actions";
+import { Icon } from "~/components/input/Icon";
 
 const mapStateToProps = state => ({
   user: pick(["id"], selectAuthUser(state)),
@@ -94,6 +95,11 @@ const ProfileAvatarUnconnected: FC<IProps> = ({
       }}
     >
       {can_edit && <input type="file" onInput={onInputChange} />}
+      {can_edit && (
+        <div className={styles.can_edit}>
+          <Icon icon="photo_add" />
+        </div>
+      )}
     </div>
   );
 };

src/containers/profile/ProfileAvatar/styles.scss

@@ -8,4 +8,49 @@
   position: absolute;
   bottom: 0;
   left: $gap;
+  cursor: pointer;
+
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    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;
+  }
 }