TF-3763 Update background color, padding, border for advanced search input field

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/mailbox_dashboard/presentation/styles/advanced_search_input_form_style.dart

@@ -6,4 +6,10 @@ class AdvancedSearchInputFormStyle {
   static TextStyle inputTextStyle = ThemeUtils.textStyleBodyBody3(
     color: AppColor.m3SurfaceBackground,
   );
+
+  static const double inputFieldBorderRadius = 10;
+  static const double inputFieldBorderWidth = 1;
+
+  static const Color inputFieldBorderColor = AppColor.m3Neutral90;
+  static const Color inputFieldBackgroundColor = Colors.white;
 }

lib/features/mailbox_dashboard/presentation/styles/sort_by_drop_down_style.dart

@@ -5,7 +5,6 @@ class SortByDropdownStyle {
   static const int dropdownElevation = 4;
   
   static const double height = 44;
-  static const double buttonBorderWidth = 0.5;
   static const double dropdownMaxHeight = 332;
   static const double scrollbarThickness = 6;
   static const double checkedIconSize = 20;
@@ -17,13 +16,11 @@ class SortByDropdownStyle {
     color: Colors.white
   );
 
-  static const EdgeInsetsDirectional buttonPadding = EdgeInsetsDirectional.only(start: 12, end: 10);
+  static const EdgeInsetsDirectional buttonPadding = EdgeInsetsDirectional.only(start: 12, end: 8);
   static const MenuItemStyleData menuItemStyleData = MenuItemStyleData(
     height: height,
     padding: EdgeInsets.symmetric(horizontal: 12),
   );
 
-  static const BorderRadius buttonBorderRadius = BorderRadius.all(Radius.circular(10));
-
   static const Radius dropdownScrollbarRadius = Radius.circular(40);
 }

lib/features/mailbox_dashboard/presentation/styles/text_field_autocomplete_email_address_web_style.dart

@@ -2,17 +2,15 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:tmail_ui_user/features/composer/presentation/styles/composer_style.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/advanced_search_input_form_style.dart';
 
 class TextFieldAutoCompleteEmailAddressWebStyles {
-  static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(vertical: 8);
+  static const EdgeInsetsGeometry textInputContentPadding = EdgeInsetsDirectional.only(top: 16, bottom: 16, start: 12, end: 8);
-  static const EdgeInsetsGeometry textInputContentPadding = EdgeInsetsDirectional.only(top: 16, bottom: 16, start: 12);
   static const EdgeInsetsGeometry textInputContentPaddingWithSomeTag = EdgeInsetsDirectional.symmetric(vertical: 16);
   static const EdgeInsets tagEditorPadding = EdgeInsets.symmetric(horizontal: 12);
 
-  static const double borderRadius = 10.0;
   static const double suggestionBoxRadius = 20.0;
 
-  static const double borderWidth = 1.0;
   static const double minTextFieldWidth = 40.0;
 
   static const double suggestionBoxElevation = 20.0;
@@ -20,27 +18,21 @@ class TextFieldAutoCompleteEmailAddressWebStyles {
   static const double suggestionBoxItemHeight = ComposerStyle.suggestionItemHeight;
 
   static const double fieldTitleWidth = 112.0;
-  static const double space = 8.0;
+  static const double space = 12.0;
 
   static const InputBorder textInputBorder = OutlineInputBorder(
-    borderRadius: BorderRadius.all(Radius.circular(10)),
+    borderRadius: BorderRadius.all(Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius)),
     borderSide: BorderSide.none,
   );
 
   static const Color textInputFillColor = Colors.white;
   static const Color focusedBorderColor = AppColor.primaryColor;
-  static const Color enableBorderColor = AppColor.colorInputBorderCreateMailbox;
   static const Color suggestionBoxBackgroundColor = Colors.white;
   static const Color cursorColor = AppColor.primaryColor;
 
   static TextStyle textInputHintStyle = ThemeUtils.textStyleBodyBody3(
     color: AppColor.m3Tertiary,
   );
-  static const TextStyle textInputTextStyle = TextStyle(
-    fontSize: 16,
-    color: Colors.black,
-    fontWeight: FontWeight.w500,
-  );
 
   static const Duration debounceDuration = Duration(milliseconds: 150);
 }

lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_form_bottom_view.dart

@@ -21,21 +21,18 @@ class AdvancedSearchFilterFormBottomView extends GetWidget<AdvancedFilterControl
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return Column(
-      padding: EdgeInsets.only(top: !controller.responsiveUtils.isWebDesktop(context) ? 8 : 20),
+      crossAxisAlignment: CrossAxisAlignment.start,
-      child: Column(
+      children: [
-        crossAxisAlignment: CrossAxisAlignment.start,
+        Transform(
-        children: [
+          transform: Matrix4.translationValues(-8.0, 0.0, 0.0),
-          Transform(
+          child: _buildCheckboxHasAttachment(
-            transform: Matrix4.translationValues(-8.0, 0.0, 0.0),
+            context,
-            child: _buildCheckboxHasAttachment(
+            currentFocusNode: focusManager.attachmentCheckboxFocusNode,
-              context,
+            nextFocusNode: focusManager.searchButtonFocusNode),
-              currentFocusNode: focusManager.attachmentCheckboxFocusNode,
+        ),
-              nextFocusNode: focusManager.searchButtonFocusNode),
+        _buildListButton(context, controller.responsiveUtils),
-          ),
+      ],
-          _buildListButton(context, controller.responsiveUtils),
-        ],
-      ),
     );
   }
 

lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_filter_overlay.dart

@@ -17,8 +17,7 @@ class AdvancedSearchFilterOverlay extends StatelessWidget {
           constraints: BoxConstraints(
             maxHeight: _getHeightOverlay(context),
           ),
-          margin: const EdgeInsetsDirectional.only(top: 4, bottom: 16),
+          margin: const EdgeInsetsDirectional.only(top: 2, bottom: 16),
-          padding: const EdgeInsets.symmetric(horizontal: 8),
           decoration: const BoxDecoration(
             color: Colors.white,
             borderRadius: BorderRadius.all(Radius.circular(16)),
@@ -34,7 +33,7 @@ class AdvancedSearchFilterOverlay extends StatelessWidget {
             ]
           ),
           child: SingleChildScrollView(
-            padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
+            padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 32),
             child: AdvancedSearchInputForm(),
           ),
         ),

lib/features/mailbox_dashboard/presentation/widgets/advanced_search/advanced_search_input_form.dart

@@ -45,6 +45,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
             onSearchAction: controller.onSearchAction,
             onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
           )),
+          const SizedBox(height: 12),
           Obx(() => TextFieldAutocompleteEmailAddressWeb(
             field: AdvancedSearchFilterField.to,
             listEmailAddress: controller.listToEmailAddress,
@@ -62,6 +63,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
             onSearchAction: controller.onSearchAction,
             onRemoveDraggableEmailAddressAction: controller.removeDraggableEmailAddress,
           )),
+          const SizedBox(height: 12),
           _buildFilterField(
             textEditingController: controller.subjectFilterInputController,
             context: context,
@@ -73,6 +75,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
               value
             ),
           ),
+          const SizedBox(height: 12),
           _buildFilterField(
             textEditingController: controller.hasKeyWordFilterInputController,
             context: context,
@@ -84,6 +87,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
               value
             ),
           ),
+          const SizedBox(height: 12),
           _buildFilterField(
             textEditingController: controller.notKeyWordFilterInputController,
             context: context,
@@ -95,6 +99,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
               value
             ),
           ),
+          const SizedBox(height: 12),
           _buildFilterField(
             textEditingController: controller.mailBoxFilterInputController,
             context: context,
@@ -105,6 +110,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
             mouseCursor: SystemMouseCursors.click,
             onTap: () => controller.selectedMailBox(context)
           ),
+          const SizedBox(height: 12),
           Row(children: [
            Expanded(child: _buildFilterField(
              context: context,
@@ -117,21 +123,37 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
                );
              },
            )),
-            const SizedBox(width: 10),
+            const SizedBox(width: 8),
-            buildIconWeb(
+            Container(
-                icon: SvgPicture.asset(
+              decoration: BoxDecoration(
-                    controller.imagePaths.icCalendarSB,
+                border: Border.all(
-                    width: 24,
+                  color: AdvancedSearchInputFormStyle.inputFieldBorderColor,
-                    height: 24,
+                  width: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
-                    fit: BoxFit.fill),
+                ),
-                tooltip: AppLocalizations.of(context).selectDate,
+                borderRadius: const BorderRadius.all(
-                iconPadding: EdgeInsets.zero,
+                  Radius.circular(
-                onTap: () => controller.selectDateRange(context)),
+                    AdvancedSearchInputFormStyle.inputFieldBorderRadius,
+                  ),
+                ),
+              ),
+              height: 44,
+              width: 44,
+              child: TMailButtonWidget.fromIcon(
+                icon: controller.imagePaths.icCalendarSB,
+                iconSize: 22,
+                iconColor: AppColor.steelGray400,
+                backgroundColor: Colors.transparent,
+                tooltipMessage: AppLocalizations.of(context).selectDate,
+                onTapActionCallback: () => controller.selectDateRange(context),
+              ),
+            ),
           ]),
+          const SizedBox(height: 12),
           _buildFilterField(
             context: context,
             advancedSearchFilterField: AdvancedSearchFilterField.sortBy
           ),
+          const SizedBox(height: 24),
           AdvancedSearchFilterFormBottomView(focusManager: controller.focusManager)
         ],
       ),
@@ -165,13 +187,15 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
   }) {
     final child = [
       SizedBox(
-        width: controller.responsiveUtils.isMobile(context) || controller.responsiveUtils.landscapeTabletSupported(context)
+        width: _isVerticalArrange(context) ? null : 112,
-            ? null : 112,
         child: LabelAdvancedSearchFieldWidget(
           name: advancedSearchFilterField.getTitle(context),
         ),
       ),
-      const Padding(padding: EdgeInsets.all(4)),
+      if (_isVerticalArrange(context))
+        const SizedBox(height: 12)
+      else
+        const SizedBox(width: 12),
       if (controller.responsiveUtils.isMobile(context))
         _buildTextField(
           isSelectFormList: isSelectFormList,
@@ -226,19 +250,20 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
           ),
         )
     ];
-    return Padding(
+    return _isVerticalArrange(context)
-      padding: const EdgeInsets.symmetric(vertical: 8),
+        ? Column(
-      child: controller.responsiveUtils.isMobile(context) || controller.responsiveUtils.landscapeTabletSupported(context)
+            mainAxisAlignment: MainAxisAlignment.start,
-          ? Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
-              crossAxisAlignment: CrossAxisAlignment.start,
+            children: child,
-              mainAxisSize: MainAxisSize.min,
+          )
-              children: child,
+        : SizedBox(height: 44, child: Row(children: child));
-            )
-          : SizedBox(height: 44, child: Row(children: child)),
-    );
   }
 
