[WOO POS] UI changes in POS Success screen

[AnirudhBhat]

Closes: #12577

Description

This PR introduces UI updates to the POS payment success screen based on design recommendations and resolves an issue on the checkout cart screen where cart items were overlapping with the floating toolbar.

Changes:

Replaced the outlined button with a standard Compose-filled button.
Removed the "return home" icon from the button.
Updated the button text according to the design suggestion.
Fixed a bug causing the cart list items to overlap with the floating toolbar on the checkout cart screen.

Question to reviewer

The design comment states that the "payment success screen background is too saturated." Joe mentioned that the green background appears more intense than in the design. However, I confirmed that we are using the exact hex code specified in the design, and on my emulator, the success background matches the design without appearing saturated. Could you please check how it looks on your device?

Testing information

Tested this on my my tablet emulator on both dark and light mode.

Ensured cart list items are not overlapping with floating toolbar anymore.

Images/gif

cart_items_overlap_fix.mp4

• 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.

[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	5f74749
	Direct Download	woocommerce-wear-prototype-build-pr12591-5f74749.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	5f74749
	Direct Download	woocommerce-prototype-build-pr12591-5f74749.apk

[samiuelson]

The changes look good overall, @AnirudhBhat. There is however a small glitch on the Cart items list after transitioning from isCheckoutButtonVisible=true to isCheckoutButtonVisible=false:

Screen_recording_20240913_193217.webm

When it comes to the success background color it looks good to me. I'm not sure why it was looking brighter on the physical device.

[AnirudhBhat]

There is however a small glitch on the Cart items list after transitioning from isCheckoutButtonVisible=true to isCheckoutButtonVisible=false:

Thanks for catching it @samiuelson! I've animated it and it should look fine now: cbfefd2

[kidinov]

@AnirudhBhat I used the color picker, and it looks like that in the design,. It's ABEF86. Having said that it's practically the same color as we use now

[samiuelson]

LGTM