Corrected button color behaviour and added tertiary button

lib/core/enums.dart

@@ -0,0 +1,2 @@
+/// Button types used for styling the [CustomWidthButton]
+enum ButtonType { primary, secondary, tertiary }

lib/presentation/views/main_menu/create_group_view.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart' hide ButtonStyle;
 import 'package:game_tracker/core/custom_theme.dart';
+import 'package:game_tracker/core/enums.dart';
 import 'package:game_tracker/data/db/database.dart';
 import 'package:game_tracker/data/dto/group.dart';
 import 'package:game_tracker/data/dto/player.dart';
@@ -266,7 +267,7 @@ class _CreateGroupViewState extends State<CreateGroupView> {
             CustomWidthButton(
               text: 'Create group',
               sizeRelativeToWidth: 0.95,
-              buttonStyle: ButtonStyle.secondary,
+              buttonType: ButtonType.primary,
               onPressed:
                   (_groupNameController.text.isEmpty || selectedPlayers.isEmpty)
                   ? null

lib/presentation/widgets/buttons/custom_width_button.dart

@@ -1,13 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:game_tracker/core/custom_theme.dart';
-
+import 'package:game_tracker/core/enums.dart';
-enum ButtonStyle { primary, secondary }
 
 class CustomWidthButton extends StatelessWidget {
   const CustomWidthButton({
     super.key,
     required this.text,
-    this.buttonStyle = ButtonStyle.primary,
+    this.buttonType = ButtonType.primary,
     required this.sizeRelativeToWidth,
     this.onPressed,
   });
@@ -15,61 +14,101 @@ class CustomWidthButton extends StatelessWidget {
   final String text;
   final double sizeRelativeToWidth;
   final VoidCallback? onPressed;
-  final ButtonStyle buttonStyle;
+  final ButtonType buttonType;
 
   @override
   Widget build(BuildContext context) {
-
     final Color buttonBackgroundColor;
     final Color disabledBackgroundColor;
     final Color borderSideColor;
-    final Color disabledBorderSideColor;
     final Color textcolor;
     final Color disabledTextColor;
 
-
+    if (buttonType == ButtonType.primary) {
-    if(buttonStyle == ButtonStyle.primary){
-      buttonBackgroundColor = CustomTheme.primaryColor;
-      disabledBackgroundColor = CustomTheme.primaryColor.withValues(alpha: 0.24);
-      borderSideColor = Colors.transparent;
-      disabledBorderSideColor = Colors.transparent;
       textcolor = Colors.white;
       disabledTextColor = Colors.white.withValues(alpha: 0.24);
-    } else{
+      buttonBackgroundColor = CustomTheme.primaryColor;
-      buttonBackgroundColor = Colors.transparent;
+      disabledBackgroundColor = CustomTheme.primaryColor.withValues(
-      disabledBackgroundColor = Colors.transparent;
+        alpha: 0.24,
-      borderSideColor = CustomTheme.primaryColor.withValues(alpha: 0.6 );
+      );
-      disabledBorderSideColor = Colors.transparent;
-      textcolor = CustomTheme.primaryColor;
-      disabledTextColor = CustomTheme.primaryColor.withValues(alpha: 0.24);
-    }
-
 
       return ElevatedButton(
         onPressed: onPressed,
         style: ElevatedButton.styleFrom(
+          foregroundColor: textcolor,
+          disabledForegroundColor: disabledTextColor,
+          backgroundColor: buttonBackgroundColor,
           disabledBackgroundColor: disabledBackgroundColor,
+          animationDuration: const Duration(),
           minimumSize: Size(
             MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
             60,
           ),
-        backgroundColor: buttonBackgroundColor,
+          shape: RoundedRectangleBorder(
-        side: BorderSide(
+            borderRadius: BorderRadius.circular(12),
-          color: borderSideColor,
-          width: 2,
           ),
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
         ),
         child: Text(
           text,
-        style: TextStyle(
+          style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
-          fontWeight: FontWeight.w500,
-          fontSize: 22,
-          color: (onPressed == null)
-              ? disabledTextColor
-              : textcolor,
         ),
+      );
+    } else if (buttonType == ButtonType.secondary) {
+      textcolor = CustomTheme.primaryColor;
+      disabledTextColor = CustomTheme.primaryColor.withValues(alpha: 0.5);
+      buttonBackgroundColor = Colors.transparent;
+      disabledBackgroundColor = Colors.transparent;
+      borderSideColor = onPressed != null
+          ? CustomTheme.primaryColor
+          : CustomTheme.primaryColor.withValues(alpha: 0.5);
+
+      return OutlinedButton(
+        onPressed: onPressed,
+        style: OutlinedButton.styleFrom(
+          foregroundColor: textcolor,
+          disabledForegroundColor: disabledTextColor,
+          backgroundColor: buttonBackgroundColor,
+          disabledBackgroundColor: disabledBackgroundColor,
+          animationDuration: const Duration(),
+          minimumSize: Size(
+            MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
+            60,
+          ),
+          side: BorderSide(color: borderSideColor, width: 2),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(12),
+          ),
+        ),
+        child: Text(
+          text,
+          style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
+        ),
+      );
+    } else {
+      textcolor = CustomTheme.primaryColor;
+      disabledTextColor = CustomTheme.primaryColor.withValues(alpha: 0.3);
+      buttonBackgroundColor = Colors.transparent;
+      disabledBackgroundColor = Colors.transparent;
+
+      return TextButton(
+        onPressed: onPressed,
+        style: TextButton.styleFrom(
+          foregroundColor: textcolor,
+          disabledForegroundColor: disabledTextColor,
+          backgroundColor: buttonBackgroundColor,
+          disabledBackgroundColor: disabledBackgroundColor,
+          animationDuration: const Duration(),
+          minimumSize: Size(
+            MediaQuery.sizeOf(context).width * sizeRelativeToWidth,
+            60,
+          ),
+          side: const BorderSide(style: BorderStyle.none),
+        ),
+        child: Text(
+          text,
+          style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 22),
         ),
       );
     }
   }
+}