Update credentials setup message

[vianasw]

We're updating the server credentials message to avoid confusion and reduce customers reaching out thinking credentials are needed for Jetpack Backups to work. It's also for consistency with Calypso green where we have the same banner.

Proposed Changes

• We changed the message and title in the banner that's shown on the Stats page asking customers to set up their credentials. Now, we're using the same copy that we use in this banner in Jetpack cloud.

Testing Instructions

• Buy a Jetpack Backup plan
• Go to the stats page and check that banner is like in the "After" screenshot

Before

After

Pre-merge Checklist

• [ ] 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)?

Related to #

[github-actions[bot]]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~87 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
backup         +183 B  (+0.0%)      +37 B  (+0.0%)
stats           +26 B  (+0.0%)      +20 B  (+0.0%)
settings        +26 B  (+0.0%)      +30 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[nunyvega]

Code looks good and it shows the message as expected, but the message and "error" colors may sound a bit like if the site was offline. What about changing the top part of the message to remove the "get back online", so it does not sound like the site is down?

@keoshi what do you think about the icon?

[keoshi]

We can be a bit more positive with both the message and the tone of this banner and avoid communicating this as an error. Instead, we can phrase it more neutrally and detailing all the benefits as we discussed IRL:

Add your server credentials Enter your SSH, SFTP or FTP credentials to enable one-click restores and faster backups.

Here's the proposed design:

And the SVG code for the key icon:

<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM9 16a4.002 4.002 0 0 0 3.8-2.75H15V16h2.5v-2.75H19v-2.5h-6.2A4.002 4.002 0 0 0 5 12a4 4 0 0 0 4 4Z" fill="#fff"/></svg>

[nunyvega]

Thanks for addressing all the remarks! Code changes look good, testing them now.

[vianasw]

Is it intended that they have different messages? If that's the intention, it's ready to merge once the tests are passed.

I forgot to update it yesterday but just did it now. Green and blue should have the same message. I haven't changed the icon, though.

[nunyvega]

@vianasw I updated the icon so it also uses the green key one on the Backup page, the PR is ready to 🚢 once the tests are done

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.