Reworked team creation tile

lib/presentation/widgets/tiles/team_creation_tile.dart

@@ -1,10 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:fluttericon/font_awesome_icons.dart';
 import 'package:tallee/core/common.dart';
 import 'package:tallee/core/constants.dart';
 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/widgets/buttons/animated_dialog_button.dart';
+import 'package:tallee/presentation/widgets/buttons/haptic_icon_button.dart';
 import 'package:tallee/presentation/widgets/text_input/text_input_field.dart';
 
 class TeamCreationTile extends StatefulWidget {
@@ -36,19 +37,32 @@ class _TeamCreationTileState extends State<TeamCreationTile> {
     GameColor.values.length,
     (index) => getTeamColor(index),
   );
+
   @override
   Widget build(BuildContext context) {
     final loc = AppLocalizations.of(context);
 
     return Container(
       margin: CustomTheme.standardMargin,
-      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
       decoration: CustomTheme.standardBoxDecoration,
+      clipBehavior: Clip.antiAlias,
+      child: IntrinsicHeight(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(
+                  vertical: 12,
+                  horizontal: 6,
+                ),
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
+                    // Name input + delete icon
                     Row(
                       crossAxisAlignment: CrossAxisAlignment.center,
+                      mainAxisAlignment: MainAxisAlignment.center,
                       children: [
                         Expanded(
                           child: TextInputField(
@@ -57,17 +71,20 @@ class _TeamCreationTileState extends State<TeamCreationTile> {
                             maxLength: Constants.MAX_TEAM_NAME_LENGTH,
                           ),
                         ),
-              const SizedBox(width: 12),
-              AnimatedDialogButton(
-                content: const Icon(Icons.delete),
-                isDescructive: true,
+                        HapticIconButton(
+                          icon: const Icon(FontAwesome.trash),
+                          color: CustomTheme.textColor,
+                          iconSize: 25,
                           onPressed: widget.onDelete,
-                buttonText: '',
                         ),
                       ],
                     ),
-          const SizedBox(height: 8),
-          Text(
+                    const SizedBox(height: 12),
+
+                    // Color label
+                    Padding(
+                      padding: const EdgeInsets.only(left: 8),
+                      child: Text(
                         loc.color,
                         style: const TextStyle(
                           fontSize: 15,
@@ -75,8 +92,13 @@ class _TeamCreationTileState extends State<TeamCreationTile> {
                           color: CustomTheme.textColor,
                         ),
                       ),
+                    ),
                     const SizedBox(height: 8),
-          Wrap(
+
+                    // Color picker
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 12),
+                      child: Wrap(
                         spacing: 8,
                         runSpacing: 8,
                         children: teamColors.map((color) {
@@ -92,20 +114,31 @@ class _TeamCreationTileState extends State<TeamCreationTile> {
                                 color: getColorFromGameColor(color),
                                 shape: BoxShape.circle,
                                 border: Border.all(
-                      color: isSelected ? Colors.white : Colors.transparent,
+                                  color: isSelected
+                                      ? Colors.white
+                                      : Colors.transparent,
                                   width: 3,
                                 ),
                               ),
                               child: isSelected
-                      ? const Icon(Icons.check, size: 18, color: Colors.white)
+                                  ? const Icon(
+                                      Icons.check,
+                                      size: 18,
+                                      color: Colors.white,
+                                    )
                                   : null,
                             ),
                           );
                         }).toList(),
                       ),
-          const SizedBox(height: 12),
+                    ),
                   ],
                 ),
+              ),
+            ),
+          ],
+        ),
+      ),
     );
   }
 }