From 85e8def2d24a0746bf21fde5c4c7005f85f65bb7 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Sun, 7 May 2023 16:04:17 +0300
Subject: [PATCH 01/22] modal-component

---
 frontend/src/components/ui/Modal/Modal.js     | 31 ++++++++++++++
 .../src/components/ui/Modal/Modal.module.css  | 41 +++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 frontend/src/components/ui/Modal/Modal.js
 create mode 100644 frontend/src/components/ui/Modal/Modal.module.css

diff --git a/frontend/src/components/ui/Modal/Modal.js b/frontend/src/components/ui/Modal/Modal.js
new file mode 100644
index 0000000..41bf4bc
--- /dev/null
+++ b/frontend/src/components/ui/Modal/Modal.js
@@ -0,0 +1,31 @@
+import { IoClose } from 'react-icons/io5';
+import PropTypes from 'prop-types';
+import styles from './Modal.module.css';
+import ModalNewComment from '../../ModalNewComment/ModalNewComment';
+import ModalNewPost from '../../ModalNewPost/ModalNewPost';
+
+function Modal({ title, onClose, children, footer, isPostModal, post }) {
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+  return (
+    <div className={`${styles.modal_background}`}>
+      <div className={`${styles.modal_container}`}>
+        <IoClose className={styles.close_icon} onClick={handleClose} />
+        {isPostModal ? <ModalNewPost title={title} footer={footer} /> : <ModalNewComment title={title} post={post} />}
+      </div>
+    </div>
+  );
+}
+
+Modal.propTypes = {
+  title: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  footer: PropTypes.node,
+  isPostModal: PropTypes.bool,
+};
+
+export default Modal;
diff --git a/frontend/src/components/ui/Modal/Modal.module.css b/frontend/src/components/ui/Modal/Modal.module.css
new file mode 100644
index 0000000..5e9ba0d
--- /dev/null
+++ b/frontend/src/components/ui/Modal/Modal.module.css
@@ -0,0 +1,41 @@
+.modal_background {
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: fixed;
+}
+
+.modal_container {
+  position: relative;
+  left: 8.125rem;
+  top: 3.75rem;
+  width: 74rem;
+  height: 45rem;
+  background: rgba(0, 0, 0, 0.49);
+  border: .0625rem solid rgba(255, 255, 255, 0.1);
+  border-radius: .125rem;
+}
+
+.close_icon {
+  position: fixed;
+  right: 7.9375rem;
+  fill: var(--white);
+  height: 2rem;
+  width: 2rem;
+  cursor: pointer;
+}
+
+.modal_body {
+  display: flex;
+  flex-direction: row;
+}
+
+.footer {
+  position: relative;
+  display: flex;
+  justify-content: space-evenly;
+  top: 11.25rem;
+}

From 239d14c9ca1d08eb7f9ef1c258db6cfd83ea6169 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Sun, 7 May 2023 16:04:56 +0300
Subject: [PATCH 02/22] new comment modal

---
 .../ModalNewComment/ModalNewComment.js        | 27 +++++++++
 .../ModalNewComment.module.css                | 56 +++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 frontend/src/components/ModalNewComment/ModalNewComment.js
 create mode 100644 frontend/src/components/ModalNewComment/ModalNewComment.module.css

diff --git a/frontend/src/components/ModalNewComment/ModalNewComment.js b/frontend/src/components/ModalNewComment/ModalNewComment.js
new file mode 100644
index 0000000..36fd920
--- /dev/null
+++ b/frontend/src/components/ModalNewComment/ModalNewComment.js
@@ -0,0 +1,27 @@
+import styles from './ModalNewComment.module.css';
+import Input from '../ui/Input/input';
+import Button from '../ui/Button/Button';
+
+function ModalNewComment({ title, post }) {
+  return (
+    <div className={`${styles.comment_container}`}>
+      <h1 className={`${styles.comment_title}`}> {title} </h1>
+      <h4 className={`${styles.comment_subTitle}`}> {post.location} </h4>
+      <div className={`${styles.comment_image}`}>
+        <img className={`${styles.image}`} src={post.image} alt='post' />
+      </div>
+      <div className={`${styles.comment_body}`}>
+        <div className={`${styles.comments}`}>
+          <ul className={`${styles.list_item}`}>
+            {post.comments.map((comment) => (
+              <li> {comment} </li>
+            ))}
+          </ul>
+        </div>
+        <Input size='l' />
+        <Button className={`${styles.send_button}`} size='m' variant='primary' type='submit' label='Send' />
+      </div>
+    </div>
+  );
+}
+export default ModalNewComment;
diff --git a/frontend/src/components/ModalNewComment/ModalNewComment.module.css b/frontend/src/components/ModalNewComment/ModalNewComment.module.css
new file mode 100644
index 0000000..5d7315a
--- /dev/null
+++ b/frontend/src/components/ModalNewComment/ModalNewComment.module.css
@@ -0,0 +1,56 @@
+.comment_title {
+  position: relative;
+  display: flex;
+  width: 18.19rem;
+  top: 4.375rem;
+  left: 3.75rem;
+}
+.comment_subTitle {
+  position: fixed;
+  top: 12.5rem;
+  left: 12.19rem;
+}
+
+.comment_image {
+  background-color: var(--black);
+  position: relative;
+  display: inline-block;
+  height: 23rem;
+  width: 31.9375rem;
+  left: 3.625rem;
+  top: 7.9375rem;
+}
+.image {
+  width: 100%;
+  height: 100%;
+}
+.comment_body {
+  position: relative;
+  float: right;
+  padding: 5rem;
+}
+
+.comments {
+  position: relative;
+  overflow-y: auto;
+  width: 24.68rem;
+  height: 22.5rem;
+  left: 0.625rem;
+  background-color: #d9d9d9;
+}
+
+.send_button {
+  position: relative;
+  left: 17.5rem;
+  height: 3.75rem;
+  width: 7.81rem;
+  border: none;
+}
+.list_item {
+  list-style-position: inside;
+  content: normal;
+  padding: 1.25rem;
+}
+li::marker {
+  content: normal;
+}

