TF-1155 Update UI for input field

Signed-off-by: dab246 <tdvu@linagora.com>
(cherry picked from commit 63a2ec09ae3bd1127e4274fc1104b2b791cb5e43)

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

@@ -2,12 +2,12 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 
 class AutoCompleteTagItemWebStyle {
-  static const double paddingTop = 6.0;
+  static const double paddingTop = 4.5;
   static const double paddingEnd = 40.0;
   static const double labelPaddingHorizontal = 4.0;
   static const EdgeInsetsGeometry collapsedPadding = EdgeInsetsDirectional.symmetric(vertical: 5, horizontal: 8);
 
-  static const EdgeInsetsGeometry marginCollapsed = EdgeInsets.only(top: 8.0);
+  static const EdgeInsetsGeometry marginCollapsed = EdgeInsets.only(top: 5.5);
 
   static const BorderRadius shapeBorderRadius = BorderRadius.all(Radius.circular(10.0));
 

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

@@ -3,14 +3,15 @@ import 'package:flutter/material.dart';
 
 class TextFieldAutoCompleteEmailAddressWebStyles {
   static const EdgeInsetsGeometry padding = EdgeInsets.symmetric(vertical: 8);
-  static const EdgeInsetsGeometry textInputContentPadding = EdgeInsets.symmetric(vertical: 16);
+  static const EdgeInsetsGeometry textInputContentPadding = EdgeInsetsDirectional.only(top: 16, bottom: 16, start: 12);
-  static const EdgeInsets tagEditorPadding = EdgeInsets.symmetric(horizontal: 8);
+  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 = 2.0;
+  static const double borderWidth = 1.0;
-  static const double minTextFieldWidth = 20.0;
+  static const double minTextFieldWidth = 40.0;
 
   static const double suggestionBoxElevation = 20.0;
   static const double suggestionBoxMaxHeight = 350.0;

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

@@ -279,10 +279,7 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
         decoration: InputDecoration(
           filled: true,
           fillColor: isSelectFormList ? AppColor.colorItemSelected : Colors.white,
-          contentPadding: const EdgeInsets.only(
+          contentPadding: const EdgeInsetsDirectional.symmetric(horizontal: 12),
-            right: 8,
-            left: 12,
-          ),
           enabledBorder: OutlineInputBorder(
             borderRadius: const BorderRadius.all(
               Radius.circular(10),
@@ -301,6 +298,15 @@ class AdvancedSearchInputForm extends GetWidget<AdvancedFilterController>
               color: AppColor.colorInputBorderCreateMailbox,
             ),
           ),
+          focusedBorder: OutlineInputBorder(
+            borderRadius: const BorderRadius.all(
+              Radius.circular(10),
+            ),
+            borderSide: BorderSide(
+              width: isSelectFormList ? 0.5 : 1,
+              color: AppColor.primaryColor,
+            ),
+          ),
           hintText: advancedSearchFilterField.getHintText(context),
           hintStyle: TextStyle(
             fontSize: 16,

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

@@ -12,6 +12,7 @@ import 'package:model/mailbox/expand_mode.dart';
 import 'package:super_tag_editor/tag_editor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/advanced_search_filter.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/search/suggesstion_email_address.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/advanced_search_input_form_style.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/styles/text_field_autocomplete_email_address_web_style.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_suggestion_item_widget_web.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/advanced_search/autocomplete_tag_item_widget_web.dart';
@@ -117,9 +118,13 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
                         hintText: widget.field.getHintText(context),
                         hintStyle: TextFieldAutoCompleteEmailAddressWebStyles.textInputHintStyle,
                         isDense: true,
-                        contentPadding: TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPadding,
+                        contentPadding: _currentListEmailAddress.isNotEmpty
+                          ? TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPaddingWithSomeTag
+                          : TextFieldAutoCompleteEmailAddressWebStyles.textInputContentPadding
                       ),
-                      padding: TextFieldAutoCompleteEmailAddressWebStyles.tagEditorPadding,
+                      padding: _currentListEmailAddress.isNotEmpty
+                        ? TextFieldAutoCompleteEmailAddressWebStyles.tagEditorPadding
+                        : EdgeInsets.zero,
                       borderRadius: TextFieldAutoCompleteEmailAddressWebStyles.borderRadius,
                       borderSize: TextFieldAutoCompleteEmailAddressWebStyles.borderWidth,
                       focusedBorderColor: TextFieldAutoCompleteEmailAddressWebStyles.focusedBorderColor,
@@ -132,7 +137,7 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
                       suggestionsBoxRadius: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxRadius,
                       suggestionsBoxMaxHeight: TextFieldAutoCompleteEmailAddressWebStyles.suggestionBoxMaxHeight,
                       suggestionBoxWidth: _getSuggestionBoxWidth(constraints.maxWidth),
-                      textStyle: TextFieldAutoCompleteEmailAddressWebStyles.textInputTextStyle,
+                      textStyle: AdvancedSearchInputFormStyle.inputTextStyle,
                       onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, setState),
                       onDeleteTagAction: () => _handleDeleteLatestTagAction.call(setState),
                       onSelectOptionAction: (item) => _handleSelectOptionAction.call(item, setState),