fix light theme issues (#215)

* fix light theme issues
* rm hoverColor in ThemeData

frontend/app_flowy/lib/workspace/presentation/stack_page/home_stack.dart

@@ -1,8 +1,10 @@
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/domain/page_stack/page_stack.dart';
 import 'package:app_flowy/workspace/presentation/home/home_screen.dart';
+import 'package:flowy_infra/theme.dart';
 import 'package:flowy_log/flowy_log.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 import 'package:time/time.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 
@@ -27,13 +29,14 @@ class HomeStack extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     Log.info('HomePage build');
+    final theme = context.watch<AppTheme>();
     return Column(
       mainAxisAlignment: MainAxisAlignment.start,
       children: [
         getIt<HomeStackManager>().stackTopBar(),
         Expanded(
           child: Container(
-            color: Theme.of(context).colorScheme.background,
+            color: theme.surface,
             child: FocusTraversalGroup(
               child: getIt<HomeStackManager>().stackWidget(),
             ),

frontend/app_flowy/lib/workspace/presentation/stack_page/trash/widget/trash_header.dart

@@ -61,7 +61,7 @@ class TrashHeader extends StatelessWidget {
     });
 
     return Container(
-      color: theme.bg1,
+      color: theme.surface,
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [

frontend/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart

@@ -2,6 +2,7 @@ import 'package:app_flowy/workspace/domain/image.dart';
 import 'package:app_flowy/workspace/domain/page_stack/page_stack.dart';
 import 'package:app_flowy/workspace/presentation/home/home_sizes.dart';
 import 'package:app_flowy/workspace/presentation/home/navigation.dart';
+import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flowy_sdk/protobuf/flowy-core-data-model/view_create.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-core-data-model/view_create.pbenum.dart';
@@ -15,7 +16,9 @@ class HomeTopBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    final theme = context.watch<AppTheme>();
+    return Container(
+      color: theme.surface,
       height: HomeSizes.topBarHeight,
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.center,

frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/add_button.dart

@@ -75,7 +75,7 @@ class CreateItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
-    final config = HoverDisplayConfig(hoverColor: theme.main2);
+    final config = HoverDisplayConfig(hoverColor: theme.hover);
 
     return FlowyHover(
       config: config,

frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/header.dart

@@ -9,12 +9,10 @@ import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_sdk/protobuf/flowy-core-data-model/app_create.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-
 import 'package:app_flowy/workspace/application/app/app_bloc.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:dartz/dartz.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
-
 import '../menu_app.dart';
 import 'add_button.dart';
 import 'right_click_action.dart';
@@ -56,7 +54,7 @@ class MenuAppHeader extends StatelessWidget {
           theme: ExpandableThemeData(
             expandIcon: FlowyIconData.drop_down_show,
             collapseIcon: FlowyIconData.drop_down_hide,
-            iconColor: theme.main1,
+            iconColor: theme.shader1,
             iconSize: MenuAppSizes.iconSize,
             iconPadding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
             hasIcon: false,

frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart

@@ -85,7 +85,7 @@ class ActionCell<T extends ActionItem> extends StatelessWidget {
     final theme = context.watch<AppTheme>();
 
     return FlowyHover(
-      config: HoverDisplayConfig(hoverColor: theme.hover, borderColor: theme.shader2),
+      config: HoverDisplayConfig(hoverColor: theme.hover),
       builder: (context, onHover) {
         return GestureDetector(
           behavior: HitTestBehavior.opaque,

frontend/app_flowy/packages/flowy_infra/lib/theme.dart

@@ -10,7 +10,6 @@ enum ThemeType {
 const _black = Color(0xff000000);
 const _grey = Color(0xff808080);
 const _white = Color(0xFFFFFFFF);
-const _gray_shade200 = Color(0xFFEEEEEE);
 const _main2 = Color(0xff00b7ea);
 
 class AppTheme {
@@ -51,6 +50,8 @@ class AppTheme {
   late Color main1;
   late Color main2;
 
+  late Color shadowColor;
+
   /// Default constructor
   AppTheme({this.isDark = false});
 
@@ -59,7 +60,7 @@ class AppTheme {
     switch (t) {
       case ThemeType.light:
         return AppTheme(isDark: false)
-          ..surface = _gray_shade200
+          ..surface = Colors.white
           ..hover = const Color(0xFFe0f8ff) //
           ..selector = const Color(0xfff2fcff)
           ..red = const Color(0xfffb006d)
@@ -71,8 +72,8 @@ class AppTheme {
           ..shader4 = const Color(0xffbdbdbd)
           ..shader5 = const Color(0xffe0e0e0)
           ..shader6 = const Color(0xfff2f2f2)
-          ..shader7 = _gray_shade200
-          ..bg1 = _gray_shade200
+          ..shader7 = const Color(0xffffffff)
+          ..bg1 = const Color(0xfff7f8fc)
           ..bg2 = const Color(0xffedeef2)
           ..bg3 = const Color(0xffe2e4eb)
           ..bg4 = const Color(0xff2c144b)
@@ -87,7 +88,8 @@ class AppTheme {
           ..tint9 = const Color(0xffdefff1)
           ..main1 = const Color(0xff00bcf0)
           ..main2 = const Color(0xff00b7ea)
-          ..textColor = _black;
+          ..textColor = _black
+          ..shadowColor = _black;
 
       case ThemeType.dark:
         return AppTheme(isDark: true)
@@ -119,18 +121,20 @@ class AppTheme {
           ..tint9 = const Color(0xffdefff1)
           ..main1 = const Color(0xff00bcf0)
           ..main2 = const Color(0xff00b7ea)
-          ..textColor = _white;
+          ..textColor = _white
+          ..shadowColor = _white;
     }
   }
 
   ThemeData get themeData {
     var t = ThemeData(
-      textTheme: TextTheme(bodyText1: TextStyle(), bodyText2: TextStyle().apply(color: textColor)),
+      textTheme: TextTheme(bodyText2: TextStyle(color: textColor)),
       textSelectionTheme: TextSelectionThemeData(cursorColor: main2, selectionHandleColor: main2),
       primaryIconTheme: IconThemeData(color: hover),
       iconTheme: IconThemeData(color: shader1),
-      canvasColor: shader7,
-      hoverColor: main2,
+      canvasColor: shader6,
+      //Don't use this property because of the redo/undo button in the toolbar use the hoverColor.
+      // hoverColor: main2,
       colorScheme: ColorScheme(
           brightness: isDark ? Brightness.dark : Brightness.light,
           primary: main1,

frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart

@@ -45,7 +45,7 @@ class ListOverlay extends StatelessWidget {
     return Material(
       type: MaterialType.transparency,
       child: Container(
-        decoration: FlowyDecoration.decoration(theme.bg1, theme.main2),
+        decoration: FlowyDecoration.decoration(theme.surface, theme.shadowColor.withOpacity(0.1)),
         constraints: BoxConstraints.tight(Size(width, totalHeight)),
         child: Padding(
           padding: padding,

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

@@ -1,12 +1,23 @@
 import 'package:flutter/material.dart';
 
 class FlowyDecoration {
-  static Decoration decoration(Color boxColor, Color boxShadow) {
+  static Decoration decoration(
+    Color boxColor,
+    Color boxShadow, {
+    double spreadRadius = 0,
+    double blurRadius = 20,
+    Offset offset = Offset.zero,
+  }) {
     return BoxDecoration(
       color: boxColor,
       borderRadius: const BorderRadius.all(Radius.circular(6)),
       boxShadow: [
-        BoxShadow(color: boxShadow, spreadRadius: 1, blurRadius: 10.0),
+        BoxShadow(
+          color: boxShadow,
+          spreadRadius: spreadRadius,
+          blurRadius: blurRadius,
+          offset: offset,
+        ),
       ],
     );
   }