TF-1984 Show popup dialog when clicking on Empty button

(cherry picked from commit 7504d6ec3cceff0d6697fddb93bd5212f9d9028f)

core/lib/core.dart

@@ -82,6 +82,7 @@ export 'presentation/views/toast/tmail_toast.dart';
 export 'presentation/views/bottom_popup/full_screen_action_sheet_builder.dart';
 export 'presentation/views/checkbox/labeled_checkbox.dart';
 export 'presentation/views/container/tmail_container_widget.dart';
+export 'presentation/views/clipper/side_arrow_clipper.dart';
 
 // Resources
 export 'presentation/resources/assets_paths.dart';

core/lib/presentation/extensions/color_extension.dart

@@ -203,6 +203,9 @@ extension AppColor on Color {
   static const colorLabelCancelButton = Color(0xFFAEB7C2);
   static const colorCreateFiltersButton = Color(0xFFF3F3F7);
   static const colorTextBody = Color(0xFF818C99);
+  static const colorClosePopupDialogButton = Color(0xFFAEB7C2);
+  static const colorEmptyPopupDialogButton = Color(0xFFFFC107);
+  static const colorCancelPopupDialogButton = Color(0xFFEBEDF0);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/views/clipper/side_arrow_clipper.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+
+/// Create a custom clipper with a side arrow.
+/// To help achieve various custom shapes of widget
+class SideArrowClipper extends CustomClipper<Path> {
+  /// Alignment
+  final bool isRight;
+
+  ///The radius, which creates the curved appearance of the widget has a default value of 16.
+  final double radius;
+
+  /// The arrow creates the curved shape of the widget and has a default arrowSize of 8.
+  final double arrowSize;
+
+  /// Offset show distance from bottom and has default value 30.
+  final double offset;
+
+  SideArrowClipper({
+    this.isRight = false,
+    this.radius = 16,
+    this.offset = 30,
+    this.arrowSize = 8
+  });
+
+  @override
+  Path getClip(Size size) {
+    var path = Path();
+
+    if (isRight) {
+      path.addRRect(RRect.fromLTRBR(0, 0, size.width - arrowSize, size.height, Radius.circular(radius)));
+
+      var path2 = Path();
+      path2.lineTo(arrowSize, arrowSize);
+      path2.lineTo(0, 2 * arrowSize);
+      path2.lineTo(0, 0);
+
+      path.addPath(path2, Offset(size.width - arrowSize, size.height - offset - 2 * arrowSize));
+    } else {
+      path.addRRect(RRect.fromLTRBR(arrowSize, 0, size.width, size.height, Radius.circular(radius)));
+
+      var path2 = Path();
+      path2.lineTo(0, 2 * arrowSize);
+      path2.lineTo(-arrowSize, arrowSize);
+      path2.lineTo(0, 0);
+
+      path.addPath(path2, Offset(arrowSize, size.height - offset - 2 * arrowSize));
+    }
+
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
+}