Skip to content

Provide a border and box shadow for modal that displays error #11266

Open
@crashuniverse

Description

@crashuniverse

Is your proposal related to a problem?

When app crashes in development environment, it displays a full page error display modal, with an option to close it using X on the top right corner or press Esc. This instruction is so obscure that it can be missed on a bad day, and the non-intuitive modal makes it worse. In case of an unfamiliarity with create react app, it feels as if this modal and error page is a part of the app in development. In complex cases, this overlay completely hides the app in development as well.

a modal with some error

a modal with some error

Describe the solution you'd like

A box shadow around modal illustrates a perception of depth. It makes it intuitive to acknowledge modal and dismiss it by noticing the X icon on top right. Right now the modal floats in middle, with no border and no box-shadow. This would be a clear improvement.

a modal with some error, this time with a border and a box shadow

a modal with some error, this time with a border and a box shadow

css that makes it happen

css that makes it happen

Describe alternatives you've considered

None

Additional context

Look around. Every dropdown, modal etc has a box shadow. This create issue or view issue page on github isn't a modal, had it been a modal, a border, box shadow, transparency etc. helps, and well then the X button on top right makes sense.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions