TF-1981 Update UI spam banner on web

(cherry picked from commit d795fd8989ac09c2d4002ebc3a4bce0e1c619699)

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -21,7 +21,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/sear
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/quick_search_filter.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/download/download_task_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/search_input_form_widget.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/spam_report_banner_web_widget.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_web_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/top_bar_thread_selection.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.dart';

lib/features/mailbox_dashboard/presentation/widgets/spam_report_banner_web_widget.dart

@@ -1,103 +0,0 @@
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/views/button/icon_button_web.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';
-import 'package:tmail_ui_user/main/utils/app_utils.dart';
-
-class SpamReportBannerWebWidget extends StatelessWidget {
-  const SpamReportBannerWebWidget({ 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(
-          height: 8,
-        );
-      }
-      return Container(
-        height: 84,
-        margin: EdgeInsets.only(
-          right: AppUtils.isDirectionRTL(context) ? 0 : 16,
-          left: AppUtils.isDirectionRTL(context) ? 16 : 0,
-          top: 16
-        ),
-        decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(12),
-            border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
-            color: AppColor.colorSpamReportBox.withOpacity(0.12)),
-        child: Stack(
-          alignment: AlignmentDirectional.center,
-          children: [
-            Row(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Row(
-                  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),
-                    ),
-                  ],
-                ),
-                Padding(
-                  padding: EdgeInsets.only(
-                    left: AppUtils.isDirectionRTL(context) ? 0 : 32,
-                    right: AppUtils.isDirectionRTL(context) ? 32 : 0,
-                  ),
-                  child: buildTextButton(
-                    AppLocalizations.of(context).showDetails,
-                    height: 36,
-                    width: 115,
-                    textStyle: const TextStyle(
-                        fontSize: 15,
-                        color: AppColor.primaryColor,
-                        fontWeight: FontWeight.w400),
-                    backgroundColor: AppColor.colorCreateNewIdentityButton,
-                    radius: 10,
-                    onTap: spamReportController.openMailbox,
-                  ),
-                ),
-              ],
-            ),
-            if (AppUtils.isDirectionRTL(context))
-              Positioned(
-                top: 16,
-                left: 16,
-                child: buildSVGIconButton(
-                  icon: imagePaths.icCloseComposer,
-                  onTap: () => spamReportController.dismissSpamReportAction(context),
-                ),
-              )
-            else
-              Positioned(
-                top: 16,
-                right: 16,
-                child: buildSVGIconButton(
-                  icon: imagePaths.icCloseComposer,
-                  onTap: () => spamReportController.dismissSpamReportAction(context),
-                ),
-              )
-          ],
-        ),
-      );
-    });
-  }
-}

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

