Update error modal styling

src/ErrorModal.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
-import { Center, Content, Modal } from "./Layout";
 import { Link, useLocation } from "react-router-dom";
 import { ErrorMessage } from "./Input";
 import styles from "./ErrorModal.module.css";
+import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 
 export function ErrorModal({ error }) {
   const location = useLocation();
@@ -12,25 +12,22 @@ export function ErrorModal({ error }) {
   }, [error]);
 
   return (
-    <Content>
+    <>
-      <Center>
+      <Header>
-        <Modal>
+        <LeftNav>
-          <h2>Error</h2>
+          <HeaderLogo />
-          <div className={styles.errorModalContent}>
+        </LeftNav>
-            <ErrorMessage>{error.message}</ErrorMessage>
+        <RightNav />
-            <p>
+      </Header>
-              <Link to={{ pathname: "/login", state: { from: location } }}>
+      <div className={styles.container}>
-                Login
+        <div className={styles.content}>
-              </Link>
+          <h1>Error</h1>
-            </p>
+          <ErrorMessage>{error.message}</ErrorMessage>
-            <p>
+          <Link className={styles.homeLink} to="/">
-              <Link to={{ pathname: "/register", state: { from: location } }}>
+            Return to home screen
-                Register
+          </Link>
-              </Link>
+        </div>
-            </p>
+      </div>
-          </div>
+    </>
-        </Modal>
-      </Center>
-    </Content>
   );
 }

src/ErrorModal.module.css

@@ -1,9 +1,43 @@
-.errorModalContent {
+.header {
-  display: flex;
+  padding: 76px 65px;
-  flex-direction: column;
-  align-items: center;
 }
 
-.errorModalContent p {
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 660px;
+  padding: 0 65px;
+}
+
+.content > * {
+  margin-top: 0;
+  margin-bottom: 32px;
+}
+
+.content > :last-child {
   margin-bottom: 0;
 }
+
+.homeLink {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 136px;
+  color: #0dbd8b;
+  text-decoration: none;
+  background: #0dbd8b;
+  border-radius: 8px;
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 15px;
+}

src/Room.jsx

@@ -83,7 +83,11 @@ export function Room() {
   }
 
   if (registrationError || error) {
-    return <ErrorModal error={registrationError || error} />;
+    return (
+      <div className={styles.room}>
+        <ErrorModal error={registrationError || error} />
+      </div>
+    );
   }
 
   return <GroupCall client={client} />;
@@ -108,11 +112,7 @@ export function GroupCall({ client }) {
   }, [groupCall]);
 
   if (loading) {
-    return (
+    return <LoadingRoomView />;
-      <div className={styles.room}>
-        <LoadingRoomView />
-      </div>
-    );
   }
 
   if (error) {