[Tablet Orders] Order list UI updates

[iamgabrielma]

Partially closes #12149

Description

This PR addresses most of the UI issues from the design review regarding the Order list. We have left outside of this PR those changes related to semantic colours, since all might need to be reviewed as per p1709628907203209/1708465836.162389-slack-C0354HSNUJH . This will be prioritized and tackled separately.

Changes

• Adds a divider line to the top of the OrderListTableViewController

• Adds divider lines to the selected cell in the order list, it would seem these were overwritten by the background colour

• Updates the Empty Orders screen with a new image (we do not tackle the background colour update, nor removing the navigation bar)

Testing instructions

• With sideBySideViewForOrderForm enabled, on a tablet or large iPhone.
• Go to Orders. Observe that the dividers appear in the Order list to the left, both at the top, as well as between all Order cells.
• On the same device, on a freshly created store (or a store with no orders), go to Orders. Observe the new "shopping bags" image and the "No Order Selected" text below it. (PD: This is something we could improve in the future, the "Waiting for your first Order" text should be more prominent in this case)

[wpmobilebot]

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

	App Name	WooCommerce iOS
	Build Number	pr12214-ffed3e9
	Version	18.4
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	ffed3e920a4ea83949b52fb1ccd6cc342d4a3d03
	App Center Build	WooCommerce - Prototype Builds #8913

Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

[joshheald]

* Updates the Empty Orders screen with a new image (we do not tackle the background colour update, nor removing the navigation bar)

The two types of empty state for the list/details panes look a bit rubbish next to each other. Let's try to update both, at least as a follow up issue... @joe-keenan if you happen to have images for the ones on the left, that'd be appreciated, but it's super low priority and we can muddle through if not.

[joe-keenan]

Hey @joshheald, just acknowledging that I’ve seen this and will get back to you with something for the empty state next week. Let me know if you need it sooner.

[iamgabrielma]

something for the empty state

👋 @joe-keenan did you had the chance to look into this? Don't worry if not, as Josh mentioned is very low priority, I'm just catching up with this issue so I wanted to be sure before I update the existing ones.

[iamgabrielma]

@joshheald this is ready for review when you have the time:

Adressed:

• Moved the border/separator line from the top or the orders to the bottom of the search component, so it looks fine when we pull to refresh
• Moved the border/separator lines for highlighted cells to the UITableViewCell.updateDefaultBackgroundConfiguration(using:style:) method
• Added internal comments

Not addressed:

• Cohesive images when there are two types of empty state for the list/details. Created a follow-up here: https://github.com/woocommerce/woocommerce-ios/issues/12625

[joe-keenan]

something for the empty state

👋 @joe-keenan did you had the chance to look into this? Don't worry if not, as Josh mentioned is very low priority, I'm just catching up with this issue so I wanted to be sure before I update the existing ones.

Hey @iamgabrielma, sorry about the delay. I was about to say I hadn’t done anything for this, but then I realised I had made a similar empty state for Analytics a while back.

I reused the format and illustration to fit the orders list. I also feel like the Clear Filters CTA overwhelms the error message, so I changed it to a secondary button style.

Let me know if you have any issues with it!

6kkCwI9VOEYcidp6UT5bln-fi-1725_29745

[iamgabrielma]

I reused the format and illustration to fit the orders list. I also feel like the Clear Filters CTA overwhelms the error message, so I changed it to a secondary button style.

Thanks! Looks good! I tried to update this today but requires a bit more work than I expected. Eg:

• We reuse this view's configuration in different places, eg: changing the colour of the button forces us to change it in other "empty" views that are be unrelated to orders, or contain just a link rather than a button.
• Moving order of the image and the text forces us to create an entire new view, since what we have cannot be reused.
• It also has to be updated when the modal-on-modal returns an empty search.

With the current focus I'll move this latest update to the issue that is already open on https://github.com/woocommerce/woocommerce-ios/issues/12625 for empty states, so we can merge the order improvements for the time being. I haven't made any further changes since the latest update, so the addressed vs not addressed items remains the same 👍

[joe-keenan]

With the current focus I'll move this latest update to the issue that is already open on https://github.com/woocommerce/woocommerce-ios/issues/12625 for empty states, so we can merge the order improvements for the time being.

That’s fine. I also would like a more cohesive approach to error states. Thanks for creating a separate issue for it.