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,9 +21,7 @@ class AdvancedSearchFilterFormBottomView extends GetWidget<AdvancedFilterControl
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return Column(
-      padding: EdgeInsets.only(top: !controller.responsiveUtils.isWebDesktop(context) ? 8 : 20),
-      child: Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Transform(
@@ -35,7 +33,6 @@ class AdvancedSearchFilterFormBottomView extends GetWidget<AdvancedFilterControl
         ),
         _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),
-      child: controller.responsiveUtils.isMobile(context) || controller.responsiveUtils.landscapeTabletSupported(context)
         ? Column(
             mainAxisAlignment: MainAxisAlignment.start,
             crossAxisAlignment: CrossAxisAlignment.start,
             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(
+                Radius.circular(AdvancedSearchInputFormStyle.inputFieldBorderRadius),
+              ),
               border: Border.all(
-                color: AppColor.colorInputBorderCreateMailbox,
+                color: AdvancedSearchInputFormStyle.inputFieldBorderColor,
-                width: 0.5,
+                width: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
               ),
-              color: AppColor.colorInputBackgroundCreateMailbox
+              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,12 +99,9 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return LayoutBuilder(
-      padding: TextFieldAutoCompleteEmailAddressWebStyles.padding,
-      child: LayoutBuilder(
       builder: ((context, constraints) {
         return Row(
-            crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             SizedBox(
               width: TextFieldAutoCompleteEmailAddressWebStyles.fieldTitleWidth,
@@ -156,13 +153,13 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
                         padding: _currentListEmailAddress.isNotEmpty
                           ? TextFieldAutoCompleteEmailAddressWebStyles.tagEditorPadding
                           : EdgeInsets.zero,
-                          borderRadius: TextFieldAutoCompleteEmailAddressWebStyles.borderRadius,
+                        borderRadius: AdvancedSearchInputFormStyle.inputFieldBorderRadius,
-                          borderSize: TextFieldAutoCompleteEmailAddressWebStyles.borderWidth,
+                        borderSize: AdvancedSearchInputFormStyle.inputFieldBorderWidth,
                         focusedBorderColor: TextFieldAutoCompleteEmailAddressWebStyles.focusedBorderColor,
                         enableBorder: true,
                         enableBorderColor: _isDragging
                           ? AppColor.primaryColor
-                            : AppColor.colorInputBorderCreateMailbox,
+                          : AdvancedSearchInputFormStyle.inputFieldBorderColor,
                         minTextFieldWidth: TextFieldAutoCompleteEmailAddressWebStyles.minTextFieldWidth,
                         resetTextOnSubmitted: true,
                         autoScrollToInput: false,
@@ -235,7 +232,6 @@ class _TextFieldAutocompleteEmailAddressWebState extends State<TextFieldAutocomp
           ],
         );
       })
-      ),
     );
   }
 

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(