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 (
<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>
);
};

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

@ -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>