chore: adjust popover shadows (#7626)

Author: richardshiue

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/ai/ai_writer_block_component.dart

@@ -226,7 +226,7 @@ class _OverlayContentState extends State<OverlayContent> {
         final showSuggestedActionsWithin =
             showSuggestedActions && markdownText.isNotEmpty;
 
-        final darkBorderColor = Theme.of(context).isLightMode
+        final borderColor = Theme.of(context).isLightMode
             ? Color(0x1F1F2329)
             : Color(0xFF505469);
 
@@ -241,7 +241,7 @@ class _OverlayContentState extends State<OverlayContent> {
                   context,
                   color: Theme.of(context).colorScheme.surface,
                   borderRadius: BorderRadius.all(Radius.circular(8.0)),
-                  borderColor: darkBorderColor,
+                  borderColor: borderColor,
                 ),
                 child: SuggestionActionBar(
                   currentCommand: command,
@@ -257,7 +257,7 @@ class _OverlayContentState extends State<OverlayContent> {
               decoration: _getModalDecoration(
                 context,
                 color: null,
-                borderColor: darkBorderColor,
+                borderColor: borderColor,
                 borderRadius: BorderRadius.all(Radius.circular(12.0)),
               ),
               constraints: BoxConstraints(maxHeight: 400),
@@ -341,13 +341,9 @@ class _OverlayContentState extends State<OverlayContent> {
         strokeAlign: BorderSide.strokeAlignOutside,
       ),
       borderRadius: borderRadius,
-      boxShadow: const [
-        BoxShadow(
-          offset: Offset(0, 4),
-          blurRadius: 20,
-          color: Color(0x1A1F2329),
-        ),
-      ],
+      boxShadow: Theme.of(context).isLightMode
+          ? ShadowConstants.lightSmall
+          : ShadowConstants.darkSmall,
     );
   }
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/ai/widgets/ai_writer_prompt_input_more_button.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/ai/ai.dart';
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/util/theme_extension.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/colorscheme/default_colorscheme.dart';
@@ -102,13 +103,9 @@ class MoreAiWriterCommands extends StatelessWidget {
           strokeAlign: BorderSide.strokeAlignOutside,
         ),
         borderRadius: BorderRadius.all(Radius.circular(8.0)),
-        boxShadow: const [
-          BoxShadow(
-            offset: Offset(0, 4),
-            blurRadius: 20,
-            color: Color(0x1A1F2329),
-          ),
-        ],
+        boxShadow: Theme.of(context).isLightMode
+            ? ShadowConstants.lightSmall
+            : ShadowConstants.darkSmall,
       ),
       child: IntrinsicWidth(
         child: Column(

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

@@ -4,6 +4,23 @@ import 'package:flutter/material.dart';
 
 export 'package:appflowy_popover/appflowy_popover.dart';
 
+class ShadowConstants {
+  ShadowConstants._();
+
+  static const List<BoxShadow> lightSmall = [
+    BoxShadow(offset: Offset(0, 4), blurRadius: 20, color: Color(0x1A1F2329)),
+  ];
+  static const List<BoxShadow> lightMedium = [
+    BoxShadow(offset: Offset(0, 4), blurRadius: 32, color: Color(0x121F2225)),
+  ];
+  static const List<BoxShadow> darkSmall = [
+    BoxShadow(offset: Offset(0, 2), blurRadius: 16, color: Color(0x5C000000)),
+  ];
+  static const List<BoxShadow> darkMedium = [
+    BoxShadow(offset: Offset(0, 4), blurRadius: 32, color: Color(0x5C000000)),
+  ];
+}
+
 class AppFlowyPopover extends StatelessWidget {
   const AppFlowyPopover({
     super.key,
@@ -162,26 +179,9 @@ extension PopoverDecoration on BuildContext {
     final borderColor = Theme.of(this).brightness == Brightness.light
         ? ColorSchemeConstants.lightBorderColor
         : ColorSchemeConstants.darkBorderColor;
-    final shadows = [
-      const BoxShadow(
-        color: Color(0x0A1F2329),
-        blurRadius: 24,
-        offset: Offset(0, 8),
-        spreadRadius: 8,
-      ),
-      const BoxShadow(
-        color: Color(0x0A1F2329),
-        blurRadius: 12,
-        offset: Offset(0, 6),
-        spreadRadius: 0,
-      ),
-      const BoxShadow(
-        color: Color(0x0F1F2329),
-        blurRadius: 8,
-        offset: Offset(0, 4),
-        spreadRadius: -8,
-      )
-    ];
+    final shadows = Theme.of(this).brightness == Brightness.light
+        ? ShadowConstants.lightSmall
+        : ShadowConstants.darkSmall;
     return ShapeDecoration(
       color: color ?? Theme.of(this).cardColor,
       shape: RoundedRectangleBorder(