diff --git a/platform/app/src/routes/NotFound/NotFound.tsx b/platform/app/src/routes/NotFound/NotFound.tsx index 4672b971a..e22c82147 100644 --- a/platform/app/src/routes/NotFound/NotFound.tsx +++ b/platform/app/src/routes/NotFound/NotFound.tsx @@ -1,22 +1,36 @@ 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 ( -
-
-

{message}

- {showGoBackButton && showStudyList && ( -
- Go back to the Study List -
- )} +
+
+
+ +
+
+
+

Error (404)

+

{message}

+ {showGoBackButton && showStudyList && ( + + )} +
); diff --git a/platform/app/src/routes/index.tsx b/platform/app/src/routes/index.tsx index 193c806c2..6084ba52e 100644 --- a/platform/app/src/routes/index.tsx +++ b/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, diff --git a/platform/ui-next/src/components/Icons/Icons.tsx b/platform/ui-next/src/components/Icons/Icons.tsx index 5ff25c73c..59d787555 100644 --- a/platform/ui-next/src/components/Icons/Icons.tsx +++ b/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; @@ -798,6 +799,7 @@ export const Icons = { Undo, Redo, JumpToSlice, + IllustrationNotFound, /** Adds an icon to the set of icons */ addIcon: (name: string, icon) => { diff --git a/platform/ui-next/src/components/Icons/Sources/IllustrationNotFound.tsx b/platform/ui-next/src/components/Icons/Sources/IllustrationNotFound.tsx new file mode 100644 index 000000000..f6ff139e3 --- /dev/null +++ b/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) => ( + + + + + + + + + + + + + +); + +export default IllustrationNotFound;