fix: fix icon hover color in dark mode (#2356)

* fix: File and Trash icons brightness in dark mode.
Fixes: #2298

* chore: update hover color in file location

* feat: add foregroundColorOnHover in HoverStyle

* feat: add iconColorOnHover in FlowyIconButton

* chore: update trash page UI

---------

Co-authored-by: Akarsh Jain <akarsh.jain.790@gmail.com>

frontend/appflowy_flutter/lib/plugins/trash/src/sizes.dart

@@ -4,10 +4,14 @@ class TrashSizes {
   static double get fileNameWidth => 320 * scale;
   static double get lashModifyWidth => 230 * scale;
   static double get createTimeWidth => 230 * scale;
-  static double get padding => 100 * scale;
+  // padding between createTime and action icon
+  static double get padding => 40 * scale;
+  static double get actionIconWidth => 40 * scale;
   static double get totalWidth =>
       TrashSizes.fileNameWidth +
       TrashSizes.lashModifyWidth +
       TrashSizes.createTimeWidth +
-      TrashSizes.padding;
+      TrashSizes.padding +
+      // restore and delete icon
+      2 * TrashSizes.actionIconWidth;
 }

frontend/appflowy_flutter/lib/plugins/trash/src/trash_cell.dart

@@ -1,7 +1,5 @@
 import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra_ui/style_widget/icon_button.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
-import 'package:flowy_infra_ui/style_widget/text.dart';
-import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/trash.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
@@ -38,23 +36,19 @@ class TrashCell extends StatelessWidget {
         ),
         const Spacer(),
         FlowyIconButton(
-          width: 26,
+          iconColorOnHover: Theme.of(context).colorScheme.onSurface,
+          width: TrashSizes.actionIconWidth,
           onPressed: onRestore,
           iconPadding: const EdgeInsets.all(5),
-          icon: svgWidget(
+          icon: const FlowySvg(name: 'editor/restore'),
-            "editor/restore",
-            color: Theme.of(context).iconTheme.color,
-          ),
         ),
         const HSpace(20),
         FlowyIconButton(
-          width: 26,
+          iconColorOnHover: Theme.of(context).colorScheme.onSurface,
+          width: TrashSizes.actionIconWidth,
           onPressed: onDelete,
           iconPadding: const EdgeInsets.all(5),
-          icon: svgWidget(
+          icon: const FlowySvg(name: 'editor/delete'),
-            "editor/delete",
-            color: Theme.of(context).iconTheme.color,
-          ),
         ),
       ],
     );

frontend/appflowy_flutter/lib/plugins/trash/trash_page.dart

@@ -96,10 +96,7 @@ class _TrashPageState extends State<TrashPage> {
           IntrinsicWidth(
             child: FlowyButton(
               text: FlowyText.medium(LocaleKeys.trash_restoreAll.tr()),
-              leftIcon: svgWidget(
+              leftIcon: const FlowySvg(name: 'editor/restore'),
-                'editor/restore',
-                color: Theme.of(context).iconTheme.color,
-              ),
               onTap: () => context.read<TrashBloc>().add(
                     const TrashEvent.restoreAll(),
                   ),
@@ -109,10 +106,7 @@ class _TrashPageState extends State<TrashPage> {
           IntrinsicWidth(
             child: FlowyButton(
               text: FlowyText.medium(LocaleKeys.trash_deleteAll.tr()),
-              leftIcon: svgWidget(
+              leftIcon: const FlowySvg(name: 'editor/delete'),
-                'editor/delete',
-                color: Theme.of(context).iconTheme.color,
-              ),
               onTap: () =>
                   context.read<TrashBloc>().add(const TrashEvent.deleteAll()),
             ),

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

@@ -74,7 +74,11 @@ class SettingsFileLocationCustomzierState
                 Tooltip(
                   message: LocaleKeys.settings_files_restoreLocation.tr(),
                   child: FlowyIconButton(
+                    height: 40,
+                    width: 40,
                     icon: const Icon(Icons.restore_outlined),
+                    hoverColor:
+                        Theme.of(context).colorScheme.secondaryContainer,
                     onPressed: () async {
                       final result = await appFlowyDocumentDirectory();
                       await _setCustomLocation(result.path);
@@ -96,7 +100,11 @@ class SettingsFileLocationCustomzierState
                 Tooltip(
                   message: LocaleKeys.settings_files_customizeLocation.tr(),
                   child: FlowyIconButton(
+                    height: 40,
+                    width: 40,
                     icon: const Icon(Icons.folder_open_outlined),
+                    hoverColor:
+                        Theme.of(context).colorScheme.secondaryContainer,
                     onPressed: () async {
                       final result =
                           await getIt<FilePickerService>().getDirectoryPath();

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

@@ -99,6 +99,7 @@ class HoverStyle {
   final Color borderColor;
   final double borderWidth;
   final Color? hoverColor;
+  final Color? foregroundColorOnHover;
   final BorderRadius borderRadius;
   final EdgeInsets contentMargin;
   final Color backgroundColor;
@@ -110,6 +111,7 @@ class HoverStyle {
     this.contentMargin = EdgeInsets.zero,
     this.backgroundColor = Colors.transparent,
     this.hoverColor,
+    this.foregroundColorOnHover,
   });
 }
 
@@ -138,18 +140,17 @@ class FlowyHoverContainer extends StatelessWidget {
         borderRadius: style.borderRadius,
       ),
       child:
-          //override text's theme with new color when it is hovered
+          //override text's theme with foregroundColorOnHover when it is hovered
           Theme(
         data: Theme.of(context).copyWith(
           textTheme: Theme.of(context).textTheme.copyWith(
-                bodyMedium: Theme.of(context)
+                bodyMedium: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                    .textTheme
+                    color: style.foregroundColorOnHover ??
-                    .bodyMedium
+                        Theme.of(context).colorScheme.onSurface),
-                    ?.copyWith(color: Theme.of(context).colorScheme.onSurface),
               ),
-          iconTheme: Theme.of(context)
+          iconTheme: Theme.of(context).iconTheme.copyWith(
-              .iconTheme
+              color: style.foregroundColorOnHover ??
-              .copyWith(color: Theme.of(context).colorScheme.onSurface),
+                  Theme.of(context).colorScheme.onSurface),
         ),
         child: child,
       ),

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

@@ -2,6 +2,7 @@ import 'dart:math';
 
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flutter/material.dart';
 
 class FlowyIconButton extends StatelessWidget {
@@ -11,6 +12,7 @@ class FlowyIconButton extends StatelessWidget {
   final VoidCallback? onPressed;
   final Color? fillColor;
   final Color? hoverColor;
+  final Color? iconColorOnHover;
   final EdgeInsets iconPadding;
   final BorderRadius? radius;
   final String? tooltipText;
@@ -23,6 +25,7 @@ class FlowyIconButton extends StatelessWidget {
     this.onPressed,
     this.fillColor = Colors.transparent,
     this.hoverColor,
+    this.iconColorOnHover,
     this.iconPadding = EdgeInsets.zero,
     this.radius,
     this.tooltipText,
@@ -62,12 +65,20 @@ class FlowyIconButton extends StatelessWidget {
           highlightColor: Colors.transparent,
           elevation: 0,
           onPressed: onPressed,
+          child: FlowyHover(
+            style: HoverStyle(
+              hoverColor: hoverColor,
+              foregroundColorOnHover:
+                  iconColorOnHover ?? Theme.of(context).iconTheme.color,
+              backgroundColor: fillColor ?? Colors.transparent,
+            ),
             child: Padding(
               padding: iconPadding,
               child: SizedBox.fromSize(size: childSize, child: child),
             ),
           ),
         ),
+      ),
     );
   }
 }