feat: use PinballButton to start the game

lib/game/view/widgets/play_button_overlay.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:pinball/game/pinball_game.dart';
 import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/select_character/select_character.dart';
+import 'package:pinball_ui/pinball_ui.dart';
 
 /// {@template play_button_overlay}
 /// [Widget] that renders the button responsible to starting the game
@@ -21,12 +22,12 @@ class PlayButtonOverlay extends StatelessWidget {
     final l10n = context.l10n;
 
     return Center(
-      child: ElevatedButton(
-        onPressed: () async {
+      child: PinballButton(
+        text: l10n.play,
+        onTap: () async {
           _game.gameFlowController.start();
           await showCharacterSelectionDialog(context);
         },
-        child: Text(l10n.play),
       ),
     );
   }

packages/pinball_ui/lib/src/widgets/pinball_button.dart

@@ -21,26 +21,29 @@ class PinballButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        image: DecorationImage(
-          image: AssetImage(Assets.images.button.pinballButton.keyName),
+    return Material(
+      color: PinballColors.transparent,
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: AssetImage(Assets.images.button.pinballButton.keyName),
+          ),
         ),
-      ),
-      child: Center(
-        child: InkWell(
-          onTap: onTap,
-          child: Padding(
-            padding: const EdgeInsets.symmetric(
-              horizontal: 32,
-              vertical: 16,
-            ),
-            child: Text(
-              text,
-              style: Theme.of(context)
-                  .textTheme
-                  .headline3!
-                  .copyWith(color: PinballColors.white),
+        child: Center(
+          child: InkWell(
+            onTap: onTap,
+            child: Padding(
+              padding: const EdgeInsets.symmetric(
+                horizontal: 32,
+                vertical: 16,
+              ),
+              child: Text(
+                text,
+                style: Theme.of(context)
+                    .textTheme
+                    .headline3!
+                    .copyWith(color: PinballColors.white),
+              ),
             ),
           ),
         ),