TF-1714 Change ButtonBuilder to TMailButton widget

(cherry picked from commit fd536ff648370a60ef89d4428fedd949a3e62ae7)

core/lib/core.dart

@@ -52,7 +52,6 @@ export 'presentation/views/text/rich_text_builder.dart';
 export 'presentation/views/text/text_overflow_builder.dart';
 export 'presentation/views/responsive/responsive_widget.dart';
 export 'presentation/views/list/tree_view.dart';
-export 'presentation/views/button/button_builder.dart';
 export 'presentation/views/button/icon_button_web.dart';
 export 'presentation/views/button/tmail_button_widget.dart';
 export 'presentation/views/image/avatar_builder.dart';

core/lib/presentation/extensions/color_extension.dart

@@ -200,6 +200,7 @@ extension AppColor on Color {
   static const colorMailto = Color(0xFFB3B3B3);
   static const colorEventDescriptionBackground = Color(0x05000000);
   static const colorLabelQuotas = Color(0xFF818C99);
+  static const colorLabelCancelButton = Color(0xFFAEB7C2);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/views/button/button_builder.dart

@@ -1,187 +0,0 @@
-
-import 'package:core/core.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
-
-typedef OnPressActionClick = void Function();
-typedef OnPressActionWithPositionClick = void Function(RelativeRect? position);
-
-class ButtonBuilder {
-  OnPressActionClick? _onPressActionClick;
-  OnPressActionWithPositionClick? _onPressActionWithPositionClick;
-
-  BuildContext? _context;
-  final String? _icon;
-  String? _text;
-  double? _size;
-  EdgeInsets? _paddingIcon;
-  bool? _isVertical;
-  Key? _key;
-  Color? _iconColor;
-  TextStyle? _textStyle;
-  BoxDecoration? _decoration;
-  Widget? _iconAction;
-  double? _radiusSplash;
-  double? _maxWidth;
-  EdgeInsets? _padding;
-  EdgeInsets? _margin;
-  String? _tooltip;
-  BoxConstraints? _constraints;
-
-  void key(Key key) {
-    _key = key;
-  }
-
-  void context(BuildContext context) {
-    _context = context;
-  }
-
-  void size(double? size) {
-    _size = size;
-  }
-
-  void maxWidth(double? size) {
-    _maxWidth = size;
-  }
-
-  void iconColor(Color color) {
-    _iconColor = color;
-  }
-
-  void decoration(BoxDecoration decoration) {
-    _decoration = decoration;
-  }
-
-  void addIconAction(Widget icon) {
-    _iconAction = icon;
-  }
-
-  void radiusSplash(double? radius) {
-    _radiusSplash = radius;
-  }
-
-  void padding(EdgeInsets? padding) {
-    _padding = padding;
-  }
-
-  void margin(EdgeInsets? margin) {
-    _margin = margin;
-  }
-
-  void textStyle(TextStyle style) {
-    _textStyle = style;
-  }
-
-  void paddingIcon(EdgeInsets paddingIcon) {
-    _paddingIcon = paddingIcon;
-  }
-
-  void text(String? text, {required bool isVertical}) {
-    _text = text;
-    _isVertical = isVertical;
-  }
-
-  void tooltip(String? message) {
-    _tooltip = message;
-  }
-
-  void addBoxConstraints(BoxConstraints? constraints) {
-    _constraints = constraints;
-  }
-
-  ButtonBuilder(this._icon);
-
-  void onPressActionClick(OnPressActionClick onPressActionClick) {
-    _onPressActionClick = onPressActionClick;
-  }
-
-  void addOnPressActionWithPositionClick(OnPressActionWithPositionClick onPressActionClick) {
-    _onPressActionWithPositionClick = onPressActionClick;
-  }
-
-  Widget build() {
-    return Padding(
-      padding: _margin ?? EdgeInsets.zero,
-      child: Material(
-        color: Colors.transparent,
-        child: InkWell(
-          onTap: _onPressActionClick,
-          onTapDown: (detail) {
-            if (_onPressActionWithPositionClick != null && _context != null) {
-              final screenSize = MediaQuery.of(_context!).size;
-              final offset = detail.globalPosition;
-              final position = RelativeRect.fromLTRB(
-                offset.dx,
-                offset.dy,
-                screenSize.width - offset.dx,
-                screenSize.height - offset.dy,
-              );
-              _onPressActionWithPositionClick?.call(position);
-            }
-          },
-          borderRadius: BorderRadius.circular(_radiusSplash ?? 20),
-          child: Tooltip(
-            message: _tooltip ?? '',
-            child: Container(
-              key: _key,
-              alignment: Alignment.center,
-              color: _decoration == null ? Colors.transparent : null,
-              decoration: _decoration,
-              width: _maxWidth,
-              constraints: _constraints,
-              padding: _padding ?? EdgeInsets.zero,
-              child: _buildBody()
-            ),
-          )
-        ),
-      ),
-    );
-  }
-
-  Widget _buildBody() {
-    if (_text != null) {
-      return _isVertical!
-        ? Column(
-            mainAxisSize: MainAxisSize.min,
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              _buildIcon(),
-              _buildText(),
-              if (_iconAction != null) _iconAction!
-            ])
-        : Row(
-            mainAxisSize: MainAxisSize.min,
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              _buildIcon(),
-              _buildText(),
-              if (_iconAction != null) _iconAction!
-            ]);
-    } else {
-      return _buildIcon();
-    }
-  }
-
-  Widget _buildIcon() => Padding(
-    padding: _paddingIcon ?? const EdgeInsets.all(10),
-    child: SvgPicture.asset(
-      _icon ?? '',
-      width: _size ?? 24,
-      height: _size ?? 24,
-      fit: BoxFit.fill,
-      colorFilter: _iconColor.asFilter()
-    ));
-
-  Widget _buildText() {
-    return Text(
-      _text ?? '',
-      maxLines: 1,
-      softWrap: CommonTextStyle.defaultSoftWrap,
-      overflow: CommonTextStyle.defaultTextOverFlow,
-      style: _textStyle ?? const TextStyle(
-        fontSize: 12,
-        color: AppColor.colorTextButton
-      ),
-    );
-  }
-}

core/lib/presentation/views/button/icon_button_web.dart

@@ -99,32 +99,6 @@ Widget buildIconWebHasPosition(BuildContext context, {
   );
 }
 
