From 1dfe675e480052d9580005be517205d78f8168ce Mon Sep 17 00:00:00 2001
From: liudmylakostenko <lkostenko@wagepoint.com>
Date: Wed, 14 Feb 2024 16:28:36 +0200
Subject: [PATCH 1/2] added possibility of removing avatar

---
 .../form/avatar-input/form-avatar-input.tsx   | 69 ++++++++++++++++---
 1 file changed, 60 insertions(+), 9 deletions(-)

diff --git a/src/components/form/avatar-input/form-avatar-input.tsx b/src/components/form/avatar-input/form-avatar-input.tsx
index b13b48ec..cd4808f9 100644
--- a/src/components/form/avatar-input/form-avatar-input.tsx
+++ b/src/components/form/avatar-input/form-avatar-input.tsx
@@ -6,7 +6,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import { styled } from "@mui/material/styles";
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { useDropzone } from "react-dropzone";
 import {
   Controller,
@@ -15,10 +15,12 @@ import {
   FieldValues,
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import IconButton from "@mui/material/IconButton";
+import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
 
 type AvatarInputProps = {
   error?: string;
-  onChange: (value: FileEntity) => void;
+  onChange: (value: FileEntity | null) => void;
   onBlur: () => void;
   value?: FileEntity;
   disabled?: boolean;
@@ -41,6 +43,38 @@ const AvatarInputContainer = styled(Box)(({ theme }) => ({
   },
 }));
 
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  left: theme.spacing(2.25),
+  top: theme.spacing(1.87),
+}));
+
+const StyledWrapperAvatar = styled(Box)(() => ({
+  position: "relative",
+  width: "28%",
+}));
+
+const StyledOverlay = styled(Box)(() => {
+  return {
+    width: 100,
+    height: 100,
+    borderRadius: "50%",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    background: "rgba(0, 0, 0, 0.5)",
+    transition: ".5s ease",
+    opacity: 0,
+    "&:hover": {
+      opacity: 1,
+    },
+  };
+});
+
+const StyledAvatar = styled(Avatar)(({}) => ({
+  width: 100,
+  height: 100,
+}));
+
 function AvatarInput(props: AvatarInputProps) {
   const { onChange } = props;
   const { t } = useTranslation();
@@ -68,6 +102,13 @@ function AvatarInput(props: AvatarInputProps) {
     disabled: isLoading || props.disabled,
   });
 
+  const removeAvatarHandle = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    event.stopPropagation();
+    onChange(null);
+  };
+
   return (
     <AvatarInputContainer {...getRootProps()}>
       {isDragActive && (
@@ -95,13 +136,23 @@ function AvatarInput(props: AvatarInputProps) {
           </Typography>
         </Box>
       )}
-      <Avatar
-        sx={{
-          width: 100,
-          height: 100,
-        }}
-        src={props.value?.path}
-      />
+      {props?.value ? (
+        <StyledWrapperAvatar>
+          <StyledAvatar src={props.value?.path} />
+          <StyledOverlay>
+            <StyledIconButton
+              disableRipple
+              onClick={removeAvatarHandle}
+              color="inherit"
+            >
+              <ClearOutlinedIcon color="error" sx={{ width: 50, height: 50 }} />
+            </StyledIconButton>
+          </StyledOverlay>
+        </StyledWrapperAvatar>
+      ) : (
+        <StyledAvatar src={props.value?.path} />
+      )}
+
       <Box sx={{ mt: 2 }}>
         <Button variant="contained" component="label" disabled={isLoading}>
           {isLoading

From a0467c2003293905792de0ce6504229fd2b67c26 Mon Sep 17 00:00:00 2001
From: liudmylakostenko <lkostenko@wagepoint.com>
Date: Thu, 15 Feb 2024 13:46:51 +0200
Subject: [PATCH 2/2] fixed comment

---
 .../form/avatar-input/form-avatar-input.tsx   | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/form/avatar-input/form-avatar-input.tsx b/src/components/form/avatar-input/form-avatar-input.tsx
index cd4808f9..b9bc0d56 100644
--- a/src/components/form/avatar-input/form-avatar-input.tsx
+++ b/src/components/form/avatar-input/form-avatar-input.tsx
@@ -43,25 +43,24 @@ const AvatarInputContainer = styled(Box)(({ theme }) => ({
   },
 }));
 
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  left: theme.spacing(2.25),
-  top: theme.spacing(1.87),
-}));
-
 const StyledWrapperAvatar = styled(Box)(() => ({
   position: "relative",
-  width: "28%",
+  width: 100,
+  height: 100,
 }));
 
 const StyledOverlay = styled(Box)(() => {
   return {
-    width: 100,
-    height: 100,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
     borderRadius: "50%",
     position: "absolute",
     top: 0,
     right: 0,
-    background: "rgba(0, 0, 0, 0.5)",
+    left: 0,
+    bottom: 0,
+    background: "rgba(0, 0, 0, 0.7)",
     transition: ".5s ease",
     opacity: 0,
     "&:hover": {
@@ -140,13 +139,15 @@ function AvatarInput(props: AvatarInputProps) {
         <StyledWrapperAvatar>
           <StyledAvatar src={props.value?.path} />
           <StyledOverlay>
-            <StyledIconButton
+            <IconButton
               disableRipple
               onClick={removeAvatarHandle}
               color="inherit"
             >
-              <ClearOutlinedIcon color="error" sx={{ width: 50, height: 50 }} />
-            </StyledIconButton>
+              <ClearOutlinedIcon
+                sx={{ width: 50, height: 50, color: "white" }}
+              />
+            </IconButton>
           </StyledOverlay>
         </StyledWrapperAvatar>
       ) : (