polynux
/
groupomania
mirror of https://github.com/polynux/groupomania-openclassrooms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix edit modal

This commit is contained in:
Guillaume Dorce 2022-09-30 15:31:29 +02:00
parent a6a6738e4b
commit 59d1946189
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/Modal.tsx
View File

@ -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 ( return (
<div <div
className={ 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') (show ? '' : ' hidden')
} }
> >
<div className="absolute w-full h-full top-0 left-0 bg-gray-900 opacity-70"></div> <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> </div>
); );
}; };

15
client/src/components/Popups/EditMessage.tsx
View File

@ -33,29 +33,28 @@ const EditMessage = ({
}; };
return ( return (
<Modal show={showEdit}> <Modal show={showEdit} className="min-w-[50%]">
<div className="title flex justify-between items-center border-b border-b-grey-light"> <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> <div className="text-white mb-2">Modifier votre message</div>
<FaTimes <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" 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)} onClick={() => setShowEdit(!showEdit)}
/> />
</div> </div>
<form onSubmit={handleSubmit} className="flex gap-2"> <form onSubmit={handleSubmit} className="flex flex-col gap-2">
<input <textarea
type="text"
value={messageContent} value={messageContent}
onChange={(e) => setMessageContent(e.target.value)} onChange={(e) => setMessageContent(e.target.value)}
placeholder="Message" 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" id="content"
name="content" name="content"
/> />
<button <button
type="submit" 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> </button>
</form> </form>
</Modal> </Modal>