Update upgrade prompt on account details screen

[mchowning]

📘 Project: #524

Description

Updates the upgrade prompt on the account details screen to reflect the new Plus styling.

In doing this, I changed the way the plus background works so that it is essentially a wrapper around the relevant content instead of how I had it before where you had to manually create a Box and apply the background. I think this makes it easier to use the background because it hides some of that Box boilerplate.

Testing Instructions

1. Main Flow

1. Create a build of the app that has access to our current subscription offers from Google (if they are not available, the upgrade prompt is hidden)
2. Log into a free account
3. From the settings menu, tap on the "Signed in as" section to open the account details
4. Check that the upgrade view matches the figma designs
5. Confirm that the view only includes the free trial chip if you there is a free trial available.
6. Confirm that tapping on the "Upgrade to Plus" button opens the purchase modal (i.e., the upgrade screen is opened and the bottom purchase modal automatically opens)

2. Checking the background

The background of this view is rendered using Compose on Android 12+ and using a drawable on Android <12 (because Compose's blur modifier only works on Android 12+). Please check confirm that the background looks good both on this view and on the full screen plus upgrade screen (opens when you tap the upgrade button) with both kinds of devices.

Screenshots or Screencast

With fake free trial	Without free trial

Checklist

• If this is a user-facing change, I have added an entry in CHANGELOG.md
• 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 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

[ashiagr]

Nice work, @mchowning! I haven't found any issues.

I changed the way the plus background works so that it is essentially a wrapper around the relevant content instead of how I had it before where you had to manually create a Box and apply the background.

Makes sense 👍

The background of this view is rendered using Compose on Android 12+ and using a drawable on Android <12 (because Compose's blur modifier only works on Android 12+). Please check confirm that the background looks good both on this view and on the full screen plus upgrade screen (opens when you tap the upgrade button) with both kinds of devices.

Visually looks good to me.