@@ -4,8 +4,10 @@ import 'package:flutter/material.dart';
 
 class SpamReportBannerButtonStyles {
   static const double padding = 8;
+  static const double paddingIcon = 4;
   static const double borderRadius = 10;
   static const double labelTextSize = 16;
+  static const double iconSize = 20;
   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_label_styles.dart

@@ -7,4 +7,5 @@ class SpamReportBannerLabelStyles {
   static const double labelTextSize = 16;
   static const double space = 8;
   static const Color labelTextColor = AppColor.colorSpamReportBannerLabelColor;
+  static const Color highlightLabelTextColor = AppColor.primaryColor;
 }

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

@@ -7,10 +7,7 @@ class SpamReportBannerStyles {
   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/styles/spam_banner/spam_report_banner_web_styles.dart

@@ -0,0 +1,13 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+
+class SpamReportBannerWebStyles {
+  static const double horizontalMargin = 16;
+  static const double verticalMargin = 16;
+  static const double verticalPadding = 8;
+  static const double horizontalPadding = 16;
+  static const double borderRadius = 12;
+  static Color backgroundColor = AppColor.colorSpamReportBannerBackground.withOpacity(0.12);
+  static const Color strokeBorderColor = AppColor.colorSpamReportBannerStrokeBorder;
+}

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

@@ -1,5 +1,8 @@
 
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/utils/style_utils.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_button_styles.dart';
 
 class SpamReportBannerButtonWidget extends StatelessWidget {
@@ -7,12 +10,18 @@ class SpamReportBannerButtonWidget extends StatelessWidget {
   final String label;
   final Color labelColor;
   final VoidCallback onTap;
+  final String? icon;
+  final bool iconLeftAlignment;
+  final bool wrapContent;
 
   const SpamReportBannerButtonWidget({
     super.key,
     required this.label,
     required this.labelColor,
-    required this.onTap
+    required this.onTap,
+    this.icon,
+    this.iconLeftAlignment = true,
+    this.wrapContent = false,
   });
 
   @override
@@ -23,21 +32,59 @@ class SpamReportBannerButtonWidget extends StatelessWidget {
         onTap: onTap,
         borderRadius: const BorderRadius.all(Radius.circular(SpamReportBannerButtonStyles.borderRadius)),
         child: Container(
-          width: double.infinity,
+          width: wrapContent ? null : double.infinity,
           padding: const EdgeInsetsDirectional.all(SpamReportBannerButtonStyles.padding),
           decoration: const BoxDecoration(
             borderRadius: BorderRadius.all(Radius.circular(SpamReportBannerButtonStyles.borderRadius)),
             color: SpamReportBannerButtonStyles.backgroundColor
           ),
-          child: Text(
+          child: icon == null
-            label,
+            ? Text(
-            textAlign: TextAlign.center,
+                label,
-            style: TextStyle(
+                textAlign: TextAlign.center,
-              fontSize: SpamReportBannerButtonStyles.labelTextSize,
+                style: TextStyle(
-              color: labelColor,
+                  fontSize: SpamReportBannerButtonStyles.labelTextSize,
-              fontWeight: FontWeight.w400
+                  color: labelColor,
-            ),
+                  fontWeight: FontWeight.w400
-          ),
+                )
+              )
+            : Row(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  if (iconLeftAlignment)
+                    Padding(
+                      padding: const EdgeInsetsDirectional.only(end: SpamReportBannerButtonStyles.paddingIcon),
+                      child: SvgPicture.asset(
+                        icon!,
+                        width: SpamReportBannerButtonStyles.iconSize,
+                        height: SpamReportBannerButtonStyles.iconSize,
+                        colorFilter: labelColor.asFilter(),
+                      ),
+                    ),
+                  Text(
+                    label,
+                    textAlign: TextAlign.center,
+                    overflow: CommonTextStyle.defaultTextOverFlow,
+                    softWrap: CommonTextStyle.defaultSoftWrap,
+                    style: TextStyle(
+                      fontSize: SpamReportBannerButtonStyles.labelTextSize,
+                      color: labelColor,
+                      fontWeight: FontWeight.w400
+                    )
+                  ),
+                  if (!iconLeftAlignment)
+                    Padding(
+                      padding: const EdgeInsetsDirectional.only(start: SpamReportBannerButtonStyles.paddingIcon),
+                      child: SvgPicture.asset(
+                        icon!,
+                        width: SpamReportBannerButtonStyles.iconSize,
+                        height: SpamReportBannerButtonStyles.iconSize,
+                        colorFilter: labelColor.asFilter(),
+                      ),
+                    ),
+                ],
+              ),
         ),
       ),
     );

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

@@ -1,5 +1,6 @@
 
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -9,11 +10,17 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 class SpamReportBannerLabelWidget extends StatelessWidget {
 
   final String countSpamEmailsAsString;
+  final Color labelColor;
 
-  const SpamReportBannerLabelWidget({super.key, required this.countSpamEmailsAsString});
+  const SpamReportBannerLabelWidget({
+    super.key,
+    required this.countSpamEmailsAsString,
+    this.labelColor = SpamReportBannerLabelStyles.labelTextColor
+  });
 
   @override
   Widget build(BuildContext context) {
+    final responsiveUtils = Get.find<ResponsiveUtils>();
     final imagePaths = Get.find<ImagePaths>();
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
@@ -24,14 +31,28 @@ class SpamReportBannerLabelWidget extends StatelessWidget {
           height: SpamReportBannerLabelStyles.iconSize
         ),
         const SizedBox(width: SpamReportBannerLabelStyles.space),
-        Text(
+        if (responsiveUtils.isWebDesktop(context))
-          AppLocalizations.of(context).countNewSpamEmails(countSpamEmailsAsString),
+          Text(
-          style: const TextStyle(
+            AppLocalizations.of(context).countNewSpamEmails(countSpamEmailsAsString),
-            fontSize: SpamReportBannerLabelStyles.labelTextSize,
+            textAlign: TextAlign.center,
-            color: SpamReportBannerLabelStyles.labelTextColor,
+            style: TextStyle(
-            fontWeight: FontWeight.w500
+              fontSize: SpamReportBannerLabelStyles.labelTextSize,
-          ),
+              color: labelColor,
-        ),
+              fontWeight: FontWeight.w500
+            ),
+          )
+        else
+          Flexible(
+            child: Text(
+              AppLocalizations.of(context).countNewSpamEmails(countSpamEmailsAsString),
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                fontSize: SpamReportBannerLabelStyles.labelTextSize,
+                color: labelColor,
+                fontWeight: FontWeight.w500
+              ),
+            ),
+          )
       ],
     );
   }

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

