TF-390 Apply new ui composer for browser

core/lib/presentation/extensions/color_extension.dart

@@ -43,7 +43,7 @@ extension AppColor on Color {
   static const attachmentFileBorderColor = Color(0xFFEAEAEA);
   static const attachmentFileNameColor = Color(0xFF182952);
   static const attachmentFileSizeColor = Color(0xFF7E869B);
-  static const avatarColor = Color(0xFFE6E5FF);
+  static const avatarColor = Color(0xFFF8F8F8);
   static const avatarTextColor = Color(0xFF3840F7);
   static const sentTimeTextColorUnRead = Color(0xFF182952);
   static const subjectEmailTextColorUnRead = Color(0xFF3840F7);
@@ -103,6 +103,9 @@ extension AppColor on Color {
   static const colorBorderBodyThread = Color(0x5CB8C1CC);
   static const colorBgDesktop = Color(0xFFF6F6F6);
   static const colorItemEmailSelectedDesktop = Color(0x0F007AFF);
+  static const colorAvatar = Color(0xFFDE5E5E);
+  static const colorFocusButton = Color(0x14818C99);
+  static const colorBorderEmailAddressInvalid = Color(0xFFFF3347);
 
   static const mapGradientColor = [
     [Color(0xFF21D4FD), Color(0xFFB721FF)],

core/lib/presentation/resources/image_paths.dart

@@ -68,18 +68,24 @@ class ImagePaths {
   String get icAttachmentsComposer => _getImagePath('ic_attachments_composer.svg');
   String get icCloseComposer => _getImagePath('ic_close_composer.svg');
   String get icFullScreenComposer => _getImagePath('ic_fullscreen_composer.svg');
-  String get icMinimizeComposer => _getImagePath('ic_minimize_composer.svg');
+  String get icMinimize => _getImagePath('ic_minimize.svg');
   String get icSendComposer => _getImagePath('ic_send_composer.svg');
   String get icDeleteComposer => _getImagePath('ic_delete_composer.svg');
   String get icFileAttachment => _getImagePath('ic_file_attachment.svg');
   String get icDeleteAttachment => _getImagePath('ic_delete_attachment.svg');
   String get icSendMobile => _getImagePath('ic_send_mobile.svg');
-  String get icSendMobileDisable => _getImagePath('ic_send_mobile_disable.svg');
+  String get icSendDisable => _getImagePath('ic_send_disable.svg');
   String get icArrowDown => _getImagePath('ic_arrow_down.svg');
   String get icFilterWeb => _getImagePath('ic_filter_web.svg');
   String get icMarkAllAsRead => _getImagePath('ic_mark_all_as_read.svg');
   String get icRefresh => _getImagePath('ic_refresh.svg');
   String get icSelectAll => _getImagePath('ic_select_all.svg');
+  String get icFullScreenExit => _getImagePath('ic_fullscreen_exit.svg');
+  String get icChevronUp => _getImagePath('ic_chevron_up.svg');
+  String get icAddEmailAddress => _getImagePath('ic_add_email_address.svg');
+  String get icClose => _getImagePath('ic_close.svg');
+  String get icSendToastError => _getImagePath('ic_send_toast_error.svg');
+  String get icEmpty => _getImagePath('ic_empty.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

core/lib/presentation/views/button/icon_button_web.dart

@@ -1,4 +1,5 @@
 
+import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 
 typedef IconWebCallback = void Function();
@@ -20,7 +21,7 @@ Widget buildIconWeb({
           iconSize: iconSize,
           padding: iconPadding ?? EdgeInsets.all(8.0),
           splashRadius: splashRadius ?? 20,
-          tooltip: tooltip,
+          tooltip: tooltip ?? '',
           onPressed: onTap)
   );
 }
@@ -50,4 +51,47 @@ Widget buildIconWebHasPosition(BuildContext context, {
         child: icon,
       )
   );
-}
+}
+
+Widget buildTextCircleButton(String text, {
+  TextStyle? textStyle,
+  IconWebCallback? onTap,
+}) {
+  return Material(
+      shape: CircleBorder(),
+      color: Colors.transparent,
+      child: TextButton(
+          child: Text(
+              text,
+              style: textStyle ?? TextStyle(fontWeight: FontWeight.normal, fontSize: 15, color: AppColor.lineItemListColor)),
+          style: ButtonStyle(
+              overlayColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) => AppColor.colorFocusButton),
+              shape: MaterialStateProperty.all(CircleBorder()),
+              padding: MaterialStateProperty.resolveWith<EdgeInsets>((Set<MaterialState> states) => EdgeInsets.all(5)),
+              elevation: MaterialStateProperty.resolveWith<double>((Set<MaterialState> states) => 0)),
+          onPressed: () => onTap?.call()
+      )
+  );
+}
+
+Widget buildTextButton(String text, {
+  TextStyle? textStyle,
+  double? width,
+  double? height,
+  Color? backgroundColor,
+  double? radius,
+  IconWebCallback? onTap,
+}) {
+  return SizedBox(
+    width: width ?? double.infinity,
+    height: height ?? 40,
+    child: ElevatedButton(
+        style: ButtonStyle(
+            backgroundColor: MaterialStateProperty.resolveWith((states) => backgroundColor ?? AppColor.colorTextButton),
+            elevation: MaterialStateProperty.resolveWith((states) => 0),
+            shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(radius ?? 0)))),
+        child: Text(text, style: textStyle ?? TextStyle(fontSize: 17, color: Colors.white, fontWeight: FontWeight.w500)),
+        onPressed: () => onTap?.call()
+    ),
+  );
+}

