From c69494580b9ce6716654568ac03d25bf59a143ae Mon Sep 17 00:00:00 2001
From: Priyansh Shah <Priyanshpokemon@gmail.com>
Date: Sun, 26 Jan 2025 01:35:48 -0800
Subject: [PATCH 1/3] adding a basic dropzone

---
 .../CreateModal/components/ImageInput.jsx     | 63 +++++++++++++------
 1 file changed, 45 insertions(+), 18 deletions(-)

diff --git a/packages/web/src/components/CreateModal/components/ImageInput.jsx b/packages/web/src/components/CreateModal/components/ImageInput.jsx
index 157e29a..355f8df 100644
--- a/packages/web/src/components/CreateModal/components/ImageInput.jsx
+++ b/packages/web/src/components/CreateModal/components/ImageInput.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, FormControl, Input } from "@chakra-ui/react";
+import { Box, Flex, FormControl, Heading, Input, Text } from "@chakra-ui/react";
 
 const ImageInput = (
     { handleItemImageChange, isLoading, loadingAnimation, uploadedImage },
@@ -13,23 +13,7 @@ const ImageInput = (
                 justifyContent="center"
             >
                 <Flex justifyContent="center" alignItems="center" gap={3}>
-                    <Input
-                        type="file"
-                        accept="image/*"
-                        multiple
-                        width="38%"
-                        sx={{
-                            "::file-selector-button": {
-                                height: 10,
-                                padding: 0,
-                                mr: 4,
-                                background: "none",
-                                border: "none",
-                                fontWeight: "bold",
-                            },
-                        }}
-                        onChange={handleItemImageChange}
-                    />
+                    <Dropzone handleItemImageChange={handleItemImageChange} />
                 </Flex>
                 {isLoading ? loadingAnimation : uploadedImage}
             </Flex>
@@ -38,3 +22,46 @@ const ImageInput = (
 };
 
 export default ImageInput;
+
+function Dropzone({ handleItemImageChange }) {
+    return (
+        <Box style={{ maxWidth: "md", width: "100%" }}>
+            <Box
+                style={{
+                    position: "relative",
+                    height: "12rem",
+                    cursor: "pointer",
+                    borderWidth: "2px",
+                    borderStyle: "dashed",
+                    borderColor: "#CBD5E0",
+                    borderRadius: "0.5rem",
+                    backgroundColor: "#111",
+                    color: "white",
+                    padding: "1.5rem",
+                    textAlign: "center",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center"
+                }}
+            >
+                <Heading size="sm" style={{ marginTop: "1rem", color: "#CBD5E0" }}>
+                    Upload a file
+                </Heading>
+                <Text style={{ marginTop: "0.25rem", fontSize: "0.875rem", color: "#718096" }}>
+                    Drop your file here or click to select a file
+                </Text>
+                <input  
+                    type="file"
+                    style={{
+                        position: "absolute",
+                        inset: 0,
+                        cursor: "pointer",
+                        opacity: 0
+                    }}
+                    onChange={handleItemImageChange}
+                />
+            </Box>
+        </Box>
+    );
+}

From dbcb6f5fa7a4f19130df97c93c306e50568fbb63 Mon Sep 17 00:00:00 2001
From: Priyansh Shah <Priyanshpokemon@gmail.com>
Date: Sun, 26 Jan 2025 01:36:57 -0800
Subject: [PATCH 2/3] adding input validation for type image

---
 .../CreateModal/components/ImageInput.jsx     | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/components/CreateModal/components/ImageInput.jsx b/packages/web/src/components/CreateModal/components/ImageInput.jsx
index 355f8df..a882887 100644
--- a/packages/web/src/components/CreateModal/components/ImageInput.jsx
+++ b/packages/web/src/components/CreateModal/components/ImageInput.jsx
@@ -42,22 +42,32 @@ function Dropzone({ handleItemImageChange }) {
                     display: "flex",
                     flexDirection: "column",
                     alignItems: "center",
-                    justifyContent: "center"
+                    justifyContent: "center",
                 }}
             >
-                <Heading size="sm" style={{ marginTop: "1rem", color: "#CBD5E0" }}>
+                <Heading
+                    size="sm"
+                    style={{ marginTop: "1rem", color: "#CBD5E0" }}
+                >
                     Upload a file
                 </Heading>
-                <Text style={{ marginTop: "0.25rem", fontSize: "0.875rem", color: "#718096" }}>
+                <Text
+                    style={{
+                        marginTop: "0.25rem",
+                        fontSize: "0.875rem",
+                        color: "#718096",
+                    }}
+                >
                     Drop your file here or click to select a file
                 </Text>
-                <input  
+                <input
                     type="file"
+                    accept="image/*"
                     style={{
                         position: "absolute",
                         inset: 0,
                         cursor: "pointer",
-                        opacity: 0
+                        opacity: 0,
                     }}
                     onChange={handleItemImageChange}
                 />

From b2bd0e636145407999c469eb207cd9a9a5590b0f Mon Sep 17 00:00:00 2001
From: Priyansh Shah <Priyanshpokemon@gmail.com>
Date: Sun, 26 Jan 2025 02:23:30 -0800
Subject: [PATCH 3/3] adding X button and  fixing stylinh a bit

---
 .../components/CreateModal/CreateModal.jsx    | 35 ++++++++---
 .../CreateModal/components/ImageInput.jsx     | 58 +++++++++----------
 2 files changed, 56 insertions(+), 37 deletions(-)

diff --git a/packages/web/src/components/CreateModal/CreateModal.jsx b/packages/web/src/components/CreateModal/CreateModal.jsx
index 004cfab..39d48c6 100644
--- a/packages/web/src/components/CreateModal/CreateModal.jsx
+++ b/packages/web/src/components/CreateModal/CreateModal.jsx
@@ -83,12 +83,34 @@ export default function CreateModal({
   );
 
   // Define the JSX for the uploaded image
-  const uploadedImage = (
-    <Image
-      width={{ md: "40%", base: "80%" }}
-      src={uploadImg ? uploadImg : img_placeholder}
-    />
-  );
+  const uploadedImage = uploadImg == ""
+    ? null
+    : (
+      <Flex direction="column" align="center" position="relative">
+        <Image
+          width={{ md: "40%", base: "80%" }}
+          src={uploadImg ? uploadImg : img_placeholder}
+        />
+        {uploadImg && (
+          <Button
+            size="sm"
+            colorScheme="red"
+            position="absolute"
+            top={2}
+            right={2}
+            onClick={() => {
+              setUploadImg("");
+              setNewAddedItem((prev) => ({
+                ...prev,
+                image: "",
+              }));
+            }}
+          >
+            ✕
+          </Button>
+        )}
+      </Flex>
+    );
 
   // Define the callback function to increment the active step count
   const handleStepIncrement = useCallback(() => {
@@ -316,7 +338,6 @@ export default function CreateModal({
                 {/* fourth step */}
                 {activeStep === 3 && (
                   <ImageInput
-                    handleItemDateChange={handleItemDateChange}
                     handleItemImageChange={handleItemImageChange}
                     isLoading={isLoading}
                     loadingAnimation={loadingAnimation}
diff --git a/packages/web/src/components/CreateModal/components/ImageInput.jsx b/packages/web/src/components/CreateModal/components/ImageInput.jsx
index a882887..5cbb4ff 100644
--- a/packages/web/src/components/CreateModal/components/ImageInput.jsx
+++ b/packages/web/src/components/CreateModal/components/ImageInput.jsx
@@ -13,9 +13,13 @@ const ImageInput = (
                 justifyContent="center"
             >
                 <Flex justifyContent="center" alignItems="center" gap={3}>
-                    <Dropzone handleItemImageChange={handleItemImageChange} />
+                    {uploadedImage ? uploadedImage : (
+                        <Dropzone
+                            handleItemImageChange={handleItemImageChange}
+                            uploadedImage={uploadedImage}
+                        />
+                    )}
                 </Flex>
-                {isLoading ? loadingAnimation : uploadedImage}
             </Flex>
         </FormControl>
     );
@@ -25,39 +29,33 @@ export default ImageInput;
 
 function Dropzone({ handleItemImageChange }) {
     return (
-        <Box style={{ maxWidth: "md", width: "100%" }}>
+        <Box maxW={{ base: "100%", md: "md" }} w="100%">
             <Box
-                style={{
-                    position: "relative",
-                    height: "12rem",
-                    cursor: "pointer",
-                    borderWidth: "2px",
-                    borderStyle: "dashed",
-                    borderColor: "#CBD5E0",
-                    borderRadius: "0.5rem",
-                    backgroundColor: "#111",
-                    color: "white",
-                    padding: "1.5rem",
-                    textAlign: "center",
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    justifyContent: "center",
+                position="relative"
+                h={{ base: "10rem", md: "12rem" }}
+                cursor="pointer"
+                borderWidth="2px"
+                borderStyle="dashed"
+                borderColor="gray.300"
+                borderRadius="lg"
+                bg="gray.500"
+                color="gray.900"
+                p={{ base: "3", md: "6" }}
+                textAlign="center"
+                display="flex"
+                flexDirection="column"
+                alignItems="center"
+                justifyContent="center"
+                transition="all 0.2s"
+                _hover={{
+                    bg: "gray.100",
+                    borderColor: "gray.400",
                 }}
             >
-                <Heading
-                    size="sm"
-                    style={{ marginTop: "1rem", color: "#CBD5E0" }}
-                >
+                <Heading size="sm" mt="4" color="gray.600">
                     Upload a file
                 </Heading>
-                <Text
-                    style={{
-                        marginTop: "0.25rem",
-                        fontSize: "0.875rem",
-                        color: "#718096",
-                    }}
-                >
+                <Text mt="1" fontSize="sm" color="gray.700">
                     Drop your file here or click to select a file
                 </Text>
                 <input