Moved button

lib/presentation/views/main_menu/group_view/group_detail_view.dart

@@ -3,6 +3,7 @@ import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
 import 'package:tallee/core/adaptive_page_route.dart';
 import 'package:tallee/core/custom_theme.dart';
+import 'package:tallee/core/enums.dart';
 import 'package:tallee/data/db/database.dart';
 import 'package:tallee/data/models/group.dart';
 import 'package:tallee/data/models/match.dart';
@@ -10,10 +11,10 @@ import 'package:tallee/data/models/player.dart';
 import 'package:tallee/l10n/generated/app_localizations.dart';
 import 'package:tallee/presentation/views/main_menu/group_view/create_group_view.dart';
 import 'package:tallee/presentation/widgets/app_skeleton.dart';
-import 'package:tallee/presentation/widgets/buttons/animated_dialog_button.dart';
 import 'package:tallee/presentation/widgets/buttons/main_menu_button.dart';
 import 'package:tallee/presentation/widgets/colored_icon_container.dart';
-import 'package:tallee/presentation/widgets/custom_alert_dialog.dart';
+import 'package:tallee/presentation/widgets/dialog/custom_alert_dialog.dart';
+import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart';
 import 'package:tallee/presentation/widgets/tiles/info_tile.dart';
 import 'package:tallee/presentation/widgets/tiles/text_icon_tile.dart';
 