@@ -0,0 +1,85 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/utils/direction_utils.dart';
+import 'package:flutter/material.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_label_styles.dart';
+import 'package:tmail_ui_user/features/thread/presentation/styles/spam_banner/spam_report_banner_web_styles.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_button_widget.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/spam_banner/spam_report_banner_label_widget.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class SpamReportBannerWebWidget extends StatelessWidget {
+  const SpamReportBannerWebWidget({ 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(
+          height: 8,
+        );
+      }
+      return Container(
+        margin: const EdgeInsetsDirectional.only(
+          end: SpamReportBannerWebStyles.horizontalMargin,
+          top: SpamReportBannerWebStyles.verticalMargin,
+        ),
+        width: double.infinity,
+        padding: const EdgeInsetsDirectional.symmetric(
+          horizontal: SpamReportBannerWebStyles.horizontalPadding,
+          vertical: SpamReportBannerWebStyles.verticalPadding,
+        ),
+        decoration: ShapeDecoration(
+          color: SpamReportBannerWebStyles.backgroundColor,
+          shape: const RoundedRectangleBorder(
+            side: BorderSide(
+              width: 1,
+              color: SpamReportBannerWebStyles.strokeBorderColor,
+            ),
+            borderRadius: BorderRadius.all(Radius.circular(SpamReportBannerWebStyles.borderRadius)),
+          ),
+        ),
+        child: Stack(
+          alignment: AlignmentDirectional.center,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                SpamReportBannerLabelWidget(
+                  countSpamEmailsAsString: spamReportController.numberOfUnreadSpamEmails,
+                  labelColor: SpamReportBannerLabelStyles.highlightLabelTextColor
+                ),
+                const SizedBox(width: 32),
+                SpamReportBannerButtonWidget(
+                  label: AppLocalizations.of(context).showDetails,
+                  labelColor: SpamReportBannerButtonStyles.positiveButtonTextColor,
+                  onTap: spamReportController.openMailbox,
+                  icon: DirectionUtils.isDirectionRTLByLanguage(context)
+                    ? imagePaths.icArrowLeft
+                    : imagePaths.icArrowRight,
+                  iconLeftAlignment: false,
+                  wrapContent: true,
+                ),
+              ],
+            ),
+            PositionedDirectional(
+              end: 0,
+              child: SpamReportBannerButtonWidget(
+                label: AppLocalizations.of(context).dismiss,
+                labelColor: SpamReportBannerButtonStyles.negativeButtonTextColor,
+                onTap: () => spamReportController.dismissSpamReportAction(context),
+                icon: imagePaths.icCloseComposer,
+                wrapContent: true,
+              ),
+            )
+          ],
+        ),
+      );
+    });
+  }
+}

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

@@ -1,11 +1,10 @@
-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/features/thread/presentation/widgets/spam_banner/spam_report_banner_label_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class SpamReportBannerWidget extends StatelessWidget {
@@ -14,8 +13,7 @@ class SpamReportBannerWidget extends StatelessWidget {
   @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();
@@ -40,25 +38,7 @@ class SpamReportBannerWidget extends StatelessWidget {
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
-            Row(
+            SpamReportBannerLabelWidget(countSpamEmailsAsString: spamReportController.numberOfUnreadSpamEmails),
-              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: [