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
2024-08-30 18:12:39 +00:00 · 2023-04-10 21:18:36 -05:00 · 2023-04-10 21:18:36 -05:00 · 1cbedb3277
commit 1cbedb3277
parent 28ae193002
26 changed files with 118 additions and 90 deletions
--- a/frontend/appflowy_flutter/assets/translations/en.json
+++ b/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": {
--- a/frontend/appflowy_flutter/assets/translations/eu-ES.json
+++ b/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": {
--- a/frontend/appflowy_flutter/assets/translations/fr-FR.json
+++ b/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": {
--- a/frontend/appflowy_flutter/assets/translations/ko-KR.json
+++ b/frontend/appflowy_flutter/assets/translations/ko-KR.json
@ -191,7 +191,7 @@
      "optionTitle": "옵션",
      "addOption": "옵션 추가",
      "editProperty": "속성 편집",
-      "newColumn": "열 추가",
+      "newProperty": "열 추가",
      "deleteFieldPromptMessage": "해당 속성을 삭제 하시겠습니까?"
    },
    "row": {
--- a/frontend/appflowy_flutter/assets/translations/pt-BR.json
+++ b/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": {
--- a/frontend/appflowy_flutter/assets/translations/ru-RU.json
+++ b/frontend/appflowy_flutter/assets/translations/ru-RU.json
@ -273,7 +273,7 @@
            "optionTitle": "Варианты",
            "addOption": "Добавить",
            "editProperty": "Редактировать свойство",
-            "newColumn": "Добавить колонку",
+            "newProperty": "Добавить колонку",
            "deleteFieldPromptMessage": "Вы уверены? Свойство будет удалено"
        },
        "sort": {
--- a/frontend/appflowy_flutter/assets/translations/sv.json
+++ b/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": {
--- a/frontend/appflowy_flutter/assets/translations/zh-CN.json
+++ b/frontend/appflowy_flutter/assets/translations/zh-CN.json
@ -195,7 +195,7 @@
      "optionTitle": "标签",
      "addOption": "添加标签",
      "editProperty": "编辑列属性",
-      "newColumn": "增加一列",
+      "newProperty": "增加一列",
      "deleteFieldPromptMessage": "确定要删除这个属性吗? "
    },
    "row": {
--- a/frontend/appflowy_flutter/assets/translations/zh-TW.json
+++ b/frontend/appflowy_flutter/assets/translations/zh-TW.json
@ -290,7 +290,7 @@
      "optionTitle": "選項",
      "addOption": "新增選項",
      "editProperty": "編輯內容",
-      "newColumn": "新欄位",
+      "newProperty": "新欄位",
      "deleteFieldPromptMessage": "你確定嗎？這個內容將被刪除"
    },
    "sort": {
--- a/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_setting.dart
+++ b/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>()
--- a/frontend/appflowy_flutter/lib/plugins/database_view/board/presentation/toolbar/board_toolbar.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/layout/sizes.dart
+++ b/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(
-        horizontal: 6,
-        vertical: 2,
-      );
+  static EdgeInsets get typeOptionContentInsets => const EdgeInsets.all(4);

  static EdgeInsets get footerContentInsets => EdgeInsets.fromLTRB(
        GridSize.leadingHeaderPadding,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/field_cell.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/grid_header.dart
+++ b/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'),
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/number.dart
+++ b/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(
-        height: GridSize.popoverItemHeight,
-        child: BlocConsumer<NumberTypeOptionBloc, NumberTypeOptionState>(
-          listener: (context, state) =>
-              typeOptionContext.typeOption = state.typeOption,
-          builder: (context, state) {
-            final button = SizedBox(
-              height: GridSize.popoverItemHeight,
-              child: FlowyButton(
-                margin: GridSize.typeOptionContentInsets,
-                rightIcon: svgWidget(
-                  "grid/more",
-                  color: Theme.of(context).iconTheme.color,
-                ),
-                text: Row(
-                  children: [
-                    FlowyText.medium(LocaleKeys.grid_field_numberFormat.tr()),
-                    const Spacer(),
-                    FlowyText.regular(state.typeOption.format.title()),
-                  ],
-                ),
+      child: BlocConsumer<NumberTypeOptionBloc, NumberTypeOptionState>(
+        listener: (context, state) =>
+            typeOptionContext.typeOption = state.typeOption,
+        builder: (context, state) {
+          final selectNumUnitButton = SizedBox(
+            height: GridSize.popoverItemHeight,
+            child: FlowyButton(
+              hoverColor: AFThemeExtension.of(context).lightGreyHover,
+              margin: GridSize.typeOptionContentInsets,
+              rightIcon: svgWidget(
+                "grid/more",
+                color: AFThemeExtension.of(context).textColor,
              ),
-            );
+              text: FlowyText.regular(
+                state.typeOption.format.title(),
+                color: AFThemeExtension.of(context).textColor,
+              ),
+            ),
+          );

-            return AppFlowyPopover(
-              mutex: popoverMutex,
-              triggerActions:
-                  PopoverTriggerFlags.hover | PopoverTriggerFlags.click,
-              offset: const Offset(8, 0),
-              constraints: BoxConstraints.loose(const Size(460, 440)),
-              margin: EdgeInsets.zero,
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                child: button,
-              ),
-              popupBuilder: (BuildContext popoverContext) {
-                return NumberFormatList(
-                  onSelected: (format) {
-                    context
-                        .read<NumberTypeOptionBloc>()
-                        .add(NumberTypeOptionEvent.didSelectFormat(format));
-                    PopoverContainer.of(popoverContext).close();
+          final numFormatTitle = Container(
+            padding: const EdgeInsets.only(left: 6),
+            height: GridSize.popoverItemHeight,
+            alignment: Alignment.centerLeft,
+            child: FlowyText.medium(
+              LocaleKeys.grid_field_numberFormat.tr(),
+              color: AFThemeExtension.of(context).textColor,
+            ),
+          );
+          return Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 12),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                numFormatTitle,
+                AppFlowyPopover(
+                  mutex: popoverMutex,
+                  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,
-                );
-              },
-            );
-          },
-        ),
+                ),
+              ],
+            ),
+          );
+        },
      ),
    );
  }
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/header/type_option/select_option.dart
+++ b/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(
-            LocaleKeys.grid_field_optionTitle.tr(),
-            color: Theme.of(context).hintColor,
+          Padding(
+            padding: const EdgeInsets.only(left: 9),
+            child: FlowyText.medium(
+              LocaleKeys.grid_field_optionTitle.tr(),
+            ),
          )
        ];
        if (state.options.isNotEmpty && !state.isEditingOption) {
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/grid_group.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/grid/presentation/widgets/toolbar/sort_button.dart
+++ b/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) {
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell.dart
+++ b/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,
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart
+++ b/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(
-          color: Theme.of(context).colorScheme.background,
+        return Padding(
          padding: GridSize.typeOptionContentInsets,
          child: Column(
            children: [
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/cell_editor.dart
+++ b/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(
-      width: 200,
-      child: Padding(
-        padding: const EdgeInsets.all(6),
-        child: URLCellEditor(
-          cellController: cellController,
-          onExit: onExit,
-        ),
+    return Container(
+      decoration: BoxDecoration(
+        color: Theme.of(context).cardColor,
+        borderRadius: BorderRadius.circular(4),
+      ),
+      padding: const EdgeInsets.all(12),
+      child: URLCellEditor(
+        cellController: cellController,
+        onExit: onExit,
      ),
    );
  }
--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/url_cell/url_cell.dart
+++ b/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,
    );
  }

--- a/frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/row_detail.dart
+++ b/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(),
                ),
--- a/frontend/appflowy_flutter/lib/workspace/presentation/home/toast.dart
+++ b/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(
-        borderRadius: BorderRadius.all(Radius.circular(4)),
-        color: Colors.black,
+      decoration: BoxDecoration(
+        borderRadius: const BorderRadius.all(Radius.circular(4)),
+        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,
        ),
      ),
--- a/frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
+++ b/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,
--- a/frontend/appflowy_flutter/packages/flowy_infra_ui/lib/src/flowy_overlay/appflowy_popover.dart
+++ b/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(