diff --git a/packages/commonwealth/client/scripts/views/pages/404.scss b/packages/commonwealth/client/scripts/views/pages/404.scss new file mode 100644 index 00000000000..29d692239b0 --- /dev/null +++ b/packages/commonwealth/client/scripts/views/pages/404.scss @@ -0,0 +1,6 @@ +.PageNotFound { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} diff --git a/packages/commonwealth/client/scripts/views/pages/404.tsx b/packages/commonwealth/client/scripts/views/pages/404.tsx index b1ab5d4cfeb..85a513ddee6 100644 --- a/packages/commonwealth/client/scripts/views/pages/404.tsx +++ b/packages/commonwealth/client/scripts/views/pages/404.tsx @@ -1,21 +1,44 @@ import React from 'react'; +import useUserStore from 'state/ui/user'; +import { useAuthModalStore } from '../../state/ui/modals'; import { CWEmptyState } from '../components/component_kit/cw_empty_state'; +import { CWButton } from '../components/component_kit/new_designs/CWButton'; +import { AuthModal, AuthModalType } from '../modals/AuthModal'; +import './404.scss'; type PageNotFoundProps = { title?: string; message?: string }; export const PageNotFound = (props: PageNotFoundProps) => { const { message } = props; + const user = useUserStore(); + + const { authModalType, setAuthModalType } = useAuthModalStore(); + return ( - + + } + /> + {!user.isLoggedIn && ( + setAuthModalType(AuthModalType.SignIn)} + /> + )} + setAuthModalType(undefined)} + isOpen={!!authModalType} + /> + ); };