From 848ae5cbb68bc93be3d09e2475871820a5c6ff71 Mon Sep 17 00:00:00 2001
From: Shawn <shawn@gskinner.com>
Date: Thu, 18 Jan 2024 09:53:09 -0700
Subject: [PATCH] Add custom 404 page

---
 lib/router.dart                               |  3 ++
 lib/ui/common/wonderous_logo.dart             | 16 +++++++
 lib/ui/screens/home_menu/home_menu.dart       |  8 +---
 .../page_not_found/page_not_found.dart        | 48 +++++++++++++++++++
 4 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 lib/ui/common/wonderous_logo.dart
 create mode 100644 lib/ui/screens/page_not_found/page_not_found.dart

diff --git a/lib/router.dart b/lib/router.dart
index 47c0011d..a940abf6 100644
--- a/lib/router.dart
+++ b/lib/router.dart
@@ -10,6 +10,8 @@ import 'package:wonders/ui/screens/intro/intro_screen.dart';
 import 'package:wonders/ui/screens/timeline/timeline_screen.dart';
 import 'package:wonders/ui/screens/wonder_details/wonders_details_screen.dart';
 
+import 'ui/screens/page_not_found/page_not_found.dart';
+
 /// Shared paths / urls used across the app
 class ScreenPaths {
   static String splash = '/';
@@ -62,6 +64,7 @@ AppRoute get _collectionRoute {
 /// Routing table, matches string paths to UI Screens, optionally parses params from the paths
 final appRouter = GoRouter(
   redirect: _handleRedirect,
+  errorPageBuilder: (context, state) => MaterialPage(child: PageNotFound(state.uri.toString())),
   routes: [
     ShellRoute(
         builder: (context, router, navigator) {
diff --git a/lib/ui/common/wonderous_logo.dart b/lib/ui/common/wonderous_logo.dart
new file mode 100644
index 00000000..fb88e86e
--- /dev/null
+++ b/lib/ui/common/wonderous_logo.dart
@@ -0,0 +1,16 @@
+import 'package:flutter/material.dart';
+import 'package:wonders/assets.dart';
+
+class WonderousLogo extends StatelessWidget {
+  const WonderousLogo({super.key, this.width = 100});
+
+  final double width;
+
+  @override
+  Widget build(BuildContext context) => Image.asset(
+        ImagePaths.appLogoPlain,
+        fit: BoxFit.cover,
+        width: width,
+        filterQuality: FilterQuality.high,
+      );
+}
diff --git a/lib/ui/screens/home_menu/home_menu.dart b/lib/ui/screens/home_menu/home_menu.dart
index 87b253b4..bccca5d2 100644
--- a/lib/ui/screens/home_menu/home_menu.dart
+++ b/lib/ui/screens/home_menu/home_menu.dart
@@ -7,6 +7,7 @@ import 'package:wonders/ui/common/app_icons.dart';
 import 'package:wonders/ui/common/controls/app_header.dart';
 import 'package:wonders/ui/common/controls/locale_switcher.dart';
 import 'package:wonders/ui/common/pop_navigator_underlay.dart';
+import 'package:wonders/ui/common/wonderous_logo.dart';
 import 'package:wonders/ui/screens/home_menu/about_dialog_content.dart';
 
 class HomeMenu extends StatefulWidget {
@@ -32,12 +33,7 @@ class _HomeMenuState extends State<HomeMenu> {
       applicationIcon: Container(
         color: $styles.colors.black,
         padding: EdgeInsets.all($styles.insets.xs),
-        child: Image.asset(
-          ImagePaths.appLogoPlain,
-          fit: BoxFit.cover,
-          width: 52,
-          filterQuality: FilterQuality.high,
-        ),
+        child: WonderousLogo(width: 52),
       ),
     );
   }
diff --git a/lib/ui/screens/page_not_found/page_not_found.dart b/lib/ui/screens/page_not_found/page_not_found.dart
new file mode 100644
index 00000000..4440403e
--- /dev/null
+++ b/lib/ui/screens/page_not_found/page_not_found.dart
@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:wonders/common_libs.dart';
+import 'package:wonders/ui/common/themed_text.dart';
+import 'package:wonders/ui/common/wonderous_logo.dart';
+
+class PageNotFound extends StatelessWidget {
+  const PageNotFound(String url, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    void handleHomePressed() => context.go(ScreenPaths.home);
+
+    return Scaffold(
+      backgroundColor: $styles.colors.black,
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            WonderousLogo(),
+            Gap(10),
+            Text(
+              'Wonderous',
+              style: $styles.text.wonderTitle.copyWith(color: $styles.colors.accent1, fontSize: 28),
+            ),
+            Gap(70),
+            Text(
+              'The page you are looking for does not exist.',
+              style: $styles.text.body.copyWith(color: $styles.colors.offWhite),
+            ),
+            Gap(70),
+            AppBtn(
+              minimumSize: Size(200, 0),
+              bgColor: $styles.colors.offWhite,
+              onPressed: handleHomePressed,
+              semanticLabel: 'Back',
+              child: DarkText(
+                child: Text(
+                  'Back to civilization',
+                  style: $styles.text.btn.copyWith(fontSize: 12),
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}