Update room and room setup headers

src/Header.jsx

@@ -1,8 +1,67 @@
 import classNames from "classnames";
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import styles from "./Header.module.css";
-import { ReactComponent as Logo } from "./Logo.svg";
+import { ReactComponent as LogoIcon } from "./Logo.svg";
+import { ReactComponent as VideoIcon } from "./icons/Video.svg";
+import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
+
+export function RoomHeader({ roomName, children }) {
+  return (
+    <Header>
+      <LeftNav>
+        <div className={styles.roomAvatar}>
+          <VideoIcon width={16} height={16} />
+        </div>
+        <h3>{roomName}</h3>
+      </LeftNav>
+      <RightNav>{children}</RightNav>
+    </Header>
+  );
+}
+
+export function RoomSetupHeader({ roomName, children }) {
+  const history = useHistory();
+
+  return (
+    <Header>
+      <LeftNav>
+        <button className={styles.backButton} onClick={() => history.goBack()}>
+          <ArrowLeftIcon width={16} height={16} />
+          <div className={styles.roomAvatar}>
+            <VideoIcon width={16} height={16} />
+          </div>
+          <h3>{roomName}</h3>
+        </button>
+      </LeftNav>
+      <RightNav>{children}</RightNav>
+    </Header>
+  );
+}
+
+export function HomeHeader({ userName, signedIn, onLogout }) {
+  return (
+    <Header>
+      <LeftNav>
+        <Link className={styles.logo} to="/">
+          <LogoIcon width={32} height={32} />
+        </Link>
+      </LeftNav>
+      {signedIn && (
+        <RightNav>
+          <span className={styles.userName}>{userName}</span>
+          <button
+            className={styles.signOutButton}
+            type="button"
+            onClick={onLogout}
+          >
+            Sign Out
+          </button>
+        </RightNav>
+      )}
+    </Header>
+  );
+}
 
 export function Header({ children, className, ...rest }) {
   return (
@@ -14,18 +73,10 @@ export function Header({ children, className, ...rest }) {
 
 export function LeftNav({ children, className, ...rest }) {
   return (
-    <div className={classNames(styles.leftNav, className)} {...rest}>
-      <Link className={styles.logo} to="/">
-        <Logo width={32} height={32} />
-      </Link>
-      {children}
-    </div>
-  );
-}
-
-export function CenterNav({ children, className, ...rest }) {
-  return (
-    <div className={classNames(styles.centerNav, className)} {...rest}>
+    <div
+      className={classNames(styles.nav, styles.leftNav, className)}
+      {...rest}
+    >
       {children}
     </div>
   );
@@ -33,23 +84,11 @@ export function CenterNav({ children, className, ...rest }) {
 
 export function RightNav({ children, className, ...rest }) {
   return (
-    <div className={classNames(styles.rightNav, className)} {...rest}>
+    <div
+      className={classNames(styles.nav, styles.rightNav, className)}
+      {...rest}
+    >
       {children}
     </div>
   );
 }
-
-export function UserNav({ signedIn, userName, onLogout }) {
-  if (!signedIn) {
-    return null;
-  }
-
-  return (
-    <RightNav>
-      <span className={styles.userName}>{userName}</span>
-      <button className={styles.signOutButton} type="button" onClick={onLogout}>
-        Sign Out
-      </button>
-    </RightNav>
-  );
-}

src/Header.module.css

@@ -1,16 +1,18 @@
 .header {
   position: relative;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   height: 64px;
   user-select: none;
   flex-shrink: 0;
 }
 
-.leftNav {
-  position: absolute;
-  left: 20px;
+.nav {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin: 0 20px;
 }
 
 .logo {
@@ -19,19 +21,52 @@
   text-decoration: none;
 }
 
-.rightNav {
-  position: absolute;
-  right: 20px;
-  max-width: 40%;
-  white-space: nowrap;
-  display: flex;
+.leftNav > * {
+  margin-right: 12px;
 }
 
 .rightNav > * {
   margin-right: 24px;
 }
 
-.rightNav > :last-child {
+.nav > :last-child {
+  margin-right: 0;
+}
+
+.roomAvatar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 36px;
+  background-color: #5c56f5;
+}
+
+.roomAvatar > * {
+  fill: white;
+  stroke: white;
+}
+
+.backButton {
+  background: transparent;
+  border: none;
+  display: flex;
+  color: var(--textColor1);
+  cursor: pointer;
+  align-items: center;
+}
+
+.backButton h3 {
+  margin: 0;
+}
+
+.backButton > * {
+  margin-right: 12px;
+}
+
+.backButton > :last-child {
   margin-right: 0;
 }
 

src/Home.jsx

@@ -20,7 +20,7 @@ import {
   useGroupCallRooms,
   usePublicRooms,
 } from "./ConferenceCallManagerHooks";
-import { Header, LeftNav, UserNav } from "./Header";
+import { HomeHeader } from "./Header";
 import ColorHash from "color-hash";
 import styles from "./Home.module.css";
 import { FieldRow, InputField, Button, ErrorMessage } from "./Input";
@@ -121,10 +121,7 @@ export function Home({ client, onLogout }) {
 
   return (
     <>
-      <Header>
-        <LeftNav />
-        <UserNav signedIn userName={client.getUserId()} onLogout={onLogout} />
-      </Header>
+      <HomeHeader signedIn userName={client.getUserId()} onLogout={onLogout} />
       <Content>
         <Center>
           <Modal>

src/Room.jsx

@@ -26,7 +26,7 @@ import {
   DropdownButton,
   SettingsButton,
 } from "./RoomButton";
-import { Header, LeftNav, RightNav, CenterNav } from "./Header";
+import { Header, LeftNav, RoomHeader, RoomSetupHeader } from "./Header";
 import { Button } from "./Input";
 import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import VideoGrid, {
@@ -249,12 +249,7 @@ function RoomSetupView({
 
   return (
     <>
-      <Header>
-        <LeftNav />
-        <CenterNav>
-          <h3>{roomName}</h3>
-        </CenterNav>
-      </Header>
+      <RoomSetupHeader roomName={roomName} />
       <div className={styles.joinRoom}>
         {hasLocalParticipant && (
           <p>Warning, you are signed into this call on another device.</p>
@@ -470,24 +465,18 @@ function InRoomView({
 
   return (
     <>
-      <Header>
-        <LeftNav />
-        <CenterNav>
-          <h3>{roomName}</h3>
-        </CenterNav>
-        <RightNav>
-          <SettingsButton
-            title={showInspector ? "Hide Inspector" : "Show Inspector"}
-            on={showInspector}
-            onClick={() => setShowInspector((prev) => !prev)}
-          />
-          <LayoutToggleButton
-            title={layout === "spotlight" ? "Spotlight" : "Gallery"}
-            layout={layout}
-            onClick={toggleLayout}
-          />
-        </RightNav>
-      </Header>
+      <RoomHeader roomName={roomName}>
+        <SettingsButton
+          title={showInspector ? "Hide Inspector" : "Show Inspector"}
+          on={showInspector}
+          onClick={() => setShowInspector((prev) => !prev)}
+        />
+        <LayoutToggleButton
+          title={layout === "spotlight" ? "Spotlight" : "Gallery"}
+          layout={layout}
+          onClick={toggleLayout}
+        />
+      </RoomHeader>
       {items.length === 0 ? (
         <div className={styles.centerMessage}>
           <p>Waiting for other participants...</p>

src/icons/ArrowLeft.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.6663 8H1.33301M1.33301 8L7.83301 14.5M1.33301 8L7.83301 1.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>