Web: Components: add avatar edit button

packages/asc-web-components/avatar/avatar.stories.js

@@ -27,5 +27,4 @@ Default.args = {
   source: "",
   userName: "",
   editing: false,
-  editLabel: "Edit photo",
 };

packages/asc-web-components/avatar/index.js

@@ -4,7 +4,6 @@ import styled from "styled-components";
 
 import { GuestIcon, AdministratorIcon, OwnerIcon } from "./svg";
 import {
-  EditLink,
   EmptyIcon,
   EditContainer,
   AvatarWrapper,
@@ -13,7 +12,7 @@ import {
   StyledImage,
   StyledAvatar,
 } from "./styled-avatar";
-import Link from "../link";
+import IconButton from "../icon-button";
 import commonIconsStyles from "../utils/common-icons-style";
 
 const whiteColor = "#FFFFFF";
@@ -57,15 +56,7 @@ Initials.propTypes = {
 // eslint-disable-next-line react/display-name
 const Avatar = (props) => {
   //console.log("Avatar render");
-  const {
-    size,
-    source,
-    userName,
-    role,
-    editing,
-    editLabel,
-    editAction,
-  } = props;
+  const { size, source, userName, role, editing, editAction } = props;
 
   const avatarContent = source ? (
     <StyledImage src={source} />
@@ -83,21 +74,13 @@ const Avatar = (props) => {
         {avatarContent}
       </AvatarWrapper>
       {editing && size === "max" && (
-        <EditContainer gradient={!!source}>
-          <EditLink>
-            <Link
-              type="action"
-              title={editLabel}
-              isTextOverflow={true}
-              isHovered={true}
-              fontSize="14px"
-              fontWeight={600}
-              color={whiteColor}
-              onClick={editAction}
-            >
-              {editLabel}
-            </Link>
-          </EditLink>
+        <EditContainer>
+          <IconButton
+            color={whiteColor}
+            iconName="/static/images/pencil.react.svg"
+            onClick={editAction}
+            size={16}
+          />
         </EditContainer>
       )}
       <RoleWrapper size={size}>{roleIcon}</RoleWrapper>
@@ -112,8 +95,6 @@ Avatar.propTypes = {
   role: PropTypes.oneOf(["owner", "admin", "guest", "user"]),
   /** The address of the image for an image avatar */
   source: PropTypes.string,
-  /** Displays avatar edit layer */
-  editLabel: PropTypes.string,
   userName: PropTypes.string,
   editing: PropTypes.bool,
   /** Function called when the avatar change button is pressed */
@@ -130,7 +111,6 @@ Avatar.defaultProps = {
   size: "medium",
   role: "",
   source: "",
-  editLabel: "Edit photo",
   userName: "",
   editing: false,
 };

packages/asc-web-components/avatar/styled-avatar.js

@@ -5,7 +5,6 @@ import NoUserSelect from "../utils/commonStyles";
 import { CameraIcon } from "./svg";
 import commonIconsStyles from "../utils/common-icons-style";
 
-
 const EditLink = styled.div`
   padding-left: ${(props) => props.theme.avatar.editLink.paddingLeft};
   padding-right: ${(props) => props.theme.avatar.editLink.paddingRight};
@@ -29,21 +28,17 @@ const EmptyIcon = styled(CameraIcon)`
 EmptyIcon.defaultProps = { theme: Base };
 
 const EditContainer = styled.div`
-  box-sizing: ${(props) => props.theme.avatar.editContainer.boxSizing};
   position: absolute;
-  width: ${(props) => props.theme.avatar.editContainer.width};
-  height: ${(props) => props.theme.avatar.editContainer.height};
-  top: ${(props) => props.theme.avatar.editContainer.top};
-  left: ${(props) => props.theme.avatar.editContainer.left};
-  transform: ${(props) => props.theme.avatar.editContainer.transform};
-  padding: ${(props) => props.theme.avatar.editContainer.padding};
-  text-align: ${(props) => props.theme.avatar.editContainer.textAlign};
-  line-height: ${(props) => props.theme.avatar.editContainer.lineHeight};
+  display: flex;
+  right: ${(props) => props.theme.avatar.editContainer.right};
+  bottom: ${(props) => props.theme.avatar.editContainer.bottom};
+  background-color: ${(props) =>
+    props.theme.avatar.editContainer.backgroundColor};
   border-radius: ${(props) => props.theme.avatar.editContainer.borderRadius};
-  background: ${(props) =>
-    props.gradient
-      ? props.theme.avatar.editContainer.linearGradient
-      : props.theme.avatar.editContainer.transparent};
+  height: ${(props) => props.theme.avatar.editContainer.height};
+  width: ${(props) => props.theme.avatar.editContainer.width};
+  align-items: center;
+  justify-content: center;
 `;
 EditContainer.defaultProps = { theme: Base };
 

packages/asc-web-components/themes/base.js

@@ -917,19 +917,12 @@ const Base = {
     },
 
     editContainer: {
-      boxSizing: "border-box",
-      width: "100%",
-      height: "100%",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      padding: "75% 16px 5px",
-      textAlign: "center",
-      lineHeight: "19px",
+      right: "4px",
+      bottom: "4px",
+      backgroundColor: "#265a8f",
       borderRadius: "50%",
-      linearGradient:
-        "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)",
-      transparent: "transparent",
+      height: "32px",
+      width: "32px",
     },
 
     editLink: {

packages/asc-web-components/themes/dark.js

@@ -880,19 +880,12 @@ const Dark = {
       },
     },
     editContainer: {
-      boxSizing: "border-box",
-      width: "100%",
-      height: "100%",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      padding: "75% 16px 5px",
-      textAlign: "center",
-      lineHeight: "19px",
+      right: "4px",
+      bottom: "4px",
+      backgroundColor: "#265a8f",
       borderRadius: "50%",
-      linearGradient:
-        "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)",
-      transparent: "transparent",
+      height: "32px",
+      width: "32px",
     },
 
     editLink: {