Studio banner: Update wording and link design

[epeicher]

Resolves STU-913

Further context p1761154028496639-slack-C06DRMD6VPZ

Proposed Changes

• Update Studio connect banner wording
• Update the wording and design of the Connect Sudio link

	Before	After
Normal
Hover

Why are these changes being made?

• The banner was not clear to the user when creating a site from Studio - p1761154028496639-slack-C06DRMD6VPZ

Testing Instructions

• Apply this branch and run yarn start or open Calypso Live link below
• Navigate to an atomic site and add the studioSiteId query param with a fake value, e.g. /home/<site_id>?studioSiteId=aaaa replacing <site_id> with a valid blog_id
• Check the banner makes sense, the wording is clear, and the design looks nice. Specially, check the link on the right hand side does not look disabled

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 tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• 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-161254

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[sejas]

Change looks good to me. I confirm the button doesn't seem "disabled" anymore.

I wonder if @alexapeduzzi or @ndiego have any feedback.

[wojtekn]

Looks great!

[katinthehatsite]

I am just wondering, are we supposed to get a specific site opened in Studio? Because when I am testing, I seem to be brought up to the site that I have previously opened in Studio rather than a Studio site related to the purchase 🤔

[epeicher]

That's a key question, we are opening the Studio local site to be synced. This could be confusing if users think they are opening the remote site locally, which is not the case. @sejas , @wojtekn , what do you think about this wording for the link?

[wojtekn]

Maybe it should be "Open your Studio site to start syncing." and "Open Studio" instead?

[katinthehatsite]

The changes look good to me 👍

I just left one question related to navigation.

[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 stu-913-studio-improve-the-calypso-banner-after-purchasing-a-site on your sandbox.

[katinthehatsite]

I think this looks better 👍

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/29635540

Some locales (Hebrew) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @epeicher for including a screenshot in the description! This is really helpful for our translators.