UI enhancement on Add New Pod screen

[heybran]

Problem to Solve

UI enhancement suggestion on Add New Pod Screen, please see screen screenshot below.

Proposed Solution

• Update leading paragraph font size to 14px.
• Update heading font size to 2em.
• Remove heading suffix arrow and add a new CTA button.
• Remove One-Click Quick Actions section to simply UI and direct users attention to two main cards underneath, not sure if this is good idea?
• Remove pods wizard heading, will see how it looks once I add it back with that PNG arrow changed to CSS or SVG arrows.

Screenshots / Screencast

Before

After

[JoryHogeveen]

@sc0ttkclark
Your throughs?

@heybran
Feel free to create a pull request with these changes!

[heybran]

Heya @JoryHogeveen sorry, I have more fixes to add, will upload final UI screenshots for review once it's ready.

[heybran]

@sc0ttkclark @JoryHogeveen
I think I have a version ready for your review, this round I keep all content untouched and only CSS is modified, any feedbacks?

Step 1 - before

Step 1 - after

Step 2 - before

Step 2 - after

[JoryHogeveen]

I think if we are about to revamp the wizard anyway, we can do better on the one-click actions.
Or at least make the Create / Extend option more button-like.
At this point I feel there is too much attention for the one-click actions.

I definitely like the flattened UI style more than the current gradients!
We should also set the font families to be the same as WP core.

[heybran]

Yah, one-click actions take too much attention for sure. Will improve that.

[sc0ttkclark]

One-click actions are useful because they give real example use-cases for extending certain types, maybe we could somehow put those next to the Extend section instead?

[heybran]

@JoryHogeveen @sc0ttkclark Any thoughts? I would say it's tricker than I think, tried with columns side by side, but that doesn't look good, so I ended up stacking them from top to bottom.

[sc0ttkclark]

I like the text and the placement of the buttons etc -- but I feel as if the green is distracting and different from the rest of the screen colors. Since the green already has contrast issues with white text, that might not be a good idea either.

Maybe you can PR without the green backgrounds on the create new / extend existing boxes, but keep the dark green on the one click action buttons and the ">" buttons too. We can keep tweaking it from there.

[heybran]

Sure thing. I will update UI once I'm able to install dependencies with npm.