@@ -70,23 +71,16 @@ class _GroupDetailViewState extends State<GroupDetailView> {
                 context: context,
                 builder: (context) => CustomAlertDialog(
                   title: '${loc.delete_group}?',
-                  content: loc.this_cannot_be_undone,
+                  content: Text(loc.this_cannot_be_undone),
                   actions: [
-                    AnimatedDialogButton(
+                    CustomDialogAction(
-                      onPressed: () => Navigator.of(context).pop(false),
-                      child: Text(
-                        loc.cancel,
-                        style: const TextStyle(color: CustomTheme.textColor),
-                      ),
-                    ),
-                    AnimatedDialogButton(
                       onPressed: () => Navigator.of(context).pop(true),
-                      child: Text(
+                      text: loc.delete,
-                        loc.delete,
-                        style: const TextStyle(
-                          color: CustomTheme.secondaryColor,
-                        ),
                     ),
+                    CustomDialogAction(
+                      onPressed: () => Navigator.of(context).pop(false),
+                      buttonType: ButtonType.secondary,
+                      text: loc.cancel,
                     ),
                   ],
                 ),

lib/presentation/views/main_menu/match_view/match_detail_view.dart

@@ -4,15 +4,16 @@ import 'package:provider/provider.dart';
 import 'package:tallee/core/adaptive_page_route.dart';
 import 'package:tallee/core/common.dart';
 import 'package:tallee/core/custom_theme.dart';
+import 'package:tallee/core/enums.dart';
 import 'package:tallee/data/db/database.dart';
 import 'package:tallee/data/models/match.dart';
 import 'package:tallee/l10n/generated/app_localizations.dart';
 import 'package:tallee/presentation/views/main_menu/match_view/create_match/create_match_view.dart';
 import 'package:tallee/presentation/views/main_menu/match_view/match_result_view.dart';
-import 'package:tallee/presentation/widgets/buttons/animated_dialog_button.dart';
 import 'package:tallee/presentation/widgets/buttons/main_menu_button.dart';
 import 'package:tallee/presentation/widgets/colored_icon_container.dart';
-import 'package:tallee/presentation/widgets/custom_alert_dialog.dart';
+import 'package:tallee/presentation/widgets/dialog/custom_alert_dialog.dart';
+import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart';
 import 'package:tallee/presentation/widgets/tiles/info_tile.dart';
 import 'package:tallee/presentation/widgets/tiles/text_icon_tile.dart';
 
@@ -64,23 +65,16 @@ class _MatchDetailViewState extends State<MatchDetailView> {
                 context: context,
                 builder: (context) => CustomAlertDialog(
                   title: '${loc.delete_match}?',
-                  content: loc.this_cannot_be_undone,
+                  content: Text(loc.this_cannot_be_undone),
                   actions: [
-                    AnimatedDialogButton(
+                    CustomDialogAction(
-                      onPressed: () => Navigator.of(context).pop(false),
-                      child: Text(
-                        loc.cancel,
-                        style: const TextStyle(color: CustomTheme.textColor),
-                      ),
-                    ),
-                    AnimatedDialogButton(
                       onPressed: () => Navigator.of(context).pop(true),
-                      child: Text(
+                      text: loc.delete,
-                        loc.delete,
-                        style: const TextStyle(
-                          color: CustomTheme.secondaryColor,
-                        ),
                     ),
+                    CustomDialogAction(
+                      onPressed: () => Navigator.of(context).pop(false),
+                      buttonType: ButtonType.secondary,
+                      text: loc.cancel,
                     ),
                   ],
                 ),

lib/presentation/views/main_menu/settings_view/settings_view.dart

@@ -9,8 +9,8 @@ import 'package:tallee/core/custom_theme.dart';
 import 'package:tallee/core/enums.dart';
 import 'package:tallee/l10n/generated/app_localizations.dart';
 import 'package:tallee/presentation/views/main_menu/settings_view/licenses_view.dart';
-import 'package:tallee/presentation/widgets/buttons/animated_dialog_button.dart';
+import 'package:tallee/presentation/widgets/dialog/custom_alert_dialog.dart';
-import 'package:tallee/presentation/widgets/custom_alert_dialog.dart';
+import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart';
 import 'package:tallee/presentation/widgets/tiles/settings_list_tile.dart';
 import 'package:tallee/services/data_transfer_service.dart';
 import 'package:url_launcher/url_launcher.dart';
@@ -122,25 +122,16 @@ class _SettingsViewState extends State<SettingsView> {
                         context: context,
                         builder: (context) => CustomAlertDialog(
                           title: '${loc.delete_all_data}?',
-                          content: loc.this_cannot_be_undone,
+                          content: Text(loc.this_cannot_be_undone),
                           actions: [
-                            AnimatedDialogButton(
+                            CustomDialogAction(
-                              onPressed: () => Navigator.of(context).pop(false),
-                              child: Text(
-                                loc.cancel,
-                                style: const TextStyle(
-                                  color: CustomTheme.textColor,
-                                ),
-                              ),
-                            ),
-                            AnimatedDialogButton(
                               onPressed: () => Navigator.of(context).pop(true),
-                              child: Text(
+                              text: loc.delete,
-                                loc.delete,
-                                style: const TextStyle(
-                                  color: CustomTheme.secondaryColor,
-                                ),
                             ),
+                            CustomDialogAction(
+                              onPressed: () => Navigator.of(context).pop(false),
+                              buttonType: ButtonType.secondary,
+                              text: loc.cancel,
                             ),
                           ],
                         ),

lib/presentation/widgets/buttons/animated_dialog_button.dart

@@ -1,22 +1,28 @@
 import 'package:flutter/material.dart';
-import 'package:tallee/core/custom_theme.dart';
+import 'package:tallee/core/enums.dart';
 
 class AnimatedDialogButton extends StatefulWidget {
   /// A custom animated button widget that provides a scaling and opacity effect
   /// when pressed.
   /// - [onPressed]: Callback function that is triggered when the button is pressed.
-  /// - [child]: The child widget to be displayed inside the button, typically a text or icon.
+  /// - [buttonText]: The text to be displayed on the button.
+  /// - [buttonType]: The type of the button, which determines its styling.
+  /// - [buttonConstraints]: Optional constraints to control the button's size.
   const AnimatedDialogButton({
     super.key,
+    required this.buttonText,
     required this.onPressed,
-    required this.child,
+    this.buttonConstraints,
+    this.buttonType = ButtonType.primary,
   });
 
-  /// Callback function that is triggered when the button is pressed.
+  final String buttonText;
+
   final VoidCallback onPressed;
 
-  /// The child widget to be displayed inside the button, typically a text or icon.
+  final BoxConstraints? buttonConstraints;
-  final Widget child;
+
+  final ButtonType buttonType;
 
   @override
   State<AnimatedDialogButton> createState() => _AnimatedDialogButtonState();
@@ -27,6 +33,29 @@ class _AnimatedDialogButtonState extends State<AnimatedDialogButton> {
 
   @override
   Widget build(BuildContext context) {
+    final textStyling = TextStyle(
+      color: widget.buttonType == ButtonType.primary
+          ? Colors.black
+          : Colors.white,
+      fontSize: 16,
+      fontWeight: FontWeight.bold,
+    );
+
+    final buttonDecoration = widget.buttonType == ButtonType.primary
+        // Primary
+        ? BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(12),
+          )
+        : widget.buttonType == ButtonType.secondary
+        // Secondary
+        ? BoxDecoration(
+            border: BoxBorder.all(color: Colors.white, width: 2),
+            borderRadius: BorderRadius.circular(12),
+          )
+        // Tertiary
+        : const BoxDecoration();
+
     return GestureDetector(
       onTapDown: (_) => setState(() => _isPressed = true),
       onTapUp: (_) => setState(() => _isPressed = false),
@@ -38,10 +67,18 @@ class _AnimatedDialogButtonState extends State<AnimatedDialogButton> {
         child: AnimatedOpacity(
           opacity: _isPressed ? 0.6 : 1.0,
           duration: const Duration(milliseconds: 100),
+          child: Center(
             child: Container(
-            decoration: CustomTheme.standardBoxDecoration,
+              constraints: widget.buttonConstraints,
-            padding: const EdgeInsets.symmetric(horizontal: 26, vertical: 6),
+              decoration: buttonDecoration,
-            child: widget.child,
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+              margin: const EdgeInsets.symmetric(vertical: 8),
+              child: Text(
+                widget.buttonText,
+                style: textStyling,
+                textAlign: TextAlign.center,
+              ),
+            ),
           ),
         ),
       ),

lib/presentation/widgets/dialog/custom_alert_dialog.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:tallee/core/custom_theme.dart';
+import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart';
 
 class CustomAlertDialog extends StatelessWidget {
   /// A custom alert dialog widget that provides a os unspecific AlertDialog,
@@ -16,20 +17,23 @@ class CustomAlertDialog extends StatelessWidget {
   });
 
   final String title;
-  final String content;
+  final Widget content;
-  final List<Widget> actions;
+  final List<CustomDialogAction> actions;
 
   @override
   Widget build(BuildContext context) {
     return AlertDialog(
-      title: Text(title, style: const TextStyle(color: CustomTheme.textColor)),
+      title: Text(
-      content: Text(
+        title,
-        content,
+        style: const TextStyle(
-        style: const TextStyle(color: CustomTheme.textColor),
+          fontWeight: FontWeight.bold,
+          color: CustomTheme.textColor,
         ),
+      ),
+      content: content,
       actions: actions,
       backgroundColor: CustomTheme.boxColor,
-      actionsAlignment: MainAxisAlignment.spaceAround,
+      actionsAlignment: MainAxisAlignment.center,
       shape: RoundedRectangleBorder(
         borderRadius: CustomTheme.standardBorderRadiusAll,
         side: const BorderSide(color: CustomTheme.boxBorderColor),

lib/presentation/widgets/dialog/custom_dialog_action.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/cupertino.dart';
+import 'package:tallee/core/enums.dart';
+import 'package:tallee/presentation/widgets/buttons/animated_dialog_button.dart';
+
+class CustomDialogAction extends StatelessWidget {
+  /// A custom dialog action widget that represents a button in a dialog.
+  /// - [text]: The text to be displayed on the button.
+  /// - [buttonType]: The type of the button, which determines its styling.
+  /// - [onPressed]: Callback function that is triggered when the button is pressed.
+  const CustomDialogAction({
+    super.key,
+    required this.onPressed,
+    required this.text,
+    this.buttonType = ButtonType.primary,
+  });
+
+  final String text;
+
+  final ButtonType buttonType;
+
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedDialogButton(
+      onPressed: onPressed,
+      buttonText: text,
+      buttonType: buttonType,
+      buttonConstraints: const BoxConstraints(minWidth: 300),
+    );
+  }
+}