From 333c936ef4a8fb5d082c71881694b0fd4b6ef1f8 Mon Sep 17 00:00:00 2001
From: Vladyslav Shchepotin <vladislav.schepotin@gmail.com>
Date: Sun, 24 Sep 2023 01:18:59 +0300
Subject: [PATCH] feat: improve avatar input

---
 .../form/avatar-input/form-avatar-input.tsx   | 39 +++++++++++++------
 src/services/i18n/locales/en/common.json      |  1 +
 2 files changed, 28 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 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 (
-    <Box
-      {...getRootProps()}
-      sx={{
-        display: "flex",
-        position: "relative",
-        flexDirection: "column",
-        alignItems: "center",
-        p: 2,
-        mt: 2,
-      }}
-    >
+    <AvatarInputContainer {...getRootProps()}>
       {isDragActive && (
         <Box
           sx={{
@@ -101,12 +109,19 @@ function AvatarInput(props: AvatarInputProps) {
           <input {...getInputProps()} />
         </Button>
       </Box>
+
+      <Box sx={{ mt: 1 }}>
+        <Typography>
+          {t("common:formInputs.avatarInput.dragAndDrop")}
+        </Typography>
+      </Box>
+
       {props.error && (
         <Box sx={{ mt: 1 }}>
           <Typography sx={{ color: "red" }}>{props.error}</Typography>
         </Box>
       )}
-    </Box>
+    </AvatarInputContainer>
   );
 }
 
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"
     }
   },