[mob][photos] Subscription page UI improvements

mobile/lib/ui/payment/stripe_subscription_page.dart

@@ -22,7 +22,6 @@ import "package:photos/ui/components/menu_item_widget/menu_item_widget.dart";
 import "package:photos/ui/components/title_bar_title_widget.dart";
 import 'package:photos/ui/payment/child_subscription_widget.dart';
 import 'package:photos/ui/payment/payment_web_page.dart';
-import 'package:photos/ui/payment/skip_subscription_widget.dart';
 import 'package:photos/ui/payment/subscription_common_widgets.dart';
 import 'package:photos/ui/payment/subscription_plan_widget.dart';
 import "package:photos/ui/payment/view_add_on_widget.dart";
@@ -236,12 +235,11 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
           bonusData: _userDetails.bonusData,
         ),
       );
+    } else {
+      const SizedBox(height: 56);
     }
 
     if (_currentSubscription!.productID == freeProductID) {
-      if (widget.isOnboarding) {
-        widgets.add(SkipSubscriptionWidget(freePlan: _freePlan));
-      }
       widgets.add(
         SubFaqWidget(isOnboarding: widget.isOnboarding),
       );
@@ -278,7 +276,7 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
           padding: const EdgeInsets.fromLTRB(16, 2, 16, 2),
           child: MenuItemWidget(
             captionedTextWidget: CaptionedTextWidget(
-              title: S.of(context).paymentDetails,
+              title: "Manage payment method",
             ),
             menuItemColor: colorScheme.fillFaint,
             trailingWidget: Icon(
@@ -303,10 +301,10 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
           child: _stripeRenewOrCancelButton(),
         ),
       );
-
-      widgets.add(const SizedBox(height: 80));
     }
 
+    widgets.add(const SizedBox(height: 80));
+
     return SingleChildScrollView(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,

mobile/lib/ui/payment/subscription_common_widgets.dart

@@ -75,7 +75,9 @@ class ValidityWidget extends StatelessWidget {
     final List<Bonus> addOnBonus = bonusData?.getAddOnBonuses() ?? <Bonus>[];
     if (currentSubscription == null ||
         (currentSubscription!.isFreePlan() && addOnBonus.isEmpty)) {
-      return const SizedBox.shrink();
+      return const SizedBox(
+        height: 56,
+      );
     }
     final bool isFreeTrialSub = currentSubscription!.productID == freeProductID;
     bool hideSubValidityView = false;
@@ -99,15 +101,21 @@ class ValidityWidget extends StatelessWidget {
     }
 
     return Padding(
-      padding: const EdgeInsets.only(top: 0),
+      padding: const EdgeInsets.fromLTRB(16, 47, 16, 72),
       child: Column(
         children: [
           if (!hideSubValidityView)
-            Text(
-              message,
-              style: Theme.of(context).textTheme.bodySmall,
-              textAlign: TextAlign.center,
+            Padding(
+              padding: const EdgeInsets.only(bottom: 4),
+              child: Text(
+                message,
+                style: getEnteTextTheme(context).body.copyWith(
+                      fontWeight: FontWeight.w600,
+                    ),
+                textAlign: TextAlign.center,
+              ),
             ),
+          const SizedBox(height: 8),
           if (addOnBonus.isNotEmpty)
             ...addOnBonus.map((bonus) => AddOnBonusValidity(bonus)).toList(),
         ],
@@ -129,10 +137,10 @@ class AddOnBonusValidity extends StatelessWidget {
     );
     final String storage = convertBytesToReadableFormat(bonus.storage);
     return Padding(
-      padding: const EdgeInsets.only(top: 8, bottom: 8),
+      padding: const EdgeInsets.only(top: 4, bottom: 4),
       child: Text(
         S.of(context).addOnValidTill(storage, endDate),
-        style: Theme.of(context).textTheme.bodySmall,
+        style: getEnteTextTheme(context).smallFaint,
         textAlign: TextAlign.center,
       ),
     );

mobile/lib/ui/payment/view_add_on_widget.dart

@@ -20,7 +20,7 @@ class ViewAddOnButton extends StatelessWidget {
     }
     final EnteColorScheme colorScheme = getEnteColorScheme(context);
     return Padding(
-      padding: const EdgeInsets.fromLTRB(16, 4, 16, 0),
+      padding: const EdgeInsets.fromLTRB(16, 2, 16, 2),
       child: MenuItemWidget(
         captionedTextWidget: CaptionedTextWidget(
           title: S.of(context).viewAddOnButton,