feat: update copy and end game page (#558)

* feat: update copy * feat: update copy * feat: update copy * fix: move end game scrollbar to the side * feat: fit the welcome text nicer * feat: update end game
VGVentures · Jun 7, 2024 · e1f9ae8 · e1f9ae8
1 parent a753457
commit e1f9ae8
Show file tree

Hide file tree

Showing 12 changed files with 180 additions and 69 deletions.
diff --git a/lib/end_game/view/end_game_page.dart b/lib/end_game/view/end_game_page.dart
@@ -44,37 +44,20 @@ class EndGameLargeView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: Center(
-        child: ConstrainedBox(
-          constraints: const BoxConstraints(maxWidth: 502),
-          child: const SingleChildScrollView(
-            child: Padding(
-              padding: EdgeInsets.symmetric(
-                vertical: 32,
-              ),
+      body: SingleChildScrollView(
+        child: Center(
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 512),
+            child: const Padding(
+              padding: EdgeInsets.all(32),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Padding(
-                    padding: EdgeInsets.symmetric(
-                      horizontal: 32,
-                    ),
-                    child: LeaderboardButton(),
-                  ),
+                  LeaderboardButton(),
                   SizedBox(height: 48),
-                  Padding(
-                    padding: EdgeInsets.symmetric(
-                      horizontal: 80,
-                    ),
-                    child: EndGameContent(),
-                  ),
+                  EndGameContent(),
                   SizedBox(height: 48),
-                  Padding(
-                    padding: EdgeInsets.symmetric(
-                      horizontal: 56,
-                    ),
-                    child: ActionButtonsEndGame(),
-                  ),
+                  ActionButtonsEndGame(),
                 ],
               ),
             ),

diff --git a/lib/end_game/view/end_game_view_content.dart b/lib/end_game/view/end_game_view_content.dart
@@ -23,7 +23,7 @@ class EndGameContent extends StatelessWidget {
           textAlign: TextAlign.center,
         ),
         const SizedBox(height: 24),
-        const HowMade(),
+        const HowMadeAndJoinCompetition(),
         const SizedBox(height: 24),
         const Center(
           child: PlayerInitials(),
@@ -97,12 +97,23 @@ class ActionButtonsEndGame extends StatelessWidget {
               ),
         ),
         const SizedBox(height: 24),
-        FilledButton.tonalIcon(
-          onPressed: () {
-            context.launchUrl(ProjectDetailsLinks.claimBadge);
-          },
-          label: Text(l10n.claimBadge),
-          icon: const Icon(IoIcons.google, size: 20),
+        SizedBox(
+          height: 56,
+          child: FilledButton.icon(
+            onPressed: () {
+              context.launchUrl(ProjectDetailsLinks.claimBadge);
+            },
+            label: Text(l10n.claimBadge),
+            style: Theme.of(context).filledButtonTheme.style?.copyWith(
+                  backgroundColor: const WidgetStatePropertyAll(
+                    IoCrosswordColors.developerBlue,
+                  ),
+                  foregroundColor: const WidgetStatePropertyAll(
+                    IoCrosswordColors.black,
+                  ),
+                ),
+            icon: const Icon(IoIcons.google, size: 20),
+          ),
         ),
       ],
     );
@@ -126,8 +137,11 @@ class EndGameImage extends StatelessWidget {
       Mascot.sparky => Assets.images.endGameSparky,
     };
 
-    return image.image(
-      fit: BoxFit.fitWidth,
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(8),
+      child: image.image(
+        fit: BoxFit.fitWidth,
+      ),
     );
   }
 }
diff --git a/lib/l10n/arb/app_en.arb b/lib/l10n/arb/app_en.arb
@@ -41,7 +41,7 @@
   "@shareWordSubtitle": {
     "description": "Subtitle of the share word modal"
   },
-  "welcomeSubtitle": "Help solve the 2024 I/O Crossword, built with Gemini API.",
+  "welcomeSubtitle": "Help solve the 2024 I/O Crossword, built with the Gemini API.",
   "@welcomeSubtitle": {
     "description": "Subtitle to be displayed in the welcome modal"
   },
@@ -61,7 +61,7 @@
   "@chooseYourTeam": {
     "description": "The title for the team selection page"
   },
-  "joinTeam": "Join {team} team",
+  "joinTeam": "Join team {team}",
   "@joinTeam": {
     "description": "Text for which team you are choosing",
     "placeholders": {
@@ -215,6 +215,10 @@
   "@openSourceCode": {
     "description": "Open source code text to open link"
   },
+  "joinGeminiCompetition": "Join the Gemini API Developer Competition",
+  "@joinGeminiCompetition": {
+    "description": "Gemini API dev competition text to open link"
+  },
   "otherLinks": "Other links",
   "@otherLinks": {
     "description": "Other links label"
@@ -303,7 +307,7 @@
   "@finishAndSubmitScore": {
     "description": "Finish & submit score for menu label"
   },
-  "claimBadgeDescription": "Get a badge for your Developer Profile to show you helped solve the I/O Crossword built with Gemini API.",
+  "claimBadgeDescription": "Get a badge for your Developer Profile to show you helped solve the I/O Crossword built with the Gemini API.",
   "@claimBadgeDescription": {
     "description": "Developer Profile label"
   },
@@ -343,7 +347,7 @@
   "@aboutHowToPlayFourthInstructionsTitle": {
     "description": "The fourth step instruction title."
   },
-  "aboutHowToPlayFourthInstructions": "Stumped? Ask Gemini Yes or No questions to get hints in real time.",
+  "aboutHowToPlayFourthInstructions": "Stumped? Ask the Gemini API Yes or No questions to get hints in real time.",
   "@aboutHowToPlayFourthInstructions": {
     "description": "The Fourth step instruction on how to play."
   },

diff --git a/lib/project_details/link/project_details_links.dart b/lib/project_details/link/project_details_links.dart
@@ -12,4 +12,5 @@ class ProjectDetailsLinks {
     defaultValue: 'https://crossword.withgoogle.com',
   );
   static const blogPost = 'https://flutter.dev/crossword';
+  static const geminiDeveloperCompetition = 'https://ai.google.dev/competition';
 }
diff --git a/lib/project_details/view/project_details_view.dart b/lib/project_details/view/project_details_view.dart
@@ -93,7 +93,7 @@ class ProjectDetailsContent extends StatelessWidget {
                 if (layout == IoLayoutData.small)
                   Assets.images.hero.image(height: 200),
                 const SizedBox(height: 60),
-                const HowMade(),
+                const HowMadeAndOpenSource(),
               ],
             ),
           ),

diff --git a/lib/welcome/view/welcome_page.dart b/lib/welcome/view/welcome_page.dart
@@ -123,7 +123,7 @@ class WelcomeBody extends StatelessWidget {
     return Theme(
       data: const IoCrosswordTheme().themeData,
       child: ConstrainedBox(
-        constraints: const BoxConstraints(maxWidth: 294),
+        constraints: const BoxConstraints(maxWidth: 320),
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [

diff --git a/lib/widget/how_made.dart b/lib/widget/how_made.dart
@@ -5,8 +5,8 @@ import 'package:io_crossword/l10n/l10n.dart';
 import 'package:io_crossword/project_details/link/project_details_links.dart';
 import 'package:io_crossword_ui/io_crossword_ui.dart';
 
-class HowMade extends StatelessWidget {
-  const HowMade({super.key});
+class HowMadeAndOpenSource extends StatelessWidget {
+  const HowMadeAndOpenSource({super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -19,35 +19,61 @@ class HowMade extends StatelessWidget {
     return RichText(
       textAlign: TextAlign.center,
       text: TextSpan(
-        text: '${l10n.learn} ',
-        style: textTheme.body.copyWith(
-          color: textColor,
-        ),
+        style: textTheme.body.copyWith(color: textColor),
         children: [
+          TextSpan(text: '${l10n.learn} '),
           TextSpan(
             text: l10n.howMade,
-            style: textTheme.body.copyWith(
-              color: linkColor,
-            ),
+            style: textTheme.body.copyWith(color: linkColor),
             recognizer: TapGestureRecognizer()
               ..onTap = () => context.launchUrl(ProjectDetailsLinks.blogPost),
           ),
-          TextSpan(
-            text: ' ${l10n.and} ',
-            style: textTheme.body,
-          ),
+          TextSpan(text: ' ${l10n.and} '),
           TextSpan(
             text: l10n.openSourceCode,
-            style: textTheme.body.copyWith(
-              color: linkColor,
-            ),
+            style: textTheme.body.copyWith(color: linkColor),
             recognizer: TapGestureRecognizer()
               ..onTap = () => context.launchUrl(ProjectDetailsLinks.github),
           ),
+          const TextSpan(text: '.'),
+        ],
+      ),
+    );
+  }
+}
+
+class HowMadeAndJoinCompetition extends StatelessWidget {
+  const HowMadeAndJoinCompetition({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+
+    final textTheme = Theme.of(context).io.textStyles;
+    const linkColor = IoCrosswordColors.linkBlue;
+    const textColor = IoCrosswordColors.seedWhite;
+
+    return RichText(
+      textAlign: TextAlign.center,
+      text: TextSpan(
+        style: textTheme.body.copyWith(color: textColor),
+        children: [
+          TextSpan(text: '${l10n.learn} '),
           TextSpan(
-            text: '.',
-            style: textTheme.body,
+            text: l10n.howMade,
+            style: textTheme.body.copyWith(color: linkColor),
+            recognizer: TapGestureRecognizer()
+              ..onTap = () => context.launchUrl(ProjectDetailsLinks.blogPost),
+          ),
+          const TextSpan(text: '.\n'),
+          TextSpan(
+            text: l10n.joinGeminiCompetition,
+            style: textTheme.body.copyWith(color: linkColor),
+            recognizer: TapGestureRecognizer()
+              ..onTap = () => context
+                  .launchUrl(ProjectDetailsLinks.geminiDeveloperCompetition),
           ),
+          const TextSpan(text: '.'),
         ],
       ),
     );

diff --git a/packages/io_crossword_ui/lib/src/theme/io_crossword_colors.dart b/packages/io_crossword_ui/lib/src/theme/io_crossword_colors.dart
@@ -29,6 +29,9 @@ abstract class IoCrosswordColors {
   /// light blue gradient
   static const darkGradientBlue = Color(0xFF337BFA);
 
+  /// developer blue
+  static const developerBlue = Color(0xFFB7D8FF);
+
   /// googleBlue
   static const googleBlue = Color(0xFF4383F2);
 

diff --git a/test/end_game/view/end_game_view_content_test.dart b/test/end_game/view/end_game_view_content_test.dart
@@ -50,10 +50,10 @@ void main() {
       expect(find.text(l10n.thanksForContributing), findsOneWidget);
     });
 
-    testWidgets('displays HowMade', (tester) async {
+    testWidgets('displays HowMadeAndJoinCompetition', (tester) async {
       await tester.pumpApp(SingleChildScrollView(child: EndGameContent()));
 
-      expect(find.byType(HowMade), findsOneWidget);
+      expect(find.byType(HowMadeAndJoinCompetition), findsOneWidget);
     });
 
     testWidgets('displays EndGameImage', (tester) async {

diff --git a/test/project_details/view/project_details_view_test.dart b/test/project_details/view/project_details_view_test.dart
@@ -60,7 +60,7 @@ void main() {
         (tester) async {
           await tester.pumpApp(const ProjectDetailsContent());
 
-          expect(find.byType(HowMade), findsOneWidget);
+          expect(find.byType(HowMadeAndOpenSource), findsOneWidget);
         },
       );
     });