[Woo POS] Design iteration on Simple Products banner

[iamgabrielma]

Closes: #13939

Description

This PR updates the Simple Products banner following the design feedback on #13859 and TfaZ4LUkEwEGrxfnEFzvJj-fi-4650_22247

Before	After

Changes

• Removed spacing in banner's HStack. This caused the icon to show un-even spacing to the right.

• Adjusted text to fill out more available space, while aligned to the left

• Update Learn More to be interpolated within the rest of the text, rather than appearing on a separate line. Also adjusted the height between lines.

Testing

• Run a fresh app install, or add the following line to the ItemListViewModel init:

UserDefaults.standard.set(false, forKey: BannerState.isSimpleProductsOnlyBannerDismissedKey)

• Run the POS and observe the Simple Products banner appears
• Observe that the items above have been addressed:
  • Even spacing to both sides of the (i) icon
  • Text is occupying more available space
  • "Learn More" appears as follow-up to the rest of the text, rather than on a separate line

---

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

[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	pr13940-416b8ba
	Version	20.3
	Bundle ID	com.automattic.alpha.woocommerce
	Commit	416b8ba
	App Center Build	WooCommerce - Prototype Builds #10854

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

[staskus]

✅ Excellent! Thanks for a helpful description with images.

I left one comment for the font of Learn more text.

[staskus]

Both the text and learn more button should be posDetailEmphasized

Suggested change

	.font(.body)
	.font(.posDetailEmphasized)

[iamgabrielma]

Fixed! 7acf98a , interestingly we have to declare the type and cast to font() or the types don't match and the compiler is unhappy.

[staskus]

Yes, interesting. I played around and something like this worked. Likely related to the fact that we're appending two Texts here.

    private var bannerHintAndLearnMoreText: some View {
        (Text(Localization.headerBannerHint + " ") +
        Text(Localization.headerBannerLearnMoreHint))
            .font(.posDetailEmphasized)
            .foregroundColor(Color(.accent))
    }

[staskus]

It's crazy how easy it is just to append two Text objects on SwiftUI. Much harder to archieve the same effect on UIKit.

[iamgabrielma]

I wasn't looking forward to attributed strings, definitely an improvement :D

[dangermattic]

	1 Warning
⚠️	This PR is assigned to the milestone 20.4. This milestone is due in less than 2 days. Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by 🚫 Danger