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

task finalizada modal de exclusao

parent 94670cad
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