TF-249 Change ui mailbox list

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -203,6 +203,10 @@ class MailboxController extends BaseController {
   }
 
   void closeMailboxScreen() {
+    mailboxDashBoardController.closeDrawer();
+  }
+
+  void logoutAction() {
     _deleteCredential();
     _clearAllCache();
     pushAndPopAll(AppRoutes.LOGIN);

lib/features/mailbox/presentation/mailbox_view.dart

@@ -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,

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

@@ -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),
       ));
   }
 }

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

@@ -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);
+                      }
+                    }
+                ))
             ),
         )
       )

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

@@ -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: () => {}))),
     );
   }
 }