feat(cat-voices): Responsive app bar (#3434)

dt-iohk · web-flow · commit 319388921c4e · 2025-09-17T08:02:39.000+02:00
* refactor: split into more widgets

* chore: reformat code

* feat: responsive appbar action buttons

* feat: update button ui
diff --git a/catalyst_voices/apps/voices/lib/pages/account/delete_keychain_dialog.dart b/catalyst_voices/apps/voices/lib/pages/account/delete_keychain_dialog.dart
@@ -64,7 +64,9 @@ class _DeleteKeychainDialogState extends State<DeleteKeychainDialog> {
             children: [
               VoicesFilledButton(
                 key: const Key('DeleteKeychainContinueButton'),
-                backgroundColor: Theme.of(context).colors.iconsError,
+                style: FilledButton.styleFrom(
+                  backgroundColor: Theme.of(context).colors.iconsError,
+                ),
                 onTap: _removeKeychain,
                 child: Text(context.l10n.continueText),
               ),
diff --git a/catalyst_voices/apps/voices/lib/pages/discovery/sections/campaign_hero.dart b/catalyst_voices/apps/voices/lib/pages/discovery/sections/campaign_hero.dart
@@ -69,8 +69,10 @@ class _CampaignBrief extends StatelessWidget {
               onTap: () {
                 const ProposalsRoute().go(context);
               },
-              backgroundColor: ThemeBuilder.buildTheme().colorScheme.primary,
-              foregroundColor: ThemeBuilder.buildTheme().colorScheme.onPrimary,
+              style: FilledButton.styleFrom(
+                backgroundColor: ThemeBuilder.buildTheme().colorScheme.primary,
+                foregroundColor: ThemeBuilder.buildTheme().colorScheme.onPrimary,
+              ),
               child: Text(context.l10n.viewProposals),
             ),
             const SizedBox(width: 8),
diff --git a/catalyst_voices/apps/voices/lib/pages/discovery/sections/most_recent_proposals.dart b/catalyst_voices/apps/voices/lib/pages/discovery/sections/most_recent_proposals.dart
@@ -214,8 +214,10 @@ class _ViewAllProposalsButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return VoicesFilledButton(
-      backgroundColor: ThemeBuilder.buildTheme().colorScheme.onPrimary,
-      foregroundColor: ThemeBuilder.buildTheme().colorScheme.primary,
+      style: FilledButton.styleFrom(
+        backgroundColor: ThemeBuilder.buildTheme().colorScheme.onPrimary,
+        foregroundColor: ThemeBuilder.buildTheme().colorScheme.primary,
+      ),
       child: Text(
         key: const Key('ViewAllProposalsBtn'),
         context.l10n.viewAllProposals,
diff --git a/catalyst_voices/apps/voices/lib/pages/proposal_builder/appbar/proposal_builder_back_action.dart b/catalyst_voices/apps/voices/lib/pages/proposal_builder/appbar/proposal_builder_back_action.dart
@@ -1,5 +1,5 @@
 import 'package:catalyst_voices/routes/routing/routing.dart';
-import 'package:catalyst_voices/widgets/widgets.dart';
+import 'package:catalyst_voices/widgets/buttons/voices_responsive_button.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
 import 'package:flutter/material.dart';
@@ -9,12 +9,12 @@ class ProposalBuilderBackAction extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return VoicesOutlinedButton(
+    return VoicesResponsiveOutlinedButton(
       style: OutlinedButton.styleFrom(
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
       ),
       onTap: () => const WorkspaceRoute().go(context),
-      leading: VoicesAssets.icons.logout.buildIcon(),
+      icon: VoicesAssets.icons.logout.buildIcon(),
       child: Text(context.l10n.proposalEditorBackToProposals),
     );
   }
diff --git a/catalyst_voices/apps/voices/lib/pages/proposal_builder/appbar/proposal_builder_status_action.dart b/catalyst_voices/apps/voices/lib/pages/proposal_builder/appbar/proposal_builder_status_action.dart
@@ -2,9 +2,10 @@ import 'dart:async';
 
 import 'package:catalyst_voices/common/ext/build_context_ext.dart';
 import 'package:catalyst_voices/pages/proposal_builder/appbar/widget/proposal_builder_menu_item.dart';
+import 'package:catalyst_voices/widgets/buttons/voices_filled_button.dart';
+import 'package:catalyst_voices/widgets/buttons/voices_icon_button.dart';
 import 'package:catalyst_voices/widgets/modals/proposals/forget_proposal_dialog.dart';
 import 'package:catalyst_voices/widgets/modals/proposals/proposal_builder_delete_confirmation_dialog.dart';
-import 'package:catalyst_voices/widgets/widgets.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
@@ -42,19 +43,21 @@ class ProposalBuilderStatusAction extends StatelessWidget {
   }
 }
 
-class _Button extends StatelessWidget {
+class _LargeButton extends StatelessWidget {
   final VoidCallback onTap;
 
-  const _Button({required this.onTap});
+  const _LargeButton({required this.onTap});
 
   @override
   Widget build(BuildContext context) {
     return VoicesFilledButton(
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      style: FilledButton.styleFrom(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      ),
       onTap: onTap,
+      leading: VoicesAssets.icons.documentText.buildIcon(),
       child: Row(
         children: [
-          VoicesAssets.icons.documentText.buildIcon(size: 16),
           const SizedBox(width: 8),
           Text(
             context.l10n.proposalOptions,
@@ -91,7 +94,7 @@ class _PopupMenuButtonState extends State<_PopupMenuButton> {
       offset: const Offset(0, 48),
       clipBehavior: Clip.antiAlias,
       constraints: const BoxConstraints(minWidth: 420),
-      child: _Button(onTap: _showMenu),
+      child: _ResponsiveButton(onTap: _showMenu),
       itemBuilder: (context) {
         return <PopupMenuEntry<int>>[
           for (final item in widget.items)
@@ -183,3 +186,34 @@ class _PopupMenuButtonState extends State<_PopupMenuButton> {
     _buttonKey.currentState?.showButtonMenu();
   }
 }
+
+class _ResponsiveButton extends StatelessWidget {
+  final VoidCallback onTap;
+
+  const _ResponsiveButton({required this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return ResponsiveChildBuilder(
+      xs: (context) => _SmallButton(onTap: onTap),
+      sm: (context) => _LargeButton(onTap: onTap),
+    );
+  }
+}
+
+class _SmallButton extends StatelessWidget {
+  final VoidCallback onTap;
+
+  const _SmallButton({required this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return VoicesIconButton.outlined(
+      style: OutlinedButton.styleFrom(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      ),
+      onTap: onTap,
+      child: VoicesAssets.icons.documentText.buildIcon(),
+    );
+  }
+}
diff --git a/catalyst_voices/apps/voices/lib/pages/spaces/appbar/account_popup/session_lock_button.dart b/catalyst_voices/apps/voices/lib/pages/spaces/appbar/account_popup/session_lock_button.dart
@@ -1,6 +1,6 @@
 import 'dart:async';
 
-import 'package:catalyst_voices/widgets/widgets.dart';
+import 'package:catalyst_voices/widgets/buttons/voices_responsive_button.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
@@ -11,10 +11,10 @@ class SessionLockButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return VoicesOutlinedButton(
+    return VoicesResponsiveOutlinedButton(
       key: const Key('LockButton'),
       onTap: () => unawaited(context.read<SessionCubit>().lock()),
-      leading: VoicesAssets.icons.lockClosed.buildIcon(),
+      icon: VoicesAssets.icons.lockClosed.buildIcon(),
       child: Text(context.l10n.lock),
     );
   }
diff --git a/catalyst_voices/apps/voices/lib/pages/spaces/appbar/account_popup/session_unlock_button.dart b/catalyst_voices/apps/voices/lib/pages/spaces/appbar/account_popup/session_unlock_button.dart
@@ -1,7 +1,7 @@
 import 'dart:async';
 
 import 'package:catalyst_voices/pages/account/unlock_keychain_dialog.dart';
-import 'package:catalyst_voices/widgets/widgets.dart';
+import 'package:catalyst_voices/widgets/buttons/voices_responsive_button.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
 import 'package:flutter/material.dart';
@@ -11,10 +11,10 @@ class SessionUnlockButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return VoicesOutlinedButton(
+    return VoicesResponsiveOutlinedButton(
       key: const Key('UnlockButton'),
       onTap: () => unawaited(UnlockKeychainDialog.show(context)),
-      trailing: VoicesAssets.icons.lockOpen.buildIcon(),
+      icon: VoicesAssets.icons.lockOpen.buildIcon(),
       child: Text(context.l10n.unlock),
     );
   }
diff --git a/catalyst_voices/apps/voices/lib/pages/spaces/appbar/spaces_appbar/discovery_appbar.dart b/catalyst_voices/apps/voices/lib/pages/spaces/appbar/spaces_appbar/discovery_appbar.dart
@@ -29,7 +29,7 @@ class DiscoveryAppbar extends StatelessWidget implements PreferredSizeWidget {
       active: (_, __, ___) => VoicesAppBar(
         leading: isAppUnlock ? const DrawerToggleButton() : null,
         actions: [
-          if (isProposer) const CreateProposalButton(),
+          if (isProposer) const ResponsiveCreateProposalButton(),
           const SessionCtaAction(),
           const AccountSettingsAction(),
         ],
diff --git a/catalyst_voices/apps/voices/lib/pages/spaces/appbar/voting/vote_delegation_button.dart b/catalyst_voices/apps/voices/lib/pages/spaces/appbar/voting/vote_delegation_button.dart
@@ -1,4 +1,4 @@
-import 'package:catalyst_voices/widgets/buttons/voices_outlined_button.dart';
+import 'package:catalyst_voices/widgets/buttons/voices_responsive_button.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
 import 'package:flutter/material.dart';
@@ -8,8 +8,8 @@ class VoteDelegationButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return VoicesOutlinedButton(
-      leading: VoicesAssets.icons.vote.buildIcon(),
+    return VoicesResponsiveOutlinedButton(
+      icon: VoicesAssets.icons.userGroup.buildIcon(),
       child: Text(context.l10n.delegationButton),
     );
   }
diff --git a/catalyst_voices/apps/voices/lib/pages/spaces/appbar/voting/vote_list_button.dart b/catalyst_voices/apps/voices/lib/pages/spaces/appbar/voting/vote_list_button.dart
@@ -1,5 +1,5 @@
 import 'package:catalyst_voices/pages/voting/widgets/voting_list/voting_list.dart';
-import 'package:catalyst_voices/widgets/buttons/voices_outlined_button.dart';
+import 'package:catalyst_voices/widgets/buttons/voices_responsive_button.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
@@ -10,8 +10,8 @@ class VoteListButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return VoicesOutlinedButton(
-      leading: VoicesAssets.icons.vote.buildIcon(),
+    return VoicesResponsiveOutlinedButton(
+      icon: VoicesAssets.icons.vote.buildIcon(),
       child: BlocSelector<VotingBallotBloc, VotingBallotState, int>(
         selector: (state) => state.votesCount,
         builder: (context, votesCount) => Text(_getText(context, votesCount)),
diff --git a/catalyst_voices/apps/voices/lib/pages/voting/widgets/voting_list/voting_list_bottom_sheet_actions.dart b/catalyst_voices/apps/voices/lib/pages/voting/widgets/voting_list/voting_list_bottom_sheet_actions.dart
@@ -36,7 +36,9 @@ class VotingListBottomSheetActions extends StatelessWidget {
           child: AbsorbPointer(
             absorbing: isLoading,
             child: VoicesFilledButton(
-              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+              style: FilledButton.styleFrom(
+                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+              ),
               onTap: nextAction,
               child: isLoading
                   ? const SizedBox(
diff --git a/catalyst_voices/apps/voices/lib/pages/voting/widgets/voting_list/voting_list_footer.dart b/catalyst_voices/apps/voices/lib/pages/voting/widgets/voting_list/voting_list_footer.dart
@@ -30,7 +30,9 @@ class _CastVotesButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return VoicesFilledButton(
       onTap: onTap,
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      style: FilledButton.styleFrom(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      ),
       child: Text(context.l10n.votingListCastVotes),
     );
   }
diff --git a/catalyst_voices/apps/voices/lib/widgets/app_bar/voices_app_bar.dart b/catalyst_voices/apps/voices/lib/widgets/app_bar/voices_app_bar.dart
@@ -61,7 +61,10 @@ class VoicesAppBar extends StatelessWidget implements PreferredSizeWidget {
                 leadingWidth: 48.0 + spacing,
                 automaticallyImplyLeading: false,
                 backgroundColor: backgroundColor,
-                title: _Title(showSearch: showSearch, enableBackHome: enableBackHome),
+                title: _ResponsiveTitle(
+                  showSearch: showSearch,
+                  enableBackHome: enableBackHome,
+                ),
                 actions: [
                   _Actions(children: actions),
                 ],
@@ -155,6 +158,39 @@ class _BrandPicture extends StatelessWidget {
   }
 }
 
+class _ResponsiveTitle extends StatelessWidget {
+  final bool showSearch;
+  final bool enableBackHome;
+
+  const _ResponsiveTitle({required this.showSearch, required this.enableBackHome});
+
+  @override
+  Widget build(BuildContext context) {
+    return ResponsiveChildBuilder(
+      xs: (_) => _Title(
+        widgets: [
+          _BrandPicture(enableBackHome: enableBackHome),
+        ],
+        itemGap: 8,
+      ),
+      sm: (_) => _Title(
+        widgets: [
+          _BrandPicture(enableBackHome: enableBackHome),
+          if (showSearch) SearchButton(onPressed: () {}),
+        ],
+        itemGap: 16,
+      ),
+      md: (_) => _Title(
+        widgets: [
+          _BrandPicture(enableBackHome: enableBackHome),
+          if (showSearch) SearchButton(onPressed: () {}),
+        ],
+        itemGap: 24,
+      ),
+    );
+  }
+}
+
 class _Theme extends StatelessWidget {
   final Widget child;
 
@@ -176,52 +212,25 @@ class _Theme extends StatelessWidget {
 }
 
 class _Title extends StatelessWidget {
-  final bool showSearch;
-  final bool enableBackHome;
+  final List<Widget> widgets;
+  final double itemGap;
 
-  const _Title({required this.showSearch, required this.enableBackHome});
+  const _Title({
+    required this.widgets,
+    required this.itemGap,
+  });
 
   @override
   Widget build(BuildContext context) {
     return Container(
       height: 64,
       alignment: Alignment.centerLeft,
-      child: ResponsiveBuilder<({List<Widget> widgets, double itemGap})>(
-        xs: (
-          widgets: [
-            _BrandPicture(enableBackHome: enableBackHome),
-          ],
-          itemGap: 8,
-        ),
-        sm: (
-          widgets: [
-            _BrandPicture(enableBackHome: enableBackHome),
-            if (showSearch)
-              SearchButton(
-                onPressed: () {},
-              ),
-          ],
-          itemGap: 16,
-        ),
-        md: (
-          widgets: [
-            _BrandPicture(enableBackHome: enableBackHome),
-            if (showSearch)
-              SearchButton(
-                onPressed: () {},
-              ),
-          ],
-          itemGap: 24,
-        ),
-        builder: (context, data) => ListView.separated(
-          shrinkWrap: true,
-          itemBuilder: (context, index) => data.widgets[index],
-          separatorBuilder: (context, index) => SizedBox(
-            width: data.itemGap,
-          ),
-          itemCount: data.widgets.length,
-          scrollDirection: Axis.horizontal,
-        ),
+      child: ListView.separated(
+        shrinkWrap: true,
+        itemCount: widgets.length,
+        itemBuilder: (context, index) => widgets[index],
+        separatorBuilder: (context, index) => SizedBox(width: itemGap),
+        scrollDirection: Axis.horizontal,
       ),
     );
   }
diff --git a/catalyst_voices/apps/voices/lib/widgets/buttons/create_proposal_button.dart b/catalyst_voices/apps/voices/lib/widgets/buttons/create_proposal_button.dart
diff --git a/catalyst_voices/apps/voices/lib/widgets/buttons/voices_buttons.dart b/catalyst_voices/apps/voices/lib/widgets/buttons/voices_buttons.dart
diff --git a/catalyst_voices/apps/voices/lib/widgets/buttons/voices_filled_button.dart b/catalyst_voices/apps/voices/lib/widgets/buttons/voices_filled_button.dart
diff --git a/catalyst_voices/apps/voices/lib/widgets/buttons/voices_responsive_button.dart b/catalyst_voices/apps/voices/lib/widgets/buttons/voices_responsive_button.dart
diff --git a/catalyst_voices/apps/voices/lib/widgets/cards/campaign_category_card.dart b/catalyst_voices/apps/voices/lib/widgets/cards/campaign_category_card.dart
