[Woo POS] Make reader connection modal layout match designs

[joshheald]

Part of: #13731 Merge after: #13772

Description

This is part of a series of PRs to improve the card reader connnection screens. You may want to test at the end of the series, as it could get quite repetitive, but doing it all in one was quite big. Up to you! The last one is #13775

This PR includes various layout tweaks:

• Show the image at the top of each modal.
• Show text below the image.
• Update spacing to match designs.
• Update the modal sizes to match designs. (This one has a fair bit of "by-eye", particularly around the different dynamic type sizes.)

Note that not all the layouts work perfectly in every type size – a future PR resolves this and adds scrolling where needed.

Steps to reproduce

1. Launch the app
2. Enter the POS
3. Tap Connect your reader
4. Wait for the Do you want to connect screen – if it just auto-connects, tap Reader connected then Disconnect reader and try again
5. When on the Do you want to connect screen, turn off the reader, then tap Connect to reader
6. The error screen will show shortly after that.

Observe that the image is first, text is next, and that spacing and modal sizes are improved.

Testing information

I have tested these on an iPad running iOS 16. No unit tests as it's UI only.

I've tested with different dynamic type sizes, and using an iPad mini simulator.

Screenshots

Note that this video is from this branch – if you test later on, the rest of the modal UI will look a bit different.

https://github.com/user-attachments/assets/0556c506-752c-446d-a4ce-4a0a348777a2

---

• [x] I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

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 all devices (phone/tablet) and no regressions are added.