[mob] Use SegmentedButton instead of broken(UI) toggle in app store subscription page

mobile/lib/ui/payment/store_subscription_page.dart

@@ -385,21 +385,6 @@ class _StoreSubscriptionPageState extends State<StoreSubscriptionPage> {
   }
 
   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<StoreSubscriptionPage> {
             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<bool>>[
+                    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),
               ],
             ),
           ),