Make the settings screen more visually appealing and reuse React components

[jwold]

Feature description

Updating the UI of the settings screen to match the look and feel of the onboarding, as well as allow for changing the template mode.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[johnwatkins0]

@jwold @westonruter @amedina

Question that has come up around the admin notice. Currently the AMP plugin has this notice that shows on the plugin options screen until the user dismisses it:

I think our options for this new notice are:

1. Have two dismissible notices on the AMP options screen. The new notice will be the same both on AMP options and on the plugins screen.
2. Update the existing notice and display the same notice on the plugins screen as well.
3. Update the existing notice on the AMP options screen, and display a different (probably simpler) notice on the plugins screen.

Another option that would be a heavier lift mainly from the design standpoint would be to add more branding to the AMP options screen that is not in the form of a dismissible notice. Some of the existing dismissible notice could be repurposed for this. Then we could have a simple dismissible notice directing users to the setup wizard, and the same notice could be used on the plugin screen.

[jwold]

I like this direction. Exploring it now in design.

[jwold]

[jwold]

Took a stab at what the settings page could look like for the wizard onboarding notice. Also ended up giving a treatment of the entire settings page to see how it would feel.

cc @amedina, @westonruter, @johnwatkins0

[amedina]

I like it!

Modulo the copy (this needs work), it looks good.

[jwold]

Awesome! Agree on tweaking the copy.  GitHub <[email protected]> wrote: “I like it! Modulo the copy (this needs work), it looks good.” — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[johnwatkins0]

@jwold I think we'll need to include this:

[westonruter]

Yes, that will be displayed when the “Serve all templates as AMP” toggle is off.

[jwold]

Here's a stab at the remaining content:

[westonruter]

The Content Types and Templates should go inside that Supported Templates box. They are conditionally shown if the toggle is off. Also note that the templates are presented as a hierarchy, so there will necessarily be indentations.

[johnwatkins0]

Since we have built most of this UI already, I think it would make sense to build this page using the React components we already have (with a small amount of refactoring to ensure everything is reusable). It will work the same from a user standpoint, except for the small difference that the interface will be rendered client-side.

[johnwatkins0]

I'm breaking the plugin screen notice into a separate issue and keeping this one focused on the settings screen because the two updates are functionally separate.

[westonruter]

Also need to incorporate the Plugin Suppression section: #4657