Lyndsay's User Guide Implementation

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     parser: "@typescript-eslint/parser",
     parserOptions: {
         project: "./tsconfig.json",
+        tsconfigRootDir: __dirname,
     },
     plugins: ["@typescript-eslint", "react-hooks"],
     root: true,

packages/web/custom.d.ts

@@ -5,4 +5,12 @@ declare module "*.svg" {
     export default src;
 }
 
-declare module "*.png";
+declare module "*.png" {
+    const src: string;
+    export default src;
+}
+
+declare module "*.css" {
+    const classes: { [key: string]: string };
+    export default classes;
+}

packages/web/src/components/Footer/Footer.module.css

@@ -1,9 +1,14 @@
 .footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
   height: fit-content;
-  margin: 0 auto;
   padding: var(--margin) 0;
   border-top: 1px solid var(--border-color);
   text-align: center;
+  background-color: var(--secondary-dark);
+  z-index: 100;
 }
 
 .footer-link {

packages/web/src/components/Header/Menu.tsx

@@ -34,12 +34,12 @@ export default function Menu() {
                     Open-source datasets
                 </Link>
                 <Link
-                    to="learn"
+                    to="user-guide"
                     className={styles.routeLink}
                     target={isApp ? "_blank" : "_self"}
                     rel="noreferrer"
                 >
-                    Learn
+                    User guide
                 </Link>
                 <PrimaryFluent
                     ariaLabel="Help"
@@ -79,11 +79,11 @@ export default function Menu() {
                             href: "/datasets",
                         },
                         {
-                            key: "learn",
-                            text: "Learn",
+                            key: "user-guide",
+                            text: "User guide",
                             target: isApp ? "_blank" : "_self",
                             rel: "noreferrer",
-                            href: "/learn",
+                            href: "/user-guide",
                         },
                         {
                             key: "help",

packages/web/src/components/NotFound/NotFound.module.css

@@ -0,0 +1,29 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    height: 100%;
+    margin: 0 20%;
+}
+
+.container a {
+    color: var(--aqua) !important;
+}
+
+.container a:hover {
+    color: var(--bright-aqua) !important;
+}
+
+.container ul {
+    margin: 0;
+    padding: 0;
+}
+
+.container ul li {
+    margin: 0.25em 0 0.25em 1em;
+}
+
+.container p {
+    line-height: normal;
+}

packages/web/src/components/NotFound/index.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+import styles from "./NotFound.module.css";
+
+export default function NotFound() {
+    return (
+        <div className={styles.container}>
+            <h1>Looking for something?</h1>
+            <p>
+                Sorry, we could not find the page you are looking for. One of the following BioFile
+                Finder (BFF) related pages may help you get back on track:
+            </p>
+            <ul>
+                <li>
+                    <Link to="/">Home</Link>
+                </li>
+                <li>
+                    <Link to="/user-guide">User Guide</Link>
+                </li>
+            </ul>
+            <p>
+                <a href="mailto:aics_software_support@alleninstitute.org">Email us</a> if you have
+                any questions or issues.
+            </p>
+        </div>
+    );
+}