Some Material 3 updates to the `ManageSubscriptionsView` #2072

JayShortway · 2025-01-22T10:28:24Z

Description

As the title says. These are just some suggestions. Feel free to ignore.

Uses TextButtons instead of primary Buttons, and places them on a Surface. (The latter is more of an artistic choice haha.)
Uses the titleLarge style for the screen title, following the guidelines.
Updates spacing.
Removes the shadow from the top card, as elevation is not often shown with shadows in Material 3.

Before	After

emerge-tools · 2025-01-22T10:41:53Z

📸 Snapshot Test

3 modified, 175 unchanged

Name	Added	Removed	Modified	Renamed	Unchanged	Errored	Approval
TestPurchasesUIAndroidCompatibility com.revenuecat.testpurchasesuiandroidcompatibility	0	0	3	0	175	5	✅ Approved

🛸 Powered by Emerge Tools

codecov · 2025-01-22T10:56:16Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.26%. Comparing base (97e4a93) to head (0dc98c9).
Report is 6 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2072   +/-   ##
=======================================
  Coverage   81.26%   81.26%           
=======================================
  Files         265      265           
  Lines        8730     8730           
  Branches     1243     1243           
=======================================
  Hits         7094     7094           
  Misses       1128     1128           
  Partials      508      508

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

vegaro · 2025-01-22T13:25:02Z

...lin/com/revenuecat/purchases/ui/revenuecatui/customercenter/views/ManageSubscriptionsView.kt

        Text(
            text = path.title,
-            color = if (useOutlinedButton) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onPrimary,


so useOutlinedButton would not be used anymore. I was using that for the screen of users with no active subscriptions.

I thought the standard would be this https://m3.material.io/foundations/content-design/global-writing/word-choice#715006c7-2637-4734-a6e6-d2dc261af528

It is still being used, but the text color is no longer dependent on it. This actually made me realize an improvement, which is to handle the text color using outlinedButtonColors() / textButtonColors(). See here: aa641cb. The outlined button colors should be unchanged.

right right, it's used in line 228 😮‍💨

perfect

hiddevdploeg · 2025-01-22T13:48:56Z

It feels much more like an Android, great job! The only thing I’m wondering about is whether the title shouldn’t be slightly heavier in font weight, or if that’s just my preference.

hiddevdploeg · 2025-01-22T13:50:14Z

Also this alignment is off by just a few points

…e Text composable.

JayShortway · 2025-01-22T14:45:04Z

@hiddevdploeg

Regarding font weight: we're now taking the font weight of the TextStyle, which means that users can override it by changing the titleLarge style in their app. They've probably already done that, so this ensures that the Customer Center title looks the same as other titles in their app. If we were to manually set the font weight, it's a fixed thing.

Regarding the alignment: that's a great catch! Should be fixed here: 0dc98c9. I updated the screenshot in the PR description.

vegaro · 2025-01-24T08:56:45Z

...lin/com/revenuecat/purchases/ui/revenuecatui/customercenter/views/ManageSubscriptionsView.kt

        Text(
            text = path.title,
-            color = if (useOutlinedButton) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.onPrimary,


right right, it's used in line 228 😮‍💨

perfect

@greenietea

**This is an automatic release.** ## RevenueCat SDK ### 🐞 Bugfixes * fix: Add prepaid as a period type (#2141) via Greenie (@greenietea) ## RevenueCatUI SDK ### Paywalls v2 #### ✨ New Features * [Paywalls V2] Adds support for Paywalls V2! (#2127) via JayShortway (@JayShortway) ### Customer Center #### ✨ New Features * Adds support for `CustomerCenter` (#2156) via Cesar de la Vega (@vegaro) ### 🔄 Other Changes * [Paywalls V2] Deprecate PaywallFooter in favor of OriginalTemplatePaywallFooter (#2111) via Toni Rico (@tonidero) * feat: Filter CANCEL from help path if lifetime (#2140) via Facundo Menzella (@facumenzella) * fix: Localize Restore Purchases Dialog (#2139) via Facundo Menzella (@facumenzella) * fix: Hide contact support if there's no email (#2135) via Facundo Menzella (@facumenzella) * feat: Track IMPRESSION and SURVER_OPTION_CHOSEN for CustomerCenter (#2124) via Facundo Menzella (@facumenzella) * fix: Use TextButton instead of outline for Promotionals (#2138) via Facundo Menzella (@facumenzella) * Rename carousel slide to page (#2144) via Josh Holtz (@joshdholtz) * [Paywalls V2] Make border draw on top of the image overlay (#2165) via Toni Rico (@tonidero) * [Paywalls V2] Gradients Reloaded: Makes linear gradients match CSS even more closely (#2166) via JayShortway (@JayShortway) * [Paywalls V2] Fix wrong spacers in Stack when some children are Fill (#2164) via Toni Rico (@tonidero) * chore: Unify Json encoding with JsonHelper (#2160) via Facundo Menzella (@facumenzella) * [Paywalls V2] Fixes the top system bar padding being applied to all children in a vertical container (#2162) via JayShortway (@JayShortway) * [Paywalls V2] Refactor to use a single ImageLoader singleton in RevenueCatUI (#2161) via Toni Rico (@tonidero) * [Paywalls V2] Apply stack margins to overlay badges (#2158) via Toni Rico (@tonidero) * [Paywalls V2] Disables the click handler for the selected package (#2159) via JayShortway (@JayShortway) * [Paywalls V2] Change stack distribution system to use spacers instead of custom arrangements (#2154) via Toni Rico (@tonidero) * [Paywalls V2] Fixes empty stacks not showing up. (#2157) via JayShortway (@JayShortway) * Explicitly sets the `defaults` flavor as the default. (#2155) via JayShortway (@JayShortway) * Updates on no active purchases screen (#2150) via Cesar de la Vega (@vegaro) * [Paywalls V2] Fix issue with sizing of stacks with nested badges (#2152) via Toni Rico (@tonidero) * [Paywalls V2] Fix issue with shadows overlapping long edgeToEdge badges (#2149) via Toni Rico (@tonidero) * [Paywalls V2] Adjusts the convex/concave offset to 10% of the image height (#2151) via JayShortway (@JayShortway) * [Paywalls V2] Fixes variables for multi month periods (#2148) via JayShortway (@JayShortway) * [Paywalls V2] Correctly handles variables for lifetime products (#2145) via JayShortway (@JayShortway) * [Paywalls V2] Add shadows to badge previews (#2147) via Toni Rico (@tonidero) * [Paywalls V2] Predownload paywall low res images (#2143) via Toni Rico (@tonidero) * [Paywalls V2] Makes linear gradients consistent with CSS (#2142) via JayShortway (@JayShortway) * [Paywalls V2] Adds edge-to-edge support (#2137) via JayShortway (@JayShortway) * [Paywalls V2] Make root stack component use all the available space by default (#2136) via Toni Rico (@tonidero) * [Paywalls V2] Avoids a crash if a package is missing (#2130) via JayShortway (@JayShortway) * [Paywalls V2] Fix stack clipping issues (#2126) via Toni Rico (@tonidero) * fix: Address typo and wrong doc for CustomerCenter events (#2133) via Facundo Menzella (@facumenzella) * [Paywalls V2] Fix merge conflict (#2134) via Toni Rico (@tonidero) * [Paywalls V2] Actually ignores the font provider for V2. (#2129) via JayShortway (@JayShortway) * Rename `PromotionalOfferView` to `PromotionalOfferScreen` (#2132) via Cesar de la Vega (@vegaro) * [Paywalls V2] Support background images in StackComponent, CarouselComponent, TabsComponent (#2131) via Toni Rico (@tonidero) * [Paywalls V2] Support scroll orientation in StackComponent (#2108) via Toni Rico (@tonidero) * [Paywalls V2] Correctly selects packages on tabs (#2122) via JayShortway (@JayShortway) * Revamp UI in Customer Center (#2123) via Cesar de la Vega (@vegaro) * [Paywalls V2] Remove cursive as a generic font (#2118) via Josh Holtz (@joshdholtz) * Publishes PaywallsTester to Internal testing track on every commit to `main` (#2100) via JayShortway (@JayShortway) * Fixes `X` in promo offer not dismissing the promo (#2110) via Cesar de la Vega (@vegaro) * [Paywalls V2] Published version of PaywallTester now uses the Paywalls V2 Alpha RC project (#2093) via JayShortway (@JayShortway) * [Paywalls V2] New overrides structure (#2120) via Toni Rico (@tonidero) * [Paywalls V2] Adds `TabsComponent` samples and tests (#2115) via JayShortway (@JayShortway) * Ignores `RestorePurchasesDialog` previews using `IgnoreEmergeSnapshot` (#2116) via Cesar de la Vega (@vegaro) * [Paywalls V2] Adds `TabsComponentView` (#2114) via JayShortway (@JayShortway) * Fixes "View field header collides with a variable" data binding error in PurchaseTester (#2119) via JayShortway (@JayShortway) * feat: Add support for tracking customer center events (#2117) via Facundo Menzella (@facumenzella) * [Paywalls V2] Adds `TabsComponentStyle` (#2113) via JayShortway (@JayShortway) * [Paywalls V2] Adds deserialization of `TabsComponent` (#2101) via JayShortway (@JayShortway) * [Paywalls V2] Implements Variables V2 (#2099) via JayShortway (@JayShortway) * refactor: Introduce EventsManager to track events for different features (#2096) via Facundo Menzella (@facumenzella) * Rename to Web Billing (#2094) via Antonio Borrero Granell (@antoniobg) * [Paywalls V2] Fixes shadows drawing behind transparent components (#2112) via JayShortway (@JayShortway) * Fix title not being reset after closing Feedback Survey (#2109) via Cesar de la Vega (@vegaro) * Support for opening custom urls in Customer Center (#2107) via Cesar de la Vega (@vegaro) * Prices in accept promotional offer button (#2104) via Cesar de la Vega (@vegaro) * Customer Center use remote appearance config (#2102) via Cesar de la Vega (@vegaro) * [Paywalls V2] Use original paywall fallback when trying to use Footer modes in a Components paywall (#2106) via Toni Rico (@tonidero) * [Paywalls V2] Add more `ImageComponentView` preview tests (#2103) via Toni Rico (@tonidero) * [Paywalls V2] Add CarouselComponent page indicator animation (#2105) via Toni Rico (@tonidero) * [Paywalls V2] Add `CarouselComponentView` (#2095) via Toni Rico (@tonidero) * [Paywalls V2] Add `CarouselComponent` infrastructure (#2092) via Toni Rico (@tonidero) * [Paywalls V2] Adds new price calculations needed for Variables V2 (#2098) via JayShortway (@JayShortway) * [Paywalls V2] Preparation for Variables V2 (#2097) via JayShortway (@JayShortway) * Promotional offers (#2011) via Cesar de la Vega (@vegaro) * [Paywalls V2] No longer provides the entire `UiConfig` to `StyleFactory` (#2091) via JayShortway (@JayShortway) * [Paywalls V2] Adds support for custom fonts (#2090) via JayShortway (@JayShortway) * feat: Add basic customer center events (#2075) via Facundo Menzella (@facumenzella) * Add support to manage non-Google purchases in Customer Center (#2067) via Cesar de la Vega (@vegaro) * [Paywalls V2] Add `TimelineComponentView` (#2083) via Toni Rico (@tonidero) * [Paywalls V2] Process `TimelineComponent` overrides and state (#2082) via Toni Rico (@tonidero) * [Paywalls V2] Cleans up after implementing color aliases (#2087) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for backgrounds (#2086) via JayShortway (@JayShortway) * `PaywallTesterApp` is no longer wrapped in a `Surface` (#2089) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for shadows (#2085) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for borders (#2084) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for `TextComponent` (#2080) via JayShortway (@JayShortway) * [Paywalls V2] Add `TimelineComponent` network parsing (#2047) via Toni Rico (@tonidero) * [Paywalls V2] Implements color aliases for `ImageComponent` (#2079) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for `IconComponent` (#2078) via JayShortway (@JayShortway) * Build `SubscriptionDetailsView` using `CustomerInfo` (#2057) via Cesar de la Vega (@vegaro) * Some Material 3 updates to the `ManageSubscriptionsView` (#2072) via JayShortway (@JayShortway) * [Paywalls V2] Implements color aliases for `StackComponent` (#2076) via JayShortway (@JayShortway) * Fixes compilation of `IconComponentView`. (#2073) via JayShortway (@JayShortway) * [Paywalls V2] Make `edgeToEdge` top/bottom badge extend to entire stack background (#2070) via Toni Rico (@tonidero) * [Paywalls V2] Parses `UiConfig` (#2068) via JayShortway (@JayShortway) * [Paywalls V2] Add `IconComponent` (#2071) via Toni Rico (@tonidero) * [Paywalls V2] Badge: Handle main stack border width correctly in overlay and nested badge styles (#2069) via Toni Rico (@tonidero) * [Paywalls V2] Add `edgeToEdge` badge trailing/leading style layout (#2054) via Toni Rico (@tonidero) * [Paywalls V2] Adds support for fallback components (#2064) via JayShortway (@JayShortway) --------- Co-authored-by: revenuecat-ops <[email protected]> Co-authored-by: Toni Rico <[email protected]> Co-authored-by: Toni Rico <[email protected]> Co-authored-by: Cesar de la Vega <[email protected]>

JayShortway added 2 commits January 22, 2025 11:15

Some Material 3 updates to the ManageSubscriptionsView.

5f18a25

Removes commented-out code.

a7eb7f2

JayShortway added pr:RevenueCatUI pr:other feat:Customer Center labels Jan 22, 2025

JayShortway requested review from vegaro and a team January 22, 2025 10:28

JayShortway self-assigned this Jan 22, 2025

vegaro reviewed Jan 22, 2025

View reviewed changes

JayShortway added 2 commits January 22, 2025 15:23

Button text colors are handled by the Button composable instead of th…

aa641cb

…e Text composable.

Adjusts the horizontal button text padding.

0dc98c9

vegaro approved these changes Jan 24, 2025

View reviewed changes

JayShortway merged commit 92bbe59 into main Jan 24, 2025
12 checks passed

JayShortway deleted the update-manage-subscriptions-view branch January 24, 2025 08:58

This was referenced Feb 12, 2025

[AUTOMATIC] Release/8.12.0 #2153

Closed

[AUTOMATIC] Release/8.12.0 #2167

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Some Material 3 updates to the `ManageSubscriptionsView` #2072

Some Material 3 updates to the `ManageSubscriptionsView` #2072

JayShortway commented Jan 22, 2025 •

edited

Loading

emerge-tools bot commented Jan 22, 2025 •

edited

Loading

codecov bot commented Jan 22, 2025 •

edited

Loading

vegaro Jan 22, 2025

JayShortway Jan 22, 2025

vegaro Jan 24, 2025

hiddevdploeg commented Jan 22, 2025

hiddevdploeg commented Jan 22, 2025

JayShortway commented Jan 22, 2025

vegaro Jan 24, 2025

Some Material 3 updates to the ManageSubscriptionsView #2072

Some Material 3 updates to the ManageSubscriptionsView #2072

Conversation

JayShortway commented Jan 22, 2025 • edited Loading

Description

emerge-tools bot commented Jan 22, 2025 • edited Loading

📸 Snapshot Test

3 modified, 175 unchanged

codecov bot commented Jan 22, 2025 • edited Loading

Codecov Report

vegaro Jan 22, 2025

Choose a reason for hiding this comment

JayShortway Jan 22, 2025

Choose a reason for hiding this comment

vegaro Jan 24, 2025

Choose a reason for hiding this comment

hiddevdploeg commented Jan 22, 2025

hiddevdploeg commented Jan 22, 2025

JayShortway commented Jan 22, 2025

vegaro Jan 24, 2025

Choose a reason for hiding this comment

Some Material 3 updates to the `ManageSubscriptionsView` #2072

Some Material 3 updates to the `ManageSubscriptionsView` #2072

JayShortway commented Jan 22, 2025 •

edited

Loading

emerge-tools bot commented Jan 22, 2025 •

edited

Loading

codecov bot commented Jan 22, 2025 •

edited

Loading