-Widget buildTextCircleButton(String text, {
-  TextStyle? textStyle,
-  IconWebCallback? onTap,
-}) {
-  return Material(
-      shape: const CircleBorder(),
-      color: Colors.transparent,
-      child: TextButton(
-          style: ButtonStyle(
-              overlayColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => AppColor.colorFocusButton),
-              shape: MaterialStateProperty.all(const CircleBorder()),
-              padding: MaterialStateProperty.resolveWith<EdgeInsets>((Set<MaterialState> states) => EdgeInsets.zero),
-              elevation: MaterialStateProperty.resolveWith<double>((Set<MaterialState> states) => 0)),
-          onPressed: () => onTap?.call(),
-          child: Text(
-            text,
-            style: textStyle ?? const TextStyle(
-              fontWeight: FontWeight.normal,
-              fontSize: 15,
-              color: AppColor.lineItemListColor
-            )
-          )
-      )
-  );
-}
-
 Widget buildTextIcon(String text, {
   TextStyle? textStyle,
   EdgeInsetsGeometry? padding,

core/lib/presentation/views/button/tmail_button_widget.dart

@@ -14,15 +14,24 @@ class TMailButtonWidget extends StatelessWidget {
   final double? width;
   final double maxWidth;
   final double maxHeight;
+  final double minWidth;
   final String? tooltipMessage;
   final Color? backgroundColor;
   final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? margin;
   final String text;
   final String? icon;
   final bool verticalDirection;
-  final double iconSize;
+  final double? iconSize;
+  final double iconSpace;
   final Color? iconColor;
   final TextStyle? textStyle;
+  final String? trailingIcon;
+  final double? trailingIconSize;
+  final Color? trailingIconColor;
+  final List<BoxShadow>? boxShadow;
+  final TextAlign? textAlign;
+  final bool flexibleText;
 
   const TMailButtonWidget({
     super.key,
@@ -33,14 +42,23 @@ class TMailButtonWidget extends StatelessWidget {
     this.width,
     this.maxWidth = double.infinity,
     this.maxHeight = double.infinity,
+    this.minWidth = 0,
     this.tooltipMessage,
     this.backgroundColor,
     this.padding,
     this.verticalDirection = false,
     this.icon,
-    this.iconSize = 24,
+    this.iconSize,
     this.iconColor,
     this.textStyle,
+    this.iconSpace = 8,
+    this.trailingIcon,
+    this.trailingIconSize,
+    this.trailingIconColor,
+    this.boxShadow,
+    this.margin,
+    this.textAlign,
+    this.flexibleText = false,
   });
 
   factory TMailButtonWidget.fromIcon({
@@ -52,14 +70,23 @@ class TMailButtonWidget extends StatelessWidget {
     double? width,
     double maxWidth = double.infinity,
     double maxHeight = double.infinity,
+    double minWidth = 0,
     String? tooltipMessage,
     Color? backgroundColor,
     EdgeInsetsGeometry? padding,
     String text = '',
     bool verticalDirection = false,
-    double iconSize = 24,
+    double? iconSize,
     Color? iconColor,
     TextStyle? textStyle,
+    double iconSpace = 8,
+    String? trailingIcon,
+    double? trailingIconSize,
+    Color? trailingIconColor,
+    List<BoxShadow>? boxShadow,
+    EdgeInsetsGeometry? margin,
+    TextAlign? textAlign,
+    bool flexibleText = false,
   }) {
     return TMailButtonWidget(
       key: key,
@@ -70,6 +97,7 @@ class TMailButtonWidget extends StatelessWidget {
       width: width,
       maxWidth : maxWidth,
       maxHeight: maxHeight,
+      minWidth: minWidth,
       tooltipMessage: tooltipMessage,
       backgroundColor: backgroundColor,
       padding: padding,
@@ -78,6 +106,14 @@ class TMailButtonWidget extends StatelessWidget {
       iconSize: iconSize,
       iconColor: iconColor,
       textStyle: textStyle,
+      iconSpace: iconSpace,
+      trailingIcon: trailingIcon,
+      trailingIconSize: trailingIconSize,
+      trailingIconColor: trailingIconColor,
+      boxShadow: boxShadow,
+      margin: margin,
+      textAlign: textAlign,
+      flexibleText: flexibleText,
     );
   }
 
@@ -88,7 +124,6 @@ class TMailButtonWidget extends StatelessWidget {
     if (icon != null && text.isNotEmpty) {
       if (verticalDirection) {
         childWidget = Column(
-          mainAxisSize: MainAxisSize.min,
           children: [
             SvgPicture.asset(
               icon!,
@@ -97,18 +132,31 @@ class TMailButtonWidget extends StatelessWidget {
               fit: BoxFit.fill,
               colorFilter: iconColor?.asFilter()
             ),
+            SizedBox(height: iconSpace),
             Text(
               text,
+              textAlign: textAlign,
               style: textStyle ?? const TextStyle(
                 fontSize: 12,
                 color: AppColor.colorTextButtonHeaderThread
               ),
             ),
+            if (trailingIcon != null)
+              Padding(
+                padding: EdgeInsetsDirectional.only(top: iconSpace),
+                child: SvgPicture.asset(
+                  trailingIcon!,
+                  width: trailingIconSize,
+                  height: trailingIconSize,
+                  fit: BoxFit.fill,
+                  colorFilter: trailingIconColor?.asFilter()
+                ),
+              ),
           ]
         );
       } else {
         childWidget = Row(
-          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
           children: [
             SvgPicture.asset(
               icon!,
@@ -117,13 +165,38 @@ class TMailButtonWidget extends StatelessWidget {
               fit: BoxFit.fill,
               colorFilter: iconColor?.asFilter()
             ),
-            Text(
+            SizedBox(width: iconSpace),
-              text,
+            if (flexibleText)
-              style: textStyle ?? const TextStyle(
+              Flexible(
-                fontSize: 12,
+                child: Text(
-                color: AppColor.colorTextButtonHeaderThread
+                  text,
+                  textAlign: textAlign,
+                  style: textStyle ?? const TextStyle(
+                    fontSize: 12,
+                    color: AppColor.colorTextButtonHeaderThread
+                  ),
+                ),
+              )
+            else
+              Text(
+                text,
+                textAlign: textAlign,
+                style: textStyle ?? const TextStyle(
+                  fontSize: 12,
+                  color: AppColor.colorTextButtonHeaderThread
+                ),
+              ),
+            if (trailingIcon != null)
+              Padding(
+                padding: EdgeInsetsDirectional.only(start: iconSpace),
+                child: SvgPicture.asset(
+                  trailingIcon!,
+                  width: trailingIconSize,
+                  height: trailingIconSize,
+                  fit: BoxFit.fill,
+                  colorFilter: trailingIconColor?.asFilter()
+                ),
               ),
-            ),
           ]
         );
       }
@@ -138,6 +211,7 @@ class TMailButtonWidget extends StatelessWidget {
     } else {
       childWidget = Text(
         text,
+        textAlign: textAlign,
         style: textStyle ?? const TextStyle(
           fontSize: 12,
           color: AppColor.colorTextButtonHeaderThread
@@ -152,9 +226,12 @@ class TMailButtonWidget extends StatelessWidget {
       width: width,
       maxWidth: maxWidth,
       maxHeight: maxHeight,
+      minWidth: minWidth,
       tooltipMessage: tooltipMessage,
       backgroundColor: backgroundColor,
       padding: padding,
+      margin: margin,
+      boxShadow: boxShadow,
       child: childWidget,
     );
   }

core/lib/presentation/views/container/tmail_container_widget.dart

@@ -13,9 +13,12 @@ class TMailContainerWidget extends StatelessWidget {
   final double? width;
   final double maxWidth;
   final double maxHeight;
+  final double minWidth;
   final String? tooltipMessage;
   final Color? backgroundColor;
   final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? margin;
+  final List<BoxShadow>? boxShadow;
 
   const TMailContainerWidget({
     super.key,
@@ -26,14 +29,17 @@ class TMailContainerWidget extends StatelessWidget {
     this.width,
     this.maxWidth = double.infinity,
     this.maxHeight = double.infinity,
+    this.minWidth = 0,
     this.tooltipMessage,
     this.backgroundColor,
     this.padding,
+    this.boxShadow,
+    this.margin,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Material(
+    final materialChild = Material(
       color: Colors.transparent,
       child: InkWell(
         onTap: onTapActionCallback,
@@ -59,9 +65,14 @@ class TMailContainerWidget extends StatelessWidget {
                 decoration: BoxDecoration(
                   color: backgroundColor ?? AppColor.colorButtonHeaderThread,
                   borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
+                  boxShadow: boxShadow
                 ),
                 width: width,
-                constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
+                constraints: BoxConstraints(
+                  maxWidth: maxWidth,
+                  maxHeight: maxHeight,
+                  minWidth: minWidth
+                ),
                 padding: padding ?? const EdgeInsetsDirectional.all(8),
                 child: child
               )
@@ -71,13 +82,24 @@ class TMailContainerWidget extends StatelessWidget {
               decoration: BoxDecoration(
                 color: backgroundColor ?? AppColor.colorButtonHeaderThread,
                 borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
+                boxShadow: boxShadow
               ),
               width: width,
-              constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
+              constraints: BoxConstraints(
+                maxWidth: maxWidth,
+                maxHeight: maxHeight,
+                minWidth: minWidth
+              ),
               padding: padding ?? const EdgeInsetsDirectional.all(8),
               child: child
             )
       ),
     );
+
+    if (margin != null) {
+      return Padding(padding: margin!, child: materialChild);
+    } else {
+      return materialChild;
+    }
   }
 }

lib/features/composer/presentation/base_composer_view.dart

@@ -497,7 +497,7 @@ abstract class BaseComposerView extends GetWidget<ComposerController>
               textStyle: const TextStyle(
                 fontWeight: FontWeight.w500,
                 fontSize: 17,
-                color: AppColor.lineItemListColor
+                color: AppColor.colorLabelCancelButton
               ),
               backgroundColor: AppColor.emailAddressChipColor,
               width: 150,

lib/features/email/presentation/email_view.dart

@@ -65,6 +65,7 @@ class EmailView extends GetWidget<SingleEmailController> with AppLoaderMixin {
               right: responsiveUtils.isLandscapeMobile(context),
               left: responsiveUtils.isLandscapeMobile(context),
               child: Container(
+                  clipBehavior: Clip.antiAlias,
                   decoration: responsiveUtils.isWebDesktop(context)
                       ? BoxDecoration(
                           borderRadius: BorderRadius.circular(20),
@@ -118,8 +119,10 @@ class EmailView extends GetWidget<SingleEmailController> with AppLoaderMixin {
           : _buildSingleEmailView(context, email);
       }),
       ),
-      const Divider(color: AppColor.colorDividerHorizontal, height: 1),
+      BottomBarMailWidgetBuilder(
-      _buildBottomBar(context, email),
+        email,
+        onPressEmailActionClick: controller.pressEmailAction
+      ),
     ]);
   }
 
@@ -225,12 +228,6 @@ class EmailView extends GetWidget<SingleEmailController> with AppLoaderMixin {
     ];
   }
 
-  Widget _buildBottomBar(BuildContext context, PresentationEmail presentationEmail) {
-    return BottomBarMailWidgetBuilder(
-      presentationEmail,
-      onPressEmailActionClick: (emailActionType) => controller.pressEmailAction(emailActionType));
-  }
-
   Widget _buildEmailBody(BuildContext context, PresentationEmail email) {
     if (PlatformInfo.isWeb && !email.hasCalendarEvent) {
       return _buildEmailMessage(context, email);

lib/features/email/presentation/widgets/bottom_bar_mail_widget_builder.dart

@@ -1,7 +1,12 @@
-import 'package:core/core.dart';
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
-import 'package:model/model.dart';
+import 'package:model/email/email_action_type.dart';
+import 'package:model/email/presentation_email.dart';
+import 'package:model/extensions/presentation_email_extension.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnPressEmailActionClick = void Function(EmailActionType emailActionType);
@@ -27,69 +32,96 @@ class BottomBarMailWidgetBuilder extends StatelessWidget {
     final responsiveUtils = Get.find<ResponsiveUtils>();
 
     return Container(
-      alignment: Alignment.center,
+      decoration: const BoxDecoration(
-      decoration: responsiveUtils.isWebDesktop(context)
+        border: Border(
-        ? const BoxDecoration(
+          top: BorderSide(
-            color: Colors.white,
+            color: AppColor.colorDividerHorizontal,
-            borderRadius: BorderRadius.only(
+            width: 0.5,
-                 bottomRight: Radius.circular(20),
+          )
-                 bottomLeft: Radius.circular(20)))
+        ),
-        : const BoxDecoration(color: Colors.white),
+      ),
-      child: Row(
+      child: IntrinsicHeight(
-          mainAxisAlignment: MainAxisAlignment.center,
+        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             if (_presentationEmail.numberOfAllEmailAddress() > 1)
-              Expanded(child: (ButtonBuilder(imagePaths.icReplyAll)
+              Expanded(
-                ..key(const Key('button_reply_all_message'))
+                child: TMailButtonWidget(
-                ..size(15)
+                  key: const Key('reply_all_emails_button'),
-                ..radiusSplash(0)
+                  text: AppLocalizations.of(context).reply_all,
-                ..padding(const EdgeInsets.only(top: 5, bottom: 8))
+                  icon: imagePaths.icReplyAll,
-                ..textStyle(TextStyle(
+                  borderRadius: 0,
+                  iconSize: 15,
+                  textAlign: TextAlign.center,
+                  flexibleText: true,
+                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
+                  backgroundColor: Colors.transparent,
+                  textStyle: TextStyle(
                     fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
-                    color: AppColor.colorTextButton))
+                    color: AppColor.colorTextButton
-                ..onPressActionClick(() =>onPressEmailActionClick?.call(EmailActionType.replyAll))
+                  ),
-                ..text(AppLocalizations.of(context).reply_all,
+                  verticalDirection: responsiveUtils.isPortraitMobile(context),
-                    isVertical: responsiveUtils.isPortraitMobile(context)))
+                  onTapActionCallback: () => onPressEmailActionClick?.call(EmailActionType.replyAll),
-              .build()),
+                ),
-            Expanded(child: (ButtonBuilder(imagePaths.icReply)
+              ),
-              ..key(const Key('button_reply_message'))
+            Expanded(
-              ..size(20)
+              child: TMailButtonWidget(
-              ..radiusSplash(0)
+                key: const Key('reply_email_button'),
-              ..padding(const EdgeInsets.only(top: 5, bottom: 8))
+                text: AppLocalizations.of(context).reply,
-              ..textStyle(TextStyle(
+                icon: imagePaths.icReply,
+                borderRadius: 0,
+                iconSize: 20,
+                textAlign: TextAlign.center,
+                flexibleText: true,
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
+                backgroundColor: Colors.transparent,
+                textStyle: TextStyle(
                   fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
-                  color: AppColor.colorTextButton))
+                  color: AppColor.colorTextButton
-              ..onPressActionClick(() => onPressEmailActionClick?.call(EmailActionType.reply))
+                ),
-              ..text(AppLocalizations.of(context).reply,
+                verticalDirection: responsiveUtils.isPortraitMobile(context),
-                  isVertical: responsiveUtils.isPortraitMobile(context)))
+                onTapActionCallback: () => onPressEmailActionClick?.call(EmailActionType.reply),
-            .build()),
+              ),
-            Expanded(child: (ButtonBuilder(imagePaths.icForward)
+            ),
-              ..key(const Key('button_forward_message'))
+            Expanded(
-              ..size(20)
+              child: TMailButtonWidget(
-              ..radiusSplash(0)
+                key: const Key('forward_email_button'),
-              ..padding(const EdgeInsets.only(top: 5, bottom: 8))
+                text: AppLocalizations.of(context).forward,
-              ..textStyle(TextStyle(
+                icon: imagePaths.icForward,
+                borderRadius: 0,
+                iconSize: 20,
+                textAlign: TextAlign.center,
+                flexibleText: true,
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
+                backgroundColor: Colors.transparent,
+                textStyle: TextStyle(
                   fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
-                  color: AppColor.colorTextButton))
+                  color: AppColor.colorTextButton
-              ..onPressActionClick(() => onPressEmailActionClick?.call(EmailActionType.forward))
+                ),
-              ..text(AppLocalizations.of(context).forward,
+                verticalDirection: responsiveUtils.isPortraitMobile(context),
-                  isVertical: responsiveUtils.isPortraitMobile(context)))
+                onTapActionCallback: () => onPressEmailActionClick?.call(EmailActionType.forward),
-            .build()),
+              ),
-            if (responsiveUtils.mailboxDashboardOnlyHasEmailView(context))
+            ),
-              Expanded(child: (ButtonBuilder(imagePaths.icNewMessage)
+            Expanded(
-                ..key(const Key('button_new_message'))
+              child: TMailButtonWidget(
-                ..size(20)
+                key: const Key('compose_new_email_button'),
-                ..radiusSplash(0)
+                text: AppLocalizations.of(context).new_message,
-                ..padding(const EdgeInsets.only(top: 5, bottom: 8))
+                icon: imagePaths.icNewMessage,
-                ..textStyle(TextStyle(
+                borderRadius: 0,
-                    fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
+                iconSize: 20,
-                    color: AppColor.colorTextButton))
+                textAlign: TextAlign.center,
-                ..onPressActionClick(() => onPressEmailActionClick?.call(EmailActionType.compose))
+                flexibleText: true,
-                ..text(AppLocalizations.of(context).new_message,
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
-                    isVertical: responsiveUtils.isPortraitMobile(context)))
+                backgroundColor: Colors.transparent,
-              .build())
+                textStyle: TextStyle(
+                  fontSize: responsiveUtils.isPortraitMobile(context) ? 12 : 16,
+                  color: AppColor.colorTextButton
+                ),
+                verticalDirection: responsiveUtils.isPortraitMobile(context),
+                onTapActionCallback: () => onPressEmailActionClick?.call(EmailActionType.compose),
+              ),
+            ),
           ]
+        ),
       )
     );
   }

lib/features/mailbox/presentation/mailbox_view.dart

@@ -57,7 +57,21 @@ class MailboxView extends BaseMailboxView {
                             Obx(() {
                               if (controller.isSelectionEnabled()
                                   && controller.listActionOfMailboxSelected.isNotEmpty) {
-                                return _buildOptionSelectionMailbox(context);
+                                return SafeArea(
+                                  right: false,
+                                  top: false,
+                                  child: BottomBarSelectionMailboxWidget(
+                                    controller.listMailboxSelected,
+                                    controller.listActionOfMailboxSelected,
+                                    onMailboxActionsClick: (actions, listMailboxSelected) {
+                                      return controller.pressMailboxSelectionAction(
+                                        context,
+                                        actions,
+                                        listMailboxSelected
+                                      );
+                                    }
+                                  )
+                                );
                               } else {
                                 return const SizedBox.shrink();
                               }
@@ -369,35 +383,6 @@ class MailboxView extends BaseMailboxView {
       }).toList() ?? <Widget>[];
   }
 
-  Widget _buildOptionSelectionMailbox(BuildContext context) {
-    return Column(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        const Divider(
-          color: AppColor.lineItemListColor,
-          height: 1,
-          thickness: 0.2
-        ),
-        SafeArea(
-          right: false,
-          top: false,
-          child: BottomBarSelectionMailboxWidget(
-            responsiveUtils,
-            imagePaths,
-            controller.listMailboxSelected,
-            controller.listActionOfMailboxSelected,
-            onMailboxActionsClick: (actions, listMailboxSelected) =>
-              controller.pressMailboxSelectionAction(
-                context,
-                actions,
-                listMailboxSelected
-              )
-          )
-        )
-      ]
-    );
-  }
-
   Widget _buildVersionInformation(BuildContext context, PackageInfo packageInfo) {
     return Container(
       color: AppColor.colorBgMailbox,

lib/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart

@@ -1,8 +1,9 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/views/button/button_builder.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 
@@ -10,15 +11,11 @@ typedef OnMailboxActionsClick = void Function(MailboxActions, List<PresentationM
 
 class BottomBarSelectionMailboxWidget extends StatelessWidget {
 
-  final ResponsiveUtils _responsiveUtils;
-  final ImagePaths _imagePaths;
   final List<PresentationMailbox> _listSelectionMailbox;
   final List<MailboxActions> _listMailboxActions;
   final OnMailboxActionsClick onMailboxActionsClick;
 
   const BottomBarSelectionMailboxWidget(
-    this._responsiveUtils,
-    this._imagePaths,
     this._listSelectionMailbox,
     this._listMailboxActions,
     {
@@ -30,23 +27,36 @@ class BottomBarSelectionMailboxWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(children: _listMailboxActions
+    final responsiveUtils = Get.find<ResponsiveUtils>();
-      .map((action) => _buildMailboxActionButton(context, action))
+    final imagePaths = Get.find<ImagePaths>();
-      .toList());
-  }
 
-  Widget _buildMailboxActionButton(BuildContext context, MailboxActions actions) {
+    return Container(
-    return Expanded(child: (ButtonBuilder(actions.getContextMenuIcon(_imagePaths))
+      decoration: const BoxDecoration(
-      ..radiusSplash(8)
+        border: Border(top: BorderSide(
-      ..padding(const EdgeInsets.all(8))
+          color: AppColor.colorDividerHorizontal,
-      ..tooltip(actions.getTitleContextMenu(context))
+          width: 0.5,
-      ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
+        )),
-      ..iconColor(AppColor.colorTextButton)
+      ),
-      ..onPressActionClick(() => onMailboxActionsClick.call(actions, _listSelectionMailbox))
+      child: IntrinsicHeight(
-      ..text(
+        child: Row(children: _listMailboxActions
-        _responsiveUtils.isLandscapeMobile(context) ? null : actions.getTitleContextMenu(context),
+          .map((action) {
-        isVertical: true
+            return Expanded(child: TMailButtonWidget(
-      )
+              key: Key('${action.name}_button'),
-    ).build());
+              text: responsiveUtils.isLandscapeMobile(context)
+                ? ''
+                : action.getTitleContextMenu(context),
+              icon: action.getContextMenuIcon(imagePaths),
+              borderRadius: 0,
+              backgroundColor: Colors.transparent,
+              flexibleText: true,
+              tooltipMessage: action.getTitleContextMenu(context),
+              textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
+              onTapActionCallback: () => onMailboxActionsClick.call(action, _listSelectionMailbox),
+            ));
+          })
+          .toList()
+        ),
+      ),
+    );
   }
 }

lib/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart

@@ -2068,6 +2068,10 @@ class MailboxDashBoardController extends ReloadableController {
     dispatchAction(RefreshAllEmailAction());
   }
 
+  void selectAllEmailAction() {
+    dispatchAction(SelectionAllEmailAction());
+  }
+  
   @override
   void onClose() {
     _emailReceiveManager.closeEmailReceiveManagerStream();

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -397,81 +397,54 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
         );
       }),
       const SizedBox(width: 16),
-      (ButtonBuilder(imagePaths.icSelectAll)
+      TMailButtonWidget(
-          ..key(const Key('button_select_all'))
+        key: const Key('select_all_emails_button'),
-          ..decoration(const BoxDecoration(
+        text: AppLocalizations.of(context).select_all,
-              borderRadius: BorderRadius.all(Radius.circular(10)),
+        icon: imagePaths.icSelectAll,
-              color: AppColor.colorButtonHeaderThread))
+        borderRadius: 10,
-          ..paddingIcon(EdgeInsets.only(
+        iconSize: 16,
-              right: AppUtils.isDirectionRTL(context) ? 0 : 8,
+        padding: const EdgeInsetsDirectional.symmetric(horizontal: 12, vertical: 8),
-              left: AppUtils.isDirectionRTL(context) ? 8 : 0
+        onTapActionCallback: controller.selectAllEmailAction,
-          ))
+      ),
-          ..size(16)
-          ..radiusSplash(10)
-          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
-          ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButtonHeaderThread))
-          ..onPressActionClick(() => controller.dispatchAction(SelectionAllEmailAction()))
-          ..text(AppLocalizations.of(context).select_all, isVertical: false))
-        .build(),
       if (controller.isAbleMarkAllAsRead())
         Padding(
-          padding: EdgeInsets.only(
+          padding: const EdgeInsetsDirectional.only(start: 16),
-            left: AppUtils.isDirectionRTL(context) ? 0 : 16,
+          child: TMailButtonWidget(
-            right: AppUtils.isDirectionRTL(context) ? 16 : 0,
+            key: const Key('mark_as_read_emails_button'),
+            text: AppLocalizations.of(context).mark_all_as_read,
+            icon: imagePaths.icSelectAll,
+            borderRadius: 10,
+            iconSize: 16,
+            padding: const EdgeInsetsDirectional.symmetric(horizontal: 12, vertical: 8),
+            onTapActionCallback: () => controller.markAsReadMailboxAction(context),
           ),
-          child: (ButtonBuilder(imagePaths.icMarkAllAsRead)
-            ..key(const Key('button_mark_all_as_read'))
-            ..decoration(const BoxDecoration(
-                borderRadius:BorderRadius.all(Radius.circular(10)),
-                color: AppColor.colorButtonHeaderThread))
-            ..paddingIcon(const EdgeInsets.only(right: 8))
-            ..size(16)
-            ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
-            ..radiusSplash(10)
-            ..textStyle(const TextStyle(
-                fontSize: 12,
-                color: AppColor.colorTextButtonHeaderThread))
-            ..onPressActionClick(() => controller.markAsReadMailboxAction(context))
-            ..text(AppLocalizations.of(context).mark_all_as_read, isVertical: false))
-          .build(),
         ),
       const SizedBox(width: 16),
-      Obx(() => (ButtonBuilder(controller.filterMessageOption.value.getIconSelected(imagePaths))
+      Obx(() => TMailButtonWidget(
-          ..key(const Key('button_filter_messages'))
+        key: const Key('filter_emails_button'),
-          ..context(context)
+        text: controller.filterMessageOption.value == FilterMessageOption.all
-          ..decoration(BoxDecoration(
+          ? AppLocalizations.of(context).filter_messages
-              borderRadius: const BorderRadius.all(Radius.circular(10)),
+          : controller.filterMessageOption.value.getTitle(context),
-              color: controller.filterMessageOption.value.getBackgroundColor()))
+        icon: controller.filterMessageOption.value.getIconSelected(imagePaths),
-          ..paddingIcon(EdgeInsets.only(
+        borderRadius: 10,
-              right: AppUtils.isDirectionRTL(context) ? 0 : 8,
+        iconSize: 16,
-              left: AppUtils.isDirectionRTL(context) ? 8 : 0,
+        padding: const EdgeInsetsDirectional.symmetric(horizontal: 12, vertical: 8),
-          ))
+        backgroundColor: controller.filterMessageOption.value.getBackgroundColor(),
-          ..size(16)
+        textStyle: controller.filterMessageOption.value.getTextStyle(),
-          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
+        trailingIcon: imagePaths.icArrowDown,
-          ..radiusSplash(10)
+        onTapActionAtPositionCallback: (position) {
-          ..textStyle(controller.filterMessageOption.value.getTextStyle())
+          return controller.openPopupMenuAction(
-          ..addIconAction(Padding(
+            context,
-              padding: EdgeInsets.only(
+            position,
-                left: AppUtils.isDirectionRTL(context) ? 0 : 8,
+            popupMenuFilterEmailActionTile(
-                right: AppUtils.isDirectionRTL(context) ? 8 : 0,
+              context,
-              ),
+              controller.filterMessageOption.value,
-              child: SvgPicture.asset(imagePaths.icArrowDown, fit: BoxFit.fill)))
+              (option) => controller.dispatchAction(FilterMessageAction(context, option)),
-          ..addOnPressActionWithPositionClick((position) =>
+              isSearchEmailRunning: controller.searchController.isSearchEmailRunning
-              controller.openPopupMenuAction(
-                context,
-                position,
-                popupMenuFilterEmailActionTile(
-                  context,
-                  controller.filterMessageOption.value,
-                  (option) => controller.dispatchAction(FilterMessageAction(context, option)),
-                  isSearchEmailRunning: controller.searchController.isSearchEmailRunning
-                )
-              )
             )
-          ..text(controller.filterMessageOption.value == FilterMessageOption.all
+          );
-              ? AppLocalizations.of(context).filter_messages
+        },
-              : controller.filterMessageOption.value.getTitle(context), isVertical: false))
+      )),
-        .build()),
     ]);
   }
 
@@ -682,37 +655,36 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
 
   Widget _buildComposerButton(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(16),
+      padding: const EdgeInsetsDirectional.only(
-      color: Colors.transparent,
+        start: 16,
+        end: 16,
+        top: 16,
+        bottom: 8
+      ),
       width: ResponsiveUtils.defaultSizeMenu,
       alignment: Alignment.centerLeft,
-      child: (ButtonBuilder(imagePaths.icComposeWeb)
+      child: TMailButtonWidget(
-        ..key(const Key('button_compose_email'))
+        key: const Key('compose_email_button'),
-        ..decoration(BoxDecoration(
+        text: AppLocalizations.of(context).compose,
-            borderRadius: BorderRadius.circular(10),
+        icon: imagePaths.icComposeWeb,
-            color: AppColor.colorTextButton,
+        borderRadius: 10,
-            boxShadow: const [
+        iconSize: 24,
-              BoxShadow(
+        iconColor: Colors.white,
-                blurRadius: 12.0,
+        padding: const EdgeInsetsDirectional.symmetric(vertical: 8),
-                color: AppColor.colorShadowComposerButton
+        backgroundColor: AppColor.colorTextButton,
-              )
+        boxShadow: const [
-            ]))
+          BoxShadow(
-        ..paddingIcon(EdgeInsets.only(
+            blurRadius: 12.0,
-            right: AppUtils.isDirectionRTL(context) ? 0 : 8,
+            color: AppColor.colorShadowComposerButton
-            left: AppUtils.isDirectionRTL(context) ? 8 : 0,
+          )
-        ))
+        ],
-        ..iconColor(Colors.white)
+        textStyle: const TextStyle(
-        ..size(24)
+          fontSize: 15,
-        ..radiusSplash(10)
+          color: Colors.white,
-        ..padding(const EdgeInsets.symmetric(vertical: 8))
+          fontWeight: FontWeight.w500
-        ..textStyle(const TextStyle(
+        ),
-            fontSize: 15,
+        onTapActionCallback: () => controller.goToComposer(ComposerArguments()),
-            color: Colors.white,
+      ),
-            fontWeight: FontWeight.w500
-        ))
-        ..onPressActionClick(() => controller.goToComposer(ComposerArguments()))
-        ..text(AppLocalizations.of(context).compose, isVertical: false)
-      ).build()
     );
   }
 }

lib/features/manage_account/presentation/email_rules/widgets/email_rules_header_widget.dart

@@ -1,7 +1,7 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/views/button/button_builder.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
@@ -48,51 +48,43 @@ class EmailRulesHeaderWidget extends StatelessWidget {
     if (!responsiveUtils.isMobile(context)) {
       return Row(
         children: [
-          (ButtonBuilder(imagePaths.icAddNewRules)
+          TMailButtonWidget(
-            ..key(const Key('button_new_rule'))
+            key: const Key('new_rule_button'),
-            ..decoration(BoxDecoration(
+            text: AppLocalizations.of(context).addNewRule,
-              borderRadius: BorderRadius.circular(10),
+            icon: imagePaths.icAddNewRules,
-              color: AppColor.colorTextButton))
+            borderRadius: 10,
-            ..paddingIcon(const EdgeInsets.only(right: 8))
+            backgroundColor: AppColor.colorTextButton,
-            ..iconColor(Colors.white)
+            iconColor: Colors.white,
-            ..size(20)
+            minWidth: 130,
-            ..radiusSplash(10)
+            padding: const EdgeInsets.symmetric(vertical: 12,horizontal: 8),
-            ..addBoxConstraints(const BoxConstraints(minWidth: 130))
+            iconSize: 20,
-            ..padding(const EdgeInsets.symmetric(vertical: 12,horizontal: 8))
+            textStyle: const TextStyle(
-            ..textStyle(const TextStyle(
               fontSize: 17,
               color: Colors.white,
               fontWeight: FontWeight.w500,
-            ))
+            ),
-            ..onPressActionClick(() => createRule.call())
+            onTapActionCallback: createRule,
-            ..text(
+          ),
-              AppLocalizations.of(context).addNewRule,
-              isVertical: false,
-            )).build(),
           const Spacer(),
         ],
       );
     } else {
-      return (ButtonBuilder(imagePaths.icAddNewRules)
+      return TMailButtonWidget(
-        ..key(const Key('button_new_rule'))
+        key: const Key('new_rule_button'),
-        ..decoration(BoxDecoration(
+        text: AppLocalizations.of(context).addNewRule,
-          borderRadius: BorderRadius.circular(10),
+        icon: imagePaths.icAddNewRules,
-          color: AppColor.colorTextButton))
+        borderRadius: 10,
-        ..paddingIcon(const EdgeInsets.only(right: 8))
+        backgroundColor: AppColor.colorTextButton,
-        ..iconColor(Colors.white)
+        iconColor: Colors.white,
-        ..size(20)
+        padding: const EdgeInsets.symmetric(vertical: 12),
-        ..radiusSplash(10)
+        iconSize: 20,
-        ..padding(const EdgeInsets.symmetric(vertical: 12))
+        textStyle: const TextStyle(
-        ..textStyle(const TextStyle(
           fontSize: 17,
           color: Colors.white,
           fontWeight: FontWeight.w500,
-        ))
+        ),
-        ..onPressActionClick(() => createRule.call())
+        onTapActionCallback: createRule,
-        ..text(
+      );
-          AppLocalizations.of(context).addNewRule,
-          isVertical: false,
-        )).build();
     }
   }
 }

lib/features/manage_account/presentation/menu/manage_account_menu_view.dart

@@ -7,7 +7,6 @@ import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/manage_account_menu_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/widgets/account_menu_item_tile_builder.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
-import 'package:tmail_ui_user/main/utils/app_utils.dart';
 
 class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
 
@@ -57,93 +56,100 @@ class ManageAccountMenuView extends GetWidget<ManageAccountMenuController> {
                       const Divider(color: AppColor.colorDividerMailbox, height: 1),
                     Expanded(child: Container(
                       color: _responsiveUtils.isWebDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
-                      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+                      child: Column(
-                      Padding(
+                        crossAxisAlignment: CrossAxisAlignment.start,
-                          padding: const EdgeInsetsDirectional.only(start: 20, top: 24),
+                        children: [
-                          child: (ButtonBuilder(DirectionUtils.isDirectionRTLByLanguage(context) ? _imagePaths.icArrowRight : _imagePaths.icBack)
+                          Padding(
-                            ..key(const Key('button_back'))
+                            padding: const EdgeInsetsDirectional.only(start: 20, top: 24),
-                            ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorBgMailboxSelected))
+                            child: TMailButtonWidget(
-                            ..paddingIcon(EdgeInsets.only(
+                              key: const Key('back_to_dashboard_button'),
-                                right: AppUtils.isDirectionRTL(context) ? 0 : 8,
+                              text: AppLocalizations.of(context).back,
-                                left: AppUtils.isDirectionRTL(context) ? 8 : 0,
+                              icon: DirectionUtils.isDirectionRTLByLanguage(context)
-                            ))
+                                ? _imagePaths.icArrowRight
-                            ..iconColor(AppColor.colorTextButton)
+                                : _imagePaths.icBack,
-                            ..maxWidth(100)
+                              borderRadius: 10,
-                            ..size(DirectionUtils.isDirectionRTLByLanguage(context) ? null : 16)
+                              backgroundColor: AppColor.colorBgMailboxSelected,
-                            ..radiusSplash(10)
+                              iconColor: AppColor.colorTextButton,
-                            ..padding(DirectionUtils.isDirectionRTLByLanguage(context)
+                              maxWidth: 100,
+                              padding: DirectionUtils.isDirectionRTLByLanguage(context)
                                 ? const EdgeInsets.symmetric(vertical: 5)
-                                : const EdgeInsets.symmetric(vertical: 10))
+                                : const EdgeInsets.symmetric(vertical: 10),
-                            ..textStyle(const TextStyle(fontSize: 15, color: AppColor.colorTextButton, fontWeight: FontWeight.normal))
+                              iconSize: DirectionUtils.isDirectionRTLByLanguage(context) ? null : 16,
-                            ..onPressActionClick(() => controller.backToMailboxDashBoard(context))
+                              textStyle: const TextStyle(
-                            ..text(AppLocalizations.of(context).back, isVertical: false))
+                                fontSize: 15,
-                          .build()),
+                                color: AppColor.colorTextButton,
-                        Padding(
+                                fontWeight: FontWeight.normal
-                          padding: const EdgeInsetsDirectional.only(start: 32, top: 20),
+                              ),
-                          child: Text(
+                              onTapActionCallback: () => controller.backToMailboxDashBoard(context),
-                            AppLocalizations.of(context).manage_account,
-                            style: const TextStyle(
-                              color: Colors.black,
-                              fontWeight: FontWeight.bold,
-                              fontSize: 17
-                            )
-                          )
-                        ),
-                        const SizedBox(height: 12),
-                        Obx(() {
-                          if (controller.listAccountMenuItem.isNotEmpty) {
-                            return ListView.builder(
-                              key: const Key('list_manage_account_menu_item'),
-                              padding: const EdgeInsetsDirectional.only(start: 16, end: 8),
-                              shrinkWrap: true,
-                              itemCount: controller.listAccountMenuItem.length,
-                              itemBuilder: (context, index) => Obx(() {
-                                final menuItem = controller.listAccountMenuItem[index];
-                                return AccountMenuItemTileBuilder(
-                                  menuItem,
-                                  controller.dashBoardController.accountMenuItemSelected.value,
-                                  onSelectAccountMenuItemAction: controller.selectAccountMenuItem
-                                );
-                              })
-                            );
-                          } else {
-                            return const SizedBox.shrink();
-                          }
-                        }),
-                        const Padding(
-                            padding: EdgeInsets.symmetric(vertical: 16),
-                            child: Divider(color: AppColor.lineItemListColor, height: 1)),
-                        Padding(
-                          padding: const EdgeInsetsDirectional.only(start: 20, end: 10),
-                          child: Material(
-                            color: Colors.transparent,
-                            child: InkWell(
-                              onTap: () {
-                                controller.dashBoardController.logout(
-                                  controller.dashBoardController.sessionCurrent,
-                                  controller.dashBoardController.accountId.value
-                                );
-                              },
-                              borderRadius: BorderRadius.circular(10),
-                              child: Padding(
-                                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
-                                child: Row(children: [
-                                  SvgPicture.asset(_imagePaths.icSignOut, fit: BoxFit.fill),
-                                  const SizedBox(width: 12),
-                                  Expanded(child: Text(
-                                    AppLocalizations.of(context).sign_out,
-                                    style: const TextStyle(
-                                      fontWeight: FontWeight.normal,
-                                      fontSize: 15,
-                                      color: Colors.black
-                                    )
-                                  ))
-                                ]),
-                              )
                             ),
-                          )
+                          ),
-                        ),
+                          Padding(
-                      ]),
+                            padding: const EdgeInsetsDirectional.only(start: 32, top: 20),
+                            child: Text(
+                              AppLocalizations.of(context).manage_account,
+                              style: const TextStyle(
+                                color: Colors.black,
+                                fontWeight: FontWeight.bold,
+                                fontSize: 17
+                              )
+                            )
+                          ),
+                          const SizedBox(height: 12),
+                          Obx(() {
+                            if (controller.listAccountMenuItem.isNotEmpty) {
+                              return ListView.builder(
+                                key: const Key('list_manage_account_menu_item'),
+                                padding: const EdgeInsetsDirectional.only(start: 16, end: 8),
+                                shrinkWrap: true,
+                                itemCount: controller.listAccountMenuItem.length,
+                                itemBuilder: (context, index) => Obx(() {
+                                  final menuItem = controller.listAccountMenuItem[index];
+                                  return AccountMenuItemTileBuilder(
+                                    menuItem,
+                                    controller.dashBoardController.accountMenuItemSelected.value,
+                                    onSelectAccountMenuItemAction: controller.selectAccountMenuItem
+                                  );
+                                })
+                              );
+                            } else {
+                              return const SizedBox.shrink();
+                            }
+                          }),
+                          const Padding(
+                              padding: EdgeInsets.symmetric(vertical: 16),
+                              child: Divider(color: AppColor.lineItemListColor, height: 1)),
+                          Padding(
+                            padding: const EdgeInsetsDirectional.only(start: 20, end: 10),
+                            child: Material(
+                              color: Colors.transparent,
+                              child: InkWell(
+                                onTap: () {
+                                  controller.dashBoardController.logout(
+                                    controller.dashBoardController.sessionCurrent,
+                                    controller.dashBoardController.accountId.value
+                                  );
+                                },
+                                borderRadius: BorderRadius.circular(10),
+                                child: Padding(
+                                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+                                  child: Row(children: [
+                                    SvgPicture.asset(_imagePaths.icSignOut, fit: BoxFit.fill),
+                                    const SizedBox(width: 12),
+                                    Expanded(child: Text(
+                                      AppLocalizations.of(context).sign_out,
+                                      style: const TextStyle(
+                                        fontWeight: FontWeight.normal,
+                                        fontSize: 15,
+                                        color: Colors.black
+                                      )
+                                    ))
+                                  ]),
+                                )
+                              ),
+                            )
+                          ),
+                        ]
+                      ),
                     )),
                   ]
               )

lib/features/quotas/presentation/quotas_view.dart

@@ -30,7 +30,7 @@ class QuotasView extends GetWidget<QuotasController> {
                 ? QuotasViewStyles.webBackgroundColor
                 : QuotasViewStyles.mobileBackgroundColor,
               border: const Border(
-                top: BorderSide( //                   <--- left side
+                top: BorderSide(
                   color: QuotasViewStyles.topLineColor,
                   width: QuotasViewStyles.topLineSize,
                 )

lib/features/sending_queue/presentation/widgets/bottom_bar_sending_queue_widget.dart

@@ -2,7 +2,7 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/views/button/button_builder.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/state/button_state.dart';
@@ -33,49 +33,70 @@ class BottomBarSendingQueueWidget extends StatelessWidget {
     return Container(
       decoration: const BoxDecoration(
         border: Border(top: BorderSide(
-          color: AppColor.lineItemListColor,
+          color: AppColor.colorDividerHorizontal,
-          width: 0.2,
+          width: 0.5,
         )),
         color: Colors.white
       ),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Expanded(child: (ButtonBuilder(imagePaths.icEdit)
+          Expanded(
-            ..key(Key(SendingEmailActionType.edit.getButtonKey()))
+            child: TMailButtonWidget(
-            ..iconColor(SendingEmailActionType.edit.getButtonIconColor(_isEditable ? ButtonState.enabled : ButtonState.disabled))
+              key: Key(SendingEmailActionType.edit.getButtonKey()),
-            ..padding(const EdgeInsets.all(8))
+              text: SendingEmailActionType.edit.getButtonTitle(context),
-            ..radiusSplash(8)
+              icon: imagePaths.icEdit,
-            ..textStyle(TextStyle(fontSize: 12, color: SendingEmailActionType.edit.getButtonTitleColor(_isEditable ? ButtonState.enabled : ButtonState.disabled)))
+              borderRadius: 8,
-            ..onPressActionClick(() {
+              iconColor: SendingEmailActionType.edit.getButtonIconColor(_isEditable ? ButtonState.enabled : ButtonState.disabled),
-              if (_isEditable) {
+              textStyle: TextStyle(
-                onHandleSendingEmailActionType?.call(SendingEmailActionType.edit, listSendingEmailSelected);
+                fontSize: 12,
-              }
+                color: SendingEmailActionType.edit.getButtonTitleColor(_isEditable ? ButtonState.enabled : ButtonState.disabled)
-            })
+              ),
-            ..text(SendingEmailActionType.edit.getButtonTitle(context), isVertical: responsiveUtils.isPortraitMobile(context))
+              verticalDirection: responsiveUtils.isPortraitMobile(context),
-          ).build()),
+              onTapActionCallback: () {
-          Expanded(child: (ButtonBuilder(imagePaths.icRefresh)
+                if (_isEditable) {
-            ..key(Key(SendingEmailActionType.resend.getButtonKey()))
+                  onHandleSendingEmailActionType?.call(
-            ..iconColor(SendingEmailActionType.resend.getButtonIconColor(_isCanResend ? ButtonState.enabled : ButtonState.disabled))
+                    SendingEmailActionType.edit,
-            ..padding(const EdgeInsets.all(8))
+                    listSendingEmailSelected
-            ..radiusSplash(8)
+                  );
-            ..textStyle(TextStyle(fontSize: 12, color: SendingEmailActionType.resend.getButtonTitleColor(_isCanResend ? ButtonState.enabled : ButtonState.disabled)))
+                }
-            ..onPressActionClick(() {
+              },
-              if (_isCanResend) {
+            ),
-                onHandleSendingEmailActionType?.call(SendingEmailActionType.resend, listSendingEmailSelected);
+          ),
-              }
+          Expanded(
-            })
+            child: TMailButtonWidget(
-            ..text(SendingEmailActionType.resend.getButtonTitle(context), isVertical: responsiveUtils.isPortraitMobile(context))
+              key: Key(SendingEmailActionType.resend.getButtonKey()),
-          ).build()),
+              text: SendingEmailActionType.resend.getButtonTitle(context),
-          Expanded(child: (ButtonBuilder(imagePaths.icDeleteComposer)
+              icon: imagePaths.icRefresh,
-            ..key(Key(SendingEmailActionType.delete.getButtonKey()))
+              borderRadius: 8,
-            ..iconColor(SendingEmailActionType.delete.getButtonIconColor(ButtonState.enabled))
+              iconColor: SendingEmailActionType.resend.getButtonIconColor(_isCanResend ? ButtonState.enabled : ButtonState.disabled),
-            ..padding(const EdgeInsets.all(8))
+              textStyle: TextStyle(
-            ..radiusSplash(8)
+                fontSize: 12,
-            ..textStyle(TextStyle(fontSize: 12, color: SendingEmailActionType.delete.getButtonTitleColor(ButtonState.enabled)))
+                color: SendingEmailActionType.resend.getButtonTitleColor(_isCanResend ? ButtonState.enabled : ButtonState.disabled)
-            ..onPressActionClick(() => onHandleSendingEmailActionType?.call(SendingEmailActionType.delete, listSendingEmailSelected))
+              ),
-            ..text(SendingEmailActionType.delete.getButtonTitle(context), isVertical: responsiveUtils.isPortraitMobile(context))
+              verticalDirection: responsiveUtils.isPortraitMobile(context),
-          ).build())
+              onTapActionCallback: () {
+                if (_isCanResend) {
+                  onHandleSendingEmailActionType?.call(SendingEmailActionType.resend, listSendingEmailSelected);
+                }
+              },
+            ),
+          ),
+          Expanded(
+            child: TMailButtonWidget(
+              key: Key(SendingEmailActionType.delete.getButtonKey()),
+              text: SendingEmailActionType.delete.getButtonTitle(context),
+              icon: imagePaths.icDeleteComposer,
+              borderRadius: 8,
+              iconColor: SendingEmailActionType.delete.getButtonIconColor(ButtonState.enabled),
+              textStyle: TextStyle(
+                fontSize: 12,
+                color: SendingEmailActionType.delete.getButtonTitleColor(ButtonState.enabled)
+              ),
+              verticalDirection: responsiveUtils.isPortraitMobile(context),
+              onTapActionCallback: () => onHandleSendingEmailActionType?.call(SendingEmailActionType.delete, listSendingEmailSelected),
+            ),
+          ),
         ],
       ),
     );

lib/features/thread/presentation/thread_view.dart

@@ -222,9 +222,9 @@ class ThreadView extends GetWidget<ThreadController>
     return Obx(() {
       if (controller.isAllSearchInActive) {
         return Container(
-          padding: PlatformInfo.isWeb
+          padding: PlatformInfo.isMobile && controller.listEmailSelected.isNotEmpty
-            ? EdgeInsets.zero
+            ? EdgeInsets.only(bottom: _responsiveUtils.isTabletLarge(context) ? 85 : 70)
-            : controller.listEmailSelected.isNotEmpty ? const EdgeInsets.only(bottom: 70) : EdgeInsets.zero,
+            : EdgeInsets.zero,
           child: ComposeFloatingButton(
             scrollController: controller.listEmailController,
             onTap: () => controller.mailboxDashBoardController.goToComposer(ComposerArguments())

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

@@ -1,8 +1,7 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/views/button/button_builder.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
-import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:model/email/email_action_type.dart';
 import 'package:model/email/presentation_email.dart';
@@ -35,86 +34,131 @@ class BottomBarThreadSelectionWidget extends StatelessWidget{
   @override
   Widget build(BuildContext context) {
     return Container(
-      key: const Key('bottom_bar_thread_selection_widget'),
       decoration: const BoxDecoration(
         border: Border(top: BorderSide(
-          color: AppColor.lineItemListColor,
+          color: AppColor.colorDividerHorizontal,
-          width: 0.2,
+          width: 0.5,
         )),
-        color: Colors.white
       ),
-      child: Row(
+      child: IntrinsicHeight(
-        mainAxisAlignment: MainAxisAlignment.center,
+        child: Row(
-        children: [
+          children: [
-          if(_currentMailbox?.isDrafts == false)
+            if (_currentMailbox?.isDrafts == false)
-            Expanded(child: (ButtonBuilder(_listSelectionEmail.isAllEmailRead ? _imagePaths.icUnread : _imagePaths.icRead)
+              Expanded(
-              ..key(const Key('button_mark_read_email'))
+                child: TMailButtonWidget(
-              ..padding(const EdgeInsets.all(8))
+                  key: const Key('mark_as_read_selected_email_button'),
-              ..radiusSplash(8)
+                  text: _listSelectionEmail.isAllEmailRead
-              ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
+                    ? AppLocalizations.of(context).unread
-              ..onPressActionClick(() {
+                    : AppLocalizations.of(context).read,
-                onPressEmailSelectionActionClick?.call(
+                  icon: _listSelectionEmail.isAllEmailRead ? _imagePaths.icUnread : _imagePaths.icRead,
-                  _listSelectionEmail.isAllEmailRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead,
+                  borderRadius: 0,
-                  _listSelectionEmail
+                  iconSize: 20,
-                );
+                  flexibleText: true,
-              })
+                  textAlign: TextAlign.center,
-              ..text(_getTextButtonMarkAsRead(context), isVertical: _responsiveUtils.isMobile(context)))
+                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
-            .build()),
+                  backgroundColor: Colors.transparent,
-          Expanded(child: (ButtonBuilder(_listSelectionEmail.isAllEmailStarred ? _imagePaths.icUnStar : _imagePaths.icStar)
+                  textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
-            ..key(const Key('button_mark_as_star_email'))
+                  verticalDirection: _verticalDirection(context),
-            ..padding(const EdgeInsets.all(8))
+                  onTapActionCallback: () {
-            ..radiusSplash(8)
+                    onPressEmailSelectionActionClick?.call(
-            ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
+                      _listSelectionEmail.isAllEmailRead ? EmailActionType.markAsUnread : EmailActionType.markAsRead,
-            ..onPressActionClick(() {
+                      _listSelectionEmail
-              onPressEmailSelectionActionClick?.call(
+                    );
-                _listSelectionEmail.isAllEmailStarred ? EmailActionType.unMarkAsStarred : EmailActionType.markAsStarred,
+                  },
-                _listSelectionEmail
+                ),
-              );
+              ),
-            })
+            Expanded(
-            ..text(_getTextButtonMarkAsStar(context), isVertical: _responsiveUtils.isMobile(context)))
+              child: TMailButtonWidget(
-          .build()),
+                key: const Key('mark_as_star_selected_email_button'),
-          if (_currentMailbox?.isDrafts == false)
+                text: _listSelectionEmail.isAllEmailStarred
-            Expanded(child: (ButtonBuilder(_imagePaths.icMove)
+                  ? AppLocalizations.of(context).un_star
-              ..key(const Key('button_move_to_mailbox'))
+                  : AppLocalizations.of(context).star,
-              ..padding(const EdgeInsets.all(8))
+                icon: _listSelectionEmail.isAllEmailStarred ? _imagePaths.icUnStar : _imagePaths.icStar,
-              ..radiusSplash(8)
+                borderRadius: 0,
-              ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
+                iconSize: 20,
-              ..onPressActionClick(() {
+                flexibleText: true,
-                onPressEmailSelectionActionClick?.call(EmailActionType.moveToMailbox, _listSelectionEmail);
+                textAlign: TextAlign.center,
-              })
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
-              ..text(_getTextButtonMove(context), isVertical: _responsiveUtils.isMobile(context)))
+                backgroundColor: Colors.transparent,
-            .build()),
+                textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
-          if (_currentMailbox?.isDrafts == false)
+                verticalDirection: _verticalDirection(context),
-            Expanded(child: (ButtonBuilder(_currentMailbox?.isSpam == true ? _imagePaths.icNotSpam : _imagePaths.icSpam)
+                onTapActionCallback: () {
-              ..key(const Key('button_move_to_spam'))
+                  onPressEmailSelectionActionClick?.call(
-              ..padding(const EdgeInsets.all(8))
+                    _listSelectionEmail.isAllEmailStarred ? EmailActionType.unMarkAsStarred : EmailActionType.markAsStarred,
-              ..radiusSplash(8)
+                    _listSelectionEmail
-              ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
+                  );
-              ..onPressActionClick(() {
+                },
-                if (_currentMailbox?.isSpam == true) {
+              ),
-                  onPressEmailSelectionActionClick?.call(EmailActionType.unSpam, _listSelectionEmail);
+            ),
-                } else {
+            if (_currentMailbox?.isDrafts == false)
-                  onPressEmailSelectionActionClick?.call(EmailActionType.moveToSpam, _listSelectionEmail);
+              Expanded(
-                }
+                child: TMailButtonWidget(
-              })
+                  key: const Key('move_selected_email_to_mailbox_button'),
-              ..text(_getTextButtonSpam(context), isVertical: _responsiveUtils.isMobile(context)))
+                  text: AppLocalizations.of(context).move,
-            .build()),
+                  icon: _imagePaths.icMove,
-          Expanded(child: (ButtonBuilder(canDeletePermanently ? _imagePaths.icDeleteComposer : _imagePaths.icDelete)
+                  borderRadius: 0,
-            ..key(const Key('button_delete_email'))
+                  iconSize: 20,
-            ..iconColor(canDeletePermanently ? AppColor.colorDeletePermanentlyButton : AppColor.primaryColor)
+                  textAlign: TextAlign.center,
-            ..padding(const EdgeInsets.all(8))
+                  flexibleText: true,
-            ..radiusSplash(8)
+                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
-            ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButton))
+                  backgroundColor: Colors.transparent,
-            ..onPressActionClick(() {
+                  textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
-              if (canDeletePermanently) {
+                  verticalDirection: _verticalDirection(context),
-                onPressEmailSelectionActionClick?.call(EmailActionType.deletePermanently, _listSelectionEmail);
+                  onTapActionCallback: () {
-              } else {
+                    onPressEmailSelectionActionClick?.call(EmailActionType.moveToMailbox, _listSelectionEmail);
-                onPressEmailSelectionActionClick?.call(EmailActionType.moveToTrash, _listSelectionEmail);
+                  },
-              }
+                ),
-            })
+              ),
-            ..text(_getTextButtonDelete(context), isVertical: _responsiveUtils.isMobile(context)))
+            if (_currentMailbox?.isDrafts == false)
-          .build())
+              Expanded(
-        ]
+                child: TMailButtonWidget(
+                  key: const Key('move_selected_email_to_spam_button'),
+                  text: _currentMailbox?.isSpam == true
+                    ? AppLocalizations.of(context).un_spam
+                    : AppLocalizations.of(context).spam,
+                  icon: _currentMailbox?.isSpam == true ? _imagePaths.icNotSpam : _imagePaths.icSpam,
+                  borderRadius: 0,
+                  iconSize: 20,
+                  flexibleText: true,
+                  textAlign: TextAlign.center,
+                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
+                  backgroundColor: Colors.transparent,
+                  textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
+                  verticalDirection: _verticalDirection(context),
+                  onTapActionCallback: () {
+                    if (_currentMailbox?.isSpam == true) {
+                      onPressEmailSelectionActionClick?.call(EmailActionType.unSpam, _listSelectionEmail);
+                    } else {
+                      onPressEmailSelectionActionClick?.call(EmailActionType.moveToSpam, _listSelectionEmail);
+                    }
+                  },
+                ),
+              ),
+            Expanded(
+              child: TMailButtonWidget(
+                key: const Key('delete_selected_email_button'),
+                text: AppLocalizations.of(context).delete,
+                icon: canDeletePermanently ? _imagePaths.icDeleteComposer : _imagePaths.icDelete,
+                iconColor: canDeletePermanently ? AppColor.colorDeletePermanentlyButton : AppColor.primaryColor,
+                borderRadius: 0,
+                iconSize: 20,
+                flexibleText: true,
+                textAlign: TextAlign.center,
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
+                backgroundColor: Colors.transparent,
+                textStyle: const TextStyle(fontSize: 12, color: AppColor.colorTextButton),
+                verticalDirection: _verticalDirection(context),
+                onTapActionCallback: () {
+                  if (canDeletePermanently) {
+                    onPressEmailSelectionActionClick?.call(EmailActionType.deletePermanently, _listSelectionEmail);
+                  } else {
+                    onPressEmailSelectionActionClick?.call(EmailActionType.moveToTrash, _listSelectionEmail);
+                  }
+                },
+              ),
+            ),
+          ]
+        ),
       )
     );
   }
@@ -123,54 +167,9 @@ class BottomBarThreadSelectionWidget extends StatelessWidget{
     return _currentMailbox?.isTrash == true || _currentMailbox?.isDrafts == true;
   }
 
-  String? _getTextButtonMarkAsRead(BuildContext context) {
+  bool _verticalDirection(BuildContext context) {
-    if (!_isMailboxDashboardSplitView(context)) {
+    return _responsiveUtils.isLandscapeMobile(context) ||
-      return _listSelectionEmail.isAllEmailRead
+      _responsiveUtils.isPortraitMobile(context) ||
-        ? AppLocalizations.of(context).unread
+      _responsiveUtils.isTabletLarge(context);
-        : AppLocalizations.of(context).read;
-    }
-    return null;
-  }
-
-  String? _getTextButtonMarkAsStar(BuildContext context) {
-    if (!_isMailboxDashboardSplitView(context)) {
-      return _listSelectionEmail.isAllEmailStarred
-        ? AppLocalizations.of(context).un_star
-        : AppLocalizations.of(context).star;
-    }
-    return null;
-  }
-
-  String? _getTextButtonMove(BuildContext context) {
-    if (!_isMailboxDashboardSplitView(context)) {
-      return AppLocalizations.of(context).move;
-    }
-    return null;
-  }
-
-  String? _getTextButtonSpam(BuildContext context) {
-    if (!_isMailboxDashboardSplitView(context)) {
-      return _currentMailbox?.isSpam == true
-        ? AppLocalizations.of(context).un_spam
-        : AppLocalizations.of(context).spam;
-    }
-    return null;
-  }
-
-  String? _getTextButtonDelete(BuildContext context) {
-    if (!_isMailboxDashboardSplitView(context)) {
-      return AppLocalizations.of(context).delete;
-    }
-    return null;
-  }
-
-  bool _isMailboxDashboardSplitView(BuildContext context) {
-    if (PlatformInfo.isWeb) {
-      return _responsiveUtils.isTabletLarge(context);
-    } else {
-      return _responsiveUtils.isLandscapeTablet(context) ||
-        _responsiveUtils.isTabletLarge(context) ||
-        _responsiveUtils.isDesktop(context);
-    }
   }
 }