TF-1981 Update UI spam banner on mobile/tablet

(cherry picked from commit 38eafc659f42a351678eeb3fd2ea1e4496f62a80)

core/lib/presentation/extensions/color_extension.dart

@@ -169,7 +169,10 @@ extension AppColor on Color {
   static const colorOutOfStorageQuotasWarning = Color(0xffE64646);
   static const colorThumbScrollBar = Color(0xFFAEB7C2);
   static const colorCreateNewIdentityButton = Color(0xFFEBEDF0);
-  static const colorSpamReportBox = Color(0xFFBFDEFF);
+  static const colorSpamReportBannerBackground = Color(0xFFBFDEFF);
+  static const colorSpamReportBannerStrokeBorder = Color(0x1F000000);
+  static const colorSpamReportBannerLabelColor = Color(0xFF626D7A);
+  static const colorSpamReportBannerButtonBackground = Color(0xFFEBEDF0);
   static const colorSubtitle = Color(0xFF6D7885);
   static const colorBackgroundSearchMailboxInput = Color(0xFFEBEDF0);
   static const colorMailboxHovered = Color(0xFFEBEDF0);

lib/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart

@@ -0,0 +1,12 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class SpamReportBannerButtonStyles {
+  static const double padding = 8;
+  static const double borderRadius = 10;
+  static const double labelTextSize = 16;
+  static const Color backgroundColor = AppColor.colorSpamReportBannerButtonBackground;
+  static const Color positiveButtonTextColor = AppColor.primaryColor;
+  static const Color negativeButtonTextColor = AppColor.textFieldErrorBorderColor;
+}

lib/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart

@@ -0,0 +1,16 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class SpamReportBannerStyles {
+  static const double horizontalMargin = 16;
+  static const double verticalMargin = 8;
+  static const double padding = 12;
+  static const double borderRadius = 12;
+  static const double iconSize = 24;
+  static const double labelTextSize = 16;
+  static const double space = 8;
+  static Color backgroundColor = AppColor.colorSpamReportBannerBackground.withOpacity(0.12);
+  static const Color strokeBorderColor = AppColor.colorSpamReportBannerStrokeBorder;
+  static const Color labelTextColor = AppColor.colorSpamReportBannerLabelColor;
+}

lib/features/thread/presentation/thread_view.dart

@@ -26,7 +26,7 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/bottom_bar_th
 import 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_builder.dart'
   if (dart.library.html) 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_web_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/filter_message_cupertino_action_sheet_action_builder.dart';
-import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_report_banner_widget.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
 import 'package:tmail_ui_user/main/utils/app_utils.dart';

lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart

@@ -0,0 +1,45 @@
+
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart';
+
+class SpamReportBannerButtonWidget extends StatelessWidget {
+
+  final String label;
+  final Color labelColor;
+  final VoidCallback onTap;
+
+  const SpamReportBannerButtonWidget({
+    super.key,
+    required this.label,
+    required this.labelColor,
+    required this.onTap
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: const BorderRadius.all(Radius.circular(SpamReportBannerButtonStyles.borderRadius)),
+        child: Container(
+          width: double.infinity,
+          padding: const EdgeInsetsDirectional.all(SpamReportBannerButtonStyles.padding),
+          decoration: const BoxDecoration(
+            borderRadius: BorderRadius.all(Radius.circular(SpamReportBannerButtonStyles.borderRadius)),
+            color: SpamReportBannerButtonStyles.backgroundColor
+          ),
+          child: Text(
+            label,
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              fontSize: SpamReportBannerButtonStyles.labelTextSize,
+              color: labelColor,
+              fontWeight: FontWeight.w400
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/features/thread/presentation/widgets/spam_banner/spam_report_banner_widget.dart

@@ -0,0 +1,87 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/spam_report_controller.dart';
+import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart';
+import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_styles.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class SpamReportBannerWidget extends StatelessWidget {
+  const SpamReportBannerWidget({ Key? key }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context){
+    final spamReportController = Get.find<SpamReportController>();
+    final imagePaths = Get.find<ImagePaths>();
+    
+    return Obx(() {
+      if (!spamReportController.enableSpamReport || spamReportController.notShowSpamReportBanner) {
+        return const SizedBox.shrink();
+      }
+      return Container(
+        margin: const EdgeInsetsDirectional.only(
+          start: SpamReportBannerStyles.horizontalMargin,
+          end: SpamReportBannerStyles.horizontalMargin,
+          bottom: SpamReportBannerStyles.verticalMargin
+        ),
+        padding: const EdgeInsetsDirectional.all(SpamReportBannerStyles.padding),
+        decoration: ShapeDecoration(
+          color: SpamReportBannerStyles.backgroundColor,
+          shape: const RoundedRectangleBorder(
+            side: BorderSide(
+              width: 1,
+              color: SpamReportBannerStyles.strokeBorderColor,
+            ),
+            borderRadius: BorderRadius.all(Radius.circular(SpamReportBannerStyles.borderRadius)),
+          ),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                SvgPicture.asset(
+                  imagePaths.icInfoCircleOutline,
+                  width: SpamReportBannerStyles.iconSize,
+                  height: SpamReportBannerStyles.iconSize
+                ),
+                const SizedBox(width: SpamReportBannerStyles.space),
+                Text(
+                  AppLocalizations.of(context).countNewSpamEmails(spamReportController.numberOfUnreadSpamEmails),
+                  style: const TextStyle(
+                    fontSize: SpamReportBannerStyles.labelTextSize,
+                    color: SpamReportBannerStyles.labelTextColor,
+                    fontWeight: FontWeight.w500
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: SpamReportBannerStyles.space),
+            Row(
+              children: [
+                Expanded(
+                  child: SpamReportBannerButtonWidget(
+                    label: AppLocalizations.of(context).showDetails,
+                    labelColor: SpamReportBannerButtonStyles.positiveButtonTextColor,
+                    onTap: spamReportController.openMailbox
+                  ),
+                ),
+                const SizedBox(width: SpamReportBannerStyles.space),
+                Expanded(
+                  child: SpamReportBannerButtonWidget(
+                    label: AppLocalizations.of(context).dismiss,
+                    labelColor: SpamReportBannerButtonStyles.negativeButtonTextColor,
+                    onTap: () => spamReportController.dismissSpamReportAction(context)
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      );
+    });
+  }
+}

lib/features/thread/presentation/widgets/spam_report_banner_widget.dart

@@ -1,108 +0,0 @@
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/resources/image_paths.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
-import 'package:get/get.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/spam_report_controller.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
-
-class SpamReportBannerWidget extends StatelessWidget {
-  const SpamReportBannerWidget({ Key? key }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context){
-    final spamReportController = Get.find<SpamReportController>();
-    final imagePaths = Get.find<ImagePaths>();
-    
-    return Obx(() {
-      if (!spamReportController.enableSpamReport || spamReportController.notShowSpamReportBanner) {
-        return const SizedBox.shrink();
-      }
-      return Container(
-        height: 124,
-        margin: const EdgeInsets.only(left: 12, right: 12, bottom: 12),
-        decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(12),
-            border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
-            color: AppColor.colorSpamReportBox.withOpacity(0.12)),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: [
-            Padding(
-              padding: const EdgeInsets.only(top: 24),
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  SvgPicture.asset(
-                    imagePaths.icInfoCircleOutline,
-                    width: 28,
-                    height: 28,
-                    colorFilter: AppColor.primaryColor.asFilter(),
-                  ),
-                  const SizedBox(
-                    width: 8,
-                  ),
-                  Text(
-                    AppLocalizations.of(context).countNewSpamEmails(spamReportController.numberOfUnreadSpamEmails),
-                    style: const TextStyle(
-                        fontSize: 16,
-                        color: AppColor.primaryColor,
-                        fontWeight: FontWeight.w500),
-                  ),
-                ],
-              ),
-            ),
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    Expanded(
-                      child: _spamReportButtonAction(
-                          context,
-                          AppLocalizations.of(context).showDetails,
-                          AppColor.primaryColor,
-                          spamReportController.openMailbox),
-                    ),
-                    const SizedBox(
-                      width: 8,
-                    ),
-                    Expanded(
-                      child: _spamReportButtonAction(
-                          context,
-                          AppLocalizations.of(context).dismiss,
-                          AppColor.textFieldErrorBorderColor,
-                          () => spamReportController.dismissSpamReportAction(context)),
-                    ),
-                  ],
-                ),
-              ),
-            ),
-          ],
-        ),
-      );
-    });
-  }
-
-  Widget _spamReportButtonAction(BuildContext context, String title, Color colorText, Function()? onTap) {
-    return GestureDetector(
-      onTap: onTap,
-      child: Container(
-        height: 36,
-        width: double.infinity,
-        decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(10),
-            color: AppColor.colorCreateNewIdentityButton),
-        child: Center(
-          child: Text(
-            title,
-            style: TextStyle(
-                fontSize: 15, color: colorText, fontWeight: FontWeight.w400),
-          ),
-        ),
-      ),
-    );
-  }
-}