Clean / improve / update code

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=0.1.1
-app.versionCode=31
+app.versionName=0.1.2
+app.versionCode=32

fastlane/metadata/android/en-US/changelogs/32.txt

+Clean / improve / update code and UI.

fastlane/metadata/android/fr-FR/changelogs/32.txt

+Nettoyage / amélioration / mise à jour de code et de l'interface.

lib/config/default_game_settings.dart

@@ -60,10 +60,5 @@ class DefaultGameSettings {
     return [];
   }
 
-  // parameters displayed with assets (instead of painter)
-  static List<String> displayedWithAssets = [
-    //
-  ];
-
   static const int maxGuessesCount = 7;
 }

lib/config/default_global_settings.dart

@@ -25,9 +25,4 @@ class DefaultGlobalSettings {
     printlog('Did not find any available value for global parameter "$parameterCode".');
     return [];
   }
-
-  // parameters displayed with assets (instead of painter)
-  static List<String> displayedWithAssets = [
-    parameterCodeSkin,
-  ];
 }

lib/ui/game/game_end.dart

@@ -22,6 +22,7 @@ class GameEndWidget extends StatelessWidget {
 
         return Table(
           defaultColumnWidth: const IntrinsicColumnWidth(),
+          defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
           children: [
             TableRow(
               children: [

lib/ui/helpers/styled_button.dart

+import 'package:auto_size_text/auto_size_text.dart';
+import 'package:flutter/material.dart';
+
+import 'package:momomotus/utils/color_extensions.dart';
+
+class StyledButton extends StatelessWidget {
+  const StyledButton({
+    super.key,
+    required this.color,
+    required this.onPressed,
+    this.onLongPress,
+    required this.child,
+  });
+
+  final Color color;
+  final VoidCallback? onPressed;
+  final VoidCallback? onLongPress;
+  final Widget child;
+
+  factory StyledButton.text({
+    Key? key,
+    required VoidCallback? onPressed,
+    VoidCallback? onLongPress,
+    required String caption,
+    required Color color,
+  }) {
+    final Widget captionWidget = AutoSizeText(
+      caption,
+      maxLines: 1,
+      style: TextStyle(
+        inherit: true,
+        fontWeight: FontWeight.w900,
+        color: color.darken(60),
+        shadows: [
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, -2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, -2),
+          ),
+        ],
+      ),
+    );
+
+    return StyledButton(
+      color: color,
+      onPressed: onPressed,
+      onLongPress: onLongPress,
+      child: captionWidget,
+    );
+  }
+
+  factory StyledButton.icon({
+    Key? key,
+    required VoidCallback? onPressed,
+    VoidCallback? onLongPress,
+    required Icon icon,
+    required Color color,
+    required double iconSize,
+  }) {
+    return StyledButton(
+      color: color,
+      onPressed: onPressed,
+      onLongPress: onLongPress,
+      child: Icon(
+        icon.icon,
+        color: icon.color ?? color.darken(60),
+        size: iconSize,
+        shadows: [
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(2, -2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, 2),
+          ),
+          Shadow(
+            blurRadius: 5.0,
+            color: color.lighten(60),
+            offset: const Offset(-2, -2),
+          ),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    const double borderWidth = 4;
+    final Color borderColor = color.darken(40);
+    const double borderRadius = 10;
+
+    return Container(
+      margin: const EdgeInsets.all(2),
+      padding: const EdgeInsets.all(2),
+      decoration: BoxDecoration(
+        color: color,
+        border: Border.all(
+          color: borderColor,
+          width: borderWidth,
+        ),
+        borderRadius: BorderRadius.circular(borderRadius),
+      ),
+      child: CustomPaint(
+        painter: StyledButtonPainter(
+          baseColor: color,
+        ),
+        child: MaterialButton(
+          onPressed: onPressed,
+          onLongPress: onLongPress,
+          padding: const EdgeInsets.all(8),
+          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+          minWidth: 40,
+          child: child,
+        ),
+      ),
+    );
+  }
+}
+
+class StyledButtonPainter extends CustomPainter {
+  StyledButtonPainter({
+    required this.baseColor,
+  });
+
+  final Color baseColor;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Color lightColor = baseColor.lighten(20);
+    final Color darkColor = baseColor.darken(20);
+
+    final Paint paint = Paint()..style = PaintingStyle.fill;
+
+    const double cornerRadius = 6;
+
+    Path topPath = Path()
+      ..moveTo(cornerRadius, 0)
+      ..lineTo(size.width - cornerRadius, 0)
+      ..arcToPoint(
+        Offset(size.width, cornerRadius),
+        radius: const Radius.circular(cornerRadius),
+      )
+      ..lineTo(size.width, size.height * .35)
+      ..quadraticBezierTo(
+        size.width * .4,
+        size.height * .1,
+        0,
+        size.height * .3,
+      )
+      ..lineTo(0, cornerRadius)
+      ..arcToPoint(
+        const Offset(cornerRadius, 0),
+        radius: const Radius.circular(cornerRadius),
+      );
+
+    Path bottomPath = Path()
+      ..moveTo(cornerRadius, size.height)
+      ..lineTo(size.width - cornerRadius, size.height)
+      ..arcToPoint(
+        Offset(size.width, size.height - cornerRadius),
+        radius: const Radius.circular(cornerRadius),
+        clockwise: false,
+      )
+      ..lineTo(size.width, size.height * .7)
+      ..quadraticBezierTo(
+        size.width * .6,
+        size.height * .9,
+        0,
+        size.height * .7,
+      )
+      ..lineTo(0, size.height - cornerRadius)
+      ..arcToPoint(
+        Offset(cornerRadius, size.height),
+        radius: const Radius.circular(cornerRadius),
+        clockwise: false,
+      );
+
+    paint.color = lightColor;
+    canvas.drawPath(topPath, paint);
+
+    paint.color = darkColor;
+    canvas.drawPath(bottomPath, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}

lib/ui/layouts/parameters_layout.dart

@@ -5,8 +5,7 @@ import 'package:momomotus/config/default_game_settings.dart';
 import 'package:momomotus/config/default_global_settings.dart';
 import 'package:momomotus/cubit/settings_game_cubit.dart';
 import 'package:momomotus/cubit/settings_global_cubit.dart';
-import 'package:momomotus/ui/parameters/parameter_image.dart';
-import 'package:momomotus/ui/parameters/parameter_painter.dart';
+import 'package:momomotus/ui/parameters/parameter_widget.dart';
 import 'package:momomotus/ui/widgets/actions/button_delete_saved_game.dart';
 import 'package:momomotus/ui/widgets/actions/button_game_start_new.dart';
 import 'package:momomotus/ui/widgets/actions/button_resume_saved_game.dart';
@@ -35,21 +34,27 @@ class ParametersLayout extends StatelessWidget {
       lines.add(SizedBox(height: separatorHeight));
     }
 
-    lines.add(SizedBox(height: separatorHeight));
+    lines.add(Expanded(
+      child: SizedBox(height: separatorHeight),
+    ));
 
     if (canResume == false) {
       // Start new game
-      lines.add(const Expanded(
+      lines.add(
+        const AspectRatio(
+          aspectRatio: 3,
           child: StartNewGameButton(),
-      ));
+        ),
+      );
     } else {
       // Resume game
-      lines.add(const Expanded(
+      lines.add(const AspectRatio(
+        aspectRatio: 3,
         child: ResumeSavedGameButton(),
       ));
       // Delete saved game
       lines.add(SizedBox.square(
-        dimension: MediaQuery.of(context).size.width / 4,
+        dimension: MediaQuery.of(context).size.width / 5,
         child: const DeleteSavedGameButton(),
       ));
     }
@@ -102,44 +107,26 @@ class ParametersLayout extends StatelessWidget {
                   ? globalSettingsCubit.getParameterValue(code)
                   : gameSettingsCubit.getParameterValue(code);
 
-              final bool isActive = (value == currentValue);
+              final bool isSelected = (value == currentValue);
 
               final double displayWidth = MediaQuery.of(context).size.width;
-              final double itemWidth = displayWidth / availableValues.length - 26;
-
-              final bool displayedWithAssets =
-                  DefaultGlobalSettings.displayedWithAssets.contains(code) ||
-                      DefaultGameSettings.displayedWithAssets.contains(code);
+              final double itemWidth = displayWidth / availableValues.length - 4;
 
-              return TextButton(
-                child: Container(
-                  child: displayedWithAssets
-                      ? SizedBox.square(
+              return SizedBox.square(
                 dimension: itemWidth,
-                          child: ParameterImage(
+                child: ParameterWidget(
                   code: code,
                   value: value,
-                            isSelected: isActive,
-                          ),
-                        )
-                      : CustomPaint(
-                          size: Size(itemWidth, itemWidth),
-                          willChange: false,
-                          painter: ParameterPainter(
-                            code: code,
-                            value: value,
-                            isSelected: isActive,
+                  isSelected: isSelected,
+                  size: itemWidth,
                   gameSettings: gameSettingsState.settings,
                   globalSettings: globalSettingsState.settings,
-                          ),
-                          isComplex: true,
-                        ),
-                ),
                   onPressed: () {
                     isGlobal
                         ? globalSettingsCubit.setParameterValue(code, value)
                         : gameSettingsCubit.setParameterValue(code, value);
                   },
+                ),
               );
             },
           );

lib/ui/parameters/parameter_image.dart

-import 'package:flutter/material.dart';
-
-class ParameterImage extends StatelessWidget {
-  const ParameterImage({
-    super.key,
-    required this.code,
-    required this.value,
-    required this.isSelected,
-  });
-
-  final String code;
-  final String value;
-  final bool isSelected;
-
-  static const Color buttonBackgroundColor = Colors.white;
-  static const Color buttonBorderColorActive = Colors.blue;
-  static const Color buttonBorderColorInactive = Colors.white;
-  static const double buttonBorderWidth = 8.0;
-  static const double buttonBorderRadius = 8.0;
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      decoration: BoxDecoration(
-        color: buttonBackgroundColor,
-        borderRadius: BorderRadius.circular(buttonBorderRadius),
-        border: Border.all(
-          color: isSelected ? buttonBorderColorActive : buttonBorderColorInactive,
-          width: buttonBorderWidth,
-        ),
-      ),
-      child: Image(
-        image: AssetImage('assets/ui/${code}_$value.png'),
-        fit: BoxFit.fill,
-      ),
-    );
-  }
-}

lib/ui/parameters/parameter_painter.dart

@@ -11,14 +11,12 @@ class ParameterPainter extends CustomPainter {
   const ParameterPainter({
     required this.code,
     required this.value,
-    required this.isSelected,
     required this.gameSettings,
     required this.globalSettings,
   });
 
   final String code;
   final String value;
-  final bool isSelected;
   final GameSettings gameSettings;
   final GlobalSettings globalSettings;
 
@@ -27,32 +25,20 @@ class ParameterPainter extends CustomPainter {
     // force square
     final double canvasSize = min(size.width, size.height);
 
-    const Color borderColorEnabled = Colors.blue;
-    const Color borderColorDisabled = Colors.white;
-
-    // "enabled/disabled" border
-    final paint = Paint();
-    paint.style = PaintingStyle.stroke;
-    paint.color = isSelected ? borderColorEnabled : borderColorDisabled;
-    paint.strokeJoin = StrokeJoin.round;
-    paint.strokeWidth = 10;
-    canvas.drawRect(
-        Rect.fromPoints(const Offset(0, 0), Offset(canvasSize, canvasSize)), paint);
-
     // content
     switch (code) {
       case DefaultGameSettings.parameterCodeLang:
-        paintLangParameterItem(value, canvas, canvasSize);
+        paintLangParameterItem(canvas, canvasSize);
         break;
       case DefaultGameSettings.parameterCodeLength:
-        paintLengthParameterItem(value, canvas, canvasSize);
+        paintLengthParameterItem(canvas, canvasSize);
         break;
       case DefaultGameSettings.parameterCodeLevel:
-        paintLevelParameterItem(value, canvas, canvasSize);
+        paintLevelParameterItem(canvas, canvasSize);
         break;
       default:
         printlog('Unknown parameter: $code/$value');
-        paintUnknownParameterItem(value, canvas, canvasSize);
+        paintUnknownParameterItem(canvas, canvasSize);
     }
   }
 
@@ -63,7 +49,6 @@ class ParameterPainter extends CustomPainter {
 
   // "unknown" parameter -> simple block with text
   void paintUnknownParameterItem(
-    final String value,
     final Canvas canvas,
     final double size,
   ) {
@@ -71,12 +56,8 @@ class ParameterPainter extends CustomPainter {
     paint.strokeJoin = StrokeJoin.round;
     paint.strokeWidth = 3;
 
-    paint.color = Colors.grey;
-    paint.style = PaintingStyle.fill;
-    canvas.drawRect(Rect.fromPoints(const Offset(0, 0), Offset(size, size)), paint);
-
     final textSpan = TextSpan(
-      text: '?\n$value',
+      text: '$code\n$value',
       style: const TextStyle(
         color: Colors.black,
         fontSize: 18,
@@ -99,30 +80,24 @@ class ParameterPainter extends CustomPainter {
   }
 
   void paintLangParameterItem(
-    final String value,
     final Canvas canvas,
     final double size,
   ) {
     const itemCountEmoji = '💬\n';
 
-    Color backgroundColor = Colors.grey;
     String text = '';
 
     switch (value) {
       case DefaultGameSettings.lengthValue4:
-        backgroundColor = Colors.grey;
         text = '⭐';
         break;
       case DefaultGameSettings.lengthValue5:
-        backgroundColor = Colors.green;
         text = itemCountEmoji + DefaultGameSettings.lengthValue5.toString();
         break;
       case DefaultGameSettings.lengthValue6:
-        backgroundColor = Colors.orange;
         text = itemCountEmoji + DefaultGameSettings.lengthValue6.toString();
         break;
       case DefaultGameSettings.lengthValue7:
-        backgroundColor = Colors.red;
         text = itemCountEmoji + DefaultGameSettings.lengthValue7.toString();
         break;
       default:
@@ -134,11 +109,6 @@ class ParameterPainter extends CustomPainter {
     paint.strokeJoin = StrokeJoin.round;
     paint.strokeWidth = 3 / 100 * size;
 
-    // Colored background
-    paint.color = backgroundColor;
-    paint.style = PaintingStyle.fill;
-    canvas.drawRect(Rect.fromPoints(const Offset(0, 0), Offset(size, size)), paint);
-
     // centered text value
     final textSpan = TextSpan(
       text: text,
@@ -164,45 +134,17 @@ class ParameterPainter extends CustomPainter {
   }
 
   void paintLengthParameterItem(
-    final String value,
     final Canvas canvas,
     final double size,
   ) {
     const itemCountEmoji = '💬\n';
 
-    Color backgroundColor = Colors.grey;
     final String text = itemCountEmoji + value.toString();
 
-    switch (value) {
-      case DefaultGameSettings.lengthValue4:
-        backgroundColor = Colors.green;
-        break;
-      case DefaultGameSettings.lengthValue5:
-        backgroundColor = Colors.yellow;
-        break;
-      case DefaultGameSettings.lengthValue6:
-        backgroundColor = Colors.orange;
-        break;
-      case DefaultGameSettings.lengthValue7:
-        backgroundColor = Colors.red;
-        break;
-      case DefaultGameSettings.lengthValue8:
-        backgroundColor = Colors.purple;
-        break;
-      default:
-        printlog('Wrong value for length parameter value: $value');
-        return;
-    }
-
     final paint = Paint();
     paint.strokeJoin = StrokeJoin.round;
     paint.strokeWidth = 3 / 100 * size;
 
-    // Colored background
-    paint.color = backgroundColor;
-    paint.style = PaintingStyle.fill;
-    canvas.drawRect(Rect.fromPoints(const Offset(0, 0), Offset(size, size)), paint);
-
     // centered text value
     final textSpan = TextSpan(
       text: text,
@@ -228,20 +170,16 @@ class ParameterPainter extends CustomPainter {
   }
 
   void paintLevelParameterItem(
-    final String value,
     final Canvas canvas,
     final double size,
   ) {
-    Color backgroundColor = Colors.grey;
     String text = '';
 
     switch (value) {
       case DefaultGameSettings.levelValueEasy:
-        backgroundColor = Colors.green;
         text = '🧒';
         break;
       case DefaultGameSettings.levelValueNormal:
-        backgroundColor = Colors.orange;
         text = '🤯';
         break;
       default:
@@ -253,11 +191,6 @@ class ParameterPainter extends CustomPainter {
     paint.strokeJoin = StrokeJoin.round;
     paint.strokeWidth = 3;
 
-    // Colored background
-    paint.color = backgroundColor;
-    paint.style = PaintingStyle.fill;
-    canvas.drawRect(Rect.fromPoints(const Offset(0, 0), Offset(size, size)), paint);
-
     // centered text value
     final textSpan = TextSpan(
       text: text,

lib/ui/parameters/parameter_widget.dart

+import 'package:flutter/material.dart';
+
+import 'package:momomotus/config/default_game_settings.dart';
+import 'package:momomotus/config/default_global_settings.dart';
+import 'package:momomotus/models/settings/settings_game.dart';
+import 'package:momomotus/models/settings/settings_global.dart';
+import 'package:momomotus/ui/helpers/styled_button.dart';
+import 'package:momomotus/ui/parameters/parameter_painter.dart';
+import 'package:momomotus/utils/tools.dart';
+
+class ParameterWidget extends StatelessWidget {
+  const ParameterWidget({
+    super.key,
+    required this.code,
+    required this.value,
+    required this.isSelected,
+    required this.size,
+    required this.gameSettings,
+    required this.globalSettings,
+    required this.onPressed,
+  });
+
+  final String code;
+  final String value;
+  final bool isSelected;
+  final double size;
+  final GameSettings gameSettings;
+  final GlobalSettings globalSettings;
+  final VoidCallback onPressed;
+
+  static const Color buttonColorActive = Colors.blue;
+  static const Color buttonColorInactive = Colors.white;
+  static const double buttonBorderWidth = 4.0;
+  static const double buttonBorderRadius = 12.0;
+
+  @override
+  Widget build(BuildContext context) {
+    Widget content = const SizedBox.shrink();
+
+    switch (code) {
+      case DefaultGameSettings.parameterCodeLang:
+        content = getLangParameterItem();
+        break;
+      case DefaultGameSettings.parameterCodeLength:
+        content = getLengthParameterItem();
+        break;
+      case DefaultGameSettings.parameterCodeLevel:
+        content = getLevelParameterItem();
+        break;
+      case DefaultGlobalSettings.parameterCodeSkin:
+        content = getSkinParameterItem();
+        break;
+      default:
+        printlog('Unknown parameter: $code/$value');
+        content = getUnknownParameterItem();
+    }
+
+    final Color buttonColor = isSelected ? buttonColorActive : buttonColorInactive;
+
+    return Container(
+      decoration: BoxDecoration(
+        color: buttonColor,
+        borderRadius: BorderRadius.circular(buttonBorderRadius),
+        border: Border.all(
+          color: buttonColor,
+          width: buttonBorderWidth,
+        ),
+      ),
+      child: content,
+    );
+  }
+
+  // "unknown" parameter -> simple block with text
+  Widget getUnknownParameterItem() {
+    return StyledButton.text(
+      caption: '$code / $value',
+      color: Colors.grey,
+      onPressed: null,
+    );
+  }
+
+  Widget getLangParameterItem() {
+    Color backgroundColor = Colors.grey;
+
+    switch (value) {
+      case DefaultGameSettings.lengthValue4:
+        backgroundColor = Colors.grey;
+        break;
+      case DefaultGameSettings.lengthValue5:
+        backgroundColor = Colors.green;
+        break;
+      case DefaultGameSettings.lengthValue6:
+        backgroundColor = Colors.orange;
+        break;
+      case DefaultGameSettings.lengthValue7:
+        backgroundColor = Colors.red;
+        break;
+      default:
+        printlog('Wrong value for lang parameter value: $value');
+    }
+
+    return StyledButton(
+      color: backgroundColor,
+      onPressed: onPressed,
+      child: CustomPaint(
+        size: Size(size, size),
+        willChange: false,
+        painter: ParameterPainter(
+          code: code,
+          value: value,
+          gameSettings: gameSettings,
+          globalSettings: globalSettings,
+        ),
+        isComplex: true,
+      ),
+    );
+  }
+
+  Widget getLengthParameterItem() {
+    Color backgroundColor = Colors.grey;
+
+    switch (value) {
+      case DefaultGameSettings.lengthValue4:
+        backgroundColor = Colors.green;
+        break;
+      case DefaultGameSettings.lengthValue5:
+        backgroundColor = Colors.yellow;
+        break;
+      case DefaultGameSettings.lengthValue6:
+        backgroundColor = Colors.orange;
+        break;
+      case DefaultGameSettings.lengthValue7:
+        backgroundColor = Colors.red;
+        break;
+      case DefaultGameSettings.lengthValue8:
+        backgroundColor = Colors.purple;
+        break;
+      default:
+        printlog('Wrong value for length parameter value: $value');
+    }
+
+    return StyledButton(
+      color: backgroundColor,
+      onPressed: onPressed,
+      child: CustomPaint(
+        size: Size(size, size),
+        willChange: false,
+        painter: ParameterPainter(
+          code: code,
+          value: value,
+          gameSettings: gameSettings,
+          globalSettings: globalSettings,
+        ),
+        isComplex: true,
+      ),
+    );
+  }
+
+  Widget getLevelParameterItem() {
+    Color backgroundColor = Colors.grey;
+
+    switch (value) {
+      case DefaultGameSettings.levelValueEasy:
+        backgroundColor = Colors.green;
+        break;
+      case DefaultGameSettings.levelValueNormal:
+        backgroundColor = Colors.orange;
+        break;
+      default:
+        printlog('Wrong value for level parameter value: $value');
+    }
+
+    return StyledButton(
+      color: backgroundColor,
+      onPressed: onPressed,
+      child: CustomPaint(
+        size: Size(size, size),
+        willChange: false,
+        painter: ParameterPainter(
+          code: code,
+          value: value,
+          gameSettings: gameSettings,
+          globalSettings: globalSettings,
+        ),
+        isComplex: true,
+      ),
+    );
+  }
+
+  Widget getSkinParameterItem() {
+    return StyledButton(
+      color: Colors.green.shade800,
+      onPressed: onPressed,
+      child: Image(
+        image: AssetImage('assets/ui/${DefaultGlobalSettings.parameterCodeSkin}_$value.png'),
+        fit: BoxFit.fill,
+      ),
+    );
+  }
+}

lib/ui/widgets/actions/button_delete_saved_game.dart

@@ -2,20 +2,22 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'package:momomotus/cubit/game_cubit.dart';
+import 'package:momomotus/ui/helpers/styled_button.dart';
 
 class DeleteSavedGameButton extends StatelessWidget {
   const DeleteSavedGameButton({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return TextButton(
+    return StyledButton(
+      color: Colors.grey,
+      onPressed: () {
+        BlocProvider.of<GameCubit>(context).deleteSavedGame();
+      },
       child: const Image(
         image: AssetImage('assets/ui/button_delete_saved_game.png'),
         fit: BoxFit.fill,
       ),
-      onPressed: () {
-        BlocProvider.of<GameCubit>(context).deleteSavedGame();
-      },
     );
   }
 }

lib/ui/widgets/actions/button_game_quit.dart

@@ -2,20 +2,22 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'package:momomotus/cubit/game_cubit.dart';
+import 'package:momomotus/ui/helpers/styled_button.dart';
 
 class QuitGameButton extends StatelessWidget {
   const QuitGameButton({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return ElevatedButton(
+    return StyledButton(
+      color: Colors.red,
+      onPressed: () {
+        BlocProvider.of<GameCubit>(context).quitGame();
+      },
       child: const Image(
         image: AssetImage('assets/ui/button_back.png'),
         fit: BoxFit.fill,
       ),
-      onPressed: () {
-        BlocProvider.of<GameCubit>(context).quitGame();
-      },
     );
   }
 }