core/lib/presentation/views/dialog/confirmation_dialog_builder.dart

@@ -23,6 +23,10 @@ class ConfirmDialogBuilder {
   TextStyle? _styleTitle;
   TextStyle? _styleContent;
   double? _radiusButton;
+  EdgeInsets? _paddingTitle;
+  EdgeInsets? _paddingContent;
+  EdgeInsets? _paddingButton;
+  EdgeInsets? _marginIcon;
 
   OnConfirmButtonAction? _onConfirmButtonAction;
   OnCancelButtonAction? _onCancelButtonAction;
@@ -74,6 +78,22 @@ class ConfirmDialogBuilder {
     _radiusButton = radius;
   }
 
+  void paddingTitle(EdgeInsets? value) {
+    _paddingTitle = value;
+  }
+
+  void paddingContent(EdgeInsets? value) {
+    _paddingContent = value;
+  }
+
+  void paddingButton(EdgeInsets? value) {
+    _paddingButton = value;
+  }
+
+  void marginIcon(EdgeInsets? value) {
+    _marginIcon = value;
+  }
+
   void onConfirmButtonAction(String confirmText, OnConfirmButtonAction? onConfirmButtonAction) {
     _confirmText = confirmText;
     _onConfirmButtonAction = onConfirmButtonAction;
@@ -104,19 +124,21 @@ class ConfirmDialogBuilder {
           if (_onCloseButtonAction != null)
             Align(
               alignment: Alignment.centerRight,
-              child: IconButton(
-                  padding: EdgeInsets.only(top: 16, right: 16),
-                  onPressed: () => _onCloseButtonAction?.call(),
-                  icon: SvgPicture.asset(_imagePath.icCloseMailbox, width: 30, height: 30, fit: BoxFit.fill))),
+              child: Padding(
+                padding: EdgeInsets.only(top: 8, right: 8),
+                child: buildIconWeb(
+                    icon: SvgPicture.asset(_imagePath.icCloseMailbox, fit: BoxFit.fill),
+                    onTap: () => _onCloseButtonAction?.call())
+              )),
           if (_iconWidget != null)
             Container(
-              margin: EdgeInsets.only(top: 24),
+              margin: _marginIcon ?? EdgeInsets.only(top: 24),
               alignment: Alignment.center,
               child: _iconWidget,
             ),
           if (_title.isNotEmpty)
             Padding(
-              padding: EdgeInsets.only(top: 12),
+              padding: _paddingTitle ?? EdgeInsets.only(top: 12),
               child: Center(
                 child: Text(
                   _title,
@@ -127,7 +149,7 @@ class ConfirmDialogBuilder {
             ),
           if (_content.isNotEmpty)
             Padding(
-              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 24),
+              padding: _paddingContent ?? EdgeInsets.symmetric(horizontal: 16, vertical: 24),
               child: Center(
                 child: Text(_content,
                   textAlign: TextAlign.center,
@@ -136,22 +158,24 @@ class ConfirmDialogBuilder {
               ),
             ),
           Padding(
-            padding: EdgeInsets.only(bottom: 16, left: 16, right: 16),
+            padding: _paddingButton ?? EdgeInsets.only(bottom: 16, left: 16, right: 16),
             child: Row(
               children: [
-                Expanded(child: _buildButton(
+                if (_cancelText.isNotEmpty)
+                  Expanded(child: _buildButton(
                     name: _cancelText,
                     bgColor: _colorCancelButton,
                     radius: _radiusButton,
                     textStyle: _styleTextCancelButton,
                     action: _onCancelButtonAction)),
-                SizedBox(width: 16),
-                Expanded(child: _buildButton(
-                  name: _confirmText,
-                  bgColor: _colorConfirmButton,
-                  radius: _radiusButton,
-                  textStyle: _styleTextConfirmButton,
-                  action: _onConfirmButtonAction))
+                if (_confirmText.isNotEmpty && _cancelText.isNotEmpty) SizedBox(width: 16),
+                if (_confirmText.isNotEmpty)
+                  Expanded(child: _buildButton(
+                    name: _confirmText,
+                    bgColor: _colorConfirmButton,
+                    radius: _radiusButton,
+                    textStyle: _styleTextConfirmButton,
+                    action: _onConfirmButtonAction))
               ]
             ))
         ])