From 466f61a3e13c602f3394863261f4c844ac15cb75 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Sun, 7 May 2023 16:05:32 +0300
Subject: [PATCH 03/22] modal for new Post

---
 .../components/ModalNewPost/ModalNewPost.js   | 31 ++++++++++++
 .../ModalNewPost/ModalNewPost.module.css      | 48 +++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 frontend/src/components/ModalNewPost/ModalNewPost.js
 create mode 100644 frontend/src/components/ModalNewPost/ModalNewPost.module.css

diff --git a/frontend/src/components/ModalNewPost/ModalNewPost.js b/frontend/src/components/ModalNewPost/ModalNewPost.js
new file mode 100644
index 0000000..7cfd4ba
--- /dev/null
+++ b/frontend/src/components/ModalNewPost/ModalNewPost.js
@@ -0,0 +1,31 @@
+import styles from './ModalNewPost.module.css';
+import Input from '../ui/Input/input';
+import Textarea from '../ui/Textarea/Textarea';
+import UploadFile from '../UploadFile/UploadFile';
+
+function ModalNewPost({ title, footer }) {
+  return (
+    <div className={`${styles.post_container}`}>
+      <div className={`${styles.modal_title}`}>
+        <h1> {title} </h1>
+      </div>
+      <div className={`${styles.modal_left}`}>
+        <div className={`${styles.modal_photo}`}>
+          <UploadFile />
+        </div>
+      </div>
+      <div className={`${styles.modal_right}`}>
+        <div className={`${styles.modal_textareas}`}>
+          <h4> Title </h4>
+          <Input className={`${styles.title}`} size='l' />
+          <h4> Location </h4>
+          <Input className={`${styles.location}`} size='l' />
+          <h4> Description </h4>
+          <Textarea className={`${styles.description}`} size='l' />
+        </div>
+      </div>
+      <div className={`${styles.footer}`}>{footer}</div>
+    </div>
+  );
+}
+export default ModalNewPost;
diff --git a/frontend/src/components/ModalNewPost/ModalNewPost.module.css b/frontend/src/components/ModalNewPost/ModalNewPost.module.css
new file mode 100644
index 0000000..e1385f9
--- /dev/null
+++ b/frontend/src/components/ModalNewPost/ModalNewPost.module.css
@@ -0,0 +1,48 @@
+.modal_title {
+  position: relative;
+  top: 6.3rem;
+  left: 3.75rem;
+}
+
+.modal_photo {
+  display: flex;
+  position: relative;
+  left: 3.75rem;
+  top: 6.5rem;
+  width: 31.625rem;
+  height: 22.9rem;
+  background-color: var(--black);
+}
+
+.modal_right {
+  position: relative;
+  left: 32.5rem;
+  bottom: 21.25rem;
+}
+.description {
+  position: relative;
+  width: 25rem;
+}
+.title {
+  position: relative;
+  left: -.625rem;
+  width: 25rem;
+}
+.location {
+  position: relative;
+  left: -.625rem;
+}
+.modal_textareas {
+  position: relative;
+  display: grid;
+  top: 5.625rem;
+  left: 9.5625rem;
+  align-items: end;
+}
+
+.footer {
+  position: relative;
+  display: inline-block;
+  bottom: 14.9375rem;
+  left: 29.375rem;
+}

From ef2bdddcb8a7976a36d11020f3e15bcdca197387 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Sun, 7 May 2023 16:06:17 +0300
Subject: [PATCH 04/22] add function to open modal

---
 frontend/src/components/Post/Post.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Post/Post.js b/frontend/src/components/Post/Post.js
index abc2375..43066b8 100644
--- a/frontend/src/components/Post/Post.js
+++ b/frontend/src/components/Post/Post.js
@@ -2,7 +2,7 @@ import styles from './Post.module.css';
 import Card from '../ui/Card/Card';
 import PostFooter from '../PostFooter/PostFooter';
 
-function Post({ post }) {
+function Post({ post, handleCommentOpen }) {
   return (
     <Card
       key={post.id}
@@ -15,7 +15,7 @@ function Post({ post }) {
         </div>
       }
       description={post.description}
-      Footer={<PostFooter key={post.id} likes={post.likes} comments={post.comments} />}
+      Footer={<PostFooter key={post.id} post={post} likes={post.likes} comments={post.comments} handleCommentOpen={handleCommentOpen} />}
       size='m'
       variant='wide'
     />

From 8361d0d185e5e8ff7e33bc603cd623e619035c66 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Sun, 7 May 2023 16:07:02 +0300
Subject: [PATCH 05/22] add function to open modal comment

---
 frontend/src/components/PostFooter/PostFooter.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/PostFooter/PostFooter.js b/frontend/src/components/PostFooter/PostFooter.js
index 7bb7443..e7ea405 100644
--- a/frontend/src/components/PostFooter/PostFooter.js
+++ b/frontend/src/components/PostFooter/PostFooter.js
@@ -3,8 +3,7 @@ import { AiFillLike } from 'react-icons/ai';
 import { MdAddComment } from 'react-icons/md';
 import styles from './PostFooter.module.css';
 
-function PostFooter({ postId, likes, comments }) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+function PostFooter({ postId, post, likes, comments, handleCommentOpen }) {
   const [isLiked, setIsLiked] = useState([]);
 
   const handleLikeClick = (postId) => {
@@ -14,8 +13,8 @@ function PostFooter({ postId, likes, comments }) {
       setIsLiked([...isLiked, postId]);
     }
   };
-  const handleCommentClick = () => {
-    setIsModalOpen(true);
+  const handleCommentClick = (post) => {
+    handleCommentOpen(post);
   };
 
   const isPostLiked = isLiked.includes(postId);
@@ -26,7 +25,7 @@ function PostFooter({ postId, likes, comments }) {
       <button onClick={() => handleLikeClick(postId)}>
         <AiFillLike className={`${styles['community-icon']}`} fill={isPostLiked ? 'red' : ''} />
       </button>
-      <button onClick={handleCommentClick}>
+      <button onClick={() => handleCommentClick(post)}>
         <MdAddComment className={`${styles['community-icon']}`} fill='' />
       </button>
       <p className={styles.comments_counter}>{comments.length}</p>

From 431b71bf02eab8f5544456caff6fb2e4eac4bb22 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Sun, 7 May 2023 16:08:20 +0300
Subject: [PATCH 06/22] file upload for adding image to new post

---
 .../src/components/UploadFile/UploadFile.js   | 52 +++++++++++++++++++
 .../UploadFile/UploadFile.module.css          | 25 +++++++++
 2 files changed, 77 insertions(+)
 create mode 100644 frontend/src/components/UploadFile/UploadFile.js
 create mode 100644 frontend/src/components/UploadFile/UploadFile.module.css

diff --git a/frontend/src/components/UploadFile/UploadFile.js b/frontend/src/components/UploadFile/UploadFile.js
new file mode 100644
index 0000000..6ffaa79
--- /dev/null
+++ b/frontend/src/components/UploadFile/UploadFile.js
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { FaRegTrashAlt } from 'react-icons/fa';
+import styles from './UploadFile.module.css';
+
+function UploadFile() {
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [imagePreview, setimagePreview] = useState(null);
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+
+  const handleImageChange = (event) => {
+    const file = event.target.files[0];
+    setSelectedImage(file);
+
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setimagePreview(reader.result);
+      setIsImageLoaded(true);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+  };
+
+  const removeSelectedImage = () => {
+    setSelectedImage(null);
+    setimagePreview(null);
+    setIsImageLoaded(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className={`${styles.file_input_container}`}>
+        {!isImageLoaded && (
+          // eslint-disable-next-line jsx-a11y/label-has-associated-control
+          <label htmlFor='imageInput' className={`${styles.file_input_label}`}>
+            <h3>Click to choose an image</h3>
+          </label>
+        )}
+        <input type='file' id='imageInput' onChange={handleImageChange} accept='image/*' style={{ display: 'none' }} />
+        {imagePreview && isImageLoaded && (
+          <div>
+            <img className={`${styles.image_upload}`} src={imagePreview} alt='Uploaded Preview' />
+            <FaRegTrashAlt className={`${styles.trash_button}`} type='button' onClick={removeSelectedImage} />
+          </div>
+        )}
+      </div>
+    </form>
+  );
+}
+export default UploadFile;
diff --git a/frontend/src/components/UploadFile/UploadFile.module.css b/frontend/src/components/UploadFile/UploadFile.module.css
new file mode 100644
index 0000000..7371351
--- /dev/null
+++ b/frontend/src/components/UploadFile/UploadFile.module.css
@@ -0,0 +1,25 @@
+form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 23rem;
+  width: 36.87rem;
+}
+
+.image_upload {
+  position: relative;
+  top: .93rem;
+  width: 31.87rem;
+  height: 23rem;
+}
+
+.trash_button {
+  position: relative;
+  top: .625rem;
+  cursor: pointer;
+}
+
+.file_input_label {
+  cursor: pointer;
+}

From 4fcc2d05fefaed1399f2e434fa0970f8300e41da Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Sun, 7 May 2023 16:10:30 +0300
Subject: [PATCH 07/22] add the logic to open the relevent modals

---
 frontend/src/pages/community/Community.js | 39 +++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/community/Community.js b/frontend/src/pages/community/Community.js
index 101833a..e9490a5 100644
--- a/frontend/src/pages/community/Community.js
+++ b/frontend/src/pages/community/Community.js
@@ -1,12 +1,47 @@
 import { BsPlusCircle } from 'react-icons/bs';
+import { useState } from 'react';
 import Post from '../../components/Post/Post';
+import ModalNewComment from '../../components/ModalNewComment/ModalNewComment';
 import headerImg from '../../assets/communityImg.png';
 import travelersPosts from '../../data/travelersPosts';
+import Modal from '../../components/ui/Modal/Modal';
+import Button from '../../components/ui/Button/Button';
 import styles from './Community.module.css';
 
 export default function CommunityPage() {
+  const [showPostModal, setShowPostModal] = useState(false);
+  const [showCommentModal, setShowCommentModal] = useState(false);
+  const [selectedPost, setSelectedPost] = useState(null);
+
+  const handleCommentOpen = (post) => {
+    setShowCommentModal(true);
+    if (!selectedPost) setSelectedPost(post);
+  };
+  const handlePostOpen = () => {
+    setShowPostModal(true);
+  };
+  const handleCommentClose = () => {
+    setShowCommentModal(false);
+    if (selectedPost) setSelectedPost(null);
+  };
+  const handlePostClose = () => {
+    setShowPostModal(false);
+  };
   return (
     <div className={styles.community_page}>
+      {showPostModal && (
+        <Modal
+          onClose={handlePostClose}
+          title='Upload Post'
+          isPostModal
+          footer={<Button size='l' variant='primary' type='submit' label='Upload' />}
+        />
+      )}
+      {showCommentModal && (
+        <Modal onClose={handleCommentClose} title='Comments' post={selectedPost}>
+          <ModalNewComment />
+        </Modal>
+      )}
       <div className={styles.header_img}>
         <img className={styles.community_header_image} src={headerImg} alt='your vacation' />
         <div className={styles.title_block}>
@@ -15,10 +50,10 @@ export default function CommunityPage() {
       </div>
       <div className={styles.community_cards}>
         {travelersPosts.map((post) => (
-          <Post key={post.id} post={post} />
+          <Post key={post.id} post={post} handleCommentOpen={handleCommentOpen} />
         ))}
       </div>
-      <button className={styles.btn_add_post}>
+      <button onClick={handlePostOpen} className={styles.btn_add_post}>
         <BsPlusCircle fill='red' size='3rem' />
       </button>
     </div>

From b93548e606d057f936b55495883f9ca1413d634d Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Sun, 7 May 2023 16:10:56 +0300
Subject: [PATCH 08/22] delete react-bootstrap/card

---
 frontend/src/pages/planTrip/planTrip.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/pages/planTrip/planTrip.js b/frontend/src/pages/planTrip/planTrip.js
index 6dc57b4..fef91c2 100644
--- a/frontend/src/pages/planTrip/planTrip.js
+++ b/frontend/src/pages/planTrip/planTrip.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import Card from 'react-bootstrap/Card';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import styles from './planTrip.module.css';

From a0468c55bcf04f48053d1ba8a5a217e9c42ee377 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Tue, 9 May 2023 15:58:51 +0300
Subject: [PATCH 09/22] delete space

---
 frontend/src/components/ModalNewPost/ModalNewPost.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ModalNewPost/ModalNewPost.js b/frontend/src/components/ModalNewPost/ModalNewPost.js
index 7cfd4ba..267e93d 100644
--- a/frontend/src/components/ModalNewPost/ModalNewPost.js
+++ b/frontend/src/components/ModalNewPost/ModalNewPost.js
@@ -7,7 +7,7 @@ function ModalNewPost({ title, footer }) {
   return (
     <div className={`${styles.post_container}`}>
       <div className={`${styles.modal_title}`}>
-        <h1> {title} </h1>
+        <h1>{title}</h1>
       </div>
       <div className={`${styles.modal_left}`}>
         <div className={`${styles.modal_photo}`}>

From 71036716ca1821af255be86bbd763fd1597809a1 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Tue, 9 May 2023 15:59:15 +0300
Subject: [PATCH 10/22] fix capital letter

---
 frontend/src/components/UploadFile/UploadFile.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/UploadFile/UploadFile.js b/frontend/src/components/UploadFile/UploadFile.js
index 6ffaa79..e4ea4f8 100644
--- a/frontend/src/components/UploadFile/UploadFile.js
+++ b/frontend/src/components/UploadFile/UploadFile.js
@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import { FaRegTrashAlt } from 'react-icons/fa';
+import Text from '../ui/Text/Text';
 import styles from './UploadFile.module.css';
 
 function UploadFile() {
   const [selectedImage, setSelectedImage] = useState(null);
-  const [imagePreview, setimagePreview] = useState(null);
+  const [imagePreview, setImagePreview] = useState(null);
   const [isImageLoaded, setIsImageLoaded] = useState(false);
 
   const handleImageChange = (event) => {
@@ -13,7 +14,7 @@ function UploadFile() {
 
     const reader = new FileReader();
     reader.onloadend = () => {
-      setimagePreview(reader.result);
+      setImagePreview(reader.result);
       setIsImageLoaded(true);
     };
     reader.readAsDataURL(file);
@@ -25,7 +26,7 @@ function UploadFile() {
 
   const removeSelectedImage = () => {
     setSelectedImage(null);
-    setimagePreview(null);
+    setImagePreview(null);
     setIsImageLoaded(false);
   };
 
@@ -35,7 +36,7 @@ function UploadFile() {
         {!isImageLoaded && (
           // eslint-disable-next-line jsx-a11y/label-has-associated-control
           <label htmlFor='imageInput' className={`${styles.file_input_label}`}>
-            <h3>Click to choose an image</h3>
+            <Text content='Click to choose an image' type='bold' />
           </label>
         )}
         <input type='file' id='imageInput' onChange={handleImageChange} accept='image/*' style={{ display: 'none' }} />

From 275242c6fd2805e5e4376421f421c5cf744fa76c Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Tue, 9 May 2023 15:59:51 +0300
Subject: [PATCH 11/22] small change

---
 frontend/src/components/ui/Modal/Modal.module.css | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ui/Modal/Modal.module.css b/frontend/src/components/ui/Modal/Modal.module.css
index 5e9ba0d..a4804ee 100644
--- a/frontend/src/components/ui/Modal/Modal.module.css
+++ b/frontend/src/components/ui/Modal/Modal.module.css
@@ -1,11 +1,10 @@
 .modal_background {
+  position: fixed;
+  display: flex;
+  justify-content: flex-start;
   width: 100%;
   height: 100%;
   z-index: 1;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  position: fixed;
 }
 
 .modal_container {
@@ -30,7 +29,6 @@
 
 .modal_body {
   display: flex;
-  flex-direction: row;
 }
 
 .footer {

From d96c34ba50bbe091bdab862e1cc11537a5d25254 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Tue, 9 May 2023 19:08:27 +0300
Subject: [PATCH 12/22] changed to Text

---
 frontend/src/components/ModalNewPost/ModalNewPost.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ModalNewPost/ModalNewPost.js b/frontend/src/components/ModalNewPost/ModalNewPost.js
index 267e93d..293c348 100644
--- a/frontend/src/components/ModalNewPost/ModalNewPost.js
+++ b/frontend/src/components/ModalNewPost/ModalNewPost.js
@@ -1,6 +1,7 @@
 import styles from './ModalNewPost.module.css';
 import Input from '../ui/Input/input';
 import Textarea from '../ui/Textarea/Textarea';
+import Text from '../ui/Text/Text';
 import UploadFile from '../UploadFile/UploadFile';
 
 function ModalNewPost({ title, footer }) {
@@ -16,11 +17,11 @@ function ModalNewPost({ title, footer }) {
       </div>
       <div className={`${styles.modal_right}`}>
         <div className={`${styles.modal_textareas}`}>
-          <h4> Title </h4>
+          <Text content='Title' type='bold' />
           <Input className={`${styles.title}`} size='l' />
-          <h4> Location </h4>
+          <Text content='Location' type='bold' />
           <Input className={`${styles.location}`} size='l' />
-          <h4> Description </h4>
+          <Text content='Description' type='bold' />
           <Textarea className={`${styles.description}`} size='l' />
         </div>
       </div>

From 679c0dbda08165943c30a68ff006f882011d9ad7 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Tue, 9 May 2023 19:12:06 +0300
Subject: [PATCH 13/22] remove template literals

---
 .../ModalNewComment/ModalNewComment.js        | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/ModalNewComment/ModalNewComment.js b/frontend/src/components/ModalNewComment/ModalNewComment.js
index 36fd920..5ce3d8b 100644
--- a/frontend/src/components/ModalNewComment/ModalNewComment.js
+++ b/frontend/src/components/ModalNewComment/ModalNewComment.js
@@ -1,25 +1,26 @@
 import styles from './ModalNewComment.module.css';
 import Input from '../ui/Input/input';
+import Text from '../ui/Text/Text';
 import Button from '../ui/Button/Button';
 
 function ModalNewComment({ title, post }) {
   return (
-    <div className={`${styles.comment_container}`}>
-      <h1 className={`${styles.comment_title}`}> {title} </h1>
-      <h4 className={`${styles.comment_subTitle}`}> {post.location} </h4>
-      <div className={`${styles.comment_image}`}>
-        <img className={`${styles.image}`} src={post.image} alt='post' />
+    <div className={styles.comment_container}>
+      <h2 className={styles.comment_title}>{title}</h2>
+      <Text className={styles.comment_subTitle} content={post.location} />
+      <div className={styles.comment_image}>
+        <img className={styles.image} src={post.image} alt='post' />
       </div>
-      <div className={`${styles.comment_body}`}>
-        <div className={`${styles.comments}`}>
-          <ul className={`${styles.list_item}`}>
+      <div className={styles.comment_body}>
+        <div className={styles.comments}>
+          <ul className={styles.list_item}>
             {post.comments.map((comment) => (
-              <li> {comment} </li>
+              <li>{comment}</li>
             ))}
           </ul>
         </div>
         <Input size='l' />
-        <Button className={`${styles.send_button}`} size='m' variant='primary' type='submit' label='Send' />
+        <Button className={styles.send_button} size='m' variant='primary' type='submit' label='Send' />
       </div>
     </div>
   );

From 70829ea227e506353b99c5bc0141df198ffe2922 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Tue, 9 May 2023 19:12:18 +0300
Subject: [PATCH 14/22] some changes

---
 .../ModalNewComment/ModalNewComment.module.css     | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ModalNewComment/ModalNewComment.module.css b/frontend/src/components/ModalNewComment/ModalNewComment.module.css
index 5d7315a..2a8eb53 100644
--- a/frontend/src/components/ModalNewComment/ModalNewComment.module.css
+++ b/frontend/src/components/ModalNewComment/ModalNewComment.module.css
@@ -1,13 +1,17 @@
+h2 {
+  padding: 0;
+  display: flex;
+  justify-content: unset;
+}
 .comment_title {
   position: relative;
-  display: flex;
-  width: 18.19rem;
-  top: 4.375rem;
-  left: 3.75rem;
+  padding-left: 3.75rem;
+  top: 5rem;
 }
+
 .comment_subTitle {
   position: fixed;
-  top: 12.5rem;
+  top: 12rem;
   left: 12.19rem;
 }
 

From c9f4c9ff5dfc0739e1ef18dcbc7a0326c7ed8e4b Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Thu, 11 May 2023 20:02:28 +0300
Subject: [PATCH 15/22] delete footer button

---
 frontend/src/components/ModalNewComment/ModalNewComment.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/components/ModalNewComment/ModalNewComment.js b/frontend/src/components/ModalNewComment/ModalNewComment.js
index 5ce3d8b..d72429f 100644
--- a/frontend/src/components/ModalNewComment/ModalNewComment.js
+++ b/frontend/src/components/ModalNewComment/ModalNewComment.js
@@ -1,7 +1,6 @@
 import styles from './ModalNewComment.module.css';
 import Input from '../ui/Input/input';
 import Text from '../ui/Text/Text';
-import Button from '../ui/Button/Button';
 
 function ModalNewComment({ title, post }) {
   return (
@@ -20,7 +19,6 @@ function ModalNewComment({ title, post }) {
           </ul>
         </div>
         <Input size='l' />
-        <Button className={styles.send_button} size='m' variant='primary' type='submit' label='Send' />
       </div>
     </div>
   );

From 9e3cf3da76c780ecb5e1331a5aa7151c51bf7eef Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Thu, 11 May 2023 20:03:33 +0300
Subject: [PATCH 16/22] delete footer

---
 frontend/src/components/ModalNewPost/ModalNewPost.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/ModalNewPost/ModalNewPost.js b/frontend/src/components/ModalNewPost/ModalNewPost.js
index 293c348..662a533 100644
--- a/frontend/src/components/ModalNewPost/ModalNewPost.js
+++ b/frontend/src/components/ModalNewPost/ModalNewPost.js
@@ -4,7 +4,7 @@ import Textarea from '../ui/Textarea/Textarea';
 import Text from '../ui/Text/Text';
 import UploadFile from '../UploadFile/UploadFile';
 
-function ModalNewPost({ title, footer }) {
+function ModalNewPost({ title }) {
   return (
     <div className={`${styles.post_container}`}>
       <div className={`${styles.modal_title}`}>
@@ -25,7 +25,6 @@ function ModalNewPost({ title, footer }) {
           <Textarea className={`${styles.description}`} size='l' />
         </div>
       </div>
-      <div className={`${styles.footer}`}>{footer}</div>
     </div>
   );
 }

From b74015e6c75839536f98be855cd66f38693458d5 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Thu, 11 May 2023 20:04:06 +0300
Subject: [PATCH 17/22] delete footer

---
 .../components/ModalNewPost/ModalNewPost.module.css   | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ModalNewPost/ModalNewPost.module.css b/frontend/src/components/ModalNewPost/ModalNewPost.module.css
index e1385f9..441d9da 100644
--- a/frontend/src/components/ModalNewPost/ModalNewPost.module.css
+++ b/frontend/src/components/ModalNewPost/ModalNewPost.module.css
@@ -1,3 +1,7 @@
+.post_container {
+  height: 80%;
+}
+
 .modal_title {
   position: relative;
   top: 6.3rem;
@@ -39,10 +43,3 @@
   left: 9.5625rem;
   align-items: end;
 }
-
-.footer {
-  position: relative;
-  display: inline-block;
-  bottom: 14.9375rem;
-  left: 29.375rem;
-}

From 52c27a025bb7c9dbd2150574c489d4206717259d Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Thu, 11 May 2023 20:16:15 +0300
Subject: [PATCH 18/22] small change, title delete

---
 .../components/ModalNewComment/ModalNewComment.module.css   | 5 -----
 frontend/src/components/ModalNewPost/ModalNewPost.js        | 5 +----
 .../src/components/ModalNewPost/ModalNewPost.module.css     | 6 ------
 3 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/frontend/src/components/ModalNewComment/ModalNewComment.module.css b/frontend/src/components/ModalNewComment/ModalNewComment.module.css
index 2a8eb53..bdf9477 100644
--- a/frontend/src/components/ModalNewComment/ModalNewComment.module.css
+++ b/frontend/src/components/ModalNewComment/ModalNewComment.module.css
@@ -3,11 +3,6 @@ h2 {
   display: flex;
   justify-content: unset;
 }
-.comment_title {
-  position: relative;
-  padding-left: 3.75rem;
-  top: 5rem;
-}
 
 .comment_subTitle {
   position: fixed;
diff --git a/frontend/src/components/ModalNewPost/ModalNewPost.js b/frontend/src/components/ModalNewPost/ModalNewPost.js
index 662a533..479947d 100644
--- a/frontend/src/components/ModalNewPost/ModalNewPost.js
+++ b/frontend/src/components/ModalNewPost/ModalNewPost.js
@@ -4,12 +4,9 @@ import Textarea from '../ui/Textarea/Textarea';
 import Text from '../ui/Text/Text';
 import UploadFile from '../UploadFile/UploadFile';
 
-function ModalNewPost({ title }) {
+function ModalNewPost() {
   return (
     <div className={`${styles.post_container}`}>
-      <div className={`${styles.modal_title}`}>
-        <h1>{title}</h1>
-      </div>
       <div className={`${styles.modal_left}`}>
         <div className={`${styles.modal_photo}`}>
           <UploadFile />
diff --git a/frontend/src/components/ModalNewPost/ModalNewPost.module.css b/frontend/src/components/ModalNewPost/ModalNewPost.module.css
index 441d9da..91591d3 100644
--- a/frontend/src/components/ModalNewPost/ModalNewPost.module.css
+++ b/frontend/src/components/ModalNewPost/ModalNewPost.module.css
@@ -2,12 +2,6 @@
   height: 80%;
 }
 
-.modal_title {
-  position: relative;
-  top: 6.3rem;
-  left: 3.75rem;
-}
-
 .modal_photo {
   display: flex;
   position: relative;

From b54b4327bec1098c14ab44cf6349198f40de1a18 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Thu, 11 May 2023 20:17:05 +0300
Subject: [PATCH 19/22] use title, children and footer

---
 frontend/src/components/ui/Modal/Modal.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ui/Modal/Modal.js b/frontend/src/components/ui/Modal/Modal.js
index 41bf4bc..77d1b96 100644
--- a/frontend/src/components/ui/Modal/Modal.js
+++ b/frontend/src/components/ui/Modal/Modal.js
@@ -1,10 +1,10 @@
 import { IoClose } from 'react-icons/io5';
 import PropTypes from 'prop-types';
 import styles from './Modal.module.css';
-import ModalNewComment from '../../ModalNewComment/ModalNewComment';
-import ModalNewPost from '../../ModalNewPost/ModalNewPost';
 
-function Modal({ title, onClose, children, footer, isPostModal, post }) {
+function Modal({ title, onClose, children, footer, isPostModal }) {
+  const footerClassName = isPostModal ? styles.post_footer : styles.comment_footer;
+  const titleClassName = isPostModal ? styles.post_title : styles.comment_title;
   const handleClose = () => {
     if (onClose) {
       onClose();
@@ -14,7 +14,9 @@ function Modal({ title, onClose, children, footer, isPostModal, post }) {
     <div className={`${styles.modal_background}`}>
       <div className={`${styles.modal_container}`}>
         <IoClose className={styles.close_icon} onClick={handleClose} />
-        {isPostModal ? <ModalNewPost title={title} footer={footer} /> : <ModalNewComment title={title} post={post} />}
+        <h1 className={titleClassName}>{title}</h1>
+        {children}
+        <div className={footerClassName}> {footer} </div>
       </div>
     </div>
   );

From a158474ec97e5732f736754efdd1a16f129bae56 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Thu, 11 May 2023 20:17:17 +0300
Subject: [PATCH 20/22] style

---
 .../src/components/ui/Modal/Modal.module.css  | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ui/Modal/Modal.module.css b/frontend/src/components/ui/Modal/Modal.module.css
index a4804ee..7e02254 100644
--- a/frontend/src/components/ui/Modal/Modal.module.css
+++ b/frontend/src/components/ui/Modal/Modal.module.css
@@ -27,13 +27,31 @@
   cursor: pointer;
 }
 
-.modal_body {
+.post_title {
+  position: relative;
+  top: 6.3rem;
+  left: 3.75rem;
+}
+
+.comment_title {
+  position: relative;
+  padding-left: 3.75rem;
+  top: 5rem;
+}
+
+.post_footer {
+  position: relative;
   display: flex;
+  justify-content: center;
+  top: -3rem;
 }
 
-.footer {
+.comment_footer {
   position: relative;
+  padding-right: 5.625rem;
+  padding-top: 1rem;
+  width: 100%;
   display: flex;
-  justify-content: space-evenly;
-  top: 11.25rem;
+  justify-content: flex-end;
+  top: -6rem;
 }

From 3b5fe98296aaf7ea1fc34fdb2553f5dd42bfa276 Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Thu, 11 May 2023 20:17:52 +0300
Subject: [PATCH 21/22] some changes in modalNewPost and Comment

---
 frontend/src/pages/community/Community.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/community/Community.js b/frontend/src/pages/community/Community.js
index e9490a5..cfda3a8 100644
--- a/frontend/src/pages/community/Community.js
+++ b/frontend/src/pages/community/Community.js
@@ -7,6 +7,7 @@ import travelersPosts from '../../data/travelersPosts';
 import Modal from '../../components/ui/Modal/Modal';
 import Button from '../../components/ui/Button/Button';
 import styles from './Community.module.css';
+import ModalNewPost from '../../components/ModalNewPost/ModalNewPost';
 
 export default function CommunityPage() {
   const [showPostModal, setShowPostModal] = useState(false);
@@ -35,11 +36,13 @@ export default function CommunityPage() {
           title='Upload Post'
           isPostModal
           footer={<Button size='l' variant='primary' type='submit' label='Upload' />}
-        />
+        >
+          <ModalNewPost />
+        </Modal>
       )}
       {showCommentModal && (
-        <Modal onClose={handleCommentClose} title='Comments' post={selectedPost}>
-          <ModalNewComment />
+        <Modal onClose={handleCommentClose} title='Comments' footer={<Button size='m' variant='primary' type='submit' label='Send' />}>
+          <ModalNewComment post={selectedPost} />
         </Modal>
       )}
       <div className={styles.header_img}>

From 4a875f17e43dbf4fe9253efaaf23177a95d4848c Mon Sep 17 00:00:00 2001
From: Jonathanhammer <yonatanhmr@gmail.com>
Date: Thu, 18 May 2023 14:12:59 +0300
Subject: [PATCH 22/22] delete eslint comment and add rule toeslintrc.json

---
 frontend/.eslintrc.json                          | 4 ++--
 frontend/src/components/UploadFile/UploadFile.js | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 57125a2..6b2ceb0 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -36,7 +36,8 @@
       {
         "js": "ignorePackages"
       }
-    ]
+    ],
+    "jsx-a11y/label-has-associated-control": ["error", { "assert": "either" }]
   },
   "parserOptions": {
     "ecmaFeatures": {
@@ -45,5 +46,4 @@
     "ecmaVersion": "latest",
     "sourceType": "module"
   }
-  
 }
diff --git a/frontend/src/components/UploadFile/UploadFile.js b/frontend/src/components/UploadFile/UploadFile.js
index e4ea4f8..3c165eb 100644
--- a/frontend/src/components/UploadFile/UploadFile.js
+++ b/frontend/src/components/UploadFile/UploadFile.js
@@ -34,7 +34,6 @@ function UploadFile() {
     <form onSubmit={handleSubmit}>
       <div className={`${styles.file_input_container}`}>
         {!isImageLoaded && (
-          // eslint-disable-next-line jsx-a11y/label-has-associated-control
           <label htmlFor='imageInput' className={`${styles.file_input_label}`}>
             <Text content='Click to choose an image' type='bold' />
           </label>