Update header styling

src/Header.jsx

@@ -1,67 +1,11 @@
 import classNames from "classnames";
 import React from "react";
-import { Link, useHistory } from "react-router-dom";
+import { Link } from "react-router-dom";
 import styles from "./Header.module.css";
 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>
-  );
-}
+import { HeaderDropdownItem, UserMenu } from "./RoomButton";
 
 export function Header({ children, className, ...rest }) {
   return (
@@ -92,3 +36,45 @@ export function RightNav({ children, className, ...rest }) {
     </div>
   );
 }
+
+export function HeaderLogo() {
+  return (
+    <Link className={styles.logo} to="/">
+      <LogoIcon width={32} height={32} />
+    </Link>
+  );
+}
+
+export function RoomHeaderInfo({ roomName }) {
+  return (
+    <>
+      <div className={styles.roomAvatar}>
+        <VideoIcon width={16} height={16} />
+      </div>
+      <h3>{roomName}</h3>
+    </>
+  );
+}
+
+export function RoomSetupHeaderInfo({ onBack, roomName }) {
+  return (
+    <button className={styles.backButton} onClick={onBack}>
+      <ArrowLeftIcon width={16} height={16} />
+      <RoomHeaderInfo roomName={roomName} />
+    </button>
+  );
+}
+
+export function UserDropdownMenu({ userName, signedIn, onLogout }) {
+  if (!signedIn) {
+    return null;
+  }
+
+  return (
+    <UserMenu userName={userName}>
+      <HeaderDropdownItem onClick={onLogout} className={styles.signOutButton}>
+        Sign Out
+      </HeaderDropdownItem>
+    </UserMenu>
+  );
+}