diff --git a/public/not-found.svg b/public/not-found.svg new file mode 100644 index 00000000..31605c19 --- /dev/null +++ b/public/not-found.svg @@ -0,0 +1,279 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app.tsx b/src/app.tsx index 6b5c4c84..e3107326 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -30,7 +30,7 @@ const ErrorBoundary: FallbackRender = (props) => { }); return ( - +
An unexpected error has occurred. Please refresh the page and try again.
 ); diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index c9710295..f299f8d7 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -17,7 +17,7 @@ type Props = { const Layout = ({ children, title, subtitle }: Props) => { return ( - +
{children} @@ -26,10 +26,10 @@ const Layout = ({ children, title, subtitle }: Props) => { interface BaseLayoutProps { children: ReactNode; - subtitle: string; + title: string; } -export const BaseLayout = ({ children, subtitle }: BaseLayoutProps) => { +export const BaseLayout = ({ children, title }: BaseLayoutProps) => { const [showNotice, setShowNotice] = useState( () => localStorage.getItem(ALLOW_ERROR_REPORTING) === null || localStorage.getItem(ALLOW_ANALYTICS) === null ); @@ -43,7 +43,7 @@ export const BaseLayout = ({ children, subtitle }: BaseLayoutProps) => { return ( <> - {`API3 DAO | ${subtitle}`} + {`API3 DAO | ${title}`}
diff --git a/src/pages/history/history.tsx b/src/pages/history/history.tsx index 3581633a..df8f2b01 100644 --- a/src/pages/history/history.tsx +++ b/src/pages/history/history.tsx @@ -44,7 +44,7 @@ const History = () => { }, [history, checkedPrimary, checkedSecondary]); return ( - +
diff --git a/src/pages/not-found.tsx b/src/pages/not-found.tsx deleted file mode 100644 index 4ee688be..00000000 --- a/src/pages/not-found.tsx +++ /dev/null @@ -1,6 +0,0 @@ -const NotFoundPage = () => { - // TODO: Not found page - return
Not found
; -}; - -export default NotFoundPage; diff --git a/src/pages/not-found/index.ts b/src/pages/not-found/index.ts new file mode 100644 index 00000000..9bcb7ca7 --- /dev/null +++ b/src/pages/not-found/index.ts @@ -0,0 +1 @@ +export { default } from './not-found'; diff --git a/src/pages/not-found/not-found.module.scss b/src/pages/not-found/not-found.module.scss new file mode 100644 index 00000000..4d1dbad1 --- /dev/null +++ b/src/pages/not-found/not-found.module.scss @@ -0,0 +1,70 @@ +@import '../../styles/variables.module.scss'; +@import '../../styles/fonts.module.scss'; + +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 48px; + height: 100%; + width: 100%; + + img { + width: 100%; + max-width: 310px; + } + + @media (min-width: $sm) { + gap: 64px; + + img { + max-width: 460px; + } + } + + @media (min-width: $md) { + img { + max-width: 620px; + } + } +} + +.content { + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; + + @media (min-width: $sm) { + gap: 32px; + } +} + +.text { + display: flex; + flex-direction: column; + gap: 8px; + text-align: center; + color: $color-dark-blue-100; + + h1 { + @include font-heading-9; + } + + p { + @include font-body-15; + } + + @media (min-width: $sm) { + gap: 16px; + + h1 { + @include font-heading-5; + } + + p { + @include font-body-3; + } + } +} diff --git a/src/pages/not-found/not-found.tsx b/src/pages/not-found/not-found.tsx new file mode 100644 index 00000000..78a438c8 --- /dev/null +++ b/src/pages/not-found/not-found.tsx @@ -0,0 +1,27 @@ +import { BaseLayout } from '../../components/layout'; +import styles from './not-found.module.scss'; +import { images } from '../../utils'; +import Button from '../../components/button'; + +const NotFoundPage = () => { + return ( + +
+ 404 + +
+
+

Uh oh, that page doesn’t exist.

+

Let’s get you back to home.

+
+ + +
+
+ + ); +}; + +export default NotFoundPage; diff --git a/src/pages/proposal-commons/proposal-details/proposal-details.tsx b/src/pages/proposal-commons/proposal-details/proposal-details.tsx index 4a489598..c12da02c 100644 --- a/src/pages/proposal-commons/proposal-details/proposal-details.tsx +++ b/src/pages/proposal-commons/proposal-details/proposal-details.tsx @@ -66,7 +66,7 @@ const ProposalDetailsLayout = (props: ProposalDetailsContentProps) => { const proposal = proposalDetailsSelector(provider, proposals, type, voteId); return ( - + ); @@ -82,6 +82,7 @@ const ProposalDetailsPage = () => { const decoded = useMemo(() => decodeProposalTypeAndVoteId(typeAndVoteId), [typeAndVoteId]); if (!decoded) return ; + return ; }; diff --git a/src/utils/image-list.ts b/src/utils/image-list.ts index 0eb9aa60..44124f6e 100644 --- a/src/utils/image-list.ts +++ b/src/utils/image-list.ts @@ -26,6 +26,7 @@ export const images = { info: '/info.svg', infoCircle: '/info-circle.svg', notificationClose: '/notification-close.svg', + notFound: '/not-found.svg', success: '/success.svg', texture: '/texture.png', triangleBracketLeft: '/triangle-bracket-left.svg',