feat(web-ui): improve error view

services/web-ui/src/features/chat/pages/ConversationsPage/ConversationsPage.container.tsx

@@ -22,7 +22,7 @@ export function ConversationsPageContainer(): ReactElement {
   if (error) {
     return (
       <ConversationsPageNav>
-        <ErrorView error={error} />
+        <ErrorView message="Unable to get chats" />
       </ConversationsPageNav>
     );
   }

services/web-ui/src/pages/AuthenticationGuard/AuthenticationGuard.container.tsx

@@ -32,10 +32,12 @@ export function AuthenticationGuardContainer({
   }
 
   if (error) {
-    const message = `Unable to verify if logged in. Try refreshing the page.`;
     return (
       <AuthenticationGuardNav>
-        <ErrorView error={error} message={message} />
+        <ErrorView
+          description="We cannot verify your credentials right now. Try waiting a bit and refreshing the page."
+          message="Unable to verify login"
+        />
       </AuthenticationGuardNav>
     );
   }

services/web-ui/src/pages/AuthenticationGuard/AuthenticationGuard.nav.tsx

@@ -9,5 +9,5 @@ export interface AuthenticationGuardNavProps {
 export function AuthenticationGuardNav({
   children,
 }: AuthenticationGuardNavProps): React.ReactElement {
-  return <Box sx={{ p: 3 }}>{children}</Box>;
+  return <Box sx={{ p: 3, height: "100vh" }}>{children}</Box>;
 }

services/web-ui/src/pages/ChatPage/ChatPage.container.tsx

@@ -45,7 +45,7 @@ export function ChatPageContainer(): ReactElement {
   if (error) {
     return (
       <ChatPageNav>
-        <ErrorView error={error} />
+        <ErrorView />
       </ChatPageNav>
     );
   }

services/web-ui/src/pages/CurrentOrganizationPage/CurrentOrganizationPage.container.tsx

@@ -24,7 +24,7 @@ export function CurrentOrganizationPageContainer(): ReactElement {
   if (error) {
     return (
       <CurrentOrganizationPageNav>
-        <ErrorView error={error} />
+        <ErrorView  />
       </CurrentOrganizationPageNav>
     );
   }
@@ -40,7 +40,7 @@ export function CurrentOrganizationPageContainer(): ReactElement {
   if (!data) {
     return (
       <CurrentOrganizationPageNav>
-        <ErrorView error="Organization not found" />
+        <ErrorView message="Organization not found" />
       </CurrentOrganizationPageNav>
     );
   }

services/web-ui/src/pages/CurrentProfilePage/CurrentProfilePage.container.tsx

@@ -18,7 +18,7 @@ export function CurrentProfilePageContainer(): ReactElement {
   if (error) {
     return (
       <CurrentProfilePageNav>
-        <ErrorView error={error} />
+        <ErrorView />
       </CurrentProfilePageNav>
     );
   }
@@ -34,7 +34,7 @@ export function CurrentProfilePageContainer(): ReactElement {
   if (!data) {
     return (
       <CurrentProfilePageNav>
-        <ErrorView error="Unable to fetch profile" />
+        <ErrorView message="Unable to fetch profile" />
       </CurrentProfilePageNav>
     );
   }

services/web-ui/src/pages/OrganizationListPage/OrganizationListPage.container.tsx

@@ -34,7 +34,7 @@ export function OrganizationListPageContainer(): ReactElement {
   if (error) {
     return (
       <OrganizationListPageNav>
-        <ErrorView error={error} />
+        <ErrorView />
       </OrganizationListPageNav>
     );
   }
@@ -50,7 +50,7 @@ export function OrganizationListPageContainer(): ReactElement {
   if (!data || data.length === 0) {
     return (
       <OrganizationListPageNav>
-        <ErrorView error={t("organization-list.error")} />
+        <ErrorView message={t("organization-list.error") ||""} />
       </OrganizationListPageNav>
     );
   }

services/web-ui/src/pages/ProfilePage/ProfilePage.container.tsx

@@ -22,7 +22,7 @@ export function ProfilePageContainer(): ReactElement {
   if (error) {
     return (
       <ProfilePageNav>
-        <ErrorView error={error} />
+        <ErrorView />
       </ProfilePageNav>
     );
   }

services/web-ui/src/pages/SettingsPage/SettingsPage.container.tsx

@@ -49,7 +49,7 @@ export function SettingsPageContainer(): ReactElement {
     return (
       <>
         <SettingsPageHeader />
-        <ErrorView error={error} />
+        <ErrorView />
       </>
     );
   }
@@ -67,7 +67,7 @@ export function SettingsPageContainer(): ReactElement {
     return (
       <>
         <SettingsPageHeader />
-        <ErrorView error="Settings not found" />
+        <ErrorView message="Settings not found" />
       </>
     );
   }

services/web-ui/src/views/ErrorView/ErrorView.tsx

@@ -1,24 +1,38 @@
 import { ReactElement } from "react";
 
-import { Box } from "@mui/material";
+import { HeartBroken } from "@mui/icons-material";
+import { Box, Typography } from "@mui/material";
 
-import { ErrorMessage } from "src/components/ui/ErrorMessage";
-import { ErrorMessageProps } from "src/components/ui/ErrorMessage/ErrorMessage";
-
-export interface ErrorViewProps extends ErrorMessageProps {}
+interface ErrorViewProps {
+  description?: string;
+  message?: string;
+}
 
-export function ErrorView(props: ErrorViewProps): ReactElement {
+export function ErrorView({
+  description,
+  message="Un unexpected error occured",
+}: ErrorViewProps): ReactElement {
   return (
     <Box
       sx={{
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        paddingTop: "10px",
+        height: "100%",
       }}
     >
-      <Box>
-        <ErrorMessage {...props} />
+      <Box
+        sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}
+      >
+        <HeartBroken color="error" sx={{ fontSize: 60, mb: 2 }} />
+
+        <Typography gutterBottom variant="h5">
+          {message}
+        </Typography>
+
+        {description && (
+          <Typography color="textSecondary">{description}</Typography>
+        )}
       </Box>
     </Box>
   );