Update reader illustrations

[irfano]

Closes: woocommerce/woomobile-private#378

Description

This updates the illustrations appearing in the reader connection and payment flow.
Additionally, a layout issue has been fixed (f001f14). You can see the issue in the "before" column of the third row.

Steps to reproduce

1. Login with a site eligible to use Payments. (Internal guide: PdfdoF-D-p2)
2. Enable Simulated Card Reader from "Menu → Settings → Developer Options"
3. To test the reader connection flow, go to "Menu → Payments → Manage Card Reader".
4. To test the payment flow, go to "Menu → Payments → Collect Payment", enter an amount, and select "Card reader" on the payment method screen.

Apply this patch to show a single reader in the reader connection flow: Always_show_single_reader.patch

Testing information

Please test in both light and dark modes.

The tests that have been performed

Images/gif

before	after	after dark

• I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

• The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
• Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
• Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.

[dangermattic]

	1 Warning
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by 🚫 Danger

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	56f1aed
	Direct Download	woocommerce-wear-prototype-build-pr13204-56f1aed.apk

[wpmobilebot]

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	56f1aed
	Direct Download	woocommerce-prototype-build-pr13204-56f1aed.apk

[github-advanced-security]

Android Lint found more than 20 potential problems in the proposed changes. Check the Files changed tab for more details.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 40.59%. Comparing base (821e1f3) to head (56f1aed).
Report is 8 commits behind head on feature/woo-2.0-brand-updates.

Additional details and impacted files

@@                       Coverage Diff                        @@
##             feature/woo-2.0-brand-updates   #13204   +/-   ##
================================================================
  Coverage                            40.59%   40.59%           
  Complexity                            6372     6372           
================================================================
  Files                                 1345     1345           
  Lines                                77236    77235    -1     
  Branches                             10602    10602           
================================================================
  Hits                                 31352    31352           
+ Misses                               43136    43135    -1     
  Partials                              2748     2748           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[hafizrahman]

Looks good and I don't see any issues with the new illustrations. I tested the screens using the site from the smoke testing guide, in Dark and Light mode on a Pixel 4 Simulator.

I noticed some readability issue on bigger font sizes but I don't think it's related to this PR, even though I see you fixed a layout issue here also.

I've reported that to peaMlT-14Y-p2

[wagveloso]

Hi there! Thanks for requesting to review the screens. They look great! There's only one screen that needs an update. The Here's the link to the screen in Figma.

The reasons behind the changes are:

• The reader could be coloured, as it is connected and ready to collect the payment
• And the purple in the pagination dots is inconsistent, it should be Woo 40 on light version

If it's not a considerable amount of work 😅, is it possible to update the white outlined reader to purple if it's connected?

Thanks!

[irfano]

Thanks for the review, @wagveloso! I'll update the illustration and indicator color on the linked screen. I’ll also change the selected indicator color to purple, as we did on the login carousel.

If it's not a considerable amount of work 😅, is it possible to update the white outlined reader to purple if it's connected?

If you mean this white-outlined reader,

this popup is already displayed only when the reader is connected.