Commit dd3d8c7c authored by Ruan Oliveira Ribeiro Dos Santos's avatar Ruan Oliveira Ribeiro Dos Santos
Browse files

task finalizada modal de exclusao

Showing with 26 additions and 15 deletions
+26 -15
......@@ -10,7 +10,6 @@ export default function Modal() {
useEffect(() => {
if (modal) {
// Verifica se está no ambiente do navegador antes de acessar o 'document'
if (typeof window !== "undefined") {
document.body.classList.add(styles.activeModal);
}
......@@ -19,7 +18,6 @@ export default function Modal() {
document.body.classList.remove(styles.activeModal);
}
}
// Limpa a classe quando o componente for desmontado
return () => {
if (typeof window !== "undefined") {
document.body.classList.remove(styles.activeModal);
......@@ -37,16 +35,18 @@ export default function Modal() {
<div className={styles.modal}>
<div onClick={toggleModal} className={styles.overlay}></div>
<div className={styles.modalContent}>
<h2>Você tem certeza que deseja excluir esse conteúdo?</h2>
<p>
<h2 className="titulo-modal">Você tem certeza que deseja excluir esse conteúdo?</h2>
<p className="texto-modal">
Essa ação não pode ser desfeita. O conteúdo será permanentemente deletado e não irá ser exibido para os usuários.
</p>
<div className={styles.buttons}>
<button className={styles.closeModal} onClick={toggleModal}>
Cancelar
</button>
<button className={styles.closeModal2} onClick={toggleModal}>
Excluir
</button>
</div>
</div>
</div>
)}
......
......@@ -17,7 +17,7 @@ body.active-modal {
.modal {
width: 512px;
height: 250px;
height: 180px;
background-color: white;
border-radius: 10px;
position: fixed;
......@@ -27,6 +27,7 @@ body.active-modal {
z-index: 1000;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
font-size: 18;
}
.overlay {
......@@ -44,43 +45,53 @@ body.active-modal {
flex-direction: column;
justify-content: space-between;
height: 100%;
text-align: center;
font-size: 18;
}
.modalContent h2 {
margin-top: 0;
font-size: 24px;
text-align: center;
font-size: 18px;
}
.modalContent p {
text-align: center;
text-align: -webkit-left;
width: 512px;
height: 180px;
font-size: 16px;
font-size: 14px;
color: #64748B;
}
.closeModal {
align-self: center;
width: 100px;
width: 92px;
height: 40px;
background-color: #f8f4f3;
color: white;
border: none;
border-radius: 5px;
color: rgb(15, 15, 15);
border-radius: 6%;
cursor: pointer;
border-style: outset;
border-color: currentColor;
stroke: #E2E8F0;
}
.closeModal2 {
align-self: center;
width: 100px;
width: 77px;
height: 40px;
background-color: #ff340c;
color: white;
border: none;
border-radius: 5px;
border-radius: 6%;
cursor: pointer;
}
.closeModal:hover {
background-color: #d9534f;
}
.buttons {
display: flex;
justify-content: end;
gap: 8px;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment