lib/core/common.dart

@@ -54,7 +54,7 @@ Color getColorFromGameColor(GameColor color) {
     case GameColor.green:
       return Colors.green;
     case GameColor.yellow:
-      return Colors.yellow;
+      return const Color(0xFFF7CA28);
     case GameColor.purple:
       return Colors.purple;
     case GameColor.orange:

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

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:fluttericon/rpg_awesome_icons.dart';
 import 'package:intl/intl.dart';
 import 'package:provider/provider.dart';
 import 'package:tallee/core/adaptive_page_route.dart';
@@ -14,6 +15,7 @@ import 'package:tallee/presentation/widgets/buttons/main_menu_button.dart';
 import 'package:tallee/presentation/widgets/colored_icon_container.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/game_label.dart';
 import 'package:tallee/presentation/widgets/tiles/info_tile.dart';
 import 'package:tallee/presentation/widgets/tiles/text_icon_tile.dart';
 
@@ -102,6 +104,7 @@ class _MatchDetailViewState extends State<MatchDetailView> {
                 bottom: 100,
               ),
               children: [
+                // Controller Icon
                 const Center(
                   child: ColoredIconContainer(
                     icon: Icons.sports_esports,
@@ -110,6 +113,8 @@ class _MatchDetailViewState extends State<MatchDetailView> {
                   ),
                 ),
                 const SizedBox(height: 10),
+
+                // Match Name
                 Text(
                   match.name,
                   style: const TextStyle(
@@ -120,6 +125,8 @@ class _MatchDetailViewState extends State<MatchDetailView> {
                   textAlign: TextAlign.center,
                 ),
                 const SizedBox(height: 5),
+
+                // Creation Date
                 Text(
                   '${loc.created_on} ${DateFormat.yMMMd(Localizations.localeOf(context).toString()).format(match.createdAt)}',
                   style: const TextStyle(
@@ -129,6 +136,8 @@ class _MatchDetailViewState extends State<MatchDetailView> {
                   textAlign: TextAlign.center,
                 ),
                 const SizedBox(height: 10),
+
+                // Group Name
                 if (match.group != null) ...[
                   Row(
                     mainAxisAlignment: MainAxisAlignment.center,
@@ -143,6 +152,8 @@ class _MatchDetailViewState extends State<MatchDetailView> {
                   ),
                   const SizedBox(height: 20),
                 ],
+
+                // Players
                 InfoTile(
                   title: loc.players,
                   icon: Icons.people,
@@ -162,6 +173,30 @@ class _MatchDetailViewState extends State<MatchDetailView> {
                   ),
                 ),
                 const SizedBox(height: 15),
+
+                // Game
+                InfoTile(
+                  title: loc.game,
+                  icon: RpgAwesome.clovers_card,
+                  horizontalAlignment: CrossAxisAlignment.start,
+                  content: Padding(
+                    padding: const EdgeInsets.symmetric(
+                      vertical: 4,
+                      horizontal: 8,
+                    ),
+                    child: GameLabel(
+                      title: match.game.name,
+                      description: translateRulesetToString(
+                        match.game.ruleset,
+                        context,
+                      ),
+                      color: match.game.color,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 15),
+
+                // Results
                 InfoTile(
                   title: loc.results,
                   icon: Icons.emoji_events,

lib/presentation/widgets/game_label.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+import 'package:tallee/core/common.dart';
+import 'package:tallee/core/enums.dart';
+
+class GameLabel extends StatelessWidget {
+  const GameLabel({
+    super.key,
+    required this.title,
+    required this.description,
+    required this.color,
+  });
+
+  final String title;
+  final String description;
+  final GameColor color;
+
+  @override
+  Widget build(BuildContext context) {
+    final backgroundColor = getColorFromGameColor(color);
+    final fontColor = backgroundColor.computeLuminance() > 0.5
+        ? Colors.black
+        : Colors.white;
+
+    return IntrinsicHeight(
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          // Title
+          Container(
+            decoration: BoxDecoration(
+              color: backgroundColor.withAlpha(230),
+              borderRadius: const BorderRadius.only(
+                topLeft: Radius.circular(8),
+                bottomLeft: Radius.circular(8),
+              ),
+            ),
+            padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
+            child: Text(
+              title,
+              style: TextStyle(
+                fontSize: 12,
+                color: fontColor,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+
+          // Description
+          Container(
+            decoration: BoxDecoration(
+              color: backgroundColor.withAlpha(140),
+              borderRadius: const BorderRadius.only(
+                topRight: Radius.circular(8),
+                bottomRight: Radius.circular(8),
+              ),
+            ),
+            padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
+            child: Text(
+              description,
+              style: TextStyle(
+                fontSize: 12,
+                color: fontColor,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/widgets/tiles/match_tile.dart

@@ -7,6 +7,7 @@ import 'package:tallee/core/custom_theme.dart';
 import 'package:tallee/core/enums.dart';
 import 'package:tallee/data/models/match.dart';
 import 'package:tallee/l10n/generated/app_localizations.dart';
+import 'package:tallee/presentation/widgets/game_label.dart';
 import 'package:tallee/presentation/widgets/tiles/text_icon_tile.dart';
 
 class MatchTile extends StatefulWidget {
@@ -116,56 +117,13 @@ class _MatchTileState extends State<MatchTile> {
 
             // Game + Ruleset Badge
             if (!widget.compact)
-              IntrinsicHeight(
+              GameLabel(
-                child: Row(
+                title: match.game.name,
-                  mainAxisSize: MainAxisSize.min,
+                description: translateRulesetToString(
-                  children: [
+                  match.game.ruleset,
-                    // Game
+                  context,
-                    Container(
-                      decoration: BoxDecoration(
-                        color: CustomTheme.primaryColor.withAlpha(230),
-                        borderRadius: const BorderRadius.only(
-                          topLeft: Radius.circular(8),
-                          bottomLeft: Radius.circular(8),
-                        ),
-                      ),
-                      padding: const EdgeInsets.symmetric(
-                        vertical: 4,
-                        horizontal: 8,
-                      ),
-                      child: Text(
-                        match.game.name,
-                        style: const TextStyle(
-                          fontSize: 12,
-                          color: Colors.white,
-                          fontWeight: FontWeight.bold,
-                        ),
-                      ),
-                    ),
-                    // Ruleset
-                    Container(
-                      decoration: BoxDecoration(
-                        color: CustomTheme.primaryColor.withAlpha(140),
-                        borderRadius: const BorderRadius.only(
-                          topRight: Radius.circular(8),
-                          bottomRight: Radius.circular(8),
-                        ),
-                      ),
-                      padding: const EdgeInsets.symmetric(
-                        vertical: 4,
-                        horizontal: 8,
-                      ),
-                      child: Text(
-                        translateRulesetToString(match.game.ruleset, context),
-                        style: const TextStyle(
-                          fontSize: 12,
-                          color: Colors.white,
-                          fontWeight: FontWeight.bold,
-                        ),
-                      ),
-                    ),
-                  ],
                 ),
+                color: match.game.color,
               ),
 
             const SizedBox(height: 12),