TF-249 Change ui mailbox list

2022-02-09 20:00:59 +07:00
parent 2c8cd967c0
commit 6f9b9d27b4
22 changed files with 312 additions and 210 deletions
@@ -7,26 +7,26 @@ extension PresentationMailboxExtension on PresentationMailbox {
     if (hasRole()) {
        switch(role!.value) {
          case 'inbox':
-            return imagePaths.icMailboxInbox;
+            return imagePaths.icMailboxInboxV2;
          case 'drafts':
-            return imagePaths.icMailboxDrafts;
+            return imagePaths.icMailboxDraftsV2;
          case 'outbox':
-            return imagePaths.icMailboxInbox;
+            return imagePaths.icMailboxArchivedV2;
          case 'sent':
-            return imagePaths.icMailboxSent;
+            return imagePaths.icMailboxSentV2;
          case 'trash':
-            return imagePaths.icMailboxTrash;
+            return imagePaths.icMailboxTrashV2;
          case 'spam':
-            return imagePaths.icMailboxSpam;
+            return imagePaths.icMailboxSpamV2;
          case 'templates':
            return imagePaths.icMailboxTemplate;
          case 'all_mail':
            return imagePaths.icMailboxAllMail;
          default:
-            return imagePaths.icMailboxFolder;
+            return imagePaths.icFolderMailbox;
        }
     } else {
-       return imagePaths.icMailboxFolder;
+       return imagePaths.icFolderMailbox;
     }
  }
 }
@@ -203,6 +203,10 @@ class MailboxController extends BaseController {
  }

  void closeMailboxScreen() {
+    mailboxDashBoardController.closeDrawer();
+  }
+
+  void logoutAction() {
    _deleteCredential();
    _clearAllCache();
    pushAndPopAll(AppRoutes.LOGIN);
@@ -5,12 +5,10 @@ import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
-// import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_button_new_folder_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_tile_builder.dart';
-// import 'package:tmail_ui_user/features/mailbox/presentation/widgets/search_form_widget_builder.dart';
-// import 'package:tmail_ui_user/features/mailbox/presentation/widgets/storage_widget_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget_builder.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/search_bar_thread_view_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class MailboxView extends GetWidget<MailboxController> {
@@ -20,78 +18,95 @@ class MailboxView extends GetWidget<MailboxController> {

  @override
  Widget build(BuildContext context) {
-    return  Drawer(
-      child: Scaffold(
-        backgroundColor: AppColor.primaryLightColor,
-        body: SafeArea(
-          right: false,
-          left: false,
-          child: Container(
-            alignment: Alignment.center,
-            child: Column(
-              children: [
-                _buildHeaderMailbox(context),
-                // _buildSearchFormWidget(context),
-                SizedBox(height: 16),
-                Divider(color: AppColor.dividerColor, height: 1),
-                _buildLoadingView(),
-                Expanded(child: RefreshIndicator(
-                  color: AppColor.primaryColor,
-                  onRefresh: () async => controller.refreshAllMailbox(),
-                  child: _buildListMailbox(context)))
-              ]
-            )
+    return SafeArea(
+      top: responsiveUtils.isMobile(context) ? true : false,
+      bottom: false,
+      left: false,
+      right: false,
+      child: ClipRRect(
+        borderRadius: BorderRadius.only(
+          topRight: Radius.circular(responsiveUtils.isMobile(context) ? 14 : 0),
+          topLeft: Radius.circular(14)),
+        child: Drawer(
+          child: Scaffold(
+            backgroundColor: Colors.white,
+            body: Column(
+                children: [
+                  _buildHeaderMailbox(context),
+                  Expanded(child: Container(
+                    color: AppColor.colorBgMailbox,
+                    child: RefreshIndicator(
+                        color: AppColor.primaryColor,
+                        onRefresh: () async => controller.refreshAllMailbox(),
+                        child: _buildListMailbox(context)),
+                  ))
+                ]
+            ),
          )
-        ),
-        // bottomNavigationBar: responsiveUtils.isMobile(context) ? _buildStorageWidget(context) : null
+        )
      )
    );
  }

  Widget _buildHeaderMailbox(BuildContext context) {
-    return ResponsiveWidget(
-      tablet: Column(
-        mainAxisAlignment: MainAxisAlignment.start,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          _buildCloseScreenButton(context),
-          _buildUserInformationWidget(context)
-        ]),
-      mobile: Row(
-        mainAxisAlignment: MainAxisAlignment.start,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          _buildCloseScreenButton(context),
-          Expanded(child: _buildUserInformationWidget(context))
-        ]),
-      responsiveUtils: responsiveUtils);
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: EdgeInsets.only(
+              top: responsiveUtils.isMobile(context) ? 14 : 30,
+              bottom: 10),
+          child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+            !responsiveUtils.isDesktop(context) ? _buildCloseScreenButton(context) : SizedBox(width: 50),
+            Expanded(child: Text(
+              AppLocalizations.of(context).folders,
+              textAlign: TextAlign.center,
+              style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w700),)),
+            _buildAddNewFolderButton(context),
+          ])),
+        Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
+      ]
+    );
  }

  Widget _buildCloseScreenButton(BuildContext context) {
    return Padding(
-      padding: EdgeInsets.only(left: 16, top: responsiveUtils.isMobile(context) ? 0 : 12),
+      padding: EdgeInsets.only(left: 16, right: 16),
      child: IconButton(
        key: Key('mailbox_close_button'),
        onPressed: () => controller.closeMailboxScreen(),
        icon: SvgPicture.asset(imagePaths.icCloseMailbox, width: 30, height: 30, fit: BoxFit.fill)));
  }

