feat: use DialogDecoration in app

lib/game/view/widgets/play_button_overlay.dart

@@ -28,15 +28,7 @@ class PlayButtonOverlay extends StatelessWidget {
             context: context,
             barrierDismissible: false,
             builder: (_) {
-              final height = MediaQuery.of(context).size.height * 0.5;
+              return const CharacterSelectionDialog();
-
-              return Center(
-                child: SizedBox(
-                  height: height,
-                  width: height * 1.4,
-                  child: const CharacterSelectionDialog(),
-                ),
-              );
             },
           );
         },

lib/select_character/view/character_selection_page.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: public_member_api_docs
 
+import 'package:app_ui/app_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:pinball/l10n/l10n.dart';
@@ -32,17 +33,15 @@ class CharacterSelectionView extends StatelessWidget {
   Widget build(BuildContext context) {
     final l10n = context.l10n;
 
-    return Scaffold(
+    return DialogDecoration(
+      header: Text(
+        l10n.characterSelectionTitle,
+        style: Theme.of(context).textTheme.headline3,
+      ),
       body: SingleChildScrollView(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            const SizedBox(height: 80),
-            Text(
-              l10n.characterSelectionTitle,
-              style: Theme.of(context).textTheme.headline3,
-            ),
-            const SizedBox(height: 80),
             const _CharacterSelectionGridView(),
             const SizedBox(height: 20),
             TextButton(

lib/start_game/widgets/how_to_play_dialog.dart

@@ -1,5 +1,6 @@
 // ignore_for_file: public_member_api_docs
 
+import 'package:app_ui/app_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:pinball/l10n/l10n.dart';
 
@@ -11,19 +12,15 @@ class HowToPlayDialog extends StatelessWidget {
     final l10n = context.l10n;
     const spacing = SizedBox(height: 16);
 
-    return Dialog(
+    return DialogDecoration(
-      child: Padding(
+      header: Text(l10n.howToPlay),
-        padding: const EdgeInsets.all(20),
+      body: Column(
-        child: Column(
+        children: const [
-          mainAxisSize: MainAxisSize.min,
+          spacing,
-          children: [
+          _LaunchControls(),
-            Text(l10n.howToPlay),
+          spacing,
-            spacing,
+          _FlipperControls(),
-            const _LaunchControls(),
+        ],
-            spacing,
-            const _FlipperControls(),
-          ],
-        ),
       ),
     );
   }