From 68ec20f505ccbe45c28ef018f3d290fddacbcade Mon Sep 17 00:00:00 2001
From: Dang Nguyen Nguyen <ndnguyen2003@gmail.com>
Date: Sun, 17 Sep 2023 17:29:09 -0700
Subject: [PATCH] updated infomodal

---
 .../ImageContainer/ImageContainer.jsx         |  45 ++---
 src/components/InfoModal/InfoModal.jsx        | 163 +++++++++---------
 2 files changed, 108 insertions(+), 100 deletions(-)

diff --git a/src/components/ImageContainer/ImageContainer.jsx b/src/components/ImageContainer/ImageContainer.jsx
index 8b0dd6c..d05708c 100644
--- a/src/components/ImageContainer/ImageContainer.jsx
+++ b/src/components/ImageContainer/ImageContainer.jsx
@@ -2,26 +2,31 @@ 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
+      w={{ base: "100%", md: 450 }}
+      h={{ base: 400, md: 450 }}
+      justifyContent={"center"}
+      alignItems={"center"}
+    >
+      {isresolved && (
+        <Flex
+          backgroundColor={"rgba(255, 123, 0, 0.9)"}
+          position={"absolute"}
+          justifyContent={"center"}
+          alignItems={"center"}
+          marginTop={30}
+          flexDir={"column"}
+          w={400}
+        >
+          <Text fontSize={18} as="b" color={"white"}>
+            RETURNED
+          </Text>
+          <Text fontSize={15} color={"white"}>
+            This item has been returned.
+          </Text>
+        </Flex>
+      )}
+      <Image w="100%" h="100%" rounded={"lg"} objectFit={"cover"} src={image} />
     </Flex>
   );
 }
diff --git a/src/components/InfoModal/InfoModal.jsx b/src/components/InfoModal/InfoModal.jsx
index ef26b3e..45f819c 100644
--- a/src/components/InfoModal/InfoModal.jsx
+++ b/src/components/InfoModal/InfoModal.jsx
@@ -20,6 +20,7 @@ import { UserAuth } from "../../context/AuthContext";
 import DataContext from "../../context/DataContext";
 import axios from "axios";
 import ImageContainer from "../ImageContainer/ImageContainer";
+import { LinkIcon, EmailIcon, CloseIcon, PhoneIcon } from "@chakra-ui/icons";
 
 export default function InfoModal({ setData, isOpen, onClose, props }) {
   const [showEmail, setShowEmail] = useState(false);
@@ -59,87 +60,87 @@ export default function InfoModal({ setData, isOpen, onClose, props }) {
         onClose();
         navigate("/");
       }}
-      size={{ base: "full", md: "md" }}
+      size={{ base: "full", md: "5xl" }}
     >
       <ModalOverlay />
       <ModalContent>
         <ModalCloseButton size="lg" />
-        <Center py={6}>
-          <Box
-            role={"group"}
-            p={10}
-            maxW={"400px"}
-            maxH={"800px"}
-            w={"full"}
-            bg={useColorModeValue("white", "gray.800")}
-            // boxShadow={"2xl"}
-            rounded={"lg"}
-            pos={"relative"}
-            zIndex={1}
-            marginTop={"28px"}
-            pt={"0"}
+
+        <Flex
+          justifyContent={{ base: "center", md: "space-around" }}
+          alignItems={"center"}
+          paddingX={"2%"}
+          paddingY={"5%"}
+          width={"100%"}
+          flexDir={{ base: "column", md: "row" }}
+        >
+          <ImageContainer image={props.image} isresolved={props.isresolved} />
+          <Flex
+            flexDir={"column"}
+            w={{ base: "90%", md: "40%" }}
+            gap={5}
+            mt={{ md: 0, base: 5 }}
           >
