fix: mascot button style in initials (#516)

* fix: mascot button in initials * updated logic to change theme * fixed button in team_selection_page.dart
VGVentures · May 23, 2024 · b0ad3db · b0ad3db
1 parent cd74226
commit b0ad3db
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 127 deletions.
diff --git a/lib/team_selection/view/team_selection_page.dart b/lib/team_selection/view/team_selection_page.dart
@@ -25,7 +25,10 @@ class TeamSelectionPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (_) => TeamSelectionCubit()..loadAssets(),
+      create: (_) {
+        context.read<PlayerBloc>().add(MascotSelected(Mascots.values.first));
+        return TeamSelectionCubit()..loadAssets();
+      },
       child: const TeamSelectionView(),
     );
   }
@@ -46,7 +49,15 @@ class TeamSelectionView extends StatelessWidget {
         crossword: l10n.crossword,
         actions: (context) => const MuteButton(),
       ),
-      body: BlocBuilder<TeamSelectionCubit, TeamSelectionState>(
+      body: BlocConsumer<TeamSelectionCubit, TeamSelectionState>(
+        listenWhen: (previous, current) => previous.index != current.index,
+        listener: (context, state) {
+          context
+              .read<PlayerBloc>()
+              .add(MascotSelected(Mascots.values[state.index]));
+        },
+        buildWhen: (previous, current) =>
+            previous.assetsStatus != current.assetsStatus,
         builder: (context, state) =>
             state.assetsStatus == AssetsLoadingStatus.inProgress
                 ? const SizedBox.shrink()
@@ -462,9 +473,10 @@ class _SubmitButton extends StatelessWidget {
     final l10n = context.l10n;
 
     return OutlinedButton(
+      key: UniqueKey(),
       onPressed: () {
         context.read<AudioController>().playSfx(Assets.music.startButton1);
-        context.read<PlayerBloc>().add(MascotSelected(mascot));
+
         Navigator.of(context).push(InitialsPage.route());
       },
       child: Text(

diff --git a/lib/welcome/view/welcome_page.dart b/lib/welcome/view/welcome_page.dart
@@ -140,6 +140,7 @@ class WelcomeBody extends StatelessWidget {
           const ChallengeProgressStatus(),
           const SizedBox(height: 48),
           OutlinedButton(
+            style: Theme.of(context).io.outlineButtonTheme.googleBorder,
             onPressed: () => _onGetStarted(context),
             child: Text(l10n.getStarted),
           ),

diff --git a/packages/io_crossword_ui/lib/src/theme/extension/io_outline_button_theme.dart b/packages/io_crossword_ui/lib/src/theme/extension/io_outline_button_theme.dart
@@ -13,18 +13,23 @@ class IoOutlineButtonTheme extends Equatable {
   /// {@macro io_outline_button}
   const IoOutlineButtonTheme({
     required this.simpleBorder,
+    required this.googleBorder,
   });
 
   /// The style for one color [OutlinedButton].
   final ButtonStyle simpleBorder;
 
+  /// The style for google gradient [OutlinedButton] theme.
+  final ButtonStyle googleBorder;
+
   /// Linearly interpolate between two [IoOutlineButtonTheme] themes.
   IoOutlineButtonTheme lerp(IoOutlineButtonTheme other, double t) {
     return IoOutlineButtonTheme(
       simpleBorder: ButtonStyle.lerp(simpleBorder, other.simpleBorder, t)!,
+      googleBorder: ButtonStyle.lerp(googleBorder, other.googleBorder, t)!,
     );
   }
 
   @override
-  List<Object?> get props => [simpleBorder];
+  List<Object?> get props => [simpleBorder, googleBorder];
 }
diff --git a/packages/io_crossword_ui/lib/src/theme/io_crossword_theme.dart b/packages/io_crossword_ui/lib/src/theme/io_crossword_theme.dart
@@ -316,6 +316,19 @@ class IoCrosswordTheme {
 
   IoOutlineButtonTheme get _ioOutlineButtonTheme {
     return IoOutlineButtonTheme(
+      googleBorder: _outlinedButtonThemeData.style!.copyWith(
+        shape: WidgetStateProperty.resolveWith(
+          (states) {
+            if (states.contains(WidgetState.disabled)) {
+              return const StadiumBorder(side: BorderSide(width: 2));
+            }
+
+            return const GradientStadiumBorder(
+              gradient: IoCrosswordColors.googleGradient,
+            );
+          },
+        ),
+      ),
       simpleBorder: OutlinedButton.styleFrom(
         minimumSize: const Size(171, 56),
         foregroundColor: IoCrosswordColors.seedWhite,

diff --git a/packages/io_crossword_ui/test/src/theme/extension/io_outline_button_theme_test.dart b/packages/io_crossword_ui/test/src/theme/extension/io_outline_button_theme_test.dart
@@ -9,11 +9,17 @@ void main() {
         simpleBorder: ButtonStyle(
           backgroundColor: WidgetStateProperty.all(const Color(0xff00ff00)),
         ),
+        googleBorder: ButtonStyle(
+          backgroundColor: WidgetStateProperty.all(const Color(0xff000000)),
+        ),
       );
       final to = IoOutlineButtonTheme(
         simpleBorder: ButtonStyle(
           backgroundColor: WidgetStateProperty.all(const Color(0xff0000ff)),
         ),
+        googleBorder: ButtonStyle(
+          backgroundColor: WidgetStateProperty.all(const Color(0xff000040)),
+        ),
       );
 
       final newTheme = from.lerp(to, 0.5);

diff --git a/packages/io_crossword_ui/test/src/theme/io_crossword_theme_test.dart b/packages/io_crossword_ui/test/src/theme/io_crossword_theme_test.dart
@@ -57,38 +57,62 @@ void main() {
       });
 
       group('IoOutlineButtonTheme', () {
-        final outlinedBorder = IoCrosswordTheme()
-            .themeData
-            .io
-            .outlineButtonTheme
-            .simpleBorder
-            .shape!;
+        final outlinedBorder =
+            IoCrosswordTheme().themeData.io.outlineButtonTheme;
 
-        test('displays StadiumBorder with ${WidgetState.disabled}', () {
-          expect(
-            outlinedBorder.resolve({WidgetState.disabled}),
-            equals(isA<StadiumBorder>()),
-          );
-        });
+        group('googleBorder', () {
+          final googleBorder = outlinedBorder.googleBorder.shape!;
 
-        test('displays mediumGray color when there are no states', () {
-          expect(
-            outlinedBorder.resolve({}),
-            equals(
-              isA<StadiumBorder>().having(
-                (border) => border.side.color,
-                'Medium gray gradient',
-                IoCrosswordColors.mediumGray,
+          test('displays StadiumBorder with ${WidgetState.disabled}', () {
+            expect(
+              googleBorder.resolve({WidgetState.disabled}),
+              equals(isA<StadiumBorder>()),
+            );
+          });
+
+          test('displays googleGradient color when there are no states', () {
+            expect(
+              googleBorder.resolve({}),
+              equals(
+                isA<GradientStadiumBorder>().having(
+                  (border) => border.gradient,
+                  'google gradient',
+                  IoCrosswordColors.googleGradient,
+                ),
               ),
-            ),
-          );
+            );
+          });
+
+          for (final state in WidgetState.values.toList()
+            ..remove(WidgetState.disabled)) {
+            test('displays googleGradient color with $state', () {
+              expect(
+                googleBorder.resolve({state}),
+                equals(
+                  isA<GradientStadiumBorder>().having(
+                    (border) => border.gradient,
+                    'google gradient',
+                    IoCrosswordColors.googleGradient,
+                  ),
+                ),
+              );
+            });
+          }
         });
 
-        for (final state in WidgetState.values.toList()
-          ..remove(WidgetState.disabled)) {
-          test('displays mediumGray color with $state', () {
+        group('simpleBorder', () {
+          final simpleBorder = outlinedBorder.simpleBorder.shape!;
+
+          test('displays StadiumBorder with ${WidgetState.disabled}', () {
             expect(
-              outlinedBorder.resolve({state}),
+              simpleBorder.resolve({WidgetState.disabled}),
+              equals(isA<StadiumBorder>()),
+            );
+          });
+
+          test('displays mediumGray color when there are no states', () {
+            expect(
+              simpleBorder.resolve({}),
               equals(
                 isA<StadiumBorder>().having(
                   (border) => border.side.color,
@@ -98,7 +122,23 @@ void main() {
               ),
             );
           });
-        }
+
+          for (final state in WidgetState.values.toList()
+            ..remove(WidgetState.disabled)) {
+            test('displays mediumGray color with $state', () {
+              expect(
+                simpleBorder.resolve({state}),
+                equals(
+                  isA<StadiumBorder>().having(
+                    (border) => border.side.color,
+                    'Medium gray gradient',
+                    IoCrosswordColors.mediumGray,
+                  ),
+                ),
+              );
+            });
+          }
+        });
       });
 
       group('geminiOutlinedButtonThemeData', () {