modifying css for the form page

.env

@@ -1 +1,2 @@
 REACT_APP_ACTIVATE_USING_JSON="false"
+

src/Components/Carousel/Carousel.css

@@ -31,6 +31,7 @@
   transition: all 750ms linear;
   width: 100%;
   height: fit-content;
+  max-height: 100px;
   object-fit: contain;
 }
 

src/Components/Carousel/Carousel.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import "./Carousel.css";
+import ImageZoomInOut from "../ImageZoomInOut/ImageZoomInOut";
 interface CarouselProps {
   imgs: {
     url: string;
@@ -45,11 +46,15 @@
         <a className="prev" onClick={() => selectImg(currImg - 1)}>
           &#10094;
         </a>
-        <img
+        <ImageZoomInOut
+              className="main-img"
+              imageUrl={imgList.length > 0 ? imgList[currImg].url : ""} 
+              alt="no picture"/>
+        {/*<img
           id="main-img"
           src={imgList.length > 0 ? imgList[currImg].url : ""}
           alt={imgList.length > 0 ? imgList[currImg].title : "No picture"}
-        ></img>
+        ></img>*/}
         <a className="next" onClick={() => selectImg(currImg + 1)}>
           &#10095;
         </a>

src/Components/ImageZoomInOut/ImageZoomInOut.css

@@ -0,0 +1,21 @@
+.btn-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    border:1px solid black;
+  }
+
+.btn-container button {
+    border: none;
+    color: #737373;
+    background-color: #fff;
+    padding: 10px;
+    cursor: pointer;
+  }

src/Components/ImageZoomInOut/ImageZoomInOut.tsx

@@ -0,0 +1,127 @@
+import { useState, useRef, useEffect } from "react";
+import "./ImageZoomInOut.css";
+
+interface ImageProps {
+  imageUrl: string;
+  className?: string; // Optional class name
+  onClick?: () => void; // Optional click handler function
+}
+
+function ImageZoomInOut({ imageUrl, className, onClick }: ImageProps) {
+  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const imageRef = useRef(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)||scale>1;
+
+  const handleHoldZoomIn = () => {
+    if (intervalRef.current && (scale + 0.05 < 1)) return;
+    intervalRef.current = setInterval(() => {
+      handleZoomIn();
+    }, 1);
+  };
+
+  const handleHoldZoomOut = () => {
+    if (intervalRef.current && (scale + 0.05 < 1)) return;
+    intervalRef.current = setInterval(() => {
+      handleZoomOut();
+    }, 1);
+  };
+
+  const handleHoldZoomInOutStop = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  };
+
+  const handleZoomIn = () => {
+    if (scale + 0.05 > 1) {
+        setScale((scale) => scale + 0.05);
+    }else{
+        setScale(1);
+        handleHoldZoomInOutStop();
+    }
+  };
+
+  const handleZoomOut = () => {
+    if (scale - 0.05 > 1) {
+        setScale((scale) => scale - 0.05);
+    }else{
+        setScale(1);
+        handleHoldZoomInOutStop();
+    }
+  };
+
+  useEffect(() => {
+    const image = imageRef.current as unknown as HTMLImageElement;
+    let isDragging = false;
+    let prevPosition = { x: 0, y: 0 };
+
+    const handleMouseDown = (e: MouseEvent) => {
+      isDragging = true;
+      prevPosition = { x: e.clientX, y: e.clientY };
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDragging) return;
+      const deltaX = e.clientX - prevPosition.x;
+      const deltaY = e.clientY - prevPosition.y;
+      prevPosition = { x: e.clientX, y: e.clientY };
+      setPosition((position) => ({
+        x: position.x + deltaX,
+        y: position.y + deltaY,
+      }));
+    };
+
+    const handleMouseUp = () => {
+      isDragging = false;
+    };
+
+    image?.addEventListener("mousedown", handleMouseDown);
+    image?.addEventListener("mousemove", handleMouseMove);
+    image?.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      image?.removeEventListener("mousedown", handleMouseDown);
+      image?.removeEventListener("mousemove", handleMouseMove);
+      image?.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [imageRef, scale]);
+
+  return (
+    <div
+      className={`imageZoomInOut ${className || ""}`}
+      style={{
+        backgroundColor: "#ffffff",
+        borderRadius: "10px",
+        position: "relative",
+        overflow: "hidden",
+      }}
+      onClick={onClick}
+    >
+      <div className={`btn-container ${imageRef.current ? "hidden" : ""}`}>
+        <button onClick={handleZoomIn} onMouseDown={handleHoldZoomIn} onMouseUp={handleHoldZoomInOutStop} onMouseLeave={handleHoldZoomInOutStop}>
+          <span className="material-symbols-outlined">+</span>
+        </button>
+        <button onClick={handleZoomOut} onMouseDown={handleHoldZoomOut} onMouseUp={handleHoldZoomInOutStop} onMouseLeave={handleHoldZoomInOutStop}>
+          <span className="material-symbols-outlined">-</span>
+        </button>
+      </div>
+
+      <img
+        ref={imageRef}
+        src={imageUrl}
+        alt="No Picture"
+        className="imageZoomInOut"
+        style={{
+          width: "50vw",
+          transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,
+          cursor: "move",
+        }}
+        draggable={false}
+      />
+    </div>
+  );
+}
+
+export default ImageZoomInOut;

