Update Modal styles/UX

[circlecube]

Proposed changes

This updates a few visual and UX issues with the installer modal:

• update modal width to be more responsive-friendly
• update modal header to fit in most cases in one line (and give some line height for when it wraps)
• add a new view for the completed state. Better UX since the customer gets feedback on the state as the site redirects rather than the modal closing and then as they start to interact with the site the redirect taking over
• only closes the modal with outside clicks when modal has reached the error state, we intend customers to wait a few seconds and in testing we accidentally closed the modal a few times and there was no way to get it back.
• update styles to give the admin screen a darker overlay when the modal is open so the customer understands it is no longer interactive.

Type of Change

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update (if none of the other choices apply)

Video

Checklist

• I have read the CONTRIBUTING doc
• I have viewed my change in a web-browser
• Linting and tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Further comments

[officiallygod]

Looks Good

[officiallygod]

This might not close the modal if there is an internal redirect, If that is okay it should be fine.

For example we are on: {siteUrl}/wp-admin/admin.php?page=bluehost#/home and we install the WonderCart Plugin with the CTA: DATA It redirects us to an internal page and I am not sure if the modal closes in that case.