diff --git a/mobile/lib/ui/payment/store_subscription_page.dart b/mobile/lib/ui/payment/store_subscription_page.dart index 4bcdd4d5b..c9f38d04e 100644 --- a/mobile/lib/ui/payment/store_subscription_page.dart +++ b/mobile/lib/ui/payment/store_subscription_page.dart @@ -385,21 +385,6 @@ class _StoreSubscriptionPageState extends State { } Widget _showSubscriptionToggle() { - Widget planText(String title, bool reduceOpacity) { - return Padding( - padding: const EdgeInsets.only(left: 4, right: 4), - child: Text( - title, - style: TextStyle( - color: Theme.of(context) - .colorScheme - .onSurface - .withOpacity(reduceOpacity ? 0.5 : 1.0), - ), - ), - ); - } - return Container( padding: const EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2), margin: const EdgeInsets.only(bottom: 6), @@ -409,18 +394,29 @@ class _StoreSubscriptionPageState extends State { child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - planText(S.of(context).monthly, showYearlyPlan), - Switch( - value: showYearlyPlan, - activeColor: Colors.white, - inactiveThumbColor: Colors.white, - activeTrackColor: getEnteColorScheme(context).strokeMuted, - onChanged: (value) async { - showYearlyPlan = value; - await _filterStorePlansForUi(); + SegmentedButton( + style: SegmentedButton.styleFrom( + selectedBackgroundColor: + getEnteColorScheme(context).fillMuted, + selectedForegroundColor: + getEnteColorScheme(context).textBase, + ), + segments: >[ + ButtonSegment( + label: Text(S.of(context).monthly), + value: false, + ), + ButtonSegment( + label: Text(S.of(context).yearly), + value: true, + ), + ], + selected: {showYearlyPlan}, + onSelectionChanged: (p0) { + showYearlyPlan = p0.first; + _filterStorePlansForUi(); }, ), - planText(S.of(context).yearly, !showYearlyPlan), ], ), ),