TF-3005 Apply new design search input contact view

lib/features/contact/presentation/contact_view.dart

@@ -2,7 +2,6 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
@@ -61,27 +60,30 @@ class ContactView extends GetWidget<ContactController> {
                           responsiveUtils: controller.responsiveUtils,
                           onCloseContactView: controller.closeContactView,
                         )),
-                        SearchAppBarWidget(
+                        Obx(() => SearchAppBarWidget(
                           imagePaths: controller.imagePaths,
                           searchQuery: controller.searchQuery.value,
                           searchFocusNode: controller.textInputSearchFocus,
                           searchInputController: controller.textInputSearchController,
                           hasBackButton: false,
                           hasSearchButton: true,
-                          margin: ContactUtils.getPaddingSearchInputForm(context, controller.responsiveUtils),
+                          searchIconSize: 20,
+                          searchIconColor: AppColor.colorHintSearchBar,
+                          margin: ContactViewStyle.getSearchInputFormMargin(
+                            context,
+                            controller.responsiveUtils
+                          ),
                           decoration: const BoxDecoration(
-                            borderRadius: BorderRadius.all(Radius.circular(10)),
+                            borderRadius: BorderRadius.all(Radius.circular(12)),
-                            color: AppColor.colorBgSearchBar),
+                            color: AppColor.colorBgSearchBar
-                          iconClearText: SvgPicture.asset(
+                          ),
-                            controller.imagePaths.icClearTextSearch,
-                            width: 18,
-                            height: 18,
-                            fit: BoxFit.fill),
                           hintText: AppLocalizations.of(context).hintSearchInputContact,
+                          inputHintTextStyle: ContactViewStyle.searchInputHintTextStyle,
+                          inputTextStyle: ContactViewStyle.searchInputTextStyle,
                           onClearTextSearchAction: controller.clearAllTextInputSearchForm,
                           onTextChangeSearchAction: controller.onTextSearchChange,
                           onSearchTextAction: controller.onSearchTextAction,
-                        ),
+                        )),
                         if (PlatformInfo.isWeb)
                           Obx(() {
                             final username = controller.session.value?.username.value ?? '';

lib/features/contact/presentation/styles/contact_view_style.dart

@@ -1,12 +1,25 @@
 
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/utils/platform_info.dart';
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 
 class ContactViewStyle {
   static const double viewMaxHeight = 624.0;
   static const double viewMaxWidth = 558.0;
 
+  static TextStyle searchInputHintTextStyle = const TextStyle(
+    fontSize: 15,
+    fontWeight: FontWeight.w400,
+    color: AppColor.colorHintSearchBar
+  );
+
+  static TextStyle searchInputTextStyle = const TextStyle(
+    fontSize: 15,
+    fontWeight: FontWeight.w400,
+    color: Colors.black
+  );
+
   static double getContactViewHeight(
     BuildContext context,
     ResponsiveUtils responsiveUtils
@@ -59,4 +72,15 @@ class ContactViewStyle {
       return const BorderRadius.all(Radius.circular(16));
     }
   }
+
+  static EdgeInsetsGeometry getSearchInputFormMargin(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils
+  ) {
+    if (PlatformInfo.isWeb || responsiveUtils.isScreenWithShortestSide(context)) {
+      return const EdgeInsets.symmetric(horizontal: 16, vertical: 10);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 32, vertical: 10);
+    }
+  }
 }

lib/features/contact/presentation/utils/contact_utils.dart

@@ -4,18 +4,6 @@ import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 
 class ContactUtils {
-  static EdgeInsets getPaddingSearchInputForm(BuildContext context, ResponsiveUtils responsiveUtils) {
-    if (PlatformInfo.isWeb) {
-      return const EdgeInsets.symmetric(horizontal: 16, vertical: 10);
-    } else {
-      if (responsiveUtils.isScreenWithShortestSide(context)) {
-        return const EdgeInsets.symmetric(horizontal: 16, vertical: 10);
-      } else {
-        return const EdgeInsets.symmetric(horizontal: 32, vertical: 10);
-      }
-    }
-  }
-
   static EdgeInsets getPaddingSearchResultList(BuildContext context, ResponsiveUtils responsiveUtils) {
     if (PlatformInfo.isWeb) {
       return const EdgeInsets.symmetric(horizontal: 16, vertical: 10);

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -609,11 +609,6 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                 decoration: const BoxDecoration(
                   borderRadius: BorderRadius.all(Radius.circular(12)),
                   color: AppColor.colorBgSearchBar),
-                iconClearText: SvgPicture.asset(
-                  controller.imagePaths.icClearTextSearch,
-                  width: 18,
-                  height: 18,
-                  fit: BoxFit.fill),
                 hintText: AppLocalizations.of(context).hintSearchFolders,
                 onClearTextSearchAction: controller.clearSearchText,
                 onTextChangeSearchAction: (query) => controller.searchMailbox(context, query),

lib/features/thread/presentation/widgets/search_app_bar_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/views/button/icon_button_web.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/presentation/views/text/text_field_builder.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
@@ -25,9 +26,12 @@ class SearchAppBarWidget extends StatelessWidget {
   final double? heightSearchBar;
   final Decoration? decoration;
   final EdgeInsets? padding;
-  final EdgeInsets? margin;
+  final EdgeInsetsGeometry? margin;
   final String? hintText;
-  final Widget? iconClearText;
+  final Color? searchIconColor;
+  final double? searchIconSize;
+  final TextStyle? inputHintTextStyle;
+  final TextStyle? inputTextStyle;
   final OnCancelSearchPressed? onCancelSearchPressed;
   final OnTextChangeSearchAction? onTextChangeSearchAction;
   final OnClearTextSearchAction? onClearTextSearchAction;
@@ -47,7 +51,10 @@ class SearchAppBarWidget extends StatelessWidget {
     this.padding,
     this.margin,
     this.hintText,
-    this.iconClearText,
+    this.searchIconColor,
+    this.searchIconSize,
+    this.inputHintTextStyle,
+    this.inputTextStyle,
     this.onCancelSearchPressed,
     this.onTextChangeSearchAction,
     this.onClearTextSearchAction,
@@ -65,10 +72,28 @@ class SearchAppBarWidget extends StatelessWidget {
       child: Row(
         children: [
           if (hasBackButton) _buildBackButton(),
-          if (hasSearchButton) _buildSearchButton(),
+          if (hasSearchButton)
+            TMailButtonWidget.fromIcon(
+              icon: imagePaths.icSearchBar,
+              iconColor: searchIconColor,
+              iconSize: searchIconSize,
+              backgroundColor: Colors.transparent,
+              margin: const EdgeInsets.symmetric(horizontal: 8),
+              onTapActionCallback: () =>
+                onSearchTextAction?.call(searchInputController?.text ?? ''),
+            ),
           Expanded(child: _buildSearchInputForm(context)),
-          if (suggestionSearch?.isNotEmpty == true || (searchQuery != null && searchQuery!.value.isNotEmpty))
+          if (suggestionSearch?.isNotEmpty == true ||
-            _buildClearTextSearchButton(),
+              (searchQuery != null && searchQuery!.value.isNotEmpty))
+            TMailButtonWidget.fromIcon(
+              icon: imagePaths.icClearTextSearch,
+              backgroundColor: Colors.transparent,
+              margin: const EdgeInsets.symmetric(horizontal: 8),
+              onTapActionCallback: () {
+                searchInputController?.clear();
+                onClearTextSearchAction?.call();
+              },
+            ),
         ]
       )
     );
@@ -88,15 +113,6 @@ class SearchAppBarWidget extends StatelessWidget {
      });
  }
 
- Widget _buildClearTextSearchButton() {
-    return buildIconWeb(
-      icon: iconClearText ?? SvgPicture.asset(imagePaths.icComposerClose, width: 18, height: 18, fit: BoxFit.fill),
-      onTap: () {
-        searchInputController?.clear();
-        onClearTextSearchAction?.call();
-      });
- }
-
   Widget _buildSearchInputForm(BuildContext context) {
     return TextFieldBuilder(
       key: const Key('search_input_form'),
@@ -108,31 +124,22 @@ class SearchAppBarWidget extends StatelessWidget {
       textDirection: DirectionUtils.getDirectionByLanguage(context),
       autoFocus: true,
       focusNode: searchFocusNode,
-      textStyle: const TextStyle(color: AppColor.colorNameEmail, fontSize: 17),
+      textStyle: inputTextStyle ?? const TextStyle(
+        color: AppColor.colorNameEmail,
+        fontSize: 17
+      ),
       decoration: InputDecoration(
         border: InputBorder.none,
         focusedBorder: InputBorder.none,
         enabledBorder: InputBorder.none,
         contentPadding: EdgeInsets.zero,
         hintText: hintText,
-        hintStyle: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 17.0),
+        hintStyle: inputHintTextStyle ?? const TextStyle(
+          color: AppColor.colorHintSearchBar,
+          fontSize: 17.0
+        ),
         labelStyle: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 17.0)),
       controller: searchInputController,
     );
   }
-
- Widget _buildSearchButton() {
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 8),
-      child: buildIconWeb(
-        minSize: 40,
-        iconPadding: EdgeInsets.zero,
-        icon: SvgPicture.asset(
-          imagePaths.icSearchBar,
-          fit: BoxFit.fill
-        ),
-        onTap: () => onSearchTextAction?.call(searchInputController?.text ?? '')
-      ),
-    );
- }
 }