fix: fix colors for buttons and allow more customization (#1465)

frontend/app_flowy/lib/plugins/document/document.dart

@@ -14,7 +14,6 @@ import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:clipboard/clipboard.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:file_picker/file_picker.dart';
-import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flowy_sdk/log.dart';
 import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart';
@@ -176,9 +175,6 @@ class ShareActionList extends StatelessWidget {
       buildChild: (controller) {
         return RoundedTextButton(
           title: LocaleKeys.shareAction_buttonText.tr(),
-          fontSize: FontSizes.s12,
-          borderRadius: Corners.s6Border,
-          color: Theme.of(context).colorScheme.primary,
           onPressed: () => controller.show(),
         );
       },

frontend/app_flowy/lib/user/presentation/sign_up_screen.dart

@@ -115,7 +115,6 @@ class SignUpButton extends StatelessWidget {
     return RoundedTextButton(
       title: LocaleKeys.signUp_getStartedText.tr(),
       height: 48,
-      color: Theme.of(context).colorScheme.primary,
       onPressed: () {
         context
             .read<SignUpBloc>()

frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart

@@ -141,9 +141,9 @@ class GoButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return RoundedTextButton(
       title: LocaleKeys.letsGoButtonText.tr(),
+      fontSize: FontSizes.s16,
       height: 50,
       borderRadius: Corners.s10Border,
-      color: Theme.of(context).colorScheme.primary,
       onPressed: onPressed,
     );
   }

frontend/app_flowy/lib/workspace/presentation/home/menu/app/create_button.dart

@@ -7,7 +7,6 @@ import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra_ui/style_widget/extension.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
-// ignore: implementation_imports
 
 class NewAppButton extends StatelessWidget {
   final Function(String)? press;
@@ -17,9 +16,9 @@ class NewAppButton extends StatelessWidget {
   Widget build(BuildContext context) {
     final child = FlowyTextButton(
       LocaleKeys.newPageText.tr(),
+      fillColor: Colors.transparent,
       hoverColor: Colors.transparent,
-      fontSize: FontSizes.s12,
+      fontColor: Theme.of(context).colorScheme.onSurfaceVariant,
-      fontWeight: FontWeight.w500,
       onPressed: () async => await _showCreateAppDialog(context),
       heading: svgWithSize("home/new_app", const Size(16, 16)),
       padding: EdgeInsets.symmetric(horizontal: Insets.l, vertical: 20),

frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart

@@ -3,6 +3,7 @@ import 'package:app_flowy/workspace/presentation/home/toast.dart';
 import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/size.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';
@@ -45,11 +46,9 @@ class BubbleActionList extends StatelessWidget {
         return FlowyTextButton(
           '?',
           tooltip: LocaleKeys.questionBubble_help.tr(),
-          fontSize: 12,
           fontWeight: FontWeight.w600,
-          fillColor: Theme.of(context).colorScheme.secondaryContainer,
           mainAxisAlignment: MainAxisAlignment.center,
-          radius: BorderRadius.circular(10),
+          radius: Corners.s10Border,
           onPressed: () => controller.show(),
         );
       },

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart

@@ -1,4 +1,5 @@
 import 'package:flowy_infra/color_extension.dart';
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -75,9 +76,10 @@ class FlowyButton extends StatelessWidget {
 
 class FlowyTextButton extends StatelessWidget {
   final String text;
-  final double fontSize;
+  final FontWeight? fontWeight;
+  final Color? fontColor;
+  final double? fontSize;
   final TextOverflow overflow;
-  final FontWeight fontWeight;
 
   final VoidCallback? onPressed;
   final EdgeInsets padding;
@@ -93,9 +95,10 @@ class FlowyTextButton extends StatelessWidget {
     this.text, {
     Key? key,
     this.onPressed,
-    this.fontSize = 16,
+    this.fontSize,
+    this.fontColor,
     this.overflow = TextOverflow.ellipsis,
-    this.fontWeight = FontWeight.w400,
+    this.fontWeight,
     this.padding = const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
     this.hoverColor,
     this.fillColor,
@@ -118,6 +121,7 @@ class FlowyTextButton extends StatelessWidget {
         overflow: overflow,
         fontWeight: fontWeight,
         fontSize: fontSize,
+        color: fontColor ?? Theme.of(context).colorScheme.onSecondary,
         textAlign: TextAlign.center,
       ),
     );
@@ -135,9 +139,8 @@ class FlowyTextButton extends StatelessWidget {
       visualDensity: VisualDensity.compact,
       hoverElevation: 0,
       highlightElevation: 0,
-      shape: RoundedRectangleBorder(
+      shape: RoundedRectangleBorder(borderRadius: radius ?? Corners.s6Border),
-          borderRadius: radius ?? BorderRadius.circular(2)),
+      fillColor: fillColor ?? Theme.of(context).colorScheme.secondaryContainer,
-      fillColor: fillColor,
       hoverColor: hoverColor ?? Theme.of(context).colorScheme.secondary,
       focusColor: Colors.transparent,
       splashColor: Colors.transparent,

frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart

@@ -1,6 +1,7 @@
 import 'dart:math';
 
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
 import 'package:flutter/material.dart';
 
 class FlowyIconButton extends StatelessWidget {
@@ -49,8 +50,8 @@ class FlowyIconButton extends StatelessWidget {
           visualDensity: VisualDensity.compact,
           hoverElevation: 0,
           highlightElevation: 0,
-          shape: RoundedRectangleBorder(
+          shape:
-              borderRadius: radius ?? BorderRadius.circular(2)),
+              RoundedRectangleBorder(borderRadius: radius ?? Corners.s6Border),
           fillColor: fillColor,
           hoverColor: hoverColor ?? Theme.of(context).colorScheme.secondary,
           focusColor: Colors.transparent,

frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart

@@ -1,5 +1,5 @@
 import 'package:flowy_infra/size.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flutter/material.dart';
 
 class RoundedTextButton extends StatelessWidget {
@@ -7,11 +7,12 @@ class RoundedTextButton extends StatelessWidget {
   final String? title;
   final double? width;
   final double? height;
-  final BorderRadius borderRadius;
+  final BorderRadius? borderRadius;
   final Color borderColor;
-  final Color? color;
+  final Color? fillColor;
-  final Color textColor;
+  final Color? hoverColor;
-  final double fontSize;
+  final Color? textColor;
+  final double? fontSize;
 
   const RoundedTextButton({
     Key? key,
@@ -19,11 +20,12 @@ class RoundedTextButton extends StatelessWidget {
     this.title,
     this.width,
     this.height,
-    this.borderRadius = Corners.s12Border,
+    this.borderRadius,
     this.borderColor = Colors.transparent,
-    this.color,
+    this.fillColor,
-    this.textColor = Colors.white,
+    this.hoverColor,
-    this.fontSize = 16,
+    this.textColor,
+    this.fontSize,
   }) : super(key: key);
 
   @override
@@ -35,21 +37,17 @@ class RoundedTextButton extends StatelessWidget {
         minHeight: 10,
         maxHeight: height ?? 60,
       ),
-      child: Container(
-        decoration: BoxDecoration(
-          border: Border.all(color: borderColor),
-          borderRadius: borderRadius,
-          color: color ?? Theme.of(context).colorScheme.primary,
-        ),
       child: SizedBox.expand(
-          child: TextButton(
+        child: FlowyTextButton(
-            onPressed: onPressed,
-            child: FlowyText.medium(
           title ?? '',
+          onPressed: onPressed,
           fontSize: fontSize,
-              color: textColor,
+          mainAxisAlignment: MainAxisAlignment.center,
-            ),
+          radius: borderRadius ?? Corners.s6Border,
-          ),
+          fontColor: textColor ?? Theme.of(context).colorScheme.onPrimary,
+          fillColor: fillColor ?? Theme.of(context).colorScheme.primary,
+          hoverColor:
+              hoverColor ?? Theme.of(context).colorScheme.primaryContainer,
         ),
       ),
     );