Move big sky button from nav-container to filters container

[madhusudhand]

Fixes: https://github.com/Automattic/dotcom-forge/issues/10093

Proposed Changes

• Updated label of the button Create yours with AI to Design with AI
• Moved the button from header navigation to filters area
• Button is visible in the header area in small screens instead of in filters.

Why are these changes being made?

• To match new designs

Testing Instructions

• Verify the design picker UI in large and small screens

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-127137

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-127137&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-127137&env=a8c-for-agencies

[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.

[taipeicoder]

@madhusudhand note that the design spec has changed. See https://github.com/Automattic/dotcom-forge/issues/10093.

[madhusudhand]

Updated the layout as per the new design spec.

[taipeicoder]

@madhusudhand could we update the button following the design spec?

[fushar]

On ~700-ish screen width, the button layout looks as follows, is this intended? 🤔

[madhusudhand]

On ~700-ish screen width, the button layout looks as follows, is this intended? 🤔

It will be taken care in https://github.com/Automattic/dotcom-forge/issues/10091

[fushar]

On ~700-ish screen width, the button layout looks as follows, is this intended? 🤔

It will be taken care in Automattic/dotcom-forge#10091

Got it, thanks, I missed the context 😄

[taipeicoder]

Updated the layout as per the new design spec.

Font weight and text color are still different from the design spec.

[madhusudhand]

Font weight and text color are still different from the design spec.

@fditrapani I have used the component without any overrides. However, few styles differ from the design spec as mentioned by @taipeicoder.
It would be recommended to use common styles across the app. Let us know if we need to update the style of the button component as per the current design so that it reflects everywhere in Calypso UI.

[taipeicoder]

Let's not get caught on bikeshedding! We can adjust later according to @fditrapani's feedback.

[arthur791004]

Tested and looks good 👍

[fditrapani]

Thanks for the ping! I couldn't get the button to show because I'm not sure which conditions to show it in.

What you have looks good from the screenshots. Let's go with common components without any updates for now. We can adjust later if necessary.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/big-sky-small-screens on your sandbox.