From 1ea2fcd13dbc966fb9b0992e66ee6e2ac0ab1938 Mon Sep 17 00:00:00 2001
From: Colin <colinb969@gmail.com>
Date: Wed, 31 Jul 2024 10:23:36 +0100
Subject: [PATCH] fix: Use not found page when can't find view

style: Minor changes to search bar display
---
 .../components/pages/NotFoundPage.tsx         |  8 +++++---
 src/renderer/containers/withView.tsx          | 15 +++++++++-----
 static/window/styles/core.css                 | 20 +++++++++++--------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/pages/NotFoundPage.tsx b/src/renderer/components/pages/NotFoundPage.tsx
index ba3581e71..521d09b89 100644
--- a/src/renderer/components/pages/NotFoundPage.tsx
+++ b/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>
   );
 }
diff --git a/src/renderer/containers/withView.tsx b/src/renderer/containers/withView.tsx
index 62294615e..869cea635 100644
--- a/src/renderer/containers/withView.tsx
+++ b/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 />;
+    }
   };
 }
diff --git a/static/window/styles/core.css b/static/window/styles/core.css
index 3cd3c46e3..9cf56ea1f 100644
--- a/static/window/styles/core.css
+++ b/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;
 }