chore: rounded button hover

frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart

@@ -358,8 +358,10 @@ class _DateTypeOptionButton extends StatelessWidget {
           popupBuilder: (BuildContext popContext) {
             return _CalDateTimeSetting(
               dateTypeOptionPB: dateTypeOptionPB,
-              popoverMutex: popoverMutex,
-              onEvent: (event) => context.read<DateCalBloc>().add(event),
+              onEvent: (event) {
+                context.read<DateCalBloc>().add(event);
+                popoverMutex.close();
+              },
             );
           },
         );
@@ -369,12 +371,10 @@ class _DateTypeOptionButton extends StatelessWidget {
 }
 
 class _CalDateTimeSetting extends StatefulWidget {
-  final PopoverMutex popoverMutex;
   final DateTypeOptionPB dateTypeOptionPB;
   final Function(DateCalEvent) onEvent;
   const _CalDateTimeSetting({
     required this.dateTypeOptionPB,
-    required this.popoverMutex,
     required this.onEvent,
     Key? key,
   }) : super(key: key);
@@ -384,36 +384,38 @@ class _CalDateTimeSetting extends StatefulWidget {
 }
 
 class _CalDateTimeSettingState extends State<_CalDateTimeSetting> {
+  final timeSettingPopoverMutex = PopoverMutex();
   String? overlayIdentifier;
 
   @override
   Widget build(BuildContext context) {
     List<Widget> children = [
       AppFlowyPopover(
-        mutex: widget.popoverMutex,
-        asBarrier: true,
+        mutex: timeSettingPopoverMutex,
         triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
         offset: const Offset(20, 0),
         popupBuilder: (BuildContext context) {
           return DateFormatList(
             selectedFormat: widget.dateTypeOptionPB.dateFormat,
-            onSelected: (format) =>
-                widget.onEvent(DateCalEvent.setDateFormat(format)),
+            onSelected: (format) {
+              widget.onEvent(DateCalEvent.setDateFormat(format));
+              timeSettingPopoverMutex.close();
+            },
           );
         },
         child: const DateFormatButton(),
       ),
       AppFlowyPopover(
-        mutex: widget.popoverMutex,
-        asBarrier: true,
+        mutex: timeSettingPopoverMutex,
         triggerActions: PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
         offset: const Offset(20, 0),
         popupBuilder: (BuildContext context) {
           return TimeFormatList(
-            selectedFormat: widget.dateTypeOptionPB.timeFormat,
-            onSelected: (format) =>
-                widget.onEvent(DateCalEvent.setTimeFormat(format)),
-          );
+              selectedFormat: widget.dateTypeOptionPB.timeFormat,
+              onSelected: (format) {
+                widget.onEvent(DateCalEvent.setTimeFormat(format));
+                timeSettingPopoverMutex.close();
+              });
         },
         child: TimeFormatButton(timeFormat: widget.dateTypeOptionPB.timeFormat),
       ),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_cell.dart

@@ -162,6 +162,7 @@ class FieldCellButton extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return FlowyButton(
+      radius: BorderRadius.zero,
       hoverColor: theme.shader6,
       onTap: onTap,
       leftIcon: svgWidget(field.fieldType.iconName(), color: theme.iconColor),

frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/grid_header.dart

@@ -180,6 +180,7 @@ class CreateFieldButton extends StatelessWidget {
       asBarrier: true,
       constraints: BoxConstraints.loose(const Size(240, 600)),
       child: FlowyButton(
+        radius: BorderRadius.zero,
         text: FlowyText.medium(
           LocaleKeys.grid_field_newColumn.tr(),
           fontSize: 12,

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

@@ -12,6 +12,8 @@ class FlowyButton extends StatelessWidget {
   final Widget? rightIcon;
   final Color hoverColor;
   final bool isSelected;
+  final BorderRadius radius;
+
   const FlowyButton({
     Key? key,
     required this.text,
@@ -22,6 +24,7 @@ class FlowyButton extends StatelessWidget {
     this.rightIcon,
     this.hoverColor = Colors.transparent,
     this.isSelected = false,
+    this.radius = const BorderRadius.all(Radius.circular(6)),
   }) : super(key: key);
 
   @override
@@ -29,8 +32,10 @@ class FlowyButton extends StatelessWidget {
     return InkWell(
       onTap: onTap,
       child: FlowyHover(
-        style:
-            HoverStyle(borderRadius: BorderRadius.zero, hoverColor: hoverColor),
+        style: HoverStyle(
+          borderRadius: radius,
+          hoverColor: hoverColor,
+        ),
         onHover: onHover,
         setSelected: () => isSelected,
         builder: (context, onHover) => _render(),