RNA Connection Screen: update styles
Changes proposed in this Pull Request:
- Updates styles on all connection screens, with and without required plan.
- Updates the default Jetpack logo color to #069e08 (Color Studio 40).
A couple of notes for @sergeymitr and @fgiannar:
- I've removed some button-specific styles from this code but we should get merged https://github.com/Automattic/jetpack/pull/21496 first to make sure the styles cascade down.
- For the image on the right side of Connect Screen, it would be cool if we could apply it as
background-imagerather than an<img />tag so the wrapper height is always defined by the content on the left side. However, that involves changing the components and I wasn't totally comfortable doing that.
Jetpack product discussion
p1HpG7-daR-p2#comment-49996
Does this pull request change what data or activity we track or use?
No.
Testing instructions:
- Go to the Storybook folder
cd projects/js-packages/storybook - Run
pnpm install - Run
pnpm run storybook:dev - Storybook should open in your browser.
- Go to Connection → Connect Screen / Connect Screen with Required Plan and play around with them.
Screenshots
Connect Screen

Connect Screen with Required Plan

Thank you for your PR!
When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
- :white_check_mark: Include a description of your PR changes.
- :white_check_mark: All commits were linted before commit.
- :white_check_mark: Add a "[Status]" label (In Progress, Needs Team Review, ...).
- :white_check_mark: Add testing instructions.
- :white_check_mark: Specify whether this PR includes any changes to data or privacy.
- :red_circle: Add changelog entries to affected projects
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation :robot:
The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.
:red_circle: Action required: Please add missing changelog entries for the following projects: projects/js-packages/components, projects/js-packages/connection
Use the Jetpack CLI tool to generate changelog entries by running the following command: jetpack changelog add.
Guidelines: /docs/writing-a-good-changelog-entry.md
Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped. Then, add the "[Status] Needs Team review" label and ask someone from your team review the code. Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.
This should no longer be needed, it is handled in other PRs. Closing.