fix(multiple bugs (map, dashboard, carousel)): multiple bugs (map, dashboard, carousel)

src/components/Carousel.tsx

@@ -1,13 +1,13 @@
-import {useState} from 'react';
-import {Flex, IconButton} from '@chakra-ui/react';
-import {BiLeftArrowAlt, BiRightArrowAlt} from 'react-icons/bi';
+import { useState } from "react";
+import { Flex, IconButton } from "@chakra-ui/react";
+import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
 
 interface Props {
   images: string[];
   borderRadius?: string | number;
 }
 
-const Carousel = ({images, borderRadius: bRadius}: Props) => {
+const Carousel = ({ images, borderRadius: bRadius }: Props) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const handleClickPrevious = () => {
@@ -18,22 +18,39 @@ const Carousel = ({images, borderRadius: bRadius}: Props) => {
     setCurrentIndex(currentIndex === images.length - 1 ? 0 : currentIndex + 1);
   };
 
-  if (images.length === 0) images = ['blank_profile_picture.webp'];
+  if (images.length === 0) images = ["blank_profile_picture.webp"];
 
   return (
-      <Flex px={2} align="center" borderRadius={bRadius} overflow={'hidden'}
-            justify={'space-between'} bgColor={'purple.50'} height={500}
-            bgImage={images[currentIndex]} bgSize={'cover'}
-            bgRepeat={'no-repeat'} bgPosition={'center'} width={'100%'}>
-        <IconButton aria-label="left-arrow" borderRadius="full"
-                    onClick={handleClickPrevious}>
-          <BiLeftArrowAlt/>
-        </IconButton>
+    <Flex
+      px={2}
+      align="center"
+      borderRadius={bRadius}
+      overflow={"hidden"}
+      justify={"space-between"}
+      bgColor={"purple.50"}
+      height={500}
+      bgImage={images[currentIndex]}
+      bgSize={"contain"}
+      bgRepeat={"no-repeat"}
+      bgPosition={"center"}
+      width={"100%"}
+    >
+      <IconButton
+        aria-label="left-arrow"
+        borderRadius="full"
+        onClick={handleClickPrevious}
+      >
+        <BiLeftArrowAlt />
+      </IconButton>
 
-        <IconButton aria-label="left-arrow" borderRadius="full" onClick={handleClickNext}>
-          <BiRightArrowAlt/>
-        </IconButton>
-      </Flex>
+      <IconButton
+        aria-label="left-arrow"
+        borderRadius="full"
+        onClick={handleClickNext}
+      >
+        <BiRightArrowAlt />
+      </IconButton>
+    </Flex>
   );
 };
 

src/components/layout/dashboard/card_user/CardUser.tsx

@@ -17,16 +17,21 @@ import PassionTagList from "@/components/layout/dashboard/card_user/PassionTagLi
 import { useState } from "react";
 import SearchFailCard from "./SearchFailCard";
 import LoadingPage from "@/components/LoadingPage";
-import {User} from '@prisma/client';
+import { User } from "@prisma/client";
 
 type Props = {
-  users: User[]
-  loggedUser: User
-  setMatch: any
-  refetchLoggedUser: any
-}
+  users: User[];
+  loggedUser: User;
+  setMatch: any;
+  refetchLoggedUser: any;
+};
 
-export default function CardUser({users, loggedUser, setMatch, refetchLoggedUser}: Props) {
+export default function CardUser({
+  users,
+  loggedUser,
+  setMatch,
+  refetchLoggedUser,
+}: Props) {
   const toast = useToast({
     position: "top",
     duration: 2000,
@@ -174,7 +179,9 @@ export default function CardUser({users, loggedUser, setMatch, refetchLoggedUser
           <Heading size={"sm"} fontWeight={"bold"} mb="0.5rem">
             A propos :
           </Heading>
-          <Text as="i">&quot;{listUsers[0].bio}&quot;</Text>
+          <Text as="i" fontWeight={"bold"}>
+            {listUsers[0].bio && `"${listUsers[0].bio}"`}
+          </Text>
         </Box>
 
         <Box>

src/components/layout/dashboard/left_panel/LeftPanel.tsx

@@ -32,11 +32,12 @@ export default function LeftPanel(props) {
       bg={"#faf9ff"}
     >
       <Flex direction={"column"} height={"100%"} margin={"10%"}>
-        <Box>
+        <Flex direction={"column"} align={"center"}>
           <Image
             src={user.images[0] ?? "/blank_profile_picture.webp"}
             objectFit={"contain"}
             borderRadius={"1rem"}
+            maxHeight={"50vh"}
           />
           <Box mt={"2rem"}>
             <Flex align={"center"} justifyContent="space-between" mb={"1rem"}>
@@ -52,29 +53,33 @@ export default function LeftPanel(props) {
               {user.bio && `"${user.bio}"`}
             </Text>
           </Box>
-        </Box>
+        </Flex>
         <Spacer />
         <Flex
           gap={2}
           direction={"column"}
           mt={"1vh"}
           spacing={3.5}
-          alignContent={"bottom"}>
+          alignContent={"bottom"}
+        >
           <LeftPanelButton
             leftIcon={<FaMapMarkedAlt />}
-            onClickHandler={() => router.push("/map")}>
+            onClickHandler={() => router.push("/map")}
+          >
             Carte
           </LeftPanelButton>
 
           <LeftPanelButton
             leftIcon={<BsFillPersonFill />}
-            onClickHandler={() => router.push("/profile")}>
+            onClickHandler={() => router.push("/profile")}
+          >
             Profil
           </LeftPanelButton>
           <LeftPanelButton
             variant={"outline"}
             leftIcon={<BiLogOut />}
-            onClickHandler={() => signOut({ callbackUrl: "/" })}>
+            onClickHandler={() => signOut({ callbackUrl: "/" })}
+          >
             Déconnexion
           </LeftPanelButton>
         </Flex>

src/components/layout/profile/ModalModifyImages.tsx

@@ -138,7 +138,7 @@ export default function ModalModifyImages(props) {
                 <GridItem key={index}>
                   <Flex
                     bg={"purple.100"}
-                    height={"95%"}
+                    height={"60vh"}
                     direction={"column"}
                     gap={"1rem"}
                     justifyContent={"space-between"}