From 21981e3bf57f27bc99d94e70ff57f3179345ceea Mon Sep 17 00:00:00 2001
From: Steven Zhou <stevenz9@uci.edu>
Date: Sun, 17 Sep 2023 02:02:29 -0700
Subject: [PATCH] resolved labels for images

---
 src/components/Home/Home.jsx                  |  1 -
 .../ImageContainer/ImageContainer.jsx         | 27 ++++++++++++++++++
 src/components/InfoModal/InfoModal.jsx        | 28 +++++++++++++------
 src/components/Map/Map.jsx                    |  1 -
 4 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ImageContainer/ImageContainer.jsx

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index 85dba5f..21319e2 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -135,7 +135,6 @@ export default function Home() {
     };
     getData();
   }, []);
-  console.log("data", data)
   
   window.onresize = () => {
     setScreenWidth(window.screen.width);
diff --git a/src/components/ImageContainer/ImageContainer.jsx b/src/components/ImageContainer/ImageContainer.jsx
new file mode 100644
index 0000000..8b0dd6c
--- /dev/null
+++ b/src/components/ImageContainer/ImageContainer.jsx
@@ -0,0 +1,27 @@
+import { Image, Flex, Text } from "@chakra-ui/react";
+
+export default function ImageContainer({ image, isresolved }) {
+  return (
+    <Flex>
+      {isresolved && <Flex
+        backgroundColor={"rgba(255, 123, 0, 0.9)"}
+        position={"absolute"}
+        w={282}
+        justifyContent={"center"}
+        alignItems={"center"}
+        marginTop={90}
+        flexDir={"column"}
+      >
+        <Text fontSize={18} as="b" color={"white"} >RETURNED</Text>
+        <Text fontSize={15} color={"white"} >This item has been returned.</Text>
+      </Flex>}
+      <Image
+        rounded={"lg"}
+        height={230}
+        width={282}
+        objectFit={"cover"}
+        src={image}
+      />
+    </Flex>
+  );
+}
diff --git a/src/components/InfoModal/InfoModal.jsx b/src/components/InfoModal/InfoModal.jsx
index f0bee46..ef26b3e 100644
--- a/src/components/InfoModal/InfoModal.jsx
+++ b/src/components/InfoModal/InfoModal.jsx
@@ -8,7 +8,6 @@ import {
   Text,
   Stack,
   useColorModeValue,
-  Image,
   Modal,
   ModalOverlay,
   ModalContent,
@@ -20,6 +19,7 @@ import { formatDate } from "../../utils";
 import { UserAuth } from "../../context/AuthContext";
 import DataContext from "../../context/DataContext";
 import axios from "axios";
+import ImageContainer from "../ImageContainer/ImageContainer";
 
 export default function InfoModal({ setData, isOpen, onClose, props }) {
   const [showEmail, setShowEmail] = useState(false);
@@ -52,7 +52,6 @@ export default function InfoModal({ setData, isOpen, onClose, props }) {
   }
 
   const formattedDate = formatDate(new Date(props.date));
-
   return (
     <Modal
       isOpen={isOpen}
@@ -109,13 +108,24 @@ export default function InfoModal({ setData, isOpen, onClose, props }) {
                 {props.name}
               </Heading>
 
-              <Image
-                rounded={"lg"}
-                height={230}
-                width={282}
-                objectFit={"cover"}
-                src={props.image}
-              />
+            
+              <ImageContainer image={props.image} isresolved={props.isresolved}/>
+              {/* <Flex>
+                <Flex
+                  backgroundColor={"rgba(245, 44, 44, 0.5)"}
+                  float={"left"}
+                  position={"absolute"}
+                >
+                  <Text>RESOLVED</Text>
+                </Flex>
+                <Image
+                  rounded={"lg"}
+                  height={230}
+                  width={282}
+                  objectFit={"cover"}
+                  src={props.image}
+                />
+              </Flex> */}
 
               <Text
                 textAlign="center"
diff --git a/src/components/Map/Map.jsx b/src/components/Map/Map.jsx
index c1d9f67..c95fa8a 100644
--- a/src/components/Map/Map.jsx
+++ b/src/components/Map/Map.jsx
@@ -151,7 +151,6 @@ export default function Map({
         isHelped: newAddedItem.isHelped,
       })
       .then((item) => {
-        console.log("item", item)
         const newItem = {
           image: newAddedItem.image,
           type: newAddedItem.type,