updated 404/PageNotFound

packages/commonwealth/client/scripts/views/pages/404.scss

@@ -0,0 +1,6 @@
+.PageNotFound {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

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 (
-    <CWEmptyState
-      iconName="cautionCircle"
-      content={
-        message ||
-        `
-            This page may not be visible to the public.
-            If it belongs to a private thread or community, try logging in.
+    <div className="PageNotFound">
+      <CWEmptyState
+        iconName="cautionCircle"
+        content={
+          message ||
+          `
+            This page is private.
+            Please Sign in to view or join the conversation.
             `
-      }
-    />
+        }
+      />
+      {!user.isLoggedIn && (
+        <CWButton
+          buttonType="primary"
+          label="Sign in"
+          onClick={() => setAuthModalType(AuthModalType.SignIn)}
+        />
+      )}
+      <AuthModal
+        type={AuthModalType.SignIn}
+        onClose={() => setAuthModalType(undefined)}
+        isOpen={!!authModalType}
+      />
+    </div>
   );
 };