Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue/13520 pos apply colors to home screen #13522

Open
wants to merge 12 commits into
base: feature-branch-woopos-design-system
Choose a base branch
from

Conversation

malinajirka
Copy link
Contributor

@malinajirka malinajirka commented Feb 11, 2025

Closes: #13520

Do Not Merge - #13482 needs to be merged first.

NOTE - This PR updates only background colors and product placeholder. It doesn't update buttons, texts, spacing or Floating action button as those will be done in a separate PR.

Description

This PR introduces these changes:

  1. It updates surfaceDim and surfaceBright color definitions to match the DS (they were swapped between dark and light mode).
  2. It updates the Home/Product Screen colors to match the DS.
  3. It also updates the placeholder image for product items to match the the designs. (I've updated color of drawables to white to ensure they can be tinted without side-effects)
  4. It updates the shimmer effect animation color and the list item skeleton view.

Testing information

Enter the POS and observe the updated designs of the home screen.
Open the ProductInfo dialog by clicking on the info icon and notice update colors of the dialog.

The tests that have been performed

I've followed the above testing information.

Images/gif

Designs Implementation
Screenshot 2025-02-11 at 15 07 55 Screenshot 2025-02-11 at 15 07 55
Screenshot 2025-02-11 at 15 08 19 Screenshot 2025-02-11 at 15 08 19
Screenshot 2025-02-11 at 15 08 07 Screenshot 2025-02-11 at 15 08 07

[Shimmer Effect Animation](
https://github.com/user-attachments/assets/e5f44cd8-c334-4450-8e43-1e4a844e166f

)

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

@malinajirka malinajirka added the status: do not merge Dependent on another PR, ready for review but not ready for merge. label Feb 11, 2025
@malinajirka malinajirka requested a review from kidinov February 11, 2025 14:05
@dangermattic
Copy link
Collaborator

1 Error
🚫 This PR is tagged with status: do not merge label(s).

Generated by 🚫 Danger

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Feb 11, 2025

📲 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
FlavorJalapeno
Build TypeDebug
Commitceb1309
Direct Downloadwoocommerce-wear-prototype-build-pr13522-ceb1309.apk

@malinajirka malinajirka added category: design Layout and style elements in the UI or user interface, including color and animations. feature: point of sale POS project labels Feb 11, 2025
@malinajirka malinajirka added this to the 21.8 milestone Feb 11, 2025
@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Feb 11, 2025

📲 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
FlavorJalapeno
Build TypeDebug
Commitceb1309
Direct Downloadwoocommerce-prototype-build-pr13522-ceb1309.apk

@malinajirka malinajirka requested review from samiuelson and removed request for kidinov February 12, 2025 08:17
Base automatically changed from 13470-woo-posdesign-system-move-colors-from-ds-to-the-code to feature-branch-woopos-design-system February 12, 2025 10:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
category: design Layout and style elements in the UI or user interface, including color and animations. feature: point of sale POS project status: do not merge Dependent on another PR, ready for review but not ready for merge.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants