TF-1711 Fix label displayed overlap for create identity button

(cherry picked from commit aa939af0d136d3d11f13c14ca3b550fe1513d270)

lib/features/base/widget/material_text_icon_button.dart

@@ -0,0 +1,68 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+typedef OnTapMaterialTextIconButton = Function();
+
+class MaterialTextIconButton extends StatelessWidget {
+
+  final String label;
+  final String icon;
+  final OnTapMaterialTextIconButton onTap;
+  final double borderRadius;
+  final double elevation;
+  final double iconSize;
+  final Size? minimumSize;
+  final Color? labelColor;
+  final Color? iconColor;
+  final Color? backgroundColor;
+  final TextStyle? labelStyle;
+  final EdgeInsets? padding;
+
+  const MaterialTextIconButton({
+    Key? key,
+    required this.label,
+    required this.icon,
+    required this.onTap,
+    this.borderRadius = 12,
+    this.elevation = 0,
+    this.iconSize = 24,
+    this.labelColor,
+    this.iconColor,
+    this.backgroundColor,
+    this.padding,
+    this.labelStyle,
+    this.minimumSize
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton.icon(
+      onPressed: onTap,
+      icon: SvgPicture.asset(
+        icon,
+        width: iconSize,
+        height: iconSize,
+        fit: BoxFit.fill,
+        colorFilter: (iconColor ?? AppColor.colorTextButton).asFilter(),
+      ),
+      label: Text(
+        label,
+        style: labelStyle ?? TextStyle(
+          fontSize: 16,
+          color: labelColor ?? AppColor.colorTextButton,
+          fontWeight: FontWeight.w500
+        ),
+      ),
+      style: ElevatedButton.styleFrom(
+        foregroundColor: labelColor ?? AppColor.colorTextButton,
+        backgroundColor: backgroundColor ?? AppColor.colorCreateNewIdentityButton,
+        elevation: 0,
+        padding: padding,
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(borderRadius)),
+        minimumSize: minimumSize
+      )
+    );
+  }
+}

lib/features/manage_account/presentation/profiles/identities/identities_view.dart

@@ -18,7 +18,6 @@ class IdentitiesView extends GetWidget<IdentitiesController> with PopupMenuWidge
   @override
   Widget build(BuildContext context) {
     return Container(
-      color: Colors.transparent,
       margin: const EdgeInsets.all(24),
       child: _responsiveUtils.isWebDesktop(context)
         ? _buildIdentitiesViewWebDesktop(context)
@@ -28,10 +27,9 @@ class IdentitiesView extends GetWidget<IdentitiesController> with PopupMenuWidge
 
   Widget _buildIdentitiesViewMobile(BuildContext context) {
     return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         IdentitiesHeaderWidget(
-          imagePaths: _imagePaths,
-          responsiveUtils: _responsiveUtils,
           onAddNewIdentityAction: () => controller.goToCreateNewIdentity(context),
         ),
         const SizedBox(height: 12),
@@ -51,8 +49,6 @@ class IdentitiesView extends GetWidget<IdentitiesController> with PopupMenuWidge
         SizedBox(
           width: 224,
           child: IdentitiesHeaderWidget(
-            imagePaths: _imagePaths,
-            responsiveUtils: _responsiveUtils,
             onAddNewIdentityAction: () => controller.goToCreateNewIdentity(context),
           )
         ),

lib/features/manage_account/presentation/profiles/identities/widgets/identities_header_widget.dart

@@ -1,8 +1,8 @@
 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/views/button/button_builder.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/widget/material_text_icon_button.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnAddNewIdentityAction = Function();
@@ -11,20 +11,18 @@ class IdentitiesHeaderWidget extends StatelessWidget {
 
   const IdentitiesHeaderWidget({
     Key? key,
-    required this.imagePaths,
+    required this.onAddNewIdentityAction,
-    required this.responsiveUtils,
-    this.onAddNewIdentityAction,
   }) : super(key: key);
 
-  final ImagePaths imagePaths;
+  final OnAddNewIdentityAction onAddNewIdentityAction;
-  final ResponsiveUtils responsiveUtils;
-  final OnAddNewIdentityAction? onAddNewIdentityAction;
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    final imagePaths = Get.find<ImagePaths>();
-      color: Colors.transparent,
+
-      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
         Text(
           AppLocalizations.of(context).identities,
           style: const TextStyle(
@@ -39,24 +37,16 @@ class IdentitiesHeaderWidget extends StatelessWidget {
             fontWeight: FontWeight.normal,
             color: AppColor.colorSettingExplanation)),
         const SizedBox(height: 24),
-        (ButtonBuilder(imagePaths.icAddIdentity)
+        MaterialTextIconButton(
-          ..key(const Key('button_add_identity'))
+          key: const Key('button_add_identity'),
-          ..decoration(BoxDecoration(
+          label: AppLocalizations.of(context).createNewIdentity,
-              borderRadius: BorderRadius.circular(12),
+          icon: imagePaths.icAddIdentity,
-              color: AppColor.colorCreateNewIdentityButton))
+          iconSize: 28,
-          ..paddingIcon(const EdgeInsets.only(right: 8))
+          padding: const EdgeInsets.all(16),
-          ..iconColor(AppColor.colorTextButton)
+          minimumSize: const Size(double.infinity, 44),
-          ..size(28)
+          onTap: onAddNewIdentityAction
-          ..radiusSplash(12)
+        )
-          ..padding(const EdgeInsets.symmetric(vertical: 10))
+      ]
-          ..textStyle(const TextStyle(
-              fontSize: 16,
-              color: AppColor.colorTextButton,
-              fontWeight: FontWeight.w500))
-          ..onPressActionClick(() => onAddNewIdentityAction?.call())
-          ..text(AppLocalizations.of(context).createNewIdentity, isVertical: false)
-        ).build()
-      ]),
     );
   }
 }