jetpack icon indicating copy to clipboard operation
jetpack copied to clipboard

RNA Connection Screen: update styles

Open keoshi opened this issue 4 years ago • 1 comments

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-image rather 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 image

Connect Screen with Required Plan image

keoshi avatar Nov 02 '21 17:11 keoshi

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.

github-actions[bot] avatar Nov 02 '21 17:11 github-actions[bot]

This should no longer be needed, it is handled in other PRs. Closing.

jeherve avatar Mar 29 '23 07:03 jeherve