Fix notices styles in unified sidebar

[cpapazoglou]

Changes proposed in this Pull Request

• Themes notices according to figma designs https://www.figma.com/file/9cy0DIowQkPAu0rodb9jsL/WP-Admin-for-Dotcom?node-id=325%3A2792&viewport=2516%2C-103%2C5.115475654602051
• Allow text-content to wrap if it is too long

Testing instructions

Before	After

Text wrapping

Before	After

• add ?flags=nav-unification
• Go to a site with domain warning or edit client/my-sites/domains/components/domain-warnings/index.jsx to force show some

Fixes #46732

[matticbot]

Test live: https://calypso.live/?branch=fix/notices-styles-in-unified-sidebar

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[sixhours]

Hurrah for no overflow!

I would tweak the padding and spacing a bit for better overall alignment with the other elements in the sidebar.

Before

After

I set the height on the notices to 66px and the right-hand padding on the "Renew" CTA to 12px to match the upsell nudge (another possibility is to reduce the right margin/padding on the upsell nudge to 10px from 12px, either way!) Let me know what you think! I know we're working with a tiny amount of space.

[cpapazoglou]

Thanks @sixhours! You are absolutely right, I have wrongly set a static height in the first place. I adjusted both the vertical paddings of the content and padding-right of the action button!

Before	After

[frontdevde]

Love that we're adjusting the alignment and text wrapping here. Nice change! 👍

I'm slightly concerned the color change might impact the nudge conversion though.

@sfougnier Would love to hear your thoughts on the following:

Reading p2-pbAPfg-103 it appears that nudge conversion is a key concern with the project for senior stakeholders. With that in mind, I'm wondering whether changing the color of the contextual nudges (as shown in the Figma file) is something we should hold off on for now? While removing the color of the contextual nudge might draw more attention to the upsell nudge, it could also lead to less focus on the nudge area in general. The bright red/yellow of the contextual nudges does draw a lot of attention to the nudge area and thus also to the upsell nudges. In summary, my concern would be that changing the colors here would impact the nudge conversion performance and could potentially negatively affect a key indicator for the nav unification performance. Given that nudges won't be in wp-admin anyway, I'm wondering whether this risk is worth taking at this stage or whether we should hold off with tweaking the nudge colors until after nav unification has launched and the metrics are positive. Then we could test the impact of this change in isolation.

[cpapazoglou]

These are excellent points @frontdevde! Addressed here 2ac093c .

[frontdevde]

The alignment and text wrapping adjustments are a nice improvement over what we currently have. With the demo coming up, I'm happy to approve the PR as is 👍

The nudge colour change is as per design, so if that's the route we want to go, that's fine by me. As stated above my only concern here is that as a result of changing the colour, the nudge conversion might drop which is a key stakeholder concern (see p2-pbAPfg-103). It'd be unfortunate if that were to negatively impact the performance of the whole project.

[cpapazoglou]

@sfougnier , @lcollette I have merged this since the nudge colour is as per design and some alternatives seemed a little of for me.

Now	Design	Alternative 1	Alternative 2

We can revisit this decision as you like.

[ghost]

Agreed @frontdevde! Is this the nudge style you're referring to?

[cpapazoglou]

Yes @sfougnier , how did you get that Screenshot?

[ghost]

Oh sorry @cpapazoglou ! I must have missed your comment before mine. My personal vote would be for Alternative 2, as the alignment of the icon matches the nav items below, and there is less awkward padding caused by the block of yellow.

[cpapazoglou]

No worries @sfougnier!

@davemart-in could you weigh in?

[davemart-in]

@cpapazoglou as a reminder, in our meeting yesterday we decided to bump the width of the left nav out to ~272px (based on @lcollette and @sfougnier recommendation). I imagine that will play into alignment of things.