-            <Stack align={"center"} justifyContent={"center"} gap={"3px"}>
-              {currentEmail === props.email ? (
-                <Flex align="center" justifyContent="center">
-                  <Tag colorScheme="blue" variant="solid">
-                    Owner
-                  </Tag>
-                </Flex>
-              ) : props.islost ? (
-                <Flex align="center" justifyContent="center">
-                  <Tag colorScheme="red" variant="solid">
-                    Lost
-                  </Tag>
-                </Flex>
-              ) : (
-                <Flex align="center" justifyContent="center">
-                  <Tag colorScheme="green" variant="solid">
-                    Found
-                  </Tag>
-                </Flex>
-              )}
+            {/* HEADING */}
+            <Flex flexDir={"column"} gap={2}>
               <Heading
                 // mt="20px"
-                fontSize={"3xl"}
+                fontSize="4xl"
                 fontFamily={"body"}
                 fontWeight={"bold"}
               >
                 {props.name}
               </Heading>
 
-            
-              <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> */}
+              <Flex gap={2}>
+                {currentEmail === props.email ? (
+                  <Flex>
+                    <Tag colorScheme="blue" variant="solid">
+                      Owner
+                    </Tag>
+                  </Flex>
+                ) : props.islost ? (
+                  <Flex>
+                    <Tag colorScheme="red" variant="solid">
+                      Lost
+                    </Tag>
+                  </Flex>
+                ) : (
+                  <Flex>
+                    <Tag colorScheme="green" variant="solid">
+                      Found
+                    </Tag>
+                  </Flex>
+                )}
+                <Text color={"gray.500"}>Posted: {formattedDate}</Text>
+              </Flex>
+            </Flex>
 
-              <Text
-                textAlign="center"
-                color={"gray.500"}
-                fontSize={"md"}
-                overflowY={"auto"}
-                maxHeight={"200"}
-              >
+            <hr />
+
+            {/* DESCRIPTION */}
+            <Flex flexDir={"column"}>
+              <Text as={"b"} fontSize={"xl"}>
+                Description:
+              </Text>
+              {props.islost ? (
+                <Text color={"gray.500"}>Lost on {props.itemDate}</Text>
+              ) : (
+                <Text color={"gray.500"}> Found on {props.itemDate}</Text>
+              )}
+              <Text fontSize={"md"} mt={3} overflowY={"auto"} maxHeight={"200"}>
                 {props.description}
               </Text>
+            </Flex>
+            <hr />
+            <Flex gap={5} justifyContent={"center"} alignItems={"center"}>
               {currentEmail !== props.email &&
                 (!showEmail ? (
                   <Button
                     colorScheme="blue"
+                    size={"lg"}
+                    gap={2}
+                    isDisabled={props.isresolved && true}
                     onClick={() => {
                       if (user) {
                         setShowEmail(true);
@@ -148,32 +149,34 @@ export default function InfoModal({ setData, isOpen, onClose, props }) {
                       }
                     }}
                   >
-                    View Contact
+                    <PhoneIcon /> View Contact
                   </Button>
                 ) : (
-                  <Tag
-                    size="lg"
-                    padding="10px"
-                    variant="outline"
-                    colorScheme="blue"
-                  >
+                  <Button size="lg" variant="outline" colorScheme="blue">
                     {props.email}
-                  </Tag>
+                  </Button>
                 ))}
               {currentEmail === props.email && (
-                <Button colorScheme="red" px="36px" onClick={handleDelete}>
-                  Delete
+                <Button
+                  colorScheme="red"
+                  size={"lg"}
+                  gap={2}
+                  onClick={handleDelete}
+                >
+                  <CloseIcon /> Delete
                 </Button>
               )}
-              {props.islost ? (
-                <Text as="b">Lost on {props.itemDate}</Text>
-              ) : (
-                <Text as="b">Found on {props.itemDate}</Text>
-              )}
-              <Text color={"gray.500"}>Posted on {formattedDate}</Text>
-            </Stack>
-          </Box>
-        </Center>
+              <Button
+                colorScheme="blue"
+                size={"lg"}
+                variant={"outline"}
+                gap={2}
+              >
+                <LinkIcon /> Share
+              </Button>
+            </Flex>
+          </Flex>
+        </Flex>
       </ModalContent>
     </Modal>
   );