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;
+  }
 }

src/sprites/Sprites.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC } from "react";
 
 const Sprites: FC<{}> = () => (
   <svg width={0} height={0} viewBox="0 0 24 24">
@@ -186,6 +186,11 @@ const Sprites: FC<{}> = () => (
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z" />
     </g>
+
+    <g id="photo_add" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M3 4V1h2v3h3v2H5v3H3V6H0V4h3zm3 6V7h3V4h7l1.83 2H21c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V10h3zm7 9c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-3.2-5c0 1.77 1.43 3.2 3.2 3.2s3.2-1.43 3.2-3.2-1.43-3.2-3.2-3.2-3.2 1.43-3.2 3.2z" />
+    </g>
   </svg>
 );