chore: updated error and empty states' content (#4870)

space/app/error.tsx

@@ -12,10 +12,10 @@ const ErrorPage = () => {
     <div className="grid h-screen place-items-center p-4">
       <div className="space-y-8 text-center">
         <div className="space-y-2">
-          <h3 className="text-lg font-semibold">Exception Detected!</h3>
+          <h3 className="text-lg font-semibold">Yikes! That doesn{"'"}t look good.</h3>
-          <p className="mx-auto w-1/2 text-sm text-custom-text-200">
+          <p className="mx-auto md:w-1/2 text-sm text-custom-text-200">
-            We{"'"}re Sorry! An exception has been detected, and our engineering team has been notified. We apologize
+            That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
-            for any inconvenience this may have caused. Please reach out to our engineering team at{" "}
+            details, please write to{" "}
             <a href="mailto:support@plane.so" className="text-custom-primary">
               support@plane.so
             </a>{" "}
@@ -27,8 +27,8 @@ const ErrorPage = () => {
               rel="noopener noreferrer"
             >
               Discord
-            </a>{" "}
+            </a>
-            server for further assistance.
+            .
           </p>
         </div>
         <div className="flex items-center justify-center gap-2">

space/app/not-found.tsx

@@ -2,18 +2,20 @@
 
 import Image from "next/image";
 // assets
-import UserLoggedInImage from "public/user-logged-in.svg";
+import SomethingWentWrongImage from "public/something-went-wrong.svg";
 
 const NotFound = () => (
   <div className="h-screen w-screen grid place-items-center">
     <div className="text-center">
-      <div className="mx-auto size-52 grid place-items-center rounded-full bg-custom-background-80">
+      <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
-        <div className="size-32">
+        <div className="size-16 md:size-32 grid place-items-center">
-          <Image src={UserLoggedInImage} alt="User already logged in" />
+          <Image src={SomethingWentWrongImage} alt="User already logged in" />
         </div>
       </div>
-      <h1 className="mt-12 text-3xl font-semibold">Not Found</h1>
+      <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">That didn{"'"}t work</h1>
-      <p className="mt-4">Please enter the appropriate project URL to view the issue board.</p>
+      <p className="mt-2 md:mt-4 text-sm md:text-base">
+        Check the URL you are entering in the browser{"'"}s address bar and try again.
+      </p>
     </div>
   </div>
 );

space/core/components/account/auth-forms/auth-header.tsx

@@ -24,8 +24,8 @@ const Titles: TAuthHeaderDetails = {
     subHeader: "Contribute in nudging the features you want to get built.",
   },
   [EAuthModes.SIGN_UP]: {
-    header: "Comment or react to issues",
+    header: "View, comment, and do more",
-    subHeader: "Use plane to add your valuable inputs to features.",
+    subHeader: "Sign up or log in to work with Plane Issues and Pages.",
   },
 };
 
@@ -48,8 +48,8 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
   return (
     <>
       <div className="space-y-1 text-center">
-        <h3 className="text-3xl font-bold text-onboarding-text-100">{header}</h3>
+        <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-onboarding-text-100">{header}</h3>
-        <p className="font-medium text-onboarding-text-400">{subHeader}</p>
+        <p className="text-xs sm:text-sm md:text-base font-medium text-onboarding-text-400">{subHeader}</p>
       </div>
       {children}
     </>

space/core/components/account/user-logged-in.tsx

@@ -33,14 +33,15 @@ export const UserLoggedIn = observer(() => {
 
       <div className="size-full grid place-items-center p-6">
         <div className="text-center">
-          <div className="mx-auto size-52 grid place-items-center rounded-full bg-custom-background-80">
+          <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
-            <div className="size-32">
+            <div className="size-16 md:size-32 grid place-items-center">
               <Image src={UserLoggedInImage} alt="User already logged in" />
             </div>
           </div>
-          <h1 className="mt-12 text-3xl font-semibold">Logged in successfully!</h1>
+          <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">Nice! Just one more step.</h1>
-          <p className="mt-4">
+          <p className="mt-2 md:mt-4 text-sm md:text-base">
-            You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board.
+            Enter the public-share URL or link of the view or Page you are trying to see in the browser{"'"}s address
+            bar.
           </p>
         </div>
       </div>

web/app/error.tsx

@@ -52,10 +52,10 @@ const CustomErrorComponent = () => {
         <div className="grid h-full place-items-center p-4">
           <div className="space-y-8 text-center">
             <div className="space-y-2">
-              <h3 className="text-lg font-semibold">Exception Detected!</h3>
+              <h3 className="text-lg font-semibold">Yikes! That doesn{"'"}t look good.</h3>
-              <p className="mx-auto w-1/2 text-sm text-custom-text-200">
+              <p className="mx-auto md:w-1/2 text-sm text-custom-text-200">
-                We{"'"}re Sorry! An exception has been detected, and our engineering team has been notified. We
+                That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
-                apologize for any inconvenience this may have caused. Please reach out to our engineering team at{" "}
+                details, please write to{" "}
                 <a href="mailto:support@plane.so" className="text-custom-primary">
                   support@plane.so
                 </a>{" "}
@@ -67,8 +67,8 @@ const CustomErrorComponent = () => {
                   rel="noopener noreferrer"
                 >
                   Discord
-                </a>{" "}
+                </a>
-                server for further assistance.
+                .
               </p>
             </div>
             <div className="flex items-center justify-center gap-2">