feat(cat-voices): Discovery Page mobile screen adjustment

catalyst_voices/apps/voices/lib/pages/discovery/sections/campaign_categories.dart

@@ -1,4 +1,5 @@
 import 'package:catalyst_voices/widgets/cards/campaign_category_card.dart';
+import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';
 import 'package:catalyst_voices_view_models/catalyst_voices_view_models.dart';
 import 'package:flutter/material.dart';
 import 'package:skeletonizer/skeletonizer.dart';
@@ -15,8 +16,10 @@ class CampaignCategories extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 120),
+    return ResponsivePadding.only(
+      xs: const EdgeInsets.symmetric(horizontal: 20),
+      sm: const EdgeInsets.symmetric(horizontal: 48),
+      other: const EdgeInsets.symmetric(horizontal: 120),
       child: Column(
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.stretch,

catalyst_voices/apps/voices/lib/pages/discovery/sections/campaign_hero.dart

@@ -21,7 +21,7 @@ class CampaignHeroSection extends StatelessWidget {
       child: HeroSection(
         asset: VideoCacheKey(name: VoicesAssets.videos.heroDesktop),
         child: ResponsivePadding(
-          xs: const EdgeInsets.only(left: 40, bottom: 16, top: 8, right: 40),
+          xs: const EdgeInsets.only(left: 20, bottom: 16, top: 8, right: 20),
           sm: const EdgeInsets.only(left: 80, bottom: 32, top: 18),
           md: const EdgeInsets.only(left: 150, bottom: 64, top: 32),
           lg: const EdgeInsets.only(left: 150, bottom: 64, top: 32),

catalyst_voices/apps/voices/lib/pages/discovery/sections/current_campaign.dart

@@ -4,6 +4,7 @@ import 'package:catalyst_voices/widgets/cards/funds_detail_card.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
 import 'package:catalyst_voices_models/catalyst_voices_models.dart' show MarkdownData;
+import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';
 import 'package:catalyst_voices_view_models/catalyst_voices_view_models.dart';
 import 'package:flutter/material.dart';
 import 'package:skeletonizer/skeletonizer.dart';
@@ -24,8 +25,10 @@ class CurrentCampaign extends StatelessWidget {
       mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Padding(
-          padding: const EdgeInsets.only(left: 120, top: 64, right: 120),
+        ResponsivePadding.only(
+          xs: const EdgeInsets.only(left: 20, top: 32, right: 20),
+          sm: const EdgeInsets.only(left: 42, top: 64, right: 42),
+          other: const EdgeInsets.only(left: 120, top: 64, right: 120),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisSize: MainAxisSize.min,
@@ -38,17 +41,28 @@ class CurrentCampaign extends StatelessWidget {
                   totalAsk: currentCampaignInfo.totalAsk,
                 ),
               ),
-              const SizedBox(height: 80),
+              ResponsiveSizedBox.only(
+                xs: const SizedBox(height: 30),
+                sm: const SizedBox(height: 48),
+                other: const SizedBox(height: 80),
+              ),
               const _SubTitle(),
             ],
           ),
         ),
-        Padding(
-          padding: const EdgeInsets.only(top: 32, bottom: 100),
+        ResponsivePadding.only(
+          xs: const EdgeInsets.only(top: 20, bottom: 32),
+          sm: const EdgeInsets.only(top: 32, bottom: 48),
+          other: const EdgeInsets.only(top: 32, bottom: 100),
           child: CampaignTimeline(
             key: const Key('CampaignTimeline'),
             timelineItems: currentCampaignInfo.timeline,
-            horizontalPadding: const SizedBox(width: 120),
+            horizontalPadding: ResponsiveBuilder<SizedBox>(
+              builder: (context, data) => data,
+              xs: const SizedBox(width: 20),
+              sm: const SizedBox(width: 48),
+              other: const SizedBox(width: 120),
+            ),
           ),
         ),
       ],

catalyst_voices/apps/voices/lib/pages/discovery/sections/most_recent_proposals.dart

@@ -8,6 +8,7 @@ import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
 import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';
 import 'package:catalyst_voices_view_models/catalyst_voices_view_models.dart';
 import 'package:flutter/material.dart';
 import 'package:skeletonizer/skeletonizer.dart';
@@ -89,8 +90,10 @@ class _LatestProposalsState extends State<MostRecentProposals> {
           fit: BoxFit.cover,
         ),
       ),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 100),
+      child: ResponsivePadding.only(
+        xs: const EdgeInsets.symmetric(horizontal: 48),
+        sm: const EdgeInsets.symmetric(horizontal: 48),
+        other: const EdgeInsets.symmetric(horizontal: 100),
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [

catalyst_voices/apps/voices/lib/pages/discovery/sections/stay_involved.dart

@@ -19,9 +19,11 @@ class StayInvolved extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Padding(
-      padding: EdgeInsets.symmetric(horizontal: 120, vertical: 72),
-      child: Column(
+    return ResponsivePadding.only(
+      xs: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
+      sm: const EdgeInsets.symmetric(horizontal: 48, vertical: 48),
+      other: const EdgeInsets.symmetric(horizontal: 120, vertical: 72),
+      child: const Column(
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [

catalyst_voices/apps/voices/lib/pages/discovery/state_selectors/campaign_categories_state_selector.dart

@@ -4,6 +4,7 @@ import 'package:catalyst_voices/pages/discovery/sections/campaign_categories.dar
 import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';
 import 'package:catalyst_voices_view_models/catalyst_voices_view_models.dart';
 import 'package:flutter/material.dart';
 
@@ -19,8 +20,10 @@ class CampaignCategoriesStateSelector extends StatelessWidget {
       mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 120),
+        ResponsivePadding.only(
+          xs: const EdgeInsets.symmetric(horizontal: 20),
+          sm: const EdgeInsets.symmetric(horizontal: 48),
+          other: const EdgeInsets.symmetric(horizontal: 120),
           child: Text(
             key: const Key('CampaignCategoriesTitle'),
             context.l10n.campaignCategories,

catalyst_voices/apps/voices/lib/pages/discovery/state_selectors/current_campaign_selector.dart

@@ -4,6 +4,7 @@ import 'package:catalyst_voices/pages/discovery/sections/current_campaign.dart';
 import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:catalyst_voices_shared/catalyst_voices_shared.dart';
 import 'package:catalyst_voices_view_models/catalyst_voices_view_models.dart';
 import 'package:flutter/material.dart';
 
@@ -90,16 +91,18 @@ class CurrentCampaignSelector extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Column(
-      key: Key('CurrentCampaignRoot'),
+    return Column(
+      key: const Key('CurrentCampaignRoot'),
       mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Padding(
-          padding: EdgeInsets.only(left: 120, top: 64, right: 120),
-          child: _Header(),
+        ResponsivePadding.only(
+          xs: const EdgeInsets.only(left: 20, top: 64, right: 20),
+          sm: const EdgeInsets.only(left: 42, top: 64, right: 42),
+          other: const EdgeInsets.only(left: 120, top: 64, right: 120),
+          child: const _Header(),
         ),
-        Stack(
+        const Stack(
           children: [
             CurrentCampaignLoading(),
             CurrentCampaignData(),

catalyst_voices/apps/voices/lib/widgets/campaign_timeline/campaign_timeline.dart

@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 
 class CampaignTimeline extends StatefulWidget {
   final List<CampaignTimelineViewModel> timelineItems;
-  final SizedBox horizontalPadding;
+  final Widget horizontalPadding;
 
   const CampaignTimeline({
     super.key,

catalyst_voices/apps/voices/lib/widgets/cards/campaign_category_card.dart

@@ -153,7 +153,6 @@ class _Buttons extends StatelessWidget {
           foregroundColor: context.colorScheme.primary,
           child: Text(context.l10n.viewProposals),
         ),
-        const SizedBox(height: 24),
       ],
     );
   }

catalyst_voices/packages/internal/catalyst_voices_shared/lib/src/catalyst_voices_shared.dart

@@ -19,6 +19,7 @@ export 'range/range.dart';
 export 'responsive/responsive_builder.dart';
 export 'responsive/responsive_child.dart';
 export 'responsive/responsive_padding.dart';
+export 'responsive/responsive_sized_box.dart';
 export 'user/dummy_catalyst_id_factory.dart';
 export 'user/user_observer.dart';
 export 'utils/active_aware.dart';

catalyst_voices/packages/internal/catalyst_voices_shared/lib/src/responsive/responsive_padding.dart

@@ -45,6 +45,24 @@ class ResponsivePadding extends StatelessWidget {
          ResponsiveBreakpointKey.other: other,
        };
 
+  factory ResponsivePadding.only({
+    Key? key,
+    EdgeInsets? xs,
+    EdgeInsets? sm,
+    EdgeInsets? md,
+    EdgeInsets? lg,
+    EdgeInsets other = EdgeInsets.zero,
+    required Widget child,
+  }) => ResponsivePadding(
+    key: key,
+    xs: xs ?? other,
+    sm: sm ?? other,
+    md: md ?? other,
+    lg: lg ?? other,
+    other: other,
+    child: child,
+  );
+
   @override
   Widget build(BuildContext context) {
     return ResponsiveBuilder<EdgeInsets>(

catalyst_voices/packages/internal/catalyst_voices_shared/lib/src/responsive/responsive_sized_box.dart

@@ -0,0 +1,58 @@
+import 'package:catalyst_voices_shared/src/responsive/responsive_breakpoint_key.dart';
+import 'package:catalyst_voices_shared/src/responsive/responsive_builder.dart';
+import 'package:flutter/widgets.dart';
+
+/// A [ResponsiveSizedBox] is a StatelessWidget that creates a SizedBox based on
+/// the current screen size.
+///
+/// The widget uses ResponsiveBuilder to calculate the proper SizedBox
+/// based on the screen size and returns the appropriate SizedBox widget.
+///
+/// The possible arguments are xs, sm, md, lg, other following the
+/// Material design standards and the ResponsiveBuilder arguments.
+class ResponsiveSizedBox extends StatelessWidget {
+  final Map<ResponsiveBreakpointKey, SizedBox> _sizedBoxes;
+
+  ResponsiveSizedBox({
+    super.key,
+    SizedBox xs = const SizedBox(),
+    SizedBox sm = const SizedBox(),
+    SizedBox md = const SizedBox(),
+    SizedBox lg = const SizedBox(),
+    SizedBox other = const SizedBox(),
+  }) : _sizedBoxes = {
+         ResponsiveBreakpointKey.xs: xs,
+         ResponsiveBreakpointKey.sm: sm,
+         ResponsiveBreakpointKey.md: md,
+         ResponsiveBreakpointKey.lg: lg,
+         ResponsiveBreakpointKey.other: other,
+       };
+
+  factory ResponsiveSizedBox.only({
+    Key? key,
+    SizedBox? xs,
+    SizedBox? sm,
+    SizedBox? md,
+    SizedBox? lg,
+    SizedBox other = const SizedBox.shrink(),
+  }) => ResponsiveSizedBox(
+    key: key,
+    xs: xs ?? other,
+    sm: sm ?? other,
+    md: md ?? other,
+    lg: lg ?? other,
+    other: other,
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return ResponsiveBuilder<SizedBox>(
+      builder: (context, sizedBox) => sizedBox,
+      xs: _sizedBoxes[ResponsiveBreakpointKey.xs],
+      sm: _sizedBoxes[ResponsiveBreakpointKey.sm],
+      md: _sizedBoxes[ResponsiveBreakpointKey.md],
+      lg: _sizedBoxes[ResponsiveBreakpointKey.lg],
+      other: _sizedBoxes[ResponsiveBreakpointKey.other]!,
+    );
+  }
+}