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

2024-08-30 18:12:39 +00:00 · 2022-11-21 08:23:37 +08:00 · 2022-11-21 08:23:37 +08:00 · 67a253c9c7
commit 67a253c9c7
parent dcf6628aa3
8 changed files with 40 additions and 45 deletions
--- a/frontend/app_flowy/lib/plugins/document/document.dart
+++ b/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(),
        );
      },
--- a/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart
+++ b/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>()
--- a/frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart
+++ b/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,
    );
  }
--- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/create_button.dart
+++ b/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,
-      fontWeight: FontWeight.w500,
+      fontColor: Theme.of(context).colorScheme.onSurfaceVariant,
      onPressed: () async => await _showCreateAppDialog(context),
      heading: svgWithSize("home/new_app", const Size(16, 16)),
      padding: EdgeInsets.symmetric(horizontal: Insets.l, vertical: 20),
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
+++ b/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(),
        );
      },
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart
+++ b/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(
-          borderRadius: radius ?? BorderRadius.circular(2)),
-      fillColor: fillColor,
+      shape: RoundedRectangleBorder(borderRadius: radius ?? Corners.s6Border),
+      fillColor: fillColor ?? Theme.of(context).colorScheme.secondaryContainer,
      hoverColor: hoverColor ?? Theme.of(context).colorScheme.secondary,
      focusColor: Colors.transparent,
      splashColor: Colors.transparent,
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart
+++ b/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(
-              borderRadius: radius ?? BorderRadius.circular(2)),
+          shape:
+              RoundedRectangleBorder(borderRadius: radius ?? Corners.s6Border),
          fillColor: fillColor,
          hoverColor: hoverColor ?? Theme.of(context).colorScheme.secondary,
          focusColor: Colors.transparent,
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart
+++ b/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 textColor;
-  final double fontSize;
+  final Color? fillColor;
+  final Color? hoverColor;
+  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.textColor = Colors.white,
-    this.fontSize = 16,
+    this.fillColor,
+    this.hoverColor,
+    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(
-            onPressed: onPressed,
-            child: FlowyText.medium(
-              title ?? '',
-              fontSize: fontSize,
-              color: textColor,
-            ),
-          ),
+      child: SizedBox.expand(
+        child: FlowyTextButton(
+          title ?? '',
+          onPressed: onPressed,
+          fontSize: fontSize,
+          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,
        ),
      ),
    );