Improve style for error dialog (#2136)

linagora · Nov 20, 2024 · becacdd · becacdd
1 parent 65bdb06
commit becacdd
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 9 deletions.
diff --git a/lib/utils/dialog/twake_dialog.dart b/lib/utils/dialog/twake_dialog.dart
@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'package:animations/animations.dart';
+import 'package:fluffychat/di/global/get_it_initializer.dart';
 import 'package:fluffychat/pages/bootstrap/init_client_dialog.dart';
 import 'package:fluffychat/resource/image_paths.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
@@ -22,6 +23,8 @@ class TwakeDialog {
 
   static const double lottieSizeMobile = 48;
 
+  static ResponsiveUtils responsiveUtils = getIt.get<ResponsiveUtils>();
+
   static void hideLoadingDialog(BuildContext context) {
     if (PlatformInfos.isWeb) {
       if (TwakeApp.routerKey.currentContext != null) {
@@ -96,15 +99,21 @@ class TwakeDialog {
       loadingTitleStyle: Theme.of(context).textTheme.titleLarge,
       maxWidth: maxWidthLoadingDialogWeb,
       errorTitle: L10n.of(context)!.errorDialogTitle,
-      errorTitleStyle: Theme.of(context).textTheme.titleLarge,
+      errorTitleStyle: Theme.of(context).textTheme.titleLarge?.copyWith(
+            color: LinagoraSysColors.material().onSurfaceVariant,
+          ),
+      errorDescriptionStyle: Theme.of(context).textTheme.titleSmall?.copyWith(
+            color: LinagoraSysColors.material().onSurfaceVariant,
+          ),
       errorBackLabel: L10n.of(context)!.cancel,
-      errorBackLabelStyle: Theme.of(context).textTheme.titleLarge?.copyWith(
+      errorBackLabelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(
             color: Theme.of(context).colorScheme.primary,
           ),
       errorNextLabel: L10n.of(context)!.next,
-      errorNextLabelStyle: Theme.of(context).textTheme.titleLarge?.copyWith(
-            color: Theme.of(context).colorScheme.onPrimary,
+      errorNextLabelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(
+            color: LinagoraSysColors.material().onPrimary,
           ),
+      backgroundErrorDialog: LinagoraSysColors.material().onPrimary,
       backgroundNextLabel: Theme.of(context).colorScheme.primary,
     );
   }
@@ -116,6 +125,7 @@ class TwakeDialog {
     return await showFutureLoadingDialog(
       context: context,
       future: future,
+      maxWidth: double.infinity,
       loadingIcon: LottieBuilder.asset(
         ImagePaths.lottieTwakeLoading,
         width: lottieSizeMobile,
@@ -125,16 +135,23 @@ class TwakeDialog {
       loadingTitle: L10n.of(context)!.loading,
       loadingTitleStyle: Theme.of(context).textTheme.titleMedium,
       errorTitle: L10n.of(context)!.errorDialogTitle,
-      errorTitleStyle: Theme.of(context).textTheme.titleMedium,
+      errorTitleStyle: Theme.of(context).textTheme.headlineSmall?.copyWith(
+            color: LinagoraSysColors.material().onSurfaceVariant,
+          ),
+      errorDescriptionStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
+            color: LinagoraSysColors.material().onSurfaceVariant,
+          ),
       errorBackLabel: L10n.of(context)!.cancel,
-      errorBackLabelStyle: Theme.of(context).textTheme.titleMedium?.copyWith(
+      errorBackLabelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(
             color: Theme.of(context).colorScheme.primary,
           ),
       errorNextLabel: L10n.of(context)!.next,
-      errorNextLabelStyle: Theme.of(context).textTheme.titleMedium?.copyWith(
-            color: Theme.of(context).colorScheme.onPrimary,
+      errorNextLabelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(
+            color: LinagoraSysColors.material().onPrimary,
           ),
       backgroundNextLabel: Theme.of(context).colorScheme.primary,
+      backgroundErrorDialog: LinagoraSysColors.material().onPrimary,
+      isMobileResponsive: true,
     );
   }
 
@@ -340,6 +357,8 @@ Future<ConfirmResult> showConfirmAlertDialog({
                                         color: LinagoraSysColors.material()
                                             .onSurfaceVariant,
                                       ),
+                              maxLines: 2,
+                              overflow: TextOverflow.ellipsis,
                             ),
                           SizedBox(
                             height: responsiveUtils.isMobile(context) ? 16 : 27,
@@ -362,6 +381,8 @@ Future<ConfirmResult> showConfirmAlertDialog({
                                         color: LinagoraSysColors.material()
                                             .onSurfaceVariant,
                                       ),
+                              maxLines: 3,
+                              overflow: TextOverflow.ellipsis,
                             ),
                           SizedBox(
                             height: responsiveUtils.isMobile(context) ? 24 : 65,
@@ -375,6 +396,11 @@ Future<ConfirmResult> showConfirmAlertDialog({
                                 ),
                                 message:
                                     cancelLabel ?? L10n.of(context)!.cancel,
+                                constraints: BoxConstraints(
+                                  maxWidth: responsiveUtils.isMobile(context)
+                                      ? 96
+                                      : 112,
+                                ),
                                 styleMessage: Theme.of(context)
                                     .textTheme
                                     .labelLarge
@@ -397,6 +423,11 @@ Future<ConfirmResult> showConfirmAlertDialog({
                                     Radius.circular(100),
                                   ),
                                 ),
+                                constraints: BoxConstraints(
+                                  maxWidth: responsiveUtils.isMobile(context)
+                                      ? 96
+                                      : 112,
+                                ),
                                 margin: const EdgeInsetsDirectional.symmetric(
                                   horizontal: 24.0,
                                 ),

diff --git a/lib/widgets/twake_components/twake_text_button.dart b/lib/widgets/twake_components/twake_text_button.dart
@@ -29,6 +29,8 @@ class TwakeTextButton extends StatelessWidget {
 
   final double? borderHover;
 
+  final BoxConstraints? constraints;
+
   const TwakeTextButton({
     super.key,
     required this.message,
@@ -44,6 +46,7 @@ class TwakeTextButton extends StatelessWidget {
     this.margin = const EdgeInsetsDirectional.all(0),
     this.buttonDecoration,
     this.borderHover,
+    this.constraints,
   });
 
   @override
@@ -58,6 +61,7 @@ class TwakeTextButton extends StatelessWidget {
         hoverColor: hoverColor,
         borderRadius: BorderRadius.circular(borderHover ?? 0),
         child: Container(
+          constraints: constraints,
           height: 48,
           padding: margin,
           decoration:
@@ -74,6 +78,7 @@ class TwakeTextButton extends StatelessWidget {
                       Theme.of(context).textTheme.labelLarge?.copyWith(
                             color: LinagoraSysColors.material().onPrimary,
                           ),
+                  overflow: TextOverflow.ellipsis,
                 ),
               ),
             ),

diff --git a/pubspec.lock b/pubspec.lock
@@ -1362,7 +1362,7 @@ packages:
     description:
       path: "."
       ref: main
-      resolved-ref: "08e1e697919615410f8a855e500ef5617f90333b"
+      resolved-ref: "549ad29ac7153964e89ebf04b5693e5a6e50a64a"
       url: "[email protected]:linagora/future-loading-dialog.git"
     source: git
     version: "0.3.0"