fix: Use not found page when can't find view

style: Minor changes to search bar display

src/renderer/components/pages/NotFoundPage.tsx

@@ -1,10 +1,12 @@
+import { Paths } from '@renderer/Paths';
+import { Link } from 'react-router-dom';
+
 /** Page shown when the current URL does not point to an existing page. */
 export function NotFoundPage() {
   return (
     <div className='page-not-found'>
-      <h1 className='page-not-found__error-number'>404</h1>
-      <h1 className='page-not-found__title'>Page Not Found</h1>
-      The page you were looking for is not here.
+      <h1>You appear to have gotten lost :(</h1>
+      <Link className='link' to={Paths.HOME}> Back to home</Link>
     </div>
   );
 }

src/renderer/containers/withView.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 import { getViewName } from '@renderer/Util';
 import { useAppSelector } from '@renderer/hooks/useAppSelector';
+import { NotFoundPage } from '@renderer/components/pages/NotFoundPage';
 
 export type WithViewProps = {
   currentView: ResultsView;
@@ -15,10 +16,14 @@ export function withView<Props extends WithViewProps>(Component: React.Component
     const viewName = getViewName(location.pathname);
     const search = useAppSelector((state) => state.search);
     const view = search.views[viewName];
-    return <Component
-      {...(props as Props)}
-      currentView={view}
-      currentViewName={viewName}
-    />;
+    if (view) {
+      return <Component
+        {...(props as Props)}
+        currentView={view}
+        currentViewName={viewName}
+      />;
+    } else {
+      return <NotFoundPage />;
+    }
   };
 }

static/window/styles/core.css

@@ -935,6 +935,9 @@ body {
   height: 100%;
   padding: 1em;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .page-not-found__error-number {
   font-size: 8em;
@@ -3470,8 +3473,8 @@ body {
 
 .search-bar {
   width: 100%;
-  height: 2.5rem;
-  padding: 0.5rem;
+  height: 2.3rem;
+  padding: 0.4rem;
   display: flex;
   flex-direction: row;
 }
@@ -3495,7 +3498,7 @@ body {
 }
 
 .search-bar-expansion {
-  margin-right: 0.5rem;
+  margin-right: 0.4rem;
   flex-grow: 1;
 }
 
@@ -3508,10 +3511,11 @@ body {
 .search-bar-simple-box {
   cursor: pointer;
   user-select: none;
-  margin-left: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-left: 0.4rem;
+  margin-bottom: 0.4rem;
   align-items: center;
   padding: 0.3rem;
+  font-size: 0.9em;
   display: flex;
   flex-direction: row;
 }
@@ -3522,10 +3526,10 @@ body {
 
 .three-state-checkbox {
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
   padding: 0.1rem;
-  width: 1.2rem;
-  height: 1.2rem;
+  width: 1.1rem;
+  height: 1.1rem;
   border: 1px solid #ccc;
   border-radius: 4px;
 }