src/Components/Modal/Modal.css

@@ -17,7 +17,7 @@
 
 /* Styles de la carte */
 .card {
-  width: 75%;
+  width: 50%;
   max-width: 800px;
   background-color: white;
   padding: 20px;
@@ -107,3 +107,32 @@
   padding-right: 10px;
   background: transparent;
 }
+
+@media only screen and (min-width: 850px) {
+  .formPage-container {
+    grid-template-areas:
+      "pics data"
+      "pics open-icon";  /* Add a new row for the open-icon */
+    grid-template-columns: 42% 55%;
+  }
+}
+
+@media only screen and (max-width: 850px) {
+  .formPage-container {
+    grid-template-areas:
+      "pics"
+      "data";
+    justify-content: center;
+  }
+}
+
+.pic-container {
+  grid-area: pics;
+  margin-right:10px ;
+}
+
+@media (prefers-color-scheme: dark) {
+  .open-icon {
+    filter: invert(74%) sepia(37%) saturate(0%) hue-rotate(249deg) brightness(101%) contrast(98%);
+  }
+}

src/Components/Modal/Modal.tsx

@@ -1,20 +1,28 @@
 import React, { useState } from "react";
 import "./Modal.css";
 import closeIcon from "../../assets/close_icon.png";
+import Carousel from "../Carousel/Carousel";
 interface ModalProps {
   text: string;
+  imgs: Image[]; // Array of Image objects
   handleTextChange: (event: {
     target: { value: React.SetStateAction<string> };
   }) => void;
   close: () => void;
   toRef: React.MutableRefObject<HTMLDivElement | null>;
 }
 
+interface Image {
+  url: string; // Image URL
+  title: string; // Image title (optional)
+}
+
 const Modal: React.FC<ModalProps> = ({
   text,
   handleTextChange,
   close,
   toRef,
+  imgs,
 }) => {
   const [isEditing, setIsEditing] = useState(false); // Added state for edit mode
 
@@ -41,6 +49,9 @@ const Modal: React.FC<ModalProps> = ({
 
   return (
     <div className="overlay" onClick={handleOverlayClick} ref={toRef}>
+      <div className="pic-container">
+        <Carousel imgs={imgs}></Carousel>
+      </div>
       <div className="card">
         <img
           src={closeIcon}

src/Pages/FormPage/FormPage.css

@@ -6,7 +6,9 @@
 
 @media only screen and (min-width: 850px) {
   .formPage-container {
-    grid-template-areas: "pics data";
+    grid-template-areas:
+      "pics data"
+      "pics open-icon";  /* Add a new row for the open-icon */
     grid-template-columns: 42% 55%;
   }
 }
@@ -26,8 +28,7 @@
 
 @media (prefers-color-scheme: dark) {
   .open-icon {
-    filter: invert(74%) sepia(37%) saturate(0%) hue-rotate(249deg)
-      brightness(101%) contrast(98%);
+    filter: invert(74%) sepia(37%) saturate(0%) hue-rotate(249deg) brightness(101%) contrast(98%);
   }
 }
 
@@ -38,25 +39,32 @@
   flex-direction: column;
   min-height: 100%;
   padding-bottom: 60px;
+  /* Add justify-content: space-between to position elements at the top and bottom */
+  justify-content: space-between;
+  align-items: left;
+  font-family: Arial, sans-serif, Bold;
+  color: #000000;
+  font-size: 20px;
 }
 
 .data-container h1 {
   text-align: left;
   margin-left: 20px;
-}
-.data-container label{
-  font-family: Arial, sans-serif, Bold; ;
-  color: #000000;
-  font-size: 20px;
+  font-size: 40px;
 }
 
+.data-container label {
+  text-align: left;
+  margin-left: 30px;
+}
 
 .textbox-container {
   display: flex; /* Enable flexbox layout */
   justify-content: left; /* Center horizontally within the container */
   align-items: center; /* Center vertically within the container */
   width: 100%; /* Make the container take up the full width */
   margin-left: 20px;
+  flex-direction: row;
 }
 
 .underlined {
@@ -68,8 +76,8 @@ textarea {
   border: 1px solid #ccc;
   border-radius: 10px;
   box-sizing: border-box;
-  width: 300px; 
-  height: auto; 
+  width: 300px;
+  height: auto;
   min-height: 40px;
   max-height: 97px;
   resize: none;
@@ -88,14 +96,19 @@ textarea {
 }
 
 .open-icon {
-  position: relative;
-  top: 35px;
-  right: 37px;
-  margin: -5%;
-  width: 12%;
-  height: auto;
+  position:relative;
+  margin-left: 30px;
+  width: 120%;  /* Make the label take up the full width of the textbox container */
+  font-size: 15px;  /* Set font size for the label */
+  text-decoration: underline;
+  color: darkgrey;
 }
 
+.show-more-container{
+  margin-left: 210px;
+  margin-right: -30px;
+  margin-top: -5px;
+}
 .data-section {
   display: flex;
   flex-direction: column;
@@ -107,7 +120,6 @@ textarea {
 .input-container {
   display: inline-flex;
   flex-direction: column;
-  align-items: baseline;
   width: 300px;
 }