From c6ee24f6a0c4831c00075b374e52ea975d93c47e Mon Sep 17 00:00:00 2001
From: Amin Ghasempoor <aminghasempoor79@gmail.com>
Date: Sun, 23 Jul 2023 16:25:02 +0330
Subject: [PATCH] upload system

---
 src/core/components/UploadSystem.jsx | 31 ++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/core/components/UploadSystem.jsx b/src/core/components/UploadSystem.jsx
index f8cbc48..adbe27d 100644
--- a/src/core/components/UploadSystem.jsx
+++ b/src/core/components/UploadSystem.jsx
@@ -43,7 +43,7 @@ const UploadSystem = ({
   };
 
   return (
-    <Box sx={{ width: imageSize[0], my: 1 }}>
+    <Box sx={{ width: "100%", my: 1 }}>
       {showAddIcon ? (
         // Show the add icon and "Upload File" text when no image is selected
         <>
@@ -57,7 +57,7 @@ const UploadSystem = ({
               borderRadius: "10px",
               cursor: "pointer",
               padding: "5px",
-              width: imageSize[0],
+
               height: imageSize[1],
             }}
             onClick={handleClick}
@@ -81,14 +81,14 @@ const UploadSystem = ({
         // Show the uploaded content along with the delete button when an image or document is selected
         <>
           {fileType && fileType.startsWith("image/") ? (
-            <Image
-              width={imageSize[0]}
+            <Box
+              width="100%"
               height={imageSize[1]}
-              src={selectedImage}
-              priority
-              alt={imageAlt}
-              onClick={handleClick}
-              style={{
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
                 cursor: "pointer",
                 objectFit: "contain",
                 border: "1px solid #b3b3b3",
@@ -97,13 +97,22 @@ const UploadSystem = ({
                 borderBottom: "unset",
                 padding: "5px",
               }}
-            />
+              onClick={handleClick}
+            >
+              <Image
+                width={imageSize[0]}
+                height={imageSize[1]}
+                src={selectedImage}
+                priority
+                alt={imageAlt}
+                style={{ padding: 5 }}
+              />
+            </Box>
           ) : (
             fileType &&
             isDocumentFormat(fileType) && (
               <Box
                 sx={{
-                  width: imageSize[0],
                   height: imageSize[1],
                   display: "flex",
                   border: "1px solid #b3b3b3",