+  bool _isVerticalArrange(BuildContext context) =>
+      controller.responsiveUtils.isMobile(context) ||
+      controller.responsiveUtils.landscapeTabletSupported(context);
+
   Widget _buildTextFieldFilterForWeb({
     required BuildContext context,
     required AdvancedSearchFilterField advancedSearchFilterField,
@@ -318,32 +343,32 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
         onTextChange: onTextChange,
         decoration: InputDecoration(
           filled: true,
-          fillColor: isSelectFormList ? AppColor.colorItemSelected : Colors.white,
+          fillColor: AdvancedSearchInputFormStyle.inputFieldBackgroundColor,
-          contentPadding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
+          contentPadding: const EdgeInsetsDirectional.only(start: 12, end: 8),
-          enabledBorder: OutlineInputBorder(
+          enabledBorder: const OutlineInputBorder(
-            borderRadius: const BorderRadius.all(
+            borderRadius: BorderRadius.all(
-              Radius.circular(10),
+              Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius),
             ),
             borderSide: BorderSide(
-              width: isSelectFormList ? 0.5 : 1,
+              width: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
-              color: AppColor.colorInputBorderCreateMailbox,
+              color: AdvancedSearchInputFormStyle.inputFieldBorderColor,
             ),
           ),
-          border: OutlineInputBorder(
+          border: const OutlineInputBorder(
-            borderRadius: const BorderRadius.all(
+            borderRadius: BorderRadius.all(
-              Radius.circular(10),
+              Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius),
             ),
             borderSide: BorderSide(
-              width: isSelectFormList ? 0.5 : 1,
+              width: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
-              color: AppColor.colorInputBorderCreateMailbox,
+              color: AdvancedSearchInputFormStyle.inputFieldBorderColor,
             ),
           ),
-          focusedBorder: OutlineInputBorder(
+          focusedBorder: const OutlineInputBorder(
-            borderRadius: const BorderRadius.all(
+            borderRadius: BorderRadius.all(
-              Radius.circular(10),
+              Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius),
             ),
             borderSide: BorderSide(
-              width: isSelectFormList ? 0.5 : 1,
+              width: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
               color: AppColor.primaryColor,
             ),
           ),

lib/features/mailbox_dashboard/presentation/widgets/advanced_search/date_drop_down_button.dart

@@ -1,4 +1,3 @@
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/style_utils.dart';
 import 'package:dropdown_button2/dropdown_button2.dart';
@@ -38,14 +37,16 @@ class DateDropDownButton extends StatelessWidget {
           customButton: Container(
             height: 44,
             decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
+              borderRadius: const BorderRadius.all(
-              border: Border.all(
+                Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius),
-                color: AppColor.colorInputBorderCreateMailbox,
-                width: 0.5,
               ),
-              color: AppColor.colorInputBackgroundCreateMailbox
+              border: Border.all(
+                color: AdvancedSearchInputFormStyle.inputFieldBorderColor,
+                width: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
+              ),
+              color: AdvancedSearchInputFormStyle.inputFieldBackgroundColor,
             ),
-            padding: const EdgeInsets.only(left: 12, right: 10),
+            padding: const EdgeInsetsDirectional.only(start: 12, end: 8),
             child: Row(children: [
               Expanded(child: Text(
                 receiveTimeSelected?.getTitle(context, startDate: startDate, endDate: endDate) ?? '',
@@ -64,13 +65,17 @@ class DateDropDownButton extends StatelessWidget {
           },
           buttonStyleData: ButtonStyleData(
             height: 44,
-            padding: const EdgeInsets.symmetric(horizontal: 12),
+            padding: const EdgeInsetsDirectional.only(start: 12, end: 8),
             decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
+              borderRadius: const BorderRadius.all(
+                Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius),
+              ),
               border: Border.all(
-                color: AppColor.colorInputBorderCreateMailbox,
+                color: AdvancedSearchInputFormStyle.inputFieldBorderColor,
-                width: 1),
+                width: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
-              color: AppColor.colorInputBackgroundCreateMailbox)
+              ),
+              color: AdvancedSearchInputFormStyle.inputFieldBackgroundColor,
+            )
           ),
           dropdownStyleData: DropdownStyleData(
             maxHeight: 200,

lib/features/mailbox_dashboard/presentation/widgets/advanced_search/sort_by_drop_down_button.dart

@@ -1,4 +1,3 @@
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/style_utils.dart';
 import 'package:dropdown_button2/dropdown_button2.dart';
@@ -64,12 +63,14 @@ class SortByDropDownButton extends StatelessWidget {
           customButton: Container(
             height: SortByDropdownStyle.height,
             decoration: BoxDecoration(
-              borderRadius: SortByDropdownStyle.buttonBorderRadius,
+              borderRadius: const BorderRadius.all(
-              border: Border.all(
+                Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius),
-                color: AppColor.colorInputBorderCreateMailbox,
-                width: SortByDropdownStyle.buttonBorderWidth,
               ),
-              color: AppColor.colorInputBackgroundCreateMailbox
+              border: Border.all(
+                color: AdvancedSearchInputFormStyle.inputFieldBorderColor,
+                width: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
+              ),
+              color: AdvancedSearchInputFormStyle.inputFieldBackgroundColor,
             ),
             padding: SortByDropdownStyle.buttonPadding,
             child: Row(
@@ -92,12 +93,14 @@ class SortByDropDownButton extends StatelessWidget {
             height: SortByDropdownStyle.height,
             padding: SortByDropdownStyle.buttonPadding,
             decoration: BoxDecoration(
-              borderRadius: SortByDropdownStyle.buttonBorderRadius,
+              borderRadius: const BorderRadius.all(
-              border: Border.all(
+                Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius),
-                color: AppColor.colorInputBorderCreateMailbox,
-                width: SortByDropdownStyle.buttonBorderWidth,
               ),
-              color: AppColor.colorInputBackgroundCreateMailbox
+              border: Border.all(
+                color: AdvancedSearchInputFormStyle.inputFieldBorderColor,
+                width: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
+              ),
+              color: AdvancedSearchInputFormStyle.inputFieldBackgroundColor,
             )
           ),
           dropdownStyleData: DropdownStyleData(

lib/features/mailbox_dashboard/presentation/widgets/advanced_search/text_field_autocomplete_email_address_web.dart

@@ -99,143 +99,139 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return LayoutBuilder(
-      padding: TextFieldAutoCompleteEmailAddressWebStyles.padding,
+      builder: ((context, constraints) {
-      child: LayoutBuilder(
+        return Row(
-        builder: ((context, constraints) {
+          children: [
-          return Row(
+            SizedBox(
-            crossAxisAlignment: CrossAxisAlignment.center,
+              width: TextFieldAutoCompleteEmailAddressWebStyles.fieldTitleWidth,
-            children: [
+              child: LabelAdvancedSearchFieldWidget(
-              SizedBox(
+                name: widget.field.getTitle(context),
-                width: TextFieldAutoCompleteEmailAddressWebStyles.fieldTitleWidth,
-                child: LabelAdvancedSearchFieldWidget(
-                  name: widget.field.getTitle(context),
-                ),
               ),
-              const SizedBox(width: TextFieldAutoCompleteEmailAddressWebStyles.space),
+            ),
-              Expanded(
+            const SizedBox(width: TextFieldAutoCompleteEmailAddressWebStyles.space),
-                child: StatefulBuilder(
+            Expanded(
-                  builder: ((context, setState) {
+              child: StatefulBuilder(
-                    return DragTarget<DraggableEmailAddress>(
+                builder: ((context, setState) {
-                      onAcceptWithDetails: (draggableEmailAddress) =>
+                  return DragTarget<DraggableEmailAddress>(
-                        _handleAcceptDraggableEmailAddressAction(
+                    onAcceptWithDetails: (draggableEmailAddress) =>
-                          draggableEmailAddress.data,
+                      _handleAcceptDraggableEmailAddressAction(
-                          setState
+                        draggableEmailAddress.data,
-                        ),
+                        setState
-                      onLeave: (draggableEmailAddress) {
+                      ),
-                        if (_isDragging) {
+                    onLeave: (draggableEmailAddress) {
-                          setState(() => _isDragging = false);
+                      if (_isDragging) {
-                        }
+                        setState(() => _isDragging = false);
-                      },
-                      onMove: (details) {
-                        if (!_isDragging) {
-                          setState(() => _isDragging = true);
-                        }
-                      },
-                      builder: (_, __, ___) {
-                        return TagEditor<SuggestionEmailAddress>(
-                          key: widget.keyTagEditor,
-                          length: _collapsedListEmailAddress.length,
-                          controller: widget.controller,
-                          focusNodeKeyboard: widget.focusNode,
-                          keyboardType: TextInputType.emailAddress,
-                          textInputAction: TextInputAction.done,
-                          cursorColor: TextFieldAutoCompleteEmailAddressWebStyles.cursorColor,
-                          debounceDuration: TextFieldAutoCompleteEmailAddressWebStyles.debounceDuration,
-                          inputDecoration: InputDecoration(
-                            filled: true,
-                            fillColor: TextFieldAutoCompleteEmailAddressWebStyles.textInputFillColor,
-                            border: TextFieldAutoCompleteEmailAddressWebStyles.textInputBorder,
-                            hintText: widget.field.getHintText(context),
-                            hintStyle: TextFieldAutoCompleteEmailAddressWebStyles.textInputHintStyle,
-                            isDense: true,
-                            contentPadding: _currentListEmailAddress.isNotEmpty
-                              ? TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPaddingWithSomeTag
-                              : TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPadding
-                          ),
-                          padding: _currentListEmailAddress.isNotEmpty
-                            ? TextFieldAutoCompleteEmailAddressWebStyles.tagEditorPadding
-                            : EdgeInsets.zero,
-                          borderRadius: TextFieldAutoCompleteEmailAddressWebStyles.borderRadius,
-                          borderSize: TextFieldAutoCompleteEmailAddressWebStyles.borderWidth,
-                          focusedBorderColor: TextFieldAutoCompleteEmailAddressWebStyles.focusedBorderColor,
-                          enableBorder: true,
-                          enableBorderColor: _isDragging
-                            ? AppColor.primaryColor
-                            : AppColor.colorInputBorderCreateMailbox,
-                          minTextFieldWidth: TextFieldAutoCompleteEmailAddressWebStyles.minTextFieldWidth,
-                          resetTextOnSubmitted: true,
-                          autoScrollToInput: false,
-                          suggestionsBoxElevation: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxElevation,
-                          suggestionsBoxBackgroundColor: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxBackgroundColor,
-                          suggestionsBoxRadius: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxRadius,
-                          suggestionsBoxMaxHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxMaxHeight,
-                          suggestionItemHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxItemHeight,
-                          suggestionBoxWidth: _getSuggestionBoxWidth(constraints.maxWidth),
-                          textStyle: AdvancedSearchInputFormStyle.inputTextStyle,
-                          onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, setState),
-                          onDeleteTagAction: () => _handleDeleteLatestTagAction.call(setState),
-                          onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, setState),
-                          onSubmitted: (value) => _handleSubmitTagAction.call(value, setState),
-                          tagBuilder: (context, index) {
-                            final currentEmailAddress = _currentListEmailAddress.elementAt(index);
-                            final isLatestEmail = currentEmailAddress == _currentListEmailAddress.last;
-                            return AutoCompleteTagItemWidgetWeb(
-                              field: widget.field,
-                              currentEmailAddress: currentEmailAddress,
-                              currentListEmailAddress: _currentListEmailAddress,
-                              collapsedListEmailAddress: _collapsedListEmailAddress,
-                              isLatestEmail: isLatestEmail,
-                              isCollapsed: _isCollapse,
-                              isLatestTagFocused: _lastTagFocused,
-                              onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, setState),
-                              onShowFullAction: widget.onShowFullListEmailAddressAction,
-                            );
-                          },
-                          onTagChanged: (tag) => _handleOnTagChangeAction.call(tag, setState),
-                          findSuggestions: (queryString) => _findSuggestions(
-                            queryString,
-                            limit: AppConfig.defaultLimitAutocomplete,
-                          ),
-                          isLoadMoreOnlyOnce: true,
-                          isLoadMoreReplaceAllOld: false,
-                          loadMoreSuggestions: _findSuggestions,
-                          suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight, suggestionValid) {
-                            return RecipientSuggestionItemWidget(
-                              imagePaths: _imagePaths,
-                              suggestionState: suggestionEmailAddress.state,
-                              emailAddress: suggestionEmailAddress.emailAddress,
-                              suggestionValid: suggestionValid,
-                              highlight: highlight,
-                              onSelectedAction: (emailAddress) {
-                                setState(() => _currentListEmailAddress.add(emailAddress));
-                                _updateListEmailAddressAction();
-                                tagEditorState.resetTextField();
-                                tagEditorState.closeSuggestionBox();
-                              },
-                            );
-                          },
-                          onHandleKeyEventAction: (event) {
-                            if (event is KeyDownEvent) {
-                              switch (event.logicalKey) {
-                                case LogicalKeyboardKey.tab:
-                                  widget.nextFocusNode?.requestFocus();
-                                  break;
-                                default:
-                                  break;
-                              }
-                            }
-                          },
-                        );
                       }
-                    );
+                    },
-                  })
+                    onMove: (details) {
-                ),
+                      if (!_isDragging) {
+                        setState(() => _isDragging = true);
+                      }
+                    },
+                    builder: (_, __, ___) {
+                      return TagEditor<SuggestionEmailAddress>(
+                        key: widget.keyTagEditor,
+                        length: _collapsedListEmailAddress.length,
+                        controller: widget.controller,
+                        focusNodeKeyboard: widget.focusNode,
+                        keyboardType: TextInputType.emailAddress,
+                        textInputAction: TextInputAction.done,
+                        cursorColor: TextFieldAutoCompleteEmailAddressWebStyles.cursorColor,
+                        debounceDuration: TextFieldAutoCompleteEmailAddressWebStyles.debounceDuration,
+                        inputDecoration: InputDecoration(
+                          filled: true,
+                          fillColor: TextFieldAutoCompleteEmailAddressWebStyles.textInputFillColor,
+                          border: TextFieldAutoCompleteEmailAddressWebStyles.textInputBorder,
+                          hintText: widget.field.getHintText(context),
+                          hintStyle: TextFieldAutoCompleteEmailAddressWebStyles.textInputHintStyle,
+                          isDense: true,
+                          contentPadding: _currentListEmailAddress.isNotEmpty
+                            ? TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPaddingWithSomeTag
+                            : TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPadding
+                        ),
+                        padding: _currentListEmailAddress.isNotEmpty
+                          ? TextFieldAutoCompleteEmailAddressWebStyles.tagEditorPadding
+                          : EdgeInsets.zero,
+                        borderRadius: AdvancedSearchInputFormStyle.inputFieldBorderRadius,
+                        borderSize: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
+                        focusedBorderColor: TextFieldAutoCompleteEmailAddressWebStyles.focusedBorderColor,
+                        enableBorder: true,
+                        enableBorderColor: _isDragging
+                          ? AppColor.primaryColor
+                          : AdvancedSearchInputFormStyle.inputFieldBorderColor,
+                        minTextFieldWidth: TextFieldAutoCompleteEmailAddressWebStyles.minTextFieldWidth,
+                        resetTextOnSubmitted: true,
+                        autoScrollToInput: false,
+                        suggestionsBoxElevation: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxElevation,
+                        suggestionsBoxBackgroundColor: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxBackgroundColor,
+                        suggestionsBoxRadius: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxRadius,
+                        suggestionsBoxMaxHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxMaxHeight,
+                        suggestionItemHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxItemHeight,
+                        suggestionBoxWidth: _getSuggestionBoxWidth(constraints.maxWidth),
+                        textStyle: AdvancedSearchInputFormStyle.inputTextStyle,
+                        onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, setState),
+                        onDeleteTagAction: () => _handleDeleteLatestTagAction.call(setState),
+                        onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, setState),
+                        onSubmitted: (value) => _handleSubmitTagAction.call(value, setState),
+                        tagBuilder: (context, index) {
+                          final currentEmailAddress = _currentListEmailAddress.elementAt(index);
+                          final isLatestEmail = currentEmailAddress == _currentListEmailAddress.last;
+                          return AutoCompleteTagItemWidgetWeb(
+                            field: widget.field,
+                            currentEmailAddress: currentEmailAddress,
+                            currentListEmailAddress: _currentListEmailAddress,
+                            collapsedListEmailAddress: _collapsedListEmailAddress,
+                            isLatestEmail: isLatestEmail,
+                            isCollapsed: _isCollapse,
+                            isLatestTagFocused: _lastTagFocused,
+                            onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, setState),
+                            onShowFullAction: widget.onShowFullListEmailAddressAction,
+                          );
+                        },
+                        onTagChanged: (tag) => _handleOnTagChangeAction.call(tag, setState),
+                        findSuggestions: (queryString) => _findSuggestions(
+                          queryString,
+                          limit: AppConfig.defaultLimitAutocomplete,
+                        ),
+                        isLoadMoreOnlyOnce: true,
+                        isLoadMoreReplaceAllOld: false,
+                        loadMoreSuggestions: _findSuggestions,
+                        suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight, suggestionValid) {
+                          return RecipientSuggestionItemWidget(
+                            imagePaths: _imagePaths,
+                            suggestionState: suggestionEmailAddress.state,
+                            emailAddress: suggestionEmailAddress.emailAddress,
+                            suggestionValid: suggestionValid,
+                            highlight: highlight,
+                            onSelectedAction: (emailAddress) {
+                              setState(() => _currentListEmailAddress.add(emailAddress));
+                              _updateListEmailAddressAction();
+                              tagEditorState.resetTextField();
+                              tagEditorState.closeSuggestionBox();
+                            },
+                          );
+                        },
+                        onHandleKeyEventAction: (event) {
+                          if (event is KeyDownEvent) {
+                            switch (event.logicalKey) {
+                              case LogicalKeyboardKey.tab:
+                                widget.nextFocusNode?.requestFocus();
+                                break;
+                              default:
+                                break;
+                            }
+                          }
+                        },
+                      );
+                    }
+                  );
+                })
               ),
-            ],
+            ),
-          );
+          ],
-        })
+        );
-      ),
+      })
     );
   }
 

lib/features/mailbox_dashboard/presentation/widgets/navigation_bar/navigation_bar_widget.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
@@ -61,7 +63,10 @@ class NavigationBarWidget extends StatelessWidget {
             return Row(
               children: [
                 SizedBox(
-                  width: constraint.maxWidth / 2,
+                  width: min(
+                    max(constraint.maxWidth / 2, 576),
+                    constraint.maxWidth,
+                  ),
                   height: 52,
                   child: searchForm
                 ),

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

@@ -2,6 +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/utils/theme_utils.dart';
 import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/presentation/views/quick_search/quick_search_input_form.dart';
@@ -248,7 +249,9 @@ class SearchInputFormWidget extends StatelessWidget with AppLoaderMixin {
         enabledBorder: InputBorder.none,
         contentPadding: EdgeInsets.zero,
         hintText: AppLocalizations.of(context).search_emails,
-        hintStyle: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 16.0),
+        hintStyle: ThemeUtils.textStyleBodyBody2(
+          color: AppColor.steelGray400,
+        ),
         labelStyle: const TextStyle(color: Colors.black, fontSize: 16.0)
       ),
       leftButton: Padding(