feat(better modalInviteMatch): Better modal match

src/components/layout/map/CardMatchedUser.tsx

@@ -1,12 +1,11 @@
 import {
-  Box,
   Card,
   CardBody,
   chakra,
+  Divider,
   Flex,
   GridItem,
   Image,
-  Spacer,
   Text,
   useRadio,
 } from "@chakra-ui/react";
@@ -21,12 +20,7 @@ export default function CardMatchedUser({
   notif,
   ...radioProps
 }: CardMatchedUserProps) {
-  const {
+  const { isLoading, data: matchedUser } = useQuery({
-    isLoading,
-    isError,
-    data: matchedUser,
-    error,
-  } = useQuery({
     refetchOnWindowFocus: false,
     queryKey: ["matchUser", notif.MatchedUserID],
     queryFn: async () => {
@@ -54,7 +48,7 @@ export default function CardMatchedUser({
               height={"100%"}
               outline={state.isChecked ? "3px solid" : "none"}
               outlineColor={state.isChecked ? "purple.500" : "none"}
-              bg={state.isChecked ? "purple.50" : "white"}
+              bg={state.isChecked ? "purple.100" : "purple.50"}
             >
               <CardBody>
                 <Flex
@@ -64,12 +58,16 @@ export default function CardMatchedUser({
                   justifyContent={"space-between"}
                   {...getLabelProps()}
                 >
-                  <Image src={matchedUser.images[0]}></Image>
+                  <Image
+                    src={matchedUser.images[0]}
+                    borderRadius={"0.5rem"}
+                  ></Image>
                   <Text
                     align={"center"}
                     fontSize={"1.5rem"}
                     fontWeight={"bold"}
                   >
+                    <Divider />
                     {matchedUser.firstName} {matchedUser.lastName}
                   </Text>
                 </Flex>

src/components/layout/map/ModalInviteBar.tsx

@@ -104,7 +104,7 @@ export default function ModalInviteBar({
     <>
       <Modal
         blockScrollOnMount={false}
-        size={"2xl"}
+        size={"3xl"}
         isOpen={isOpen}
         onClose={onClose}
         scrollBehavior={"inside"}
@@ -119,7 +119,10 @@ export default function ModalInviteBar({
           <ModalBody>
             <Grid
               {...getRootProps()}
-              templateColumns={`repeat(${notificationMatch?.length}, 1fr)`}
+              templateColumns={`repeat(${notificationMatch?.length}, 50%)`}
+              // templateColumns={`repeat(auto-fill, ${notificationMatch?.length})`}
+              // make all items be in the same line and make it scrollable horizontally
+
               gap={6}
             >
               {!isError && !error

src/components/layout/profile/ModalModifyImages.tsx

@@ -155,6 +155,7 @@ export default function ModalModifyImages(props) {
                     height={"100%"}
                     accept={"image/png, image/jpeg, image/webp"}
                     onInput={({ target }) => {
+                      if (target.files[0]) return;
                       const date = new Date();
                       const time = date.getTime();
 

src/pages/profile.tsx

@@ -34,7 +34,7 @@ import { useQuery } from "@tanstack/react-query";
 
 export default function UserProfile() {
   const router = useRouter();
-  const toast = useToast({ position: "top", isClosable: true });
+  const toast = useToast({ position: "top", isClosable: true, duration: 2000 });
 
   const [currentlyLoading, setCurrentlyLoading] = useState(false);
   const [passions, setPassions] = useState([] as any[]);