+  Widget _buildAddNewFolderButton(BuildContext context) {
+    return Padding(
+        padding: EdgeInsets.only(left: 16, right: 16),
+        child: IconButton(
+            key: Key('mailbox_add_new_folder_button'),
+            onPressed: () => {},
+            icon: SvgPicture.asset(imagePaths.icAddNewFolder, width: 30, height: 30, fit: BoxFit.fill)));
+  }
+
  Widget _buildUserInformationWidget(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 16, top: 8.0, right: 16),
-      child: Obx(() => UserInformationWidgetBuilder(
-          // imagePaths,
+      child: Obx(() => (UserInformationWidgetBuilder(
+          imagePaths,
+          context,
          controller.mailboxDashBoardController.userProfile.value)
-        .build()));
+        ..addOnLogoutAction(() => controller.logoutAction()))
+      .build()));
  }

-  // Widget _buildSearchFormWidget(BuildContext context) {
-  //   return Padding(
-  //     padding: EdgeInsets.only(top: 16, left: 16, right: 16),
-  //     child: SearchFormWidgetBuilder(context, imagePaths)
-  //       .onNewSearchQuery((searchQuery) => {})
-  //       .build());
-  // }
+  Widget _buildSearchFormWidget(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(top: 12),
+      child: (SearchBarThreadViewWidget(imagePaths)
+          ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
+          ..addOnOpenSearchViewAction(() {}))
+        .build());
+  }

  Widget _buildLoadingView() {
    return Obx(() => controller.viewState.value.fold(
@@ -113,37 +128,41 @@ class MailboxView extends GetWidget<MailboxController> {
      shrinkWrap: true,
      padding: EdgeInsets.zero,
      children: [
+        _buildUserInformationWidget(context),
+        Padding(
+          padding: EdgeInsets.only(top: 16),
+          child: Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2)),
+        _buildSearchFormWidget(context),
+        _buildLoadingView(),
        Obx(() => controller.defaultMailboxList.isNotEmpty
-          ? _buildDefaultMailbox(context, controller.defaultMailboxList)
+          ? Container(
+              decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(14),
+                  color: Colors.white),
+              margin: EdgeInsets.only(left: 16, right: 16, top: 4),
+              child: _buildDefaultMailbox(context, controller.defaultMailboxList))
          : SizedBox.shrink()),
        Padding(
-          padding: EdgeInsets.only(
-            left: 25,
-            top: 20),
+          padding: EdgeInsets.only(left: 25, top: 26, bottom: 12),
          child: Text(
-            AppLocalizations.of(context).my_folders,
+            AppLocalizations.of(context).folders,
            maxLines: 1,
-            style: TextStyle(fontSize: 12, color: AppColor.myFolderTitleColor, fontWeight: FontWeight.w500))
+            style: TextStyle(fontSize: 20, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
+        ),
+        Container(
+          decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(14),
+              color: Colors.white),
+          margin: EdgeInsets.only(left: 16, right: 16, bottom: 30),
+          child: _buildFolderMailbox(context),
        ),
-        // Padding(
-        //   padding: EdgeInsets.only(
-        //     left: 8,
-        //     right: 16,
-        //     top: 10),
-        //   child: (MailboxNewFolderTileBuilder()
-        //       ..addIcon(imagePaths.icMailboxNewFolder)
-        //       ..addName(AppLocalizations.of(context).new_folder))
-        //     .build()
-        // ),
-        SizedBox(height: 10),
-        _buildFolderMailbox(context),
      ]
    );
  }

  Widget _buildDefaultMailbox(BuildContext context, List<PresentationMailbox> defaultMailbox) {
    return ListView.builder(
-      padding: EdgeInsets.only(top: 16, left: 16, right: 16),
+      padding: EdgeInsets.only(top: 8, left: 8, right: 8),
      key: PageStorageKey('default_mailbox_list'),
      itemCount: defaultMailbox.length,
      shrinkWrap: true,
@@ -164,7 +183,7 @@ class MailboxView extends GetWidget<MailboxController> {
        ? Transform(
            transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
            child: Padding(
-              padding: EdgeInsets.only(right: 12),
+              padding: EdgeInsets.only(right: 12, top: 10),
              child: TreeView(
                startExpanded: false,
                key: Key('folder_mailbox_list'),
@@ -178,7 +197,7 @@ class MailboxView extends GetWidget<MailboxController> {
    return listMailboxNode
      .map((mailboxNode) => mailboxNode.hasChildren()
          ? Padding(
-              padding: EdgeInsets.only(left: 20),
+              padding: EdgeInsets.only(left: 16),
              child: TreeViewChild(
                  context,
                  key: Key('children_tree_mailbox_child'),
@@ -197,7 +216,7 @@ class MailboxView extends GetWidget<MailboxController> {
                  children: _buildListChildTileWidget(context, mailboxNode.childrenItems!)
              ).build())
          : Padding(
-              padding: EdgeInsets.only(left: 20),
+              padding: EdgeInsets.only(left: 16),
              child: Obx(() => (MailBoxFolderTileBuilder(
                      context,
                      imagePaths,
@@ -51,51 +51,46 @@ class MailBoxFolderTileBuilder {
        key: Key('mailbox_folder_tile'),
        alignment: Alignment.center,
        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular( mailboxDisplayed == MailboxDisplayed.mailbox ? 16 : 0),
+          borderRadius: BorderRadius.circular(mailboxDisplayed == MailboxDisplayed.mailbox ? 10 : 0),
          color: mailboxDisplayed == MailboxDisplayed.mailbox
            ? selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedBackgroundColor : AppColor.mailboxBackgroundColor
-            : AppColor.bgMailboxListMail
+            : Colors.white
        ),
        child: MediaQuery(
          data: MediaQueryData(padding: EdgeInsets.zero),
-          child: ListTile(
-            onTap: () {
-              if (_onSelectMailboxFolderClick != null) {
-                _onSelectMailboxFolderClick!(_mailboxNode);
-              }
-            },
-            contentPadding: EdgeInsets.zero,
-            leading: Padding(
-              padding: EdgeInsets.only(left: 26),
-              child: SvgPicture.asset(
-                _imagePaths.icMailboxFolder,
-                width: 24,
-                height: 24,
-                color: selectMode == SelectMode.ACTIVE
-                  ? AppColor.mailboxSelectedIconColor
-                  : AppColor.mailboxIconColor,
-                fit: BoxFit.fill)),
-            title: _buildTitleFolderItem(),
-            trailing: _mailboxNode.hasChildren()
-              ? Padding(
-                  padding: EdgeInsets.only(
-                    right: mailboxDisplayed == MailboxDisplayed.mailbox
-                      ? _responsiveUtils.isMobile(_context) ? 0 : 8
-                      : 0,
-                    left: 16),
-                  child: IconButton(
-                    color: AppColor.primaryColor,
-                    icon: SvgPicture.asset(
-                      _mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icFolderArrow,
-                      color: selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedIconColor : AppColor.mailboxIconColor,
-                      fit: BoxFit.fill),
-                    onPressed: () {
-                      if (_onExpandFolderActionClick != null) {
-                        _onExpandFolderActionClick!(_mailboxNode);
-                      }
-                    }))
-              : null
-          )
+          child: Column(children: [
+            ListTile(
+              onTap: () {
+                if (_onSelectMailboxFolderClick != null) {
+                  _onSelectMailboxFolderClick!(_mailboxNode);
+                }
+              },
+              contentPadding: EdgeInsets.zero,
+              leading: Padding(
+                  padding: EdgeInsets.only(left: 8),
+                  child: SvgPicture.asset(_imagePaths.icFolderMailbox, width: 28, height: 28, fit: BoxFit.fill)),
+              title: _buildTitleFolderItem(),
+              trailing: _mailboxNode.hasChildren()
+                  ? Padding(
+                      padding: EdgeInsets.only(right: mailboxDisplayed == MailboxDisplayed.mailbox ? _responsiveUtils.isMobile(_context) ? 0 : 8 : 0, left: 16),
+                      child: IconButton(
+                          color: AppColor.primaryColor,
+                          icon: SvgPicture.asset(
+                              _mailboxNode.expandMode == ExpandMode.EXPAND ? _imagePaths.icExpandFolder : _imagePaths.icFolderArrow,
+                              color: selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedIconColor : AppColor.colorArrowUserMailbox,
+                              fit: BoxFit.fill),
+                          onPressed: () {
+                            if (_onExpandFolderActionClick != null) {
+                              _onExpandFolderActionClick!(_mailboxNode);
+                            }
+                          }
+                      ))
+                  : null
+            ),
+            Padding(
+                padding: EdgeInsets.only(left: 45),
+                child: Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
+          ])
        )
      )
    );
@@ -104,16 +99,15 @@ class MailBoxFolderTileBuilder {
  Widget _buildTitleFolderItem() {
    return Row(
      children: [
-        Expanded(child: Padding(
-          padding: EdgeInsets.only(left: 8),
+        Expanded(child: Transform(
+          transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
          child: Text(
            '${_mailboxNode.item.name?.name ?? ''}',
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 15,
-              color: selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedTextColor : AppColor.mailboxTextColor,
-              fontWeight: mailboxDisplayed == MailboxDisplayed.mailbox ? FontWeight.bold : FontWeight.w500),
+              color: AppColor.colorNameEmail),
          ))),
        if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty && mailboxDisplayed == MailboxDisplayed.mailbox)
          !_mailboxNode.hasChildren()
@@ -136,10 +130,7 @@ class MailBoxFolderTileBuilder {
        '${_mailboxNode.item.getCountUnReadEmails()} ${AppLocalizations.of(_context).unread_email_notification}',
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
-        style: TextStyle(
-          fontSize: 10,
-          color: selectMode == SelectMode.ACTIVE ? AppColor.mailboxTextColor : AppColor.counterMailboxColor,
-          fontWeight: FontWeight.bold),
+        style: TextStyle(fontSize: 12, color: AppColor.colorNameEmail),
      ));
  }
 }
@@ -1,8 +1,5 @@
-import 'dart:ui';
-
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
@@ -41,10 +38,10 @@ class MailboxTileBuilder {
        key: Key('mailbox_list_tile'),
        alignment: Alignment.center,
        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(mailboxDisplayed == MailboxDisplayed.mailbox ? 16 : 0),
+          borderRadius: BorderRadius.circular(mailboxDisplayed == MailboxDisplayed.mailbox ? 10 : 0),
          color: mailboxDisplayed == MailboxDisplayed.mailbox
            ? selectMode == SelectMode.ACTIVE ? AppColor.mailboxSelectedBackgroundColor : AppColor.mailboxBackgroundColor
-            : AppColor.bgMailboxListMail
+            : Colors.white
        ),
        child: MediaQuery(
          data: MediaQueryData(padding: EdgeInsets.zero),
@@ -56,41 +53,40 @@ class MailboxTileBuilder {
              }
            },
            leading: Padding(
-              padding: EdgeInsets.only(left: 24),
+              padding: EdgeInsets.only(left: 8),
              child: SvgPicture.asset(
                '${_presentationMailbox.getMailboxIcon(_imagePaths)}',
-                width: 24,
-                height: 24,
-                color: selectMode == SelectMode.ACTIVE
-                  ? AppColor.mailboxSelectedIconColor
-                  : AppColor.mailboxIconColor,
+                width: 28,
+                height: 28,
                fit: BoxFit.fill)),
-            title: Padding(
-              padding: EdgeInsets.only(left: 8),
-              child: Text(
-                '${_presentationMailbox.name?.name ?? ''}',
-                maxLines: 1,
-                overflow:TextOverflow.ellipsis,
-                style: TextStyle(
-                  fontSize: 15,
-                  color: selectMode == SelectMode.ACTIVE
-                    ? AppColor.mailboxSelectedTextColor
-                    : AppColor.mailboxTextColor,
-                  fontWeight: mailboxDisplayed == MailboxDisplayed.mailbox ? FontWeight.bold : FontWeight.w500),
-              )),
-            trailing: mailboxDisplayed == MailboxDisplayed.mailbox
-                ? Padding(
-                    padding: EdgeInsets.only(right: 24, left: 16),
-                    child: Text(
-                      '${_presentationMailbox.getCountUnReadEmails()}',
-                      maxLines: 1,
-                      style: TextStyle(
-                          fontSize: 15,
-                          color: selectMode == SelectMode.ACTIVE
-                              ? AppColor.mailboxSelectedTextNumberColor
-                              : AppColor.mailboxTextNumberColor,
-                          fontWeight: FontWeight.bold)))
-                : SizedBox.shrink()
+            title: Transform(
+              transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
+              child: Row(children: [
+                Expanded(child: Text(
+                  '${_presentationMailbox.name?.name ?? ''}',
+                  maxLines: 1,
+                  overflow:TextOverflow.ellipsis,
+                  style: TextStyle(fontSize: 15, color: AppColor.colorNameEmail),
+                )),
+                if (mailboxDisplayed == MailboxDisplayed.mailbox)
+                  Transform(
+                      transform: Matrix4.translationValues(40.0, 0.0, 0.0),
+                      child: Text(
+                          '${_presentationMailbox.getCountUnReadEmails()}',
+                          maxLines: 1,
+                          style: TextStyle(fontSize: 13, color: AppColor.colorNameEmail)))
+              ])),
+            trailing: Transform(
+                transform: Matrix4.translationValues(8.0, 0.0, 0.0),
+                child: IconButton(
+                    color: AppColor.primaryColor,
+                    icon: SvgPicture.asset(_imagePaths.icFolderArrow, color: AppColor.colorArrowUserMailbox, fit: BoxFit.fill),
+                    onPressed: () {
+                      if (_onOpenMailboxActionClick != null) {
+                        _onOpenMailboxActionClick!(_presentationMailbox);
+                      }
+                    }
+                ))
            ),
        )
      )
@@ -1,60 +1,83 @@
-import 'dart:ui';

 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
-// import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/model.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

-typedef OnOpenUserInformationActionClick = void Function();
+typedef OnLogoutActionClick = void Function();

 class UserInformationWidgetBuilder {
-  // final ImagePaths _imagePaths;
+  final ImagePaths _imagePaths;
  final UserProfile? _userProfile;
+  final BuildContext _context;

-  OnOpenUserInformationActionClick? _onOpenUserInformationActionClick;
+  OnLogoutActionClick? _onLogoutActionClick;

  UserInformationWidgetBuilder(
-    // this._imagePaths,
-    this._userProfile
+    this._imagePaths,
+    this._context,
+    this._userProfile,
  );

-  UserInformationWidgetBuilder onOpenUserInformationAction(
-      OnOpenUserInformationActionClick onOpenUserInformationActionClick) {
-    _onOpenUserInformationActionClick = onOpenUserInformationActionClick;
-    return this;
+  void addOnLogoutAction(OnLogoutActionClick onLogoutActionClick) {
+    _onLogoutActionClick = onLogoutActionClick;
  }

  Widget build() {
    return Container(
      key: Key('user_information_widget'),
-      alignment: Alignment.center,
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(16),
-        color: AppColor.userInformationBackgroundColor),
+      color: Colors.transparent,
+      padding: EdgeInsets.zero,
+      margin: EdgeInsets.zero,
      child: ListTile(
-        onTap: () {
-          if (_onOpenUserInformationActionClick != null) {
-            _onOpenUserInformationActionClick!();
-          }
-        },
-        leading: (AvatarBuilder()
-            ..text(_userProfile != null ? _userProfile!.getAvatarText() : '')
-            ..size(40))
-          .build(),
-        title: Transform(
+        contentPadding: EdgeInsets.zero,
+        onTap: () {},
+        leading: Transform(
          transform: Matrix4.translationValues(0.0, 0.0, 0.0),
+          child: (AvatarBuilder()
+              ..text(_userProfile != null ? _userProfile!.getAvatarText() : '')
+              ..backgroundColor(Colors.white)
+              ..textColor(Colors.black)
+              ..addBoxShadows([BoxShadow(
+                color: AppColor.colorShadowBgContentEmail,
+                spreadRadius: 2,
+                blurRadius: 2,
+                offset: Offset(0, 1), // changes position of shadow
+              )])
+              ..size(56))
+            .build(),
+        ),
+        title: Transform(
+          transform: Matrix4.translationValues(8.0, 16.0, 0.0),
          child: Text(
            _userProfile != null ? _userProfile!.email : '',
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
-            style: TextStyle(fontSize: 16, color: AppColor.nameUserColor, fontWeight: FontWeight.w500),
-          ))),
-        // trailing: Transform(
-        //   transform: Matrix4.translationValues(0.0, 0.0, 0.0),
-        //   child: IconButton(
-        //     icon: SvgPicture.asset(_imagePaths.icNextArrow, width: 7, height: 12, fit: BoxFit.fill),
-        //     onPressed: () => {}))),
+            style: TextStyle(fontSize: 17, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
+        ),
+        subtitle: Transform(
+          transform: Matrix4.translationValues(0.0, 8.0, 0.0),
+          child: Material(
+            borderRadius: BorderRadius.circular(12),
+            color: Colors.transparent,
+            child: Align(
+              alignment: Alignment.centerLeft,
+              child: TextButton(
+                onPressed: () => _onLogoutActionClick?.call(),
+                child: Text(
+                  AppLocalizations.of(_context).logout,
+                  style: TextStyle(fontSize: 14, color: AppColor.colorTextButton),
+                ),
+              )
+            )
+          )
+        ),
+        trailing: Transform(
+          transform: Matrix4.translationValues(10.0, 0.0, 0.0),
+          child: IconButton(
+            icon: SvgPicture.asset(_imagePaths.icNextArrow, width: 7, height: 12, fit: BoxFit.fill, color: AppColor.colorArrowUserMailbox),
+            onPressed: () => {}))),
    );
  }
 }
@@ -22,6 +22,9 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> {
                ? responsiveUtils.getSizeWidthScreen(context)
                : responsiveUtils.getSizeWidthScreen(context) / 2),
        tablet: Container(
+            child: MailboxView(),
+            width: responsiveUtils.getSizeWidthScreen(context) / 2),
+        tabletLarge: Container(
            child: MailboxView(),
            width: responsiveUtils.getSizeWidthScreen(context) * 0.35),
        desktop: null
@@ -38,7 +38,8 @@ class ThreadView extends GetWidget<ThreadController> {
              children: [
                _buildAppBarThread(context),
                Obx(() => !controller.isSearchActive()
-                  ? (SearchBarThreadViewWidget(context, imagePaths)
+                  ? (SearchBarThreadViewWidget(imagePaths)
+                      ..hintTextSearch(AppLocalizations.of(context).hint_search_emails)
                      ..addOnOpenSearchViewAction(() => controller.enableSearch(context)))
                    .build()
                  : SizedBox.shrink()),
@@ -2,24 +2,20 @@
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 typedef OnOpenSearchViewAction = Function();

 class SearchBarThreadViewWidget {
 OnOpenSearchViewAction? _onOpenSearchViewAction;

- final BuildContext _context;
 final ImagePaths _imagePaths;

  double? _heightSearchBar;
  EdgeInsets? _padding;
  EdgeInsets? _margin;
+  String? _hintTextSearch;

- SearchBarThreadViewWidget(
-    this._context,
-    this._imagePaths,
-  );
+ SearchBarThreadViewWidget(this._imagePaths);

  void addOnOpenSearchViewAction(OnOpenSearchViewAction onOpenSearchViewAction) {
    _onOpenSearchViewAction = onOpenSearchViewAction;
@@ -37,6 +33,10 @@ class SearchBarThreadViewWidget {
    _margin = margin;
  }

+  void hintTextSearch(String text) {
+    _hintTextSearch = text;
+  }
+
  Widget build() {
    return GestureDetector(
      onTap: () => _onOpenSearchViewAction?.call(),
@@ -56,7 +56,7 @@ class SearchBarThreadViewWidget {
                children: [
                  _buildSearchButton(),
                  Text(
-                    AppLocalizations.of(_context).hint_search_emails,
+                    _hintTextSearch ?? '',
                    style: TextStyle(fontSize: 17, color: AppColor.colorHintSearchBar),)
                ]
              )
@@ -526,4 +526,22 @@ class AppLocalizations {
        args: [action]
    );
  }
+
+  String get folders {
+    return Intl.message(
+        'Folders',
+        name: 'folders'
+    );
+  }
+
+  String get logout {
+    return Intl.message('Logout',
+        name: 'logout');
+  }
+
+  String get hint_search_mailboxes {
+    return Intl.message(
+        'Search for mailboxes',
+        name: 'hint_search_mailboxes');
+  }
 }