Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Colabora aí
Colabora Ai Frontend Web
Commits
dd3d8c7c
Commit
dd3d8c7c
authored
4 months ago
by
Ruan Oliveira Ribeiro Dos Santos
Browse files
Options
Download
Email Patches
Plain Diff
task finalizada modal de exclusao
parent
94670cad
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
src/components/modalExclusion/modalExclusion.tsx
+4
-4
src/components/modalExclusion/modalExclusion.tsx
src/styles/components/modalExclusion.module.css
+22
-11
src/styles/components/modalExclusion.module.css
with
26 additions
and
15 deletions
+26
-15
src/components/modalExclusion/modalExclusion.tsx
View file @
dd3d8c7c
...
...
@@ -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
>
)
}
...
...
This diff is collapsed.
Click to expand it.
src/styles/components/modalExclusion.module.css
View file @
dd3d8c7c
...
...
@@ -17,7 +17,7 @@ body.active-modal {
.modal
{
width
:
512px
;
height
:
25
0px
;
height
:
18
0px
;
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
;
}
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
Menu
Projects
Groups
Snippets
Help