From 32a8a6090a25b07368ab3c324b16369154971260 Mon Sep 17 00:00:00 2001
From: Felix Kirchner <felix.kirchner.fk@gmail.com>
Date: Thu, 21 May 2026 18:16:40 +0200
Subject: [PATCH] Reworked team creation tile

---
 .../widgets/tiles/team_creation_tile.dart     | 153 +++++++++++-------
 1 file changed, 93 insertions(+), 60 deletions(-)

diff --git a/lib/presentation/widgets/tiles/team_creation_tile.dart b/lib/presentation/widgets/tiles/team_creation_tile.dart
index 2439597..06b349f 100644
--- a/lib/presentation/widgets/tiles/team_creation_tile.dart
+++ b/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,75 +37,107 @@ 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,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Row(
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: [
-              Expanded(
-                child: TextInputField(
-                  controller: widget.controller,
-                  hintText: widget.hintText,
-                  maxLength: Constants.MAX_TEAM_NAME_LENGTH,
+      clipBehavior: Clip.antiAlias,
+      child: IntrinsicHeight(
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(
+                  vertical: 12,
+                  horizontal: 6,
                 ),
-              ),
-              const SizedBox(width: 12),
-              AnimatedDialogButton(
-                content: const Icon(Icons.delete),
-                isDescructive: true,
-                onPressed: widget.onDelete,
-                buttonText: '',
-              ),
-            ],
-          ),
-          const SizedBox(height: 8),
-          Text(
-            loc.color,
-            style: const TextStyle(
-              fontSize: 15,
-              fontWeight: FontWeight.bold,
-              color: CustomTheme.textColor,
-            ),
-          ),
-          const SizedBox(height: 8),
-          Wrap(
-            spacing: 8,
-            runSpacing: 8,
-            children: teamColors.map((color) {
-              final isSelected = widget.color == color;
-              return GestureDetector(
-                onTap: () {
-                  widget.onColorSelection?.call(color);
-                },
-                child: Container(
-                  width: 34,
-                  height: 34,
-                  decoration: BoxDecoration(
-                    color: getColorFromGameColor(color),
-                    shape: BoxShape.circle,
-                    border: Border.all(
-                      color: isSelected ? Colors.white : Colors.transparent,
-                      width: 3,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    // Name input + delete icon
+                    Row(
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Expanded(
+                          child: TextInputField(
+                            controller: widget.controller,
+                            hintText: widget.hintText,
+                            maxLength: Constants.MAX_TEAM_NAME_LENGTH,
+                          ),
+                        ),
+                        HapticIconButton(
+                          icon: const Icon(FontAwesome.trash),
+                          color: CustomTheme.textColor,
+                          iconSize: 25,
+                          onPressed: widget.onDelete,
+                        ),
+                      ],
                     ),
-                  ),
-                  child: isSelected
-                      ? const Icon(Icons.check, size: 18, color: Colors.white)
-                      : null,
+                    const SizedBox(height: 12),
+
+                    // Color label
+                    Padding(
+                      padding: const EdgeInsets.only(left: 8),
+                      child: Text(
+                        loc.color,
+                        style: const TextStyle(
+                          fontSize: 15,
+                          fontWeight: FontWeight.bold,
+                          color: CustomTheme.textColor,
+                        ),
+                      ),
+                    ),
+                    const SizedBox(height: 8),
+
+                    // Color picker
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 12),
+                      child: Wrap(
+                        spacing: 8,
+                        runSpacing: 8,
+                        children: teamColors.map((color) {
+                          final isSelected = widget.color == color;
+                          return GestureDetector(
+                            onTap: () {
+                              widget.onColorSelection?.call(color);
+                            },
+                            child: Container(
+                              width: 34,
+                              height: 34,
+                              decoration: BoxDecoration(
+                                color: getColorFromGameColor(color),
+                                shape: BoxShape.circle,
+                                border: Border.all(
+                                  color: isSelected
+                                      ? Colors.white
+                                      : Colors.transparent,
+                                  width: 3,
+                                ),
+                              ),
+                              child: isSelected
+                                  ? const Icon(
+                                      Icons.check,
+                                      size: 18,
+                                      color: Colors.white,
+                                    )
+                                  : null,
+                            ),
+                          );
+                        }).toList(),
+                      ),
+                    ),
+                  ],
                 ),
-              );
-            }).toList(),
-          ),
-          const SizedBox(height: 12),
-        ],
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }