chore: replace all the buttons on settings page with the primary button style (#5937)

frontend/appflowy_flutter/lib/plugins/shared/share/_shared.dart

@@ -41,29 +41,11 @@ class ShareMenuButton extends StatelessWidget {
               tabs: tabs,
             ),
           ),
-          child: const _ShareButton(),
+          child: PrimaryRoundedButton(
+            text: LocaleKeys.shareAction_buttonText.tr(),
+          ),
         ),
       ),
     );
   }
 }
-
-class _ShareButton extends StatelessWidget {
-  const _ShareButton();
-
-  @override
-  Widget build(BuildContext context) {
-    return FlowyButton(
-      text: FlowyText(
-        LocaleKeys.shareAction_buttonText.tr(),
-        fontSize: 14.0,
-        fontWeight: FontWeight.w500,
-        color: Theme.of(context).colorScheme.onPrimary,
-      ),
-      margin: const EdgeInsets.symmetric(horizontal: 14.0),
-      backgroundColor: Theme.of(context).colorScheme.primary,
-      hoverColor: Theme.of(context).colorScheme.primary.withOpacity(0.9),
-      radius: BorderRadius.circular(10.0),
-    );
-  }
-}

frontend/appflowy_flutter/lib/plugins/shared/share/publish_tab.dart

@@ -190,6 +190,7 @@ class _PublishedWidgetState extends State<_PublishedWidget> {
       title: LocaleKeys.shareAction_visitSite.tr(),
       borderRadius: const BorderRadius.all(Radius.circular(10)),
       fillColor: Theme.of(context).colorScheme.primary,
+      hoverColor: Theme.of(context).colorScheme.primary.withOpacity(0.9),
       textColor: Theme.of(context).colorScheme.onPrimary,
     );
   }
@@ -258,13 +259,11 @@ class _PublishButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return RoundedTextButton(
+    return PrimaryRoundedButton(
-      height: 36,
+      text: LocaleKeys.shareAction_publish.tr(),
-      title: LocaleKeys.shareAction_publish.tr(),
+      useIntrinsicWidth: false,
-      padding: const EdgeInsets.symmetric(vertical: 9.0),
+      margin: const EdgeInsets.symmetric(vertical: 9.0),
-      fontSize: 14.0,
+      onTap: onPublish,
-      textColor: Theme.of(context).colorScheme.onPrimary,
-      onPressed: onPublish,
     );
   }
 }

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/shared_widget.dart

@@ -213,7 +213,7 @@ class SpaceCancelOrConfirmButton extends StatelessWidget {
             radius: BorderRadius.circular(8),
             text: FlowyText.regular(
               confirmButtonName,
-              color: Colors.white,
+              color: Theme.of(context).colorScheme.onPrimary,
             ),
             onTap: onConfirm,
           ),

frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_account_view.dart

@@ -193,17 +193,14 @@ class SignInOutButton extends StatelessWidget {
       children: [
         SizedBox(
           height: 48,
-          child: FlowyTextButton(
+          child: PrimaryRoundedButton(
-            signIn
+            text: signIn
                 ? LocaleKeys.settings_accountPage_login_loginLabel.tr()
                 : LocaleKeys.settings_accountPage_login_logoutLabel.tr(),
-            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+            margin: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
             fontWeight: FontWeight.w600,
-            radius: BorderRadius.circular(12),
+            radius: 12.0,
-            fillColor: Theme.of(context).colorScheme.primary,
+            onTap: () {
-            hoverColor: const Color(0xFF005483),
-            fontHoverColor: Colors.white,
-            onPressed: () {
               if (signIn) {
                 _showSignInDialog(context);
               } else {

frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_manage_data_view.dart

@@ -1,8 +1,5 @@
 import 'dart:async';
 
-import 'package:flutter/foundation.dart';
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/core/helpers/url_launcher.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
@@ -25,10 +22,10 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/file_picker/file_picker_service.dart';
 import 'package:flowy_infra/theme_extension.dart';
-import 'package:flowy_infra_ui/style_widget/button.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flutter/foundation.dart';
-import 'package:flowy_infra_ui/widget/spacing.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 
@@ -432,15 +429,13 @@ class _DataPathActions extends StatelessWidget {
       children: [
         SizedBox(
           height: 42,
-          child: FlowyTextButton(
+          child: PrimaryRoundedButton(
-            LocaleKeys.settings_manageDataPage_dataStorage_actions_change.tr(),
+            text: LocaleKeys.settings_manageDataPage_dataStorage_actions_change
-            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+                .tr(),
+            margin: const EdgeInsets.symmetric(horizontal: 24),
             fontWeight: FontWeight.w600,
-            radius: BorderRadius.circular(12),
+            radius: 12.0,
-            fillColor: Theme.of(context).colorScheme.primary,
+            onTap: () async {
-            hoverColor: const Color(0xFF005483),
-            fontHoverColor: Colors.white,
-            onPressed: () async {
               final path = await getIt<FilePickerService>().getDirectoryPath();
               if (!context.mounted || path == null || currentPath == path) {
                 return;

frontend/appflowy_flutter/lib/workspace/presentation/settings/shared/single_setting_action.dart

@@ -1,10 +1,9 @@
-import 'package:flutter/material.dart';
-
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
+import 'package:flutter/material.dart';
 
 enum SingleSettingsButtonType {
   primary,
@@ -108,6 +107,7 @@ class SingleSettingAction extends StatelessWidget {
             radius: Corners.s8Border,
             hoverColor: hoverColor(context),
             fontColor: fontColor(context),
+            textColor: fontColor(context),
             fontHoverColor: fontHoverColor(context),
             borderColor: borderColor(context),
             fontSize: 12,
@@ -128,7 +128,7 @@ class SingleSettingAction extends StatelessWidget {
 
   Color? hoverColor(BuildContext context) {
     if (buttonType.isPrimary) {
-      return const Color(0xFF005483);
+      return Theme.of(context).colorScheme.primary.withOpacity(0.9);
     }
 
     if (buttonType.isHighlight) {
@@ -146,7 +146,7 @@ class SingleSettingAction extends StatelessWidget {
       return const Color(0xFF5C3699);
     }
 
-    return null;
+    return Theme.of(context).colorScheme.onPrimary;
   }
 
   Color? fontHoverColor(BuildContext context) {

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/_restart_app_button.dart

@@ -1,10 +1,9 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/user/presentation/screens/sign_in_screen/widgets/sign_in_or_logout_button.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' show PlatformExtension;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
 
 class RestartButton extends StatelessWidget {
   const RestartButton({
@@ -40,15 +39,12 @@ class RestartButton extends StatelessWidget {
         children: [
           SizedBox(
             height: 42,
-            child: FlowyTextButton(
+            child: PrimaryRoundedButton(
-              LocaleKeys.settings_menu_restartApp.tr(),
+              text: LocaleKeys.settings_menu_restartApp.tr(),
-              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+              margin: const EdgeInsets.symmetric(horizontal: 24),
               fontWeight: FontWeight.w600,
-              radius: BorderRadius.circular(12),
+              radius: 12.0,
-              fillColor: Theme.of(context).colorScheme.primary,
+              onTap: onClick,
-              hoverColor: const Color(0xFF005483),
-              fontHoverColor: Colors.white,
-              onPressed: onClick,
             ),
           ),
         ],

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/members/workspace_member_page.dart

@@ -1,5 +1,3 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/core/helpers/url_launcher.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
@@ -17,7 +15,7 @@ import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flowy_infra_ui/widget/rounded_button.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:string_validator/string_validator.dart';
 
@@ -267,11 +265,13 @@ class _InviteMemberState extends State<_InviteMember> {
             SizedBox(
               height: 48.0,
               child: IntrinsicWidth(
-                child: RoundedTextButton(
+                child: PrimaryRoundedButton(
-                  title: LocaleKeys.settings_appearance_members_sendInvite.tr(),
+                  text: LocaleKeys.settings_appearance_members_sendInvite.tr(),
-                  padding:
+                  margin: const EdgeInsets.symmetric(
-                      const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+                    horizontal: 16,
-                  onPressed: _inviteMember,
+                    vertical: 8,
+                  ),
+                  onTap: _inviteMember,
                 ),
               ),
             ),

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/flowy_infra_ui.dart

@@ -15,6 +15,7 @@ export 'style_widget/button.dart';
 export 'style_widget/color_picker.dart';
 export 'style_widget/divider.dart';
 export 'style_widget/icon_button.dart';
+export 'style_widget/primary_rounded_button.dart';
 export 'style_widget/scrollbar.dart';
 export 'style_widget/scrolling/styled_list.dart';
 export 'style_widget/scrolling/styled_scroll_bar.dart';

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/primary_rounded_button.dart

@@ -0,0 +1,50 @@
+import 'package:flowy_infra_ui/style_widget/button.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flutter/material.dart';
+
+class PrimaryRoundedButton extends StatelessWidget {
+  const PrimaryRoundedButton({
+    super.key,
+    required this.text,
+    this.fontSize,
+    this.fontWeight,
+    this.color,
+    this.radius,
+    this.margin,
+    this.onTap,
+    this.hoverColor,
+    this.backgroundColor,
+    this.useIntrinsicWidth = true,
+  });
+
+  final String text;
+  final double? fontSize;
+  final FontWeight? fontWeight;
+  final Color? color;
+  final double? radius;
+  final EdgeInsets? margin;
+  final VoidCallback? onTap;
+  final Color? hoverColor;
+  final Color? backgroundColor;
+  final bool useIntrinsicWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    return FlowyButton(
+      useIntrinsicWidth: useIntrinsicWidth,
+      text: FlowyText(
+        text,
+        fontSize: fontSize ?? 14.0,
+        fontWeight: fontWeight ?? FontWeight.w500,
+        color: Theme.of(context).colorScheme.onPrimary,
+        textAlign: TextAlign.center,
+      ),
+      margin: margin ?? const EdgeInsets.symmetric(horizontal: 14.0),
+      backgroundColor: backgroundColor ?? Theme.of(context).colorScheme.primary,
+      hoverColor:
+          hoverColor ?? Theme.of(context).colorScheme.primary.withOpacity(0.9),
+      radius: BorderRadius.circular(radius ?? 10.0),
+      onTap: onTap,
+    );
+  }
+}