I think implementation is pretty close to the Figma design and works as expected.
What challenges did you encounter, and how did you overcome them?Essentially styling the <dialog>
element.
By default, <dialog>
has a display: none
and switches to display: block
when opened. I wanted to customize the dialog and use a display: flex
, but only when dialog
is open. I had to use for the first time an attribute selector for that, otherwise dialog
would appear by default on the page:
.success-dialog[open] { display: flex /* ... */ }
Also, dialog
is centered by default but after my CSS reset, it wasn't anymore. Had to use margin: auto
to fix that. Maybe my CSS reset could be improved.
Any feedback/advice welcome!