fix: color issues related to hover effect (#3206)

* fix: fix hover color on information and setting button

* chore: update the hover color of icon in SelectOptionTag

* chore: change hover color for add icon button

* chore: change the SelectOptionTag text color and _SelectOptionCell icon hover color

* fix: change hover color in tab close button #3172

* chore: add spacing in SelectOptionTag

* chore: remove the hover color on close tag icon

* chore: dart fix

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/extension.dart

@@ -6,6 +6,7 @@ import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
@@ -110,20 +111,20 @@ class SelectOptionTag extends StatelessWidget {
             child: FlowyText.medium(
               name,
               overflow: TextOverflow.ellipsis,
-              color: Theme.of(context).colorScheme.onSurface,
+              color: AFThemeExtension.of(context).textColor,
             ),
           ),
-          if (onRemove != null)
+          if (onRemove != null) ...[
+            const HSpace(2),
             FlowyIconButton(
               width: 18.0,
               onPressed: () => onRemove?.call(name),
-              fillColor: Colors.transparent,
               hoverColor: Colors.transparent,
-              icon: FlowySvg(
+              icon: const FlowySvg(
                 FlowySvgs.close_s,
-                color: Theme.of(context).colorScheme.onSurface,
               ),
             ),
+          ]
         ],
       ),
     );

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/select_option_cell/select_option_editor.dart

@@ -220,10 +220,10 @@ class _Title extends StatelessWidget {
               child: FlowyIconButton(
                 onPressed: onPressedAddButton,
                 width: 18,
-                icon: FlowySvg(
+                icon: const FlowySvg(
                   FlowySvgs.add_s,
-                  color: Theme.of(context).iconTheme.color,
                 ),
+                iconColorOnHover: Theme.of(context).colorScheme.onSecondary,
               ),
             ),
           ],
@@ -316,14 +316,18 @@ class _SelectOptionCellState extends State<_SelectOptionCell> {
         },
         children: [
           if (widget.isSelected)
-            const Padding(
+            Padding(
-              padding: EdgeInsets.only(left: 6),
+              padding: const EdgeInsets.only(left: 6),
-              child: FlowySvg(FlowySvgs.check_s),
+              child: FlowySvg(
+                FlowySvgs.check_s,
+                color: Theme.of(context).iconTheme.color,
+              ),
             ),
           FlowyIconButton(
             onPressed: () => _popoverController.show(),
-            hoverColor: Colors.transparent,
             iconPadding: const EdgeInsets.symmetric(horizontal: 6.0),
+            // If hover color is none, it will use secondary color from the theme, we use [Colors.transparent] to remove the hover color
+            hoverColor: Colors.transparent,
             icon: FlowySvg(
               FlowySvgs.details_s,
               color: Theme.of(context).iconTheme.color,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/built_in_page_widget.dart

@@ -129,10 +129,10 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
           width: 24,
           height: 24,
           iconPadding: const EdgeInsets.all(3),
-          icon: FlowySvg(
+          icon: const FlowySvg(
             FlowySvgs.information_s,
-            color: Theme.of(context).iconTheme.color,
           ),
+          iconColorOnHover: Theme.of(context).colorScheme.onSecondary,
         ),
         // setting
         const Space(7, 0),
@@ -146,9 +146,9 @@ class _BuiltInPageWidgetState extends State<BuiltInPageWidget> {
             width: 24,
             height: 24,
             iconPadding: const EdgeInsets.all(3),
-            icon: FlowySvg(
+            iconColorOnHover: Theme.of(context).colorScheme.onSecondary,
+            icon: const FlowySvg(
               FlowySvgs.settings_s,
-              color: Theme.of(context).iconTheme.color,
             ),
             onPressed: () => controller.show(),
           ),

frontend/appflowy_flutter/lib/workspace/presentation/home/tabs/flowy_tab.dart

@@ -52,6 +52,9 @@ class _FlowyTabState extends State<FlowyTab> {
                       visible: _isHovering,
                       child: FlowyIconButton(
                         onPressed: _closeTab,
+                        hoverColor: Theme.of(context).hoverColor,
+                        iconColorOnHover:
+                            Theme.of(context).colorScheme.onSurface,
                         icon: const FlowySvg(
                           FlowySvgs.close_s,
                           size: Size.fromWidth(16),

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

@@ -1,6 +1,4 @@
 import 'dart:math';
-
-
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_svg/flowy_svg.dart';
@@ -71,7 +69,7 @@ class FlowyIconButton extends StatelessWidget {
           shape:
               RoundedRectangleBorder(borderRadius: radius ?? Corners.s6Border),
           fillColor: fillColor,
-          hoverColor: hoverColor ?? Theme.of(context).colorScheme.secondary,
+          hoverColor: hoverColor,
           focusColor: Colors.transparent,
           splashColor: Colors.transparent,
           highlightColor: Colors.transparent,
@@ -79,10 +77,11 @@ class FlowyIconButton extends StatelessWidget {
           onPressed: onPressed,
           child: FlowyHover(
             style: HoverStyle(
-              hoverColor: Colors.transparent,
+              // hoverColor is set in both [HoverStyle] and [RawMaterialButton] to avoid the conflicts between two layers
+              hoverColor: hoverColor,
               foregroundColorOnHover:
                   iconColorOnHover ?? Theme.of(context).iconTheme.color,
-              backgroundColor: Colors.transparent,
+              //Do not set background here. Use [fillColor] instead.
             ),
             child: Padding(
               padding: iconPadding,