Datagrid cell improvements

[Droniu]

This PR improves UI of various datagrid columns in the dashboard.

AC

• As a user, when I shrink date column I can see three different formats based on cell width
• As a user, I should see colorful pills in product type column (on product list)
  • Identical product types should have identical colors
  • Slightly different product types should have completely different colors
  • Contrast should be good in both light & dark mode
  • Pills should work in browsers not supporting oklch (https://caniuse.com/mdn-css_types_color_oklch)
• As a user I should see colorful pills in order status & payment status columns (on order list)
  • Pill colors should match statuses UX-wise (e.g. fulfilled is green)
• As a user, I can see currency & price in money cell based on my locale. If cell width is too narrow and currency has a symbol, it is displayed instead of currency code.
• As a user, I can see voucher value in voucher list. Percentage-based voucher display percent symbol next to value, whereas currency-based voucher display value in money cells.
• As a user, I can cell with a status dot in availability column on product list
  • Green dot is displayed when product is available in at least 1 channel and red dot otherwise
  • If channel filter is active - green, red and blue dots are displayed depending on product status in the particular channel. Blue means product is scheduled to publish

Screenshots

Pull Request Checklist

1. This code contains UI changes
2. All visible strings are translated with proper context including data-formatting
3. Attributes data-test-id are added for new elements
4. The changes are tested in Chrome/Firefox/Safari browsers and in light/dark mode
5. Your code works with the latest stable version of the core
6. I added changesets and read good practices

Test environment config

API_URI=https://master.staging.saleor.cloud/graphql/
APPS_MARKETPLACE_API_URI=https://apps.staging.saleor.io/api/v2/saleor-apps

Do you want to run more stable tests?

To run all tests, just select the stable checkbox. To speed up tests, increase the number of containers. Tests will be re-run only when the "run e2e" label is added.

1. stable
2. app
3. attribute
4. category
5. collection
6. customer
7. giftCard
8. homePage
9. login
10. menuNavigation
11. navigation
12. orders
13. pages
14. payments
15. permissions
16. plugins
17. productType
18. products
19. sales
20. shipping
21. translations
22. variants
23. vouchers

CONTAINERS=6

[changeset-bot]

🦋 Changeset detected

Latest commit: 33ee178

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
saleor-dashboard	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[wojteknowacki]

Based on AC scheduled to publish dot should have yellow color

[wojteknowacki]

Changing locale ( language in account settings ) crashes when moving further to orders list view

Nagranie.z.ekranu.2023-09-11.o.10.23.10.mov

[Droniu]

Regarding yellow dot, I have updated AC and changed it to blue. We don't have yellow warning token in macaw right now and writing special workaround for this is not worth it because these tokens are going to get reworked soon.