[Project] Up Next Shuffle - Update Shuffle Button for Free users

[mebarbosa]

Description

• This updates the shuffle button for free users
• Context: p1730077568183099-slack-C07T08CTND9
• I will display the paywall when tapping on shuffle button for free users in another PR
• I asked here if we are going to use the same gold color for all themes: p1730220951890729/1730077568.183099-slack-C07T08CTND9

Fixes #3124

Testing Instructions

1. Run the App with free user
2. Play an episode
3. Open Up next
4. ✅ Ensure you see up next shuffle painted as gold color
5. Log in with a plus user account
6. ✅ Ensure you see up next shuffle is not painted with gold color

Screenshots or Screencast

dark-contrast	dark	extra-dark

indigo	light-contrast	light

Rose

|

Checklist

• If this is a user-facing change, I have added an entry in CHANGELOG.md
• Ensure the linter passes (./gradlew spotlessApply to automatically apply formatting/linting)
• I have considered whether it makes sense to add tests for my changes
• All strings that need to be localized are in modules/services/localization/src/main/res/values/strings.xml
• Any jetpack compose components I added or changed are covered by compose previews
• I have updated (or requested that someone edit) the spreadsheet to reflect any new or changed analytics.

I have tested any UI changes...

• with different themes
• with a landscape orientation
• with the device set to have a large display and font size
• for accessibility with TalkBack

[wpmobilebot]

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

	App Name	📱 Mobile
	Build Type	debugProd
	Commit	ece5b5d
	Direct Download	pocketcasts-app-prototype-build-pr3129-ece5b5d.apk

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

	App Name	🚗 Automotive
	Build Type	debugProd
	Commit	ece5b5d
	Direct Download	pocketcasts-automotive-prototype-build-pr3129-ece5b5d.apk

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

	App Name	⌚ Wear
	Build Type	debugProd
	Commit	ece5b5d
	Direct Download	pocketcasts-wear-prototype-build-pr3129-ece5b5d.apk

[ashiagr]

It would be good to differentiate between shuffle ON and OFF states for Free users similar to Plus users. If it makes sense, it could just be adding a dot below the icon.

up_next_shuffle_free_user.webm

up_next_shuffle_plus.webm

[mebarbosa]

It would be good to differentiate between shuffle ON and OFF states for Free users similar to Plus users. If it makes sense, it could just be adding a dot below the icon.

up_next_shuffle_free_user.webm
up_next_shuffle_plus.webm

Hey @ashiagr Thanks for your suggestion! In my opinion, I think it would not make sense because for free users if they tap on this button, we display the paywall, so they don't have the ON state. See this PR #3131

But I can ask to the designs if you wanted

[ashiagr]

Ah right 🤦‍♀️