fix: apply code review

.github/workflows/pinball_ui.yaml

@@ -1,5 +1,9 @@
 name: pinball_ui
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 on:
   push:
     paths:

lib/game/view/widgets/game_hud.dart

@@ -66,14 +66,14 @@ class _ScoreViewDecoration extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     const radius = BorderRadius.all(Radius.circular(12));
-    const boardWidth = 5.0;
+    const borderWidth = 5.0;
 
     return DecoratedBox(
       decoration: BoxDecoration(
         borderRadius: radius,
         border: Border.all(
           color: AppColors.white,
-          width: boardWidth,
+          width: borderWidth,
         ),
         image: DecorationImage(
           fit: BoxFit.cover,
@@ -83,7 +83,7 @@ class _ScoreViewDecoration extends StatelessWidget {
         ),
       ),
       child: Padding(
-        padding: const EdgeInsets.all(boardWidth - 1),
+        padding: const EdgeInsets.all(borderWidth - 1),
         child: ClipRRect(
           borderRadius: radius,
           child: child,

lib/game/view/widgets/play_button_overlay.dart

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

lib/select_character/view/character_selection_page.dart

@@ -33,7 +33,7 @@ class CharacterSelectionView extends StatelessWidget {
   Widget build(BuildContext context) {
     final l10n = context.l10n;
 
-    return PinballDialogLayout(
+    return PixelatedDecoration(
       header: Text(
         l10n.characterSelectionTitle,
         style: Theme.of(context).textTheme.headline3,
@@ -47,9 +47,18 @@ class CharacterSelectionView extends StatelessWidget {
             TextButton(
               onPressed: () {
                 Navigator.of(context).pop();
+                // TODO(arturplaczek): remove after merge StarBlocListener
+                final height = MediaQuery.of(context).size.height * 0.5;
+
                 showDialog<void>(
                   context: context,
-                  builder: (_) => const HowToPlayDialog(),
+                  builder: (_) => Center(
+                    child: SizedBox(
+                      height: height,
+                      width: height * 1.4,
+                      child: const HowToPlayDialog(),
+                    ),
+                  ),
                 );
               },
               child: Text(l10n.start),

lib/start_game/widgets/how_to_play_dialog.dart

@@ -12,7 +12,7 @@ class HowToPlayDialog extends StatelessWidget {
     final l10n = context.l10n;
     const spacing = SizedBox(height: 16);
 
-    return PinballDialogLayout(
+    return PixelatedDecoration(
       header: Text(l10n.howToPlay),
       body: ListView(
         children: const [

packages/pinball_ui/README.md

@@ -3,7 +3,7 @@
 [![style: very good analysis][very_good_analysis_badge]][very_good_analysis_link]
 [![License: MIT][license_badge]][license_link]
 
-Package with the UI components for the Pinball Game
+UI Toolkit for the Pinball Flutter Application
 
 [license_badge]: https://img.shields.io/badge/license-MIT-blue.svg
 [license_link]: https://opensource.org/licenses/MIT

packages/pinball_ui/lib/src/dialog/dialog.dart

@@ -1 +1 @@
-export 'pinball_dialog_layout.dart';
+export 'pixelated_decoration.dart';

packages/pinball_ui/lib/src/dialog/pinball_dialog_layout.dart

@@ -1,98 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:pinball_ui/gen/gen.dart';
-
-/// {@template pinball_dialog_layout}
-/// Decoration for dialogs that display pixelated background and takes
-/// two parameters:
-/// - header [Widget]
-/// - body [Widget]
-///
-/// Creates square, centered decoration the size of a game.
-///
-/// The header takes 20% of the area and the body remaining space.
-/// {@endtemplate}
-class PinballDialogLayout extends StatelessWidget {
-  /// {@macro pinball_dialog_layout}
-  const PinballDialogLayout({
-    Key? key,
-    required Widget header,
-    required Widget body,
-  })  : _header = header,
-        _body = body,
-        super(key: key);
-
-  final Widget _header;
-  final Widget _body;
-
-  @override
-  Widget build(BuildContext context) {
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        final gameWidgetWidth = constraints.maxHeight * 9 / 16;
-
-        return Center(
-          child: SizedBox(
-            height: gameWidgetWidth,
-            width: gameWidgetWidth,
-            child: _DialogDecoration(
-              header: _header,
-              body: _body,
-            ),
-          ),
-        );
-      },
-    );
-  }
-}
-
-class _DialogDecoration extends StatelessWidget {
-  const _DialogDecoration({
-    Key? key,
-    required Widget header,
-    required Widget body,
-  })  : _header = header,
-        _body = body,
-        super(key: key);
-
-  final Widget _header;
-  final Widget _body;
-
-  @override
-  Widget build(BuildContext context) {
-    const radius = BorderRadius.all(Radius.circular(12));
-    const boardWidth = 5.0;
-
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        borderRadius: radius,
-        border: Border.all(
-          color: Colors.white,
-          width: boardWidth,
-        ),
-        image: DecorationImage(
-          fit: BoxFit.cover,
-          image: AssetImage(
-            Assets.images.dialog.background.keyName,
-          ),
-        ),
-      ),
-      child: Padding(
-        padding: const EdgeInsets.all(boardWidth - 1),
-        child: ClipRRect(
-          borderRadius: radius,
-          child: Column(
-            children: [
-              Expanded(
-                child: Center(child: _header),
-              ),
-              Expanded(
-                flex: 4,
-                child: _body,
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-}

packages/pinball_ui/lib/src/dialog/pixelated_decoration.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:pinball_ui/gen/gen.dart';
+
+/// {@template pixelated_decoration}
+/// Pixelated decoration.
+/// {@endtemplate}
+class PixelatedDecoration extends StatelessWidget {
+  /// {@macro pixelated_decoration}
+  const PixelatedDecoration({
+    Key? key,
+    required Widget header,
+    required Widget body,
+  })  : _header = header,
+        _body = body,
+        super(key: key);
+
+  final Widget _header;
+  final Widget _body;
+
+  @override
+  Widget build(BuildContext context) {
+    const radius = BorderRadius.all(Radius.circular(12));
+    const borderWidth = 5.0;
+
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        image: DecorationImage(
+          fit: BoxFit.fill,
+          image: AssetImage(Assets.images.dialog.background.keyName),
+        ),
+        borderRadius: radius,
+        border: Border.all(
+          color: Colors.white,
+          width: borderWidth,
+        ),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(borderWidth),
+        child: ClipRRect(
+          borderRadius: radius,
+          child: Column(
+            children: [
+              Expanded(
+                child: Center(
+                  child: _header,
+                ),
+              ),
+              Expanded(
+                flex: 4,
+                child: _body,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

packages/pinball_ui/pubspec.yaml

@@ -1,5 +1,5 @@
 name: pinball_ui
-description: App UI Component Library
+description: UI Toolkit for the Pinball Flutter Application
 version: 1.0.0+1
 publish_to: none
 
@@ -13,7 +13,6 @@ dependencies:
 dev_dependencies:
   flutter_test:
     sdk: flutter
-  mocktail: ^0.2.0
   test: ^1.19.2
   very_good_analysis: ^2.4.0
 

packages/pinball_ui/test/src/dialog/pixelated_decoration_test.dart

@@ -5,14 +5,14 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:pinball_ui/pinball_ui.dart';
 
 void main() {
-  group('PinballDialogLayout', () {
+  group('PixelatedDecoration', () {
     testWidgets('renders header and body', (tester) async {
       const headerText = 'header';
       const bodyText = 'body';
 
       await tester.pumpWidget(
         MaterialApp(
-          home: PinballDialogLayout(
+          home: PixelatedDecoration(
             header: Text(headerText),
             body: Text(bodyText),
           ),