diff --git a/frontend/app_flowy/lib/workspace/presentation/stack_page/home_stack.dart b/frontend/app_flowy/lib/workspace/presentation/stack_page/home_stack.dart index c83445dc12..af20dcb88c 100644 --- a/frontend/app_flowy/lib/workspace/presentation/stack_page/home_stack.dart +++ b/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(); return Column( mainAxisAlignment: MainAxisAlignment.start, children: [ getIt().stackTopBar(), Expanded( child: Container( - color: Theme.of(context).colorScheme.background, + color: theme.surface, child: FocusTraversalGroup( child: getIt().stackWidget(), ), diff --git a/frontend/app_flowy/lib/workspace/presentation/stack_page/trash/widget/trash_header.dart b/frontend/app_flowy/lib/workspace/presentation/stack_page/trash/widget/trash_header.dart index ef0e65c37e..dcabd05dda 100644 --- a/frontend/app_flowy/lib/workspace/presentation/stack_page/trash/widget/trash_header.dart +++ b/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: [ diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart index e8b18e46f7..aa8f6c0fe4 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart +++ b/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(); + return Container( + color: theme.surface, height: HomeSizes.topBarHeight, child: Row( crossAxisAlignment: CrossAxisAlignment.center, diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/add_button.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/add_button.dart index dc97ca1ff0..23286c103b 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/add_button.dart +++ b/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(); - final config = HoverDisplayConfig(hoverColor: theme.main2); + final config = HoverDisplayConfig(hoverColor: theme.hover); return FlowyHover( config: config, diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/header.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/header.dart index cc9ec4a515..c6349f03fd 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/menu/widget/app/header/header.dart +++ b/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, diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart index c45f4de7dd..61caa84c2f 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/pop_up_action.dart @@ -85,7 +85,7 @@ class ActionCell extends StatelessWidget { final theme = context.watch(); return FlowyHover( - config: HoverDisplayConfig(hoverColor: theme.hover, borderColor: theme.shader2), + config: HoverDisplayConfig(hoverColor: theme.hover), builder: (context, onHover) { return GestureDetector( behavior: HitTestBehavior.opaque, diff --git a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart b/frontend/app_flowy/packages/flowy_infra/lib/theme.dart index b6db39b20b..a9a9da7fd4 100644 --- a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart +++ b/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, diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart index d4d4a4f2ac..862f47b662 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/src/flowy_overlay/list_overlay.dart +++ b/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, diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/decoration.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/decoration.dart index 65593b825a..1a4b96ecb5 100644 --- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/decoration.dart +++ b/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, + ), ], ); }