Amp-wp: Setup Wizard: Visual/style polish

[johnwatkins0]

Feature description

I'm creating this issue to track overall CSS/style around the setup wizard UI. This will allow us to keep moving forward with functionality while visual design is in flux.

Current work for this issue:

• Bringing design more in line with amp.dev while keeping some continuity with the WP admin
• Visual improvements to the Reader theme selection screen

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[johnwatkins0]

Relevant comment from @pierlon on #4800:

https://github.com/ampproject/amp-wp/pull/4800/files#r436900881

[pierlon]

Some other suggestions:

• Allow for the direct navigation to a a page by clicking on the title in the stepper

• Show a "disabled" state for the steps that have not been visited yet. For example:

  Before | After
  ---|---
  |

[johnwatkins0]

We'll need a way to handle long theme descriptions, some of which may be provided via filter and hence out of our control:

I'm thinking one of two options:

1. Use CSS to truncate the text with an ellipsis after a single line or multiple lines (the latter requires hackier CSS).
2. Hide/fade out text below, say, 50px, and provide a "Show more" button to expand

[jwold]

I kind of like on AMPWP how they truncate it, I'm ok with that personally: https://d.pr/i/D6e0wd

The show more may not be necessary because we have the learn more link already.

[johnwatkins0]

Got that working with a bit of JS:

Limiting the word count to 20.

[jwold]

Love it!

[amedina]

Very nice.

On Wed, Jun 10, 2020 at 2:02 PM Joshua Wold [e-mail]
wrote:

Love it!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ampproject/amp-wp/issues/4811#issuecomment-642257813,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAD3R2KZYTICGC4OHDWN2FTRV7YEXANCNFSM4NSZE7XA
.

[johnwatkins0]

@jwold With the latest design updates, I could use your guidance on fonts. I see some Poppins and some Noto Sans. I see those are being used on amp.dev and can be easily included with Google Fonts, which would be great.

But I also a couple of variations of SF Pro, which isn't available via Google. Do you plan to include that one in the final designs, or can I assume one of the Google Fonts can be used in those cases?

I also see Fira Mono on amp.dev but haven't come across that in the designs yet, so not including it for now.

[johnwatkins0]

@jwold Will we be updating the active state background color for the stepper component?

Not sure this blue is looking quite right.

[jwold]

Should I archive this one on the board?

[westonruter]

Archiving is done once the release is done. If it passes QA, then it gets moved to “QA Passed” on the board.

[westonruter]

Or if QA is not relevant, straight to Done.