From 59d194618968c73331e531df056ce7f2f71e9263 Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Fri, 30 Sep 2022 15:31:29 +0200
Subject: [PATCH] fix edit modal

---
 client/src/components/Modal.tsx              |  8 ++++----
 client/src/components/Popups/EditMessage.tsx | 15 +++++++--------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Modal.tsx b/client/src/components/Modal.tsx
index 002f9be..f99591c 100644
--- a/client/src/components/Modal.tsx
+++ b/client/src/components/Modal.tsx
@@ -1,15 +1,15 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
-const Modal = ({ children, show }: { children: ReactNode; show: boolean }) => {
+const Modal = ({ children, show, className = '' }: { children: ReactNode; show: boolean, className?: string }) => {
   return (
     <div
       className={
-        'modal overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 w-full h-full z-1000 flex justify-center items-center' +
+        `modal overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 w-full h-full z-1000 flex justify-center items-center` +
         (show ? '' : ' hidden')
       }
     >
       <div className="absolute w-full h-full top-0 left-0 bg-gray-900 opacity-70"></div>
-      <div className="relative rounded-lg shadow dark:bg-grey-dark p-4">{children}</div>
+      <div className={`relative rounded-lg shadow dark:bg-grey-dark p-4 ${className}`}>{children}</div>
     </div>
   );
 };
diff --git a/client/src/components/Popups/EditMessage.tsx b/client/src/components/Popups/EditMessage.tsx
index dde0d8c..c0c9ccb 100644
--- a/client/src/components/Popups/EditMessage.tsx
+++ b/client/src/components/Popups/EditMessage.tsx
@@ -33,29 +33,28 @@ const EditMessage = ({
   };
 
   return (
-    <Modal show={showEdit}>
-      <div className="title flex justify-between items-center border-b border-b-grey-light">
+    <Modal show={showEdit} className="min-w-[50%]">
+      <div className="title flex justify-between items-center border-b border-b-grey-light pb-2 mb-2">
         <div className="text-white mb-2">Modifier votre message</div>
         <FaTimes
           className="fill-grey-light hover:fill-grey-dark hover:bg-grey-light cursor-pointer transition-all text-xl w-10 h-10 p-2.5 rounded-md"
           onClick={() => setShowEdit(!showEdit)}
         />
       </div>
-      <form onSubmit={handleSubmit} className="flex gap-2">
-        <input
-          type="text"
+      <form onSubmit={handleSubmit} className="flex flex-col gap-2">
+        <textarea
           value={messageContent}
           onChange={(e) => setMessageContent(e.target.value)}
           placeholder="Message"
-          className="bg-grey-dark text-white rounded-xl p-2.5 w-full placeholder-red-light"
+          className="bg-grey-dark text-white rounded-xl border-2 border-grey p-2.5 w-full placeholder-red-light focus:outline-none focus:ring-2 focus:ring-grey focus:ring-offset-2"
           id="content"
           name="content"
         />
         <button
           type="submit"
-          className="rounded-md border border-red bg-red py-2 px-4 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
+          className="rounded-md border border-red bg-red py-2 px-4 text-sm font-medium max-w-[100px] text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
         >
-          Envoyer
+          Modifier
         </button>
       </form>
     </Modal>