fix(routes): display 404 feedback page for unmatched URLs (#5627)

* Added 404 feedback and design

* restore message and showGoBackButton props

platform/app/src/routes/NotFound/NotFound.tsx

@@ -1,24 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
-
+import { Button, Icons } from '@ohif/ui-next';
 import { useAppConfig } from '@state';
 
-const NotFound = ({ message = 'Sorry, this page does not exist.', showGoBackButton = true }) => {
+const NotFound = ({
+  message = "We can't find the page you're looking for.",
+  showGoBackButton = true,
+}) => {
   const [appConfig] = useAppConfig();
   const { showStudyList } = appConfig;
+  const navigate = useNavigate();
 
   return (
-    <div className="flex h-full w-full items-center justify-center text-white">
+    <div className="absolute flex h-full w-full items-center justify-center bg-black">
-      <div>
+      <div className="flex flex-col">
-        <h4>{message}</h4>
+        <div className="bg-background flex items-center justify-center rounded-t-2xl p-6">
+          <Icons.IllustrationNotFound />
+        </div>
+        <div className="bg-input h-px" />
+        <div className="bg-muted flex flex-col items-center justify-center rounded-b-2xl p-8 text-center">
+          <h1 className="text-foreground text-[22px] font-light">Error (404)</h1>
+          <p className="text-muted-foreground mt-1 text-[16px] font-light">{message}</p>
           {showGoBackButton && showStudyList && (
-          <h5>
+            <Button
-            <Link to={'/'}>Go back to the Study List</Link>
+              className="mt-8 px-3 text-lg"
-          </h5>
+              onClick={() => navigate('/')}
+            >
+              Return to Study List
+            </Button>
           )}
         </div>
       </div>
+    </div>
   );
 };
 

platform/app/src/routes/index.tsx

@@ -80,7 +80,7 @@ const bakedInRoutes = [
 ];
 
 // NOT FOUND (404)
-const notFoundRoute = { component: NotFound };
+const notFoundRoute = { path: '*', children: NotFound };
 
 const createRoutes = ({
   modes,

platform/ui-next/src/components/Icons/Icons.tsx

@@ -231,6 +231,7 @@ import ChevronLeft from './Sources/ChevronLeft';
 import StatusAlert from './Sources/StatusAlert';
 import Undo from './Sources/Undo';
 import TabContours from './Sources/TabContours';
+import IllustrationNotFound from './Sources/IllustrationNotFound';
 //
 //
 type IconProps = React.HTMLAttributes<SVGElement>;
@@ -798,6 +799,7 @@ export const Icons = {
   Undo,
   Redo,
   JumpToSlice,
+  IllustrationNotFound,
 
   /** Adds an icon to the set of icons */
   addIcon: (name: string, icon) => {

platform/ui-next/src/components/Icons/Sources/IllustrationNotFound.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const IllustrationNotFound = (props: IconProps) => (
+  <svg
+    width="150"
+    height="150"
+    viewBox="0 0 150 150"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      opacity="0.4"
+      d="M17 32.4628V22.0467C17 20.7096 17.5312 19.4272 18.4767 18.4817C19.4222 17.5362 20.7045 17.005 22.0417 17.005H32.4628"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M32.4628 132.963H22.0417C20.7045 132.963 19.4222 132.432 18.4767 131.487C17.5312 130.541 17 129.259 17 127.922V117.501"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M17 51.7875V67.2503"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M17 82.7131V98.1708"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M132.958 51.7875V67.2503"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M51.7875 17H67.2503"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M82.7081 17H98.1708"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M117.496 17.005H127.917C129.254 17.005 130.536 17.5362 131.482 18.4817C132.427 19.4272 132.958 20.7096 132.958 22.0467V32.4628"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.4"
+      d="M67.2503 132.958H51.7875"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M86.575 117.496C103.652 117.496 117.496 103.652 117.496 86.575C117.496 69.4981 103.652 55.6545 86.575 55.6545C69.4981 55.6545 55.6545 69.4981 55.6545 86.575C55.6545 103.652 69.4981 117.496 86.575 117.496Z"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M108.441 108.441L132.958 132.958"
+      stroke="#358CFD"
+      strokeWidth="6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default IllustrationNotFound;