feat: Improve dark mode in board page (#2193)

* chore: update board UI in dark mode

1. Update BoardSettingList&BoardToolbar UI
2. Update item detail dailogue UI

* chore: update URL cell UI

* chore: update checkList pop up UI and shadow color

* chore: fix flutter analyze issue

* chore: update URL popup textfield and change new property text

* chore: Update NumberTypeOptionWidget and options title UI

* chore: make color value more readable

* chore: flutter analyze

* chore: update sort button style

frontend/appflowy_flutter/assets/translations/en.json

@@ -291,7 +291,7 @@
       "optionTitle": "Options",
       "addOption": "Add option",
       "editProperty": "Edit property",
-      "newColumn": "New column",
+      "newProperty": "New property",
       "deleteFieldPromptMessage": "Are you sure? This property will be deleted"
     },
     "sort": {

frontend/appflowy_flutter/assets/translations/eu-ES.json

@@ -271,7 +271,7 @@
       "optionTitle": "Aukerak",
       "addOption": "Gehitu aukera",
       "editProperty": "Editatu propietatea",
-      "newColumn": "Zutabe berria",
+      "newProperty": "Zutabe berria",
       "deleteFieldPromptMessage": "Ziur al zaude? Propietate hau ezabatu egingo da"
     },
     "sort": {

frontend/appflowy_flutter/assets/translations/fr-FR.json

@@ -195,7 +195,7 @@
       "optionTitle": "Options",
       "addOption": "Ajouter une option",
       "editProperty": "Modifier la propriété",
-      "newColumn": "Nouvelle colonne",
+      "newProperty": "Nouvelle colonne",
       "deleteFieldPromptMessage": "Vous voulez supprimer cette propriété ?"
     },
     "row": {

frontend/appflowy_flutter/assets/translations/ko-KR.json

@@ -191,7 +191,7 @@
       "optionTitle": "옵션",
       "addOption": "옵션 추가",
       "editProperty": "속성 편집",
-      "newColumn": "열 추가",
+      "newProperty": "열 추가",
       "deleteFieldPromptMessage": "해당 속성을 삭제 하시겠습니까?"
     },
     "row": {

frontend/appflowy_flutter/assets/translations/pt-BR.json

@@ -287,7 +287,7 @@
       "optionTitle": "Opções",
       "addOption": "Adicioar opção",
       "editProperty": "Editar propriedade",
-      "newColumn": "Nova coluna",
+      "newProperty": "Nova coluna",
       "deleteFieldPromptMessage": "Tem certeza? Esta propriedade será excluída"
     },
     "sort": {

frontend/appflowy_flutter/assets/translations/ru-RU.json

@@ -273,7 +273,7 @@
             "optionTitle": "Варианты",
             "addOption": "Добавить",
             "editProperty": "Редактировать свойство",
-            "newColumn": "Добавить колонку",
+            "newProperty": "Добавить колонку",
             "deleteFieldPromptMessage": "Вы уверены? Свойство будет удалено"
         },
         "sort": {

frontend/appflowy_flutter/assets/translations/sv.json

@@ -195,7 +195,7 @@
       "optionTitle": "Alternativ",
       "addOption": "Lägg till alternativ",
       "editProperty": "Redigera egenskap",
-      "newColumn": "Ny kolumn",
+      "newProperty": "Ny kolumn",
       "deleteFieldPromptMessage": "Är du säker? Denna egenskap kommer att raderas."
     },
     "row": {

frontend/appflowy_flutter/assets/translations/zh-CN.json

@@ -195,7 +195,7 @@
       "optionTitle": "标签",
       "addOption": "添加标签",
       "editProperty": "编辑列属性",
-      "newColumn": "增加一列",
+      "newProperty": "增加一列",
       "deleteFieldPromptMessage": "确定要删除这个属性吗? "
     },
     "row": {

frontend/appflowy_flutter/assets/translations/zh-TW.json

@@ -290,7 +290,7 @@
       "optionTitle": "選項",
       "addOption": "新增選項",
       "editProperty": "編輯內容",
-      "newColumn": "新欄位",
+      "newProperty": "新欄位",
       "deleteFieldPromptMessage": "你確定嗎？這個內容將被刪除"
     },
     "sort": {

frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_setting.dart

@@ -7,6 +7,7 @@ import 'package:appflowy/plugins/database_view/grid/presentation/widgets/toolbar
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -104,8 +105,12 @@ class _SettingItem extends StatelessWidget {
     return SizedBox(
       height: 30,
       child: FlowyButton(
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
         isSelected: isSelected,
-        text: FlowyText.medium(action.title()),
+        text: FlowyText.medium(
+          action.title(),
+          color: AFThemeExtension.of(context).textColor,
+        ),
         onTap: () {
           context
               .read<BoardSettingBloc>()

frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_toolbar.dart

@@ -71,6 +71,7 @@ class _SettingButtonState extends State<_SettingButton> {
       margin: EdgeInsets.zero,
       child: FlowyTextButton(
         LocaleKeys.settings_title.tr(),
+        fontColor: AFThemeExtension.of(context).textColor,
         fillColor: Colors.transparent,
         hoverColor: AFThemeExtension.of(context).lightGreyHover,
         padding: GridSize.typeOptionContentInsets,

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/layout/sizes.dart

@@ -28,10 +28,7 @@ class GridSize {
         vertical: GridSize.cellVPadding,
       );
 
-  static EdgeInsets get typeOptionContentInsets => const EdgeInsets.symmetric(
+  static EdgeInsets get typeOptionContentInsets => const EdgeInsets.all(4);
-        horizontal: 6,
-        vertical: 2,
-      );
 
   static EdgeInsets get footerContentInsets => EdgeInsets.fromLTRB(
         GridSize.leadingHeaderPadding,

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart

@@ -172,7 +172,7 @@ class FieldCellButton extends StatelessWidget {
       leftIcon: FlowySvg(
         name: field.fieldType.iconName(),
       ),
-      radius: BorderRadius.zero,
+      radius: BorderRadius.circular(6),
       text: FlowyText.medium(
         text,
         maxLines: maxLines,

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart

@@ -189,7 +189,7 @@ class CreateFieldButton extends StatelessWidget {
       constraints: BoxConstraints.loose(const Size(240, 600)),
       child: FlowyButton(
         radius: BorderRadius.zero,
-        text: FlowyText.medium(LocaleKeys.grid_field_newColumn.tr()),
+        text: FlowyText.medium(LocaleKeys.grid_field_newProperty.tr()),
         hoverColor: AFThemeExtension.of(context).greyHover,
         onTap: () {},
         leftIcon: const FlowySvg(name: 'home/add'),

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/plugins/database_view/application/field/type_option/num
 import 'package:appflowy/plugins/database_view/application/field/type_option/type_option_context.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:appflowy_backend/protobuf/flowy-database/format.pbenum.dart';
 import 'package:flutter/material.dart';
@@ -31,6 +32,7 @@ class NumberTypeOptionWidgetBuilder extends TypeOptionWidgetBuilder {
     return Column(
       children: [
         VSpace(GridSize.typeOptionSeparatorHeight),
+        const TypeOptionSeparator(),
         _widget,
       ],
     );
@@ -51,55 +53,65 @@ class NumberTypeOptionWidget extends TypeOptionWidget {
     return BlocProvider(
       create: (context) =>
           NumberTypeOptionBloc(typeOptionContext: typeOptionContext),
-      child: SizedBox(
+      child: BlocConsumer<NumberTypeOptionBloc, NumberTypeOptionState>(
-        height: GridSize.popoverItemHeight,
+        listener: (context, state) =>
-        child: BlocConsumer<NumberTypeOptionBloc, NumberTypeOptionState>(
+            typeOptionContext.typeOption = state.typeOption,
-          listener: (context, state) =>
+        builder: (context, state) {
-              typeOptionContext.typeOption = state.typeOption,
+          final selectNumUnitButton = SizedBox(
-          builder: (context, state) {
+            height: GridSize.popoverItemHeight,
-            final button = SizedBox(
+            child: FlowyButton(
-              height: GridSize.popoverItemHeight,
+              hoverColor: AFThemeExtension.of(context).lightGreyHover,
-              child: FlowyButton(
+              margin: GridSize.typeOptionContentInsets,
-                margin: GridSize.typeOptionContentInsets,
+              rightIcon: svgWidget(
-                rightIcon: svgWidget(
+                "grid/more",
-                  "grid/more",
+                color: AFThemeExtension.of(context).textColor,
-                  color: Theme.of(context).iconTheme.color,
-                ),
-                text: Row(
-                  children: [
-                    FlowyText.medium(LocaleKeys.grid_field_numberFormat.tr()),
-                    const Spacer(),
-                    FlowyText.regular(state.typeOption.format.title()),
-                  ],
-                ),
               ),
-            );
+              text: FlowyText.regular(
+                state.typeOption.format.title(),
+                color: AFThemeExtension.of(context).textColor,
+              ),
+            ),
+          );
 
-            return AppFlowyPopover(
+          final numFormatTitle = Container(
-              mutex: popoverMutex,
+            padding: const EdgeInsets.only(left: 6),
-              triggerActions:
+            height: GridSize.popoverItemHeight,
-                  PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
+            alignment: Alignment.centerLeft,
-              offset: const Offset(8, 0),
+            child: FlowyText.medium(
-              constraints: BoxConstraints.loose(const Size(460, 440)),
+              LocaleKeys.grid_field_numberFormat.tr(),
-              margin: EdgeInsets.zero,
+              color: AFThemeExtension.of(context).textColor,
-              child: Padding(
+            ),
-                padding: const EdgeInsets.symmetric(horizontal: 12.0),
+          );
-                child: button,
+          return Padding(
-              ),
+            padding: const EdgeInsets.symmetric(horizontal: 12),
-              popupBuilder: (BuildContext popoverContext) {
+            child: Column(
-                return NumberFormatList(
+              crossAxisAlignment: CrossAxisAlignment.start,
-                  onSelected: (format) {
+              children: [
-                    context
+                numFormatTitle,
-                        .read<NumberTypeOptionBloc>()
+                AppFlowyPopover(
-                        .add(NumberTypeOptionEvent.didSelectFormat(format));
+                  mutex: popoverMutex,
-                    PopoverContainer.of(popoverContext).close();
+                  triggerActions:
+                      PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
+                  offset: const Offset(8, 0),
+                  constraints: BoxConstraints.loose(const Size(460, 440)),
+                  margin: EdgeInsets.zero,
+                  child: selectNumUnitButton,
+                  popupBuilder: (BuildContext popoverContext) {
+                    return NumberFormatList(
+                      onSelected: (format) {
+                        context
+                            .read<NumberTypeOptionBloc>()
+                            .add(NumberTypeOptionEvent.didSelectFormat(format));
+                        PopoverContainer.of(popoverContext).close();
+                      },
+                      selectedFormat: state.typeOption.format,
+                    );
                   },
-                  selectedFormat: state.typeOption.format,
+                ),
-                );
+              ],
-              },
+            ),
-            );
+          );
-          },
+        },
-        ),
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart

@@ -71,9 +71,11 @@ class OptionTitle extends StatelessWidget {
     return BlocBuilder<SelectOptionTypeOptionBloc, SelectOptionTypeOptionState>(
       builder: (context, state) {
         List<Widget> children = [
-          FlowyText.medium(
+          Padding(
-            LocaleKeys.grid_field_optionTitle.tr(),
+            padding: const EdgeInsets.only(left: 9),
-            color: Theme.of(context).hintColor,
+            child: FlowyText.medium(
+              LocaleKeys.grid_field_optionTitle.tr(),
+            ),
           )
         ];
         if (state.options.isNotEmpty && !state.isEditingOption) {

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_group.dart

@@ -3,6 +3,7 @@ import 'package:appflowy/plugins/database_view/application/setting/group_bloc.da
 import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
 import 'package:appflowy/plugins/database_view/grid/presentation/widgets/header/field_type_extension.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -79,7 +80,11 @@ class _GridGroupCell extends StatelessWidget {
     return SizedBox(
       height: GridSize.popoverItemHeight,
       child: FlowyButton(
-        text: FlowyText.medium(fieldInfo.name),
+        hoverColor: AFThemeExtension.of(context).lightGreyHover,
+        text: FlowyText.medium(
+          fieldInfo.name,
+          color: AFThemeExtension.of(context).textColor,
+        ),
         leftIcon: svgWidget(
           fieldInfo.fieldType.iconName(),
           color: Theme.of(context).iconTheme.color,

frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/sort_button.dart

@@ -6,6 +6,7 @@ import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:appflowy/plugins/database_view/grid/presentation/layout/sizes.dart';
 
 import '../sort/create_sort_list.dart';
 
@@ -33,11 +34,10 @@ class _SortButtonState extends State<SortButton> {
             height: 26,
             child: FlowyTextButton(
               LocaleKeys.grid_settings_sort.tr(),
-              fontSize: 13,
               fontColor: textColor,
               fillColor: Colors.transparent,
               hoverColor: AFThemeExtension.of(context).lightGreyHover,
-              padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 2),
+              padding: GridSize.typeOptionContentInsets,
               onPressed: () {
                 final bloc = context.read<SortMenuBloc>();
                 if (bloc.state.sortInfos.isEmpty) {

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell.dart

@@ -38,6 +38,7 @@ class GridChecklistCellState extends GridCellState<GridChecklistCell> {
     return BlocProvider.value(
       value: _cellBloc,
       child: AppFlowyPopover(
+        margin: EdgeInsets.zero,
         controller: _popover,
         constraints: BoxConstraints.loose(const Size(260, 400)),
         direction: PopoverDirection.bottomWithLeftAligned,

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart

@@ -52,8 +52,7 @@ class _SliverChecklistProgressBarDelegate
   ) {
     return BlocBuilder<ChecklistCellEditorBloc, ChecklistCellEditorState>(
       builder: (context, state) {
-        return Container(
+        return Padding(
-          color: Theme.of(context).colorScheme.background,
           padding: GridSize.typeOptionContentInsets,
           child: Column(
             children: [

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/cell_editor.dart

@@ -90,14 +90,15 @@ class URLEditorPopover extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    return Container(
-      width: 200,
+      decoration: BoxDecoration(
-      child: Padding(
+        color: Theme.of(context).cardColor,
-        padding: const EdgeInsets.all(6),
+        borderRadius: BorderRadius.circular(4),
-        child: URLCellEditor(
+      ),
-          cellController: cellController,
+      padding: const EdgeInsets.all(12),
-          onExit: onExit,
+      child: URLCellEditor(
-        ),
+        cellController: cellController,
+        onExit: onExit,
       ),
     );
   }

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart

@@ -132,6 +132,7 @@ class _GridURLCellState extends GridCellState<GridURLCell> {
           );
 
           return AppFlowyPopover(
+            margin: EdgeInsets.zero,
             controller: _popoverController,
             constraints: BoxConstraints.loose(const Size(300, 160)),
             direction: PopoverDirection.bottomWithLeftAligned,
@@ -216,6 +217,7 @@ class _EditURLAccessoryState extends State<_EditURLAccessory>
   @override
   Widget build(BuildContext context) {
     return AppFlowyPopover(
+      margin: EdgeInsets.zero,
       constraints: BoxConstraints.loose(const Size(300, 160)),
       controller: _popoverController,
       direction: PopoverDirection.bottomWithLeftAligned,
@@ -255,7 +257,7 @@ class _CopyURLAccessoryState extends State<_CopyURLAccessory>
   Widget build(BuildContext context) {
     return svgWidget(
       "editor/copy",
-      color: Theme.of(context).iconTheme.color,
+      color: AFThemeExtension.of(context).textColor,
     );
   }
 

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart

@@ -98,6 +98,7 @@ class _CloseButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return FlowyIconButton(
+      hoverColor: AFThemeExtension.of(context).lightGreyHover,
       width: 24,
       onPressed: () => FlowyOverlay.pop(context),
       iconPadding: const EdgeInsets.fromLTRB(2, 2, 2, 2),
@@ -210,10 +211,16 @@ class _CreatePropertyButtonState extends State<_CreatePropertyButton> {
         height: 40,
         decoration: _makeBoxDecoration(context),
         child: FlowyButton(
-          text: FlowyText.medium(LocaleKeys.grid_field_newColumn.tr()),
+          text: FlowyText.medium(
+            LocaleKeys.grid_field_newProperty.tr(),
+            color: AFThemeExtension.of(context).textColor,
+          ),
           hoverColor: AFThemeExtension.of(context).lightGreyHover,
           onTap: () {},
-          leftIcon: svgWidget("home/add"),
+          leftIcon: svgWidget(
+            "home/add",
+            color: AFThemeExtension.of(context).textColor,
+          ),
         ),
       ),
       popupBuilder: (BuildContext popOverContext) {
@@ -241,7 +248,6 @@ class _CreatePropertyButtonState extends State<_CreatePropertyButton> {
     final borderSide =
         BorderSide(color: Theme.of(context).dividerColor, width: 1.0);
     return BoxDecoration(
-      color: Theme.of(context).colorScheme.surface,
       border: Border(top: borderSide),
     );
   }
@@ -293,7 +299,6 @@ class _PropertyCellState extends State<_PropertyCell> {
               child: SizedBox(
                 width: 150,
                 child: FieldCellButton(
-                  maxLines: null,
                   field: widget.cellId.fieldInfo.field,
                   onTap: () => popover.show(),
                 ),

frontend/appflowy_flutter/lib/workspace/presentation/home/toast.dart

@@ -11,15 +11,14 @@ class FlowyMessageToast extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      decoration: const BoxDecoration(
+      decoration: BoxDecoration(
-        borderRadius: BorderRadius.all(Radius.circular(4)),
+        borderRadius: const BorderRadius.all(Radius.circular(4)),
-        color: Colors.black,
+        color: Theme.of(context).colorScheme.surface,
       ),
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
         child: FlowyText.medium(
           message,
-          color: Colors.white,
           fontSize: FontSizes.s16,
         ),
       ),

frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 
 import 'colorscheme.dart';
 
-const _black = Color(0xff000000);
 const _white = Color(0xFFFFFFFF);
 const _lightHover = Color(0xFFe0f8ff);
 const _lightSelector = Color(0xfff2fcff);
@@ -51,7 +50,7 @@ class DefaultColorScheme extends FlowyColorScheme {
           tint9: _lightTint9,
           main1: _lightMain1,
           main2: const Color(0xff00b7ea),
-          shadow: _black,
+          shadow: const Color.fromRGBO(0, 0, 0, 0.15),
           sidebarBg: _lightBg1,
           divider: _lightShader6,
           topbarBg: _white,

frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart

@@ -82,7 +82,7 @@ class _PopoverContainer extends StatelessWidget {
     final decoration = this.decoration ??
         FlowyDecoration.decoration(
           Theme.of(context).cardColor,
-          Theme.of(context).colorScheme.shadow.withOpacity(0.15),
+          Theme.of(context).colorScheme.shadow,
         );
 
     return Material(