diff --git a/src/components/form/avatar-input/form-avatar-input.tsx b/src/components/form/avatar-input/form-avatar-input.tsx
index 16d4c92..26a7fb6 100644
--- a/src/components/form/avatar-input/form-avatar-input.tsx
+++ b/src/components/form/avatar-input/form-avatar-input.tsx
@@ -5,6 +5,7 @@ import Avatar from "@mui/material/Avatar";
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 { useDropzone } from "react-dropzone";
import {
@@ -23,6 +24,23 @@ type AvatarInputProps = {
disabled?: boolean;
};
+const AvatarInputContainer = styled(Box)(({ theme }) => ({
+ display: "flex",
+ position: "relative",
+ flexDirection: "column",
+ alignItems: "center",
+ padding: theme.spacing(2),
+ marginTop: theme.spacing(2),
+ border: "1px dashed",
+ borderColor: theme.palette.divider,
+ borderRadius: theme.shape.borderRadius,
+ cursor: "pointer",
+
+ "&:hover": {
+ borderColor: theme.palette.text.primary,
+ },
+}));
+
function AvatarInput(props: AvatarInputProps) {
const { t } = useTranslation();
const [isLoading, setIsLoading] = useState(false);
@@ -50,17 +68,7 @@ function AvatarInput(props: AvatarInputProps) {
});
return (
-
+
{isDragActive && (
+
+
+
+ {t("common:formInputs.avatarInput.dragAndDrop")}
+
+
+
{props.error && (
{props.error}
)}
-
+
);
}
diff --git a/src/services/i18n/locales/en/common.json b/src/services/i18n/locales/en/common.json
index 520fbf3..585df8d 100644
--- a/src/services/i18n/locales/en/common.json
+++ b/src/services/i18n/locales/en/common.json
@@ -11,6 +11,7 @@
"formInputs": {
"avatarInput": {
"dropzoneText": "Drop the image here ...",
+ "dragAndDrop": "Or drag 'n' drop some files here",
"selectFile": "Select an image"
}
},