From 46ac908155a69a4857a6b9aa1ff955bb4f06e0e9 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 19 Jun 2024 16:39:31 +0530
Subject: [PATCH] chore: updated error and empty states' content (#4870)

---
 space/app/error.tsx                                | 12 ++++++------
 space/app/not-found.tsx                            | 14 ++++++++------
 .../components/account/auth-forms/auth-header.tsx  |  8 ++++----
 space/core/components/account/user-logged-in.tsx   | 11 ++++++-----
 web/app/error.tsx                                  | 12 ++++++------
 5 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/space/app/error.tsx b/space/app/error.tsx
index e47a1af1d..1f9e1ca19 100644
--- a/space/app/error.tsx
+++ b/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>
-          <p className="mx-auto 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
-            for any inconvenience this may have caused. Please reach out to our engineering team at{" "}
+          <h3 className="text-lg font-semibold">Yikes! That doesn{"'"}t look good.</h3>
+          <p className="mx-auto md:w-1/2 text-sm text-custom-text-200">
+            That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
+            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>{" "}
-            server for further assistance.
+            </a>
+            .
           </p>
         </div>
         <div className="flex items-center justify-center gap-2">
diff --git a/space/app/not-found.tsx b/space/app/not-found.tsx
index c5320b2dc..9b6050ed1 100644
--- a/space/app/not-found.tsx
+++ b/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="size-32">
-          <Image src={UserLoggedInImage} alt="User already logged in" />
+      <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
+        <div className="size-16 md:size-32 grid place-items-center">
+          <Image src={SomethingWentWrongImage} alt="User already logged in" />
         </div>
       </div>
-      <h1 className="mt-12 text-3xl font-semibold">Not Found</h1>
-      <p className="mt-4">Please enter the appropriate project URL to view the issue board.</p>
+      <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">That didn{"'"}t work</h1>
+      <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>
 );
diff --git a/space/core/components/account/auth-forms/auth-header.tsx b/space/core/components/account/auth-forms/auth-header.tsx
index c3fff468e..8921c70b8 100644
--- a/space/core/components/account/auth-forms/auth-header.tsx
+++ b/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",
-    subHeader: "Use plane to add your valuable inputs to features.",
+    header: "View, comment, and do more",
+    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>
-        <p className="font-medium text-onboarding-text-400">{subHeader}</p>
+        <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-onboarding-text-100">{header}</h3>
+        <p className="text-xs sm:text-sm md:text-base font-medium text-onboarding-text-400">{subHeader}</p>
       </div>
       {children}
     </>
diff --git a/space/core/components/account/user-logged-in.tsx b/space/core/components/account/user-logged-in.tsx
index 5975d73b6..2646c4471 100644
--- a/space/core/components/account/user-logged-in.tsx
+++ b/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="size-32">
+          <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
+            <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>
-          <p className="mt-4">
-            You{"'"}ve successfully logged in. Please enter the appropriate project URL to view the issue board.
+          <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">Nice! Just one more step.</h1>
+          <p className="mt-2 md:mt-4 text-sm md:text-base">
+            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>
diff --git a/web/app/error.tsx b/web/app/error.tsx
index f4b54c74b..5722a9913 100644
--- a/web/app/error.tsx
+++ b/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>
-              <p className="mx-auto 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 for any inconvenience this may have caused. Please reach out to our engineering team at{" "}
+              <h3 className="text-lg font-semibold">Yikes! That doesn{"'"}t look good.</h3>
+              <p className="mx-auto md:w-1/2 text-sm text-custom-text-200">
+                That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
+                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>{" "}
-                server for further assistance.
+                </a>
+                .
               </p>
             </div>
             <div className="flex items-center justify-center gap-2">