Skip to content

Commit

Permalink
Merge pull request #25 from NwinNwin/dang-touchup-styling
Browse files Browse the repository at this point in the history 
updated infomodal
  • Loading branch information
@NwinNwin
NwinNwin authored Sep 18, 2023
2 parents 7efe289 + 68ec20f commit 1084b63
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 100 deletions.
45 changes: 25 additions & 20 deletions src/components/ImageContainer/ImageContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
163 changes: 83 additions & 80 deletions src/components/InfoModal/InfoModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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>
);
Expand Down

0 comments on commit 1084b63

Please sign in to comment.