TF-4178 Add color picker modal

lib/features/base/widget/default_field/default_close_button_widget.dart

@@ -1,32 +0,0 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/views/button/tmail_button_widget.dart';
-import 'package:flutter/material.dart';
-
-class DefaultCloseButtonWidget extends StatelessWidget {
-  final String iconClose;
-  final VoidCallback onTapActionCallback;
-
-  const DefaultCloseButtonWidget({
-    super.key,
-    required this.iconClose,
-    required this.onTapActionCallback,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return PositionedDirectional(
-      top: 4,
-      end: 4,
-      child: TMailButtonWidget.fromIcon(
-        icon: iconClose,
-        iconSize: 24,
-        iconColor: AppColor.m3Tertiary,
-        padding: const EdgeInsets.all(10),
-        borderRadius: 24,
-        backgroundColor: Colors.transparent,
-        onTapActionCallback: onTapActionCallback,
-      ),
-    );
-  }
-}

lib/features/base/widget/modal_list_action_button_widget.dart

@@ -1,58 +0,0 @@
-import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/views/dialog/confirm_dialog_button.dart';
-import 'package:flutter/material.dart';
-
-class ModalListActionButtonWidget extends StatelessWidget {
-  final String positiveLabel;
-  final String negativeLabel;
-  final VoidCallback onNegativeAction;
-  final VoidCallback onPositiveAction;
-  final EdgeInsetsGeometry? padding;
-
-  const ModalListActionButtonWidget({
-    super.key,
-    required this.positiveLabel,
-    required this.negativeLabel,
-    required this.onPositiveAction,
-    required this.onNegativeAction,
-    this.padding,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    Widget negativeButton = Container(
-      constraints: const BoxConstraints(minWidth: 67),
-      height: 48,
-      child: ConfirmDialogButton(
-        label: negativeLabel,
-        onTapAction: onNegativeAction,
-      ),
-    );
-
-    Widget positiveButton = Container(
-      constraints: const BoxConstraints(minWidth: 153),
-      height: 48,
-      child: ConfirmDialogButton(
-        label: positiveLabel,
-        backgroundColor: AppColor.primaryMain,
-        textColor: Colors.white,
-        onTapAction: onPositiveAction,
-      ),
-    );
-
-    Widget bodyWidget = Row(
-      mainAxisAlignment: MainAxisAlignment.end,
-      children: [
-        Flexible(child: negativeButton),
-        const SizedBox(width: 8),
-        Flexible(child: positiveButton),
-      ],
-    );
-
-    if (padding != null) {
-      return Padding(padding: padding!, child: bodyWidget);
-    } else {
-      return bodyWidget;
-    }
-  }
-}

lib/features/email_recovery/presentation/widgets/email_recovery_form/email_recovery_form_desktop_builder.dart

@@ -1,12 +1,12 @@
 import 'dart:math';
 
 import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/default_close_button_widget.dart';
 import 'package:core/presentation/views/checkbox/custom_icon_labeled_checkbox.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/model/filter_filter.dart';
 import 'package:tmail_ui_user/features/base/widget/default_field/default_autocomplete_input_field_widget.dart';
-import 'package:tmail_ui_user/features/base/widget/default_field/default_close_button_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/default_field/default_date_drop_down_field_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/default_field/default_input_field_with_tab_key_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/default_field/default_label_field_widget.dart';

lib/features/identity_creator/presentation/widgets/identity_creator_form_desktop_builder.dart

@@ -1,12 +1,12 @@
 import 'dart:math';
 
 import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/views/button/default_close_button_widget.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:rich_text_composer/views/keyboard_rich_text.dart';
 import 'package:rich_text_composer/views/widgets/rich_text_keyboard_toolbar.dart';
-import 'package:tmail_ui_user/features/base/widget/default_field/default_close_button_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/pop_back_barrier_widget.dart';
 import 'package:tmail_ui_user/features/identity_creator/presentation/identity_creator_controller.dart';
 import 'package:tmail_ui_user/features/identity_creator/presentation/widgets/identity_creator_form_bottom_view.dart';

lib/features/labels/presentation/widgets/create_new_label_modal.dart

@@ -4,15 +4,16 @@ 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/default_close_button_widget.dart';
+import 'package:core/presentation/views/color/color_picker_modal.dart';
 import 'package:core/presentation/views/color/colors_map_widget.dart';
+import 'package:core/presentation/views/dialog/modal_list_action_button_widget.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:labels/extensions/list_label_extension.dart';
 import 'package:labels/model/label.dart';
-import 'package:tmail_ui_user/features/base/widget/default_field/default_close_button_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/label_input_field_builder.dart';
-import 'package:tmail_ui_user/features/base/widget/modal_list_action_button_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/duplicate_name_validator.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/empty_name_validator.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/name_with_space_only_validator.dart';
@@ -37,11 +38,14 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
   final _imagePaths = Get.find<ImagePaths>();
   final _verifyNameInteractor = Get.find<VerifyNameInteractor>();
 
-  final ValueNotifier<String?> _labelNameErrorText = ValueNotifier(null);
+  final ValueNotifier<String?> _labelNameErrorTextNotifier =
+      ValueNotifier(null);
+  final ValueNotifier<Color?> _labelSelectedColorNotifier = ValueNotifier(null);
   final TextEditingController _nameInputController = TextEditingController();
   final FocusNode _nameInputFocusNode = FocusNode();
 
   List<String> _labelDisplayNameList = <String>[];
+  Color? _selectedColor;
 
   @override
   void initState() {
@@ -107,10 +111,10 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
                 ),
                 Center(
                   child: Padding(
-                    padding: EdgeInsetsDirectional.only(
+                    padding: const EdgeInsetsDirectional.only(
                       start: 32,
                       end: 32,
-                      bottom: isMobile ? 32 : 48,
+                      bottom: 24,
                     ),
                     child: Text(
                       appLocalizations.organizeYourInboxWithACustomCategory,
@@ -137,7 +141,7 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
                           ValueListenableBuilder(
-                            valueListenable: _labelNameErrorText,
+                            valueListenable: _labelNameErrorTextNotifier,
                             builder: (_, errorText, __) {
                               return LabelInputFieldBuilder(
                                 label: appLocalizations.labelName,
@@ -185,7 +189,18 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
                                       start: 32,
                                       end: 16,
                                     ),
-                              child: const ColorsMapWidget(),
+                              child: ValueListenableBuilder(
+                                valueListenable: _labelSelectedColorNotifier,
+                                builder: (_, value, __) {
+                                  return ColorsMapWidget(
+                                    imagePaths: _imagePaths,
+                                    customColor: value,
+                                    onOpenColorPicker: () =>
+                                        _openColorPickerModal(appLocalizations),
+                                    onSelectColorCallback: _updateLabelColor,
+                                  );
+                                },
+                              ),
                             ),
                           ),
                           ModalListActionButtonWidget(
@@ -230,8 +245,13 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
   }
 
   void _onLabelNameInputChanged(
-      AppLocalizations appLocalizations, String value) {
-    _labelNameErrorText.value = _verifyLabelName(appLocalizations, value);
+    AppLocalizations appLocalizations,
+    String value,
+  ) {
+    _labelNameErrorTextNotifier.value = _verifyLabelName(
+      appLocalizations,
+      value,
+    );
   }
 
   String? _verifyLabelName(AppLocalizations appLocalizations, String value) {
@@ -269,11 +289,35 @@ class _CreateNewLabelModalState extends State<CreateNewLabelModal> {
     popBack();
   }
 
+  void _updateLabelColor(Color? color) {
+    _selectedColor = color;
+  }
+
+  void _onLabelColorChanged(Color? color) {
+    _updateLabelColor(color);
+    _labelSelectedColorNotifier.value = color;
+  }
+
+  Future<void> _openColorPickerModal(AppLocalizations appLocalizations) async {
+    await Get.generalDialog(
+      barrierDismissible: true,
+      barrierLabel: 'color-picker-modal',
+      pageBuilder: (_, __, ___) => ColorPickerModal(
+        imagePaths: _imagePaths,
+        modalTitle: appLocalizations.chooseCustomColour,
+        modalSubtitle: appLocalizations.chooseAColourForThisLabel,
+        initialColor: _selectedColor,
+        onSelectColorCallback: _onLabelColorChanged,
+      ),
+    );
+  }
+
   @override
   void dispose() {
     _nameInputFocusNode.dispose();
     _nameInputController.dispose();
-    _labelNameErrorText.dispose();
+    _labelNameErrorTextNotifier.dispose();
+    _labelSelectedColorNotifier.dispose();
     _labelDisplayNameList = [];
     super.dispose();
   }

lib/features/mailbox_creator/presentation/mailbox_creator_view.dart

@@ -3,13 +3,13 @@ import 'dart:math' as math;
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/default_close_button_widget.dart';
+import 'package:core/presentation/views/dialog/modal_list_action_button_widget.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/base/widget/default_field/default_button_arrow_down_field_widget.dart';
-import 'package:tmail_ui_user/features/base/widget/default_field/default_close_button_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/label_input_field_builder.dart';
-import 'package:tmail_ui_user/features/base/widget/modal_list_action_button_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_icon_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/mailbox_creator_controller.dart';

lib/features/quotas/presentation/widget/quotas_banner_widget.dart

@@ -1,9 +1,9 @@
+import 'package:core/presentation/views/button/default_close_button_widget.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.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:tmail_ui_user/features/base/widget/default_field/default_close_button_widget.dart';
 import 'package:tmail_ui_user/features/quotas/domain/extensions/quota_extensions.dart';
 import 'package:tmail_ui_user/features/quotas/presentation/quotas_controller.dart';
 import 'package:tmail_ui_user/features/quotas/presentation/styles/quotas_banner_styles.dart';

lib/features/rules_filter_creator/presentation/rules_filter_creator_view.dart

@@ -4,7 +4,6 @@ import 'package:core/core.dart';
 import 'package:core/presentation/views/dialog/confirm_dialog_button.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
-import 'package:tmail_ui_user/features/base/widget/default_field/default_close_button_widget.dart';
 import 'package:tmail_ui_user/features/base/widget/label_input_field_builder.dart';
 import 'package:tmail_ui_user/features/base/widget/pop_back_barrier_widget.dart';
 import 'package:tmail_ui_user/features/rules_filter_creator/presentation/extensions/handle_toggle_preview_rule_filter_extension.dart';