feat: update welcome view (#77)

* chore: update podfile

* feat: use crossword theme

* feat: add padding to crossword card

* feat: add a primary button to the app ui

* feat: update welcome view

* test: welcome view

* test: primary button

lib/app/view/app.dart

@@ -2,6 +2,7 @@ import 'package:crossword_repository/crossword_repository.dart';
 import 'package:flutter/material.dart';
 import 'package:io_crossword/crossword/crossword.dart';
 import 'package:io_crossword/l10n/l10n.dart';
+import 'package:io_crossword_ui/io_crossword_ui.dart';
 import 'package:provider/provider.dart';
 
 class App extends StatelessWidget {
@@ -26,12 +27,7 @@ class AppView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      theme: ThemeData(
-        appBarTheme: AppBarTheme(
-          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
-        ),
-        useMaterial3: true,
-      ),
+      theme: IoCrosswordTheme.themeData,
       localizationsDelegates: AppLocalizations.localizationsDelegates,
       supportedLocales: AppLocalizations.supportedLocales,
       home: const CrosswordPage(),

lib/game_intro/view/welcome_view.dart

@@ -1,6 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:intl/intl.dart';
 import 'package:io_crossword/game_intro/game_intro.dart';
+import 'package:io_crossword/l10n/l10n.dart';
+import 'package:io_crossword_ui/io_crossword_ui.dart';
 
 class WelcomeView extends StatelessWidget {
   const WelcomeView({super.key});
@@ -11,17 +14,62 @@ class WelcomeView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    final textTheme = Theme.of(context).textTheme;
+
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        const Text('Welcome!'),
-        const SizedBox(height: 32),
-        ElevatedButton(
+        const Placeholder(fallbackHeight: 150),
+        const SizedBox(height: IoCrosswordSpacing.xlg),
+        Text(
+          l10n.welcome,
+          style: textTheme.headlineLarge,
+        ),
+        const SizedBox(height: IoCrosswordSpacing.sm),
+        Text(
+          l10n.welcomeSubtitle,
+          style: textTheme.bodyMedium,
+          textAlign: TextAlign.center,
+        ),
+        const Spacer(),
+        const RecordProgress(),
+        const SizedBox(height: IoCrosswordSpacing.xxlg),
+        PrimaryButton(
           onPressed: () {
             context.read<GameIntroBloc>().add(const WelcomeCompleted());
           },
-          child: const Text('Continue'),
+          label: l10n.getStarted,
+        ),
+      ],
+    );
+  }
+}
+
+class RecordProgress extends StatelessWidget {
+  const RecordProgress({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+
+    // TODO(any): Replace with real data
+    const solvedWords = 50234;
+    const totalWords = 100123;
+
+    final f = NumberFormat.decimalPattern(l10n.localeName);
+
+    return Column(
+      children: [
+        Text(l10n.wordsToBreakRecord),
+        const SizedBox(height: IoCrosswordSpacing.sm),
+        LinearProgressIndicator(
+          value: 0.5,
+          minHeight: 4,
+          borderRadius: BorderRadius.circular(4),
         ),
+        const SizedBox(height: IoCrosswordSpacing.sm),
+        Text('${f.format(solvedWords)} / ${f.format(totalWords)}'),
       ],
     );
   }

lib/l10n/arb/app_en.arb

@@ -1,25 +1,19 @@
 {
     "@@locale": "en",
-    "counterAppBarTitle": "Counter",
-    "@counterAppBarTitle": {
-        "description": "Text shown in the AppBar of the Counter Page"
+    "welcome": "Welcome!",
+    "@welcome": {
+        "description": "Welcome label"
     },
-    "loading": "Loading {label}...",
-    "@loading": {
-        "description": "Text for the loading page",
-        "placeholders": {
-            "label": {
-                "type": "String",
-                "example": "Stuff",
-                "description": "Label for what is being loaded"
-            }
-        }
+    "welcomeSubtitle": "Help solve the World's Largest Crossword, built with Gemini for Google I/O 2024",
+    "@welcomeSubtitle": {
+        "description": "Subtitle to be displayed in the welcome modal"
     },
-    "loadingPhaseLabel": "{loadingPhase, select, audio{Delightful music} images{Beautiful scenery} other{ }}",
-    "@loadingPhaseLabel": {
-        "description": "Loading phases",
-        "placeholders": {
-            "loadingPhase": {}
-        }
+    "wordsToBreakRecord": "Words to break the world record",
+    "@wordsToBreakRecord": {
+        "description": "Label for the title regarding words to break the world record"
+    },
+    "getStarted": "Get Started",
+    "@getStarted": {
+        "description": "Get started label"
     }
 }