com design

Site Web/client/src/components/Post/ActionComment.js

@@ -45,11 +45,9 @@ const ActionComment = ( { commentaire , postId}) => {
             {createur && edit && (
                 <form action="" onSubmit={handleEdit}
                 className="edit-comment-form">
-                    <label htmlFor='text' onClick={() => setEdit(!edit)}>Modifier le commentaire</label>
-                
-                    <input type="text" name="text" onChange={(e) => setMessage(e.target.value)} defaultValue={commentaire.text}/>
-                    <br/>
-                    <div className="btn">
+                    <div className="top-edit-com">
+                        <label htmlFor='text' onClick={() => setEdit(!edit)}>Annuler</label>
+                <div className="btn">
                         <span onClick={() => {
                             if(window.confirm("Etes-vous sur de supprimer ce commentaire ?")){
                                 handleDelete();
@@ -58,7 +56,12 @@ const ActionComment = ( { commentaire , postId}) => {
                             <i className="fas fa-trash-alt"></i>
                         </span>
                     </div>
-                    <input type="submit" value="Modifier"/>
+                    
+                    </div>
+                    <input type="text" name="text" onChange={(e) => setMessage(e.target.value)} defaultValue={commentaire.text}/>
+                    <br/>
+                    
+                    <input className="comment-modify" type="submit" value="Modifier"/>
                 </form>
 
             )}

Site Web/client/src/components/Post/Comment.js

@@ -49,8 +49,11 @@ const Comment = ({ post }) => {
                     </div>
                     <span>{timestampParser(comment.timestamp)}</span>
                   </div>
-                  <p>{comment.text}</p>
+                  <div className="content-com">
+                    <p>{comment.text}</p>
                   <ActionComment commentaire={comment} postId={post._id} />
+                    </div>
+                  
                 </div>
               </div>
             );

Site Web/client/src/styles/component/_poste.scss

@@ -95,7 +95,7 @@
 }
 
 .comment-container {
-    display: grid;
+    display: flex;
     grid-template-columns: 50px 1fr;
     border: 1px solid $color-2;
     padding: 15px;
@@ -155,10 +155,13 @@
         }
 
         .edit-comment-form {
+            background-color: rgb(131, 131, 131);
+            padding: 3%;
             margin-top: 14px;
+            border-radius:20px 20px 20px 6px ;
             label {
                 background: white;
-                color: $color-1;
+                color: black;
                 padding: 6px 12px 5px;
                 border-radius: 20px 20px 20px 6px;
                 cursor: pointer;
@@ -169,29 +172,35 @@
                 transform: scale(1.05);
                 }
             }
+            .comment-modify{
+                height: 30px;
+            }
             input[type="text"] {
                 margin: 4px 0;
                 background: white;
-                font-size: 1.15rem;
-                padding: 16px;
+                font-size: 1rem;
+                padding: 8px;
                 width: 100%;
                 border-radius: 6px 20px 6px 20px;
             }
+            label{
+                background-color: rgb(188, 184, 184);
+            }
             .btn {
                 display: flex;
                 align-items: center;
                 float: right;
 
                 span {
-                    background: white;
-                    padding: 10px 5px;
+                    background: rgb(102, 27, 27);
+                    padding: 3px 5px;
                     border-radius: 50px;
                     margin-right: 6px;
                     transition: 0.2s;
                     cursor: pointer;
 
                     &:hover {
-                        background: $color-2;
+                        background: red;
                     }
 
                     img {
@@ -213,23 +222,24 @@
     }
 }
 
+
 .comment-form {
     margin-top: 6px;
 
     input[type="text"] {
       width: 100%;
-      background: $color-4;
+      background: rgb(215, 215, 215);
       border-radius: 20px 20px 6px 20px;
-      padding: 20px;
-      font-size: 1.4rem;
+      padding: 10px;
+      font-size: 1rem;
 
       &:focus {
-        box-shadow: 0 0 2px rgba(51, 51, 51, 0.5);
+        box-shadow: 0 0 2px rgba(125, 123, 123, 0.5);
         }
     }
     input[type="submit"] {
       margin-top: 4px;
-      padding: 12px 16px;
+      padding: 10px 16px;
       width: 120px;
       background: $color-2;
       border-radius: 20px 6px 20px 20px;
@@ -253,6 +263,23 @@
     }
 }
 
+.top-edit-com {
+    display: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.content-com {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+}
+
+.right-part {
+    width: 80%;
+}
+
 .like-container {
     span {
       font-size: 1.02rem;