Skip to content

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

@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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions