diff --git a/src/app/recurso/[id]/components/collectModal.js b/src/app/recurso/[id]/components/collectModal.js index b33957b74064f2635f7000663e0812022ba95d5f..f69b1845fc830fbe8f9ef77167042a36f5b00590 100644 --- a/src/app/recurso/[id]/components/collectModal.js +++ b/src/app/recurso/[id]/components/collectModal.js @@ -140,10 +140,10 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) { }, }, }}> - <div className="border border-ice-HC-white flex flex-col justify-items-center bg-ice-HC-dark p-3 rounded mx-2"> + <div className="border border-ice-HC-white flex flex-col justify-items-center bg-ice-HC-dark p-6 rounded mx-2"> <p className="text-xl text-darkGray-HC-white mb-2">Você já guardou esse recurso nessa coleção!</p> <button - className=" text-sm p-2 w-[20%] border text-darkGray-HC-white-underline border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:text-darkGray-HC-dark hover:bg-lightGray-HC-white" + className="self-center text-sm p-2 w-[80px] border text-darkGray-HC-white-underline border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:text-darkGray-HC-dark hover:bg-lightGray-HC-white" onClick={() => onClose()} > Ok @@ -156,16 +156,16 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) { const ModalSucess = ({ open, onClose }) => { return ( <Modal open={open} onClose={onClose} className="grid place-items-center" slotProps={{ - backdrop: { - sx: { - backgroundColor: "rgba(0, 0, 0, 0.3)", // Ajuste a opacidade conforme necessário - }, + backdrop: { + sx: { + backgroundColor: "rgba(0, 0, 0, 0.3)", // Ajuste a opacidade conforme necessário }, - }}> + }, + }}> <div className="flex flex-col border border-ice-HC-white justify-items-center bg-ice-HC-dark p-3 rounded"> <p className="text-xl text-darkGray-HC-white mb-2">Recurso guardado com sucesso!</p> <button - className=" text-sm p-2 w-[20%] text-darkGray-HC-white-underline border border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:text-darkGray-HC-dark-underline hover:bg-lightGray-HC-white" + className="self-center text-sm p-2 w-[80px] border text-darkGray-HC-white-underline border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:text-darkGray-HC-dark hover:bg-lightGray-HC-white" onClick={() => onClose()} > Ok @@ -182,11 +182,11 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) { onClose={onClose} className="grid place-items-center" > - <div className="flex flex-col w-[50%] bg-ice-HC-dark p-5 md:w-[25%] h-[40%] -mt-[0%] sm:h-[70%] max-sm:h-[85%] max-sm:w-[85%] overflow-y-scroll max-sm:-mt-[25%] sm:-mt-[30%] md:-mt-[20%] xl:-mt-[0%] rounded-lg min-h-[250px] outline outline-1 outline-ice-HC-white"> + <div className="flex flex-col lg:w-[1000px] h-[550px] bg-ice-HC-dark p-10 -mt-[0%] max-sm:h-[500px] max-sm:w-[85%] overflow-y-scroll max-sm:-mt-[25%] sm:-mt-[30%] md:-mt-[20%] xl:-mt-[0%] rounded-lg min-h-[250px] outline outline-1 outline-ice-HC-white"> <ModalRepeat open={repeatedOpen} onClose={() => { setRepeatedOpen(false) }} /> <ModalSucess open={sucessOpen} onClose={() => { setSucessOpen(false) }} /> <p className="text-2xl font-bold text-darkGray-HC-white">Guardar Recurso</p> - <p className="text-xl text-darkGray-HC-white mb-2">Escolha a coleção que deseja guardar esse recurso</p> + <p className="text-xl text-darkGray-HC-white mb-5">Escolha a coleção que deseja guardar esse recurso</p> <div className="overflow-auto -mx-2"> {totalCount > 0 ? collections.map((item, i) => { @@ -218,17 +218,18 @@ export default function CollectModal({ open, onClose, idLogin, resourceId }) { } </div> - <div className="flex justify-center pt-5 mt-5"> + <div className="flex justify-center items-baseline pt-10"> + <CreateCollectionModal open={collectionOpen} onClose={() => setCollectionOpen(false)} idLogin={idLogin} /> <button - className="inline-block px-2 text-sm text-white-HC-dark-underline border-main rounded-lg normal-case h-9 font-bold bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white-HC-underline outline outline-1 outline-ice-HC-white mx-1" + className="inline-block px-2 w-36 text-sm text-white-HC-dark-underline border-main rounded-lg normal-case h-9 font-bold bg-turquoise-HC-white hover:bg-darkTurquoise-HC-dark hover:text-white-HC-underline outline outline-1 outline-ice-HC-white mx-1" onClick={() => setCollectionOpen(true)} alt="Criar Coleção" > Criar Coleção </button> <button - className="text-sm p-2 w-[20%] text-darkGray-HC-white-underline border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline" + className="text-sm p-2 w-36 text-darkGray-HC-white-underline border-ice-HC-white rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-lightGray-HC-white hover:text-darkGray-HC-dark-underline" onClick={() => onClose()} > Fechar