Improve AMP preview button in WP 5.4 and with Gutenberg

[kienstra]

Summary

• Addresses the poor display of the AMP preview button that Weston found in AMP preview button looks off in WP 5.4-RC1 #4368 (comment)
• Use <Button> instead of the now deprecated <IconButton>
• Someone better at CSS might have better ideas. It's the best compromise of all of the scenarios
  that I could come up with.
• Please also do npm run build:css for the changed styling here
• With this PR:

1) WP 5.3.2, Gutenberg plugin inactive (looks the same as WP 5.2)

2) WP 5.3.2, Gutenberg plugin active

3) WP 5.4-RC2, Gutenberg plugin inactive

4) WP 5.4-RC2, Gutenberg plugin active

Fixes #4368

Checklist

• My pull request is addressing an open issue (please create one otherwise).
• My code is tested and passes existing tests. (Not tested, but there aren't component tests in the repo)
• My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

[kienstra]

Hi @pierlon,
Could you please review this? Hope you had a great weekend 😄

[kienstra]

Sorry, forgot to remove the DotTip. But not planning on making more commits before a review.

Update: Sorry, going to remove the @wordpress/nux package, now that it looks to be unused.

[kienstra]

That should be all for commits, if/when Travis passes.

[pierlon]

Changes look good 👍, and they work as described in WP 5.2, 5.3 and 5.4. One thing I did notice is that when hovering over the AMP icon it's showing "AMP-Icon":

It can be found in the SVG file being used:

amp-wp/assets/images/amp-icon.svg

Line 3 in ae8a3bb

<title>AMP-Icon</title>

Can a tooltip be applied to the button here to override that?

[kienstra]

Hi @pierlon,
Thanks a lot for reviewing this, great catch on the <title> showing AMP-Icon

[kienstra]

Here's the tooltip, good suggestion:

[googlebot]

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

[pierlon]

@googlebot I consent.

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[pierlon]

Awesome, great work here @kienstra!

I've went ahead and removed the title tag from the amp-icons.svg as it conflicts with the tooltip, and done the same for amp-white-icon.svg as well.

[kienstra]

OK, sounds good!