Invite modal

src/CopyButton.module.css

@@ -4,20 +4,28 @@
   justify-content: center;
   align-items: center;
   background-color: transparent;
-  padding: 0;
   cursor: pointer;
   border: 2px solid #0dbd8b;
   border-radius: 8px;
   color: #0dbd8b;
   width: 100%;
-  transition: border-color 250ms, background-color 250ms;
   height: 40px;
+  transition: border-color 250ms, background-color 250ms;
+  padding: 0 20px;
 }
 
 .copyButton span {
   font-weight: 600;
   font-size: 15px;
   margin-right: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.copyButton svg {
+  flex-shrink: 0;
 }
 
 .copyButton:not(.copied) svg * {

src/InviteModal.jsx

@@ -1,14 +1,25 @@
 import React from "react";
+import { Overlay } from "./Overlay";
 import { Modal, ModalContent } from "./Modal";
 import { CopyButton } from "./CopyButton";
+import { HeaderButton, ButtonTooltip } from "./RoomButton";
+import { ReactComponent as AddUserIcon } from "./icons/AddUser.svg";
 
-export function InviteModal({ roomUrl, ...rest }) {
+export function InviteModalButton({ roomUrl }) {
   return (
-    <Modal title="Invite People" isDismissable {...rest}>
+    <Overlay>
-      <ModalContent>
+      <HeaderButton>
-        <p>Copy and share this meeting link</p>
+        <ButtonTooltip>Add User</ButtonTooltip>
-        <CopyButton value={roomUrl} />
+        <AddUserIcon width={20} height={20} />
-      </ModalContent>
+      </HeaderButton>
-    </Modal>
+      {(modalProps) => (
+        <Modal title="Invite People" isDismissable {...modalProps}>
+          <ModalContent>
+            <p>Copy and share this meeting link</p>
+            <CopyButton value={roomUrl} />
+          </ModalContent>
+        </Modal>
+      )}
+    </Overlay>
   );
 }

src/Modal.jsx

@@ -21,7 +21,7 @@ export function Modal(props) {
   const { dialogProps, titleProps } = useDialog(props, modalRef);
   const closeButtonRef = useRef();
   const { buttonProps: closeButtonProps } = useButton({
-    onPress: () => props.close(),
+    onPress: () => props.onClose(),
   });
 
   return (

src/Modal.module.css

@@ -15,7 +15,7 @@
   background: #21262c;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
-  min-width: 420px;
+  width: 420px;
 }
 
 .modalHeader {

src/Overlay.jsx

@@ -53,7 +53,8 @@ export function Overlay({ children }) {
         {...buttonProps}
         ref={buttonRef}
       />
-      {overlayState.isOpen && overlay({ ...overlayState })}
+      {overlayState.isOpen &&
+        overlay({ isOpen: overlayState.isOpen, onClose: overlayState.close })}
     </>
   );
 }

src/Room.jsx

@@ -24,7 +24,6 @@ import {
   LayoutToggleButton,
   ScreenshareButton,
   DropdownButton,
-  InviteButton,
 } from "./RoomButton";
 import {
   Header,
@@ -48,8 +47,7 @@ import { fetchGroupCall } from "./ConferenceCallManagerHooks";
 import { ErrorModal } from "./ErrorModal";
 import { GroupCallInspector } from "./GroupCallInspector";
 import * as Sentry from "@sentry/react";
-import { Overlay } from "./Overlay";
+import { InviteModalButton } from "./InviteModal";
-import { InviteModal } from "./InviteModal";
 
 const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -507,12 +505,7 @@ function InRoomView({
           <RoomHeaderInfo roomName={roomName} />
         </LeftNav>
         <RightNav>
-          <Overlay>
+          <InviteModalButton roomUrl={window.location.href} />
-            <InviteButton />
-            {(props) => (
-              <InviteModal roomUrl="https://example.com" {...props} />
-            )}
-          </Overlay>
           <LayoutToggleButton
             title={layout === "spotlight" ? "Spotlight" : "Freedom"}
             layout={layout}

src/RoomButton.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./RoomButton.module.css";
 import { ReactComponent as MicIcon } from "./icons/Mic.svg";
@@ -12,19 +12,23 @@ import { ReactComponent as SpotlightIcon } from "./icons/Spotlight.svg";
 import { ReactComponent as ScreenshareIcon } from "./icons/Screenshare.svg";
 import { ReactComponent as ChevronIcon } from "./icons/Chevron.svg";
 import { ReactComponent as UserIcon } from "./icons/User.svg";
-import { ReactComponent as AddUserIcon } from "./icons/AddUser.svg";
 import { ReactComponent as CheckIcon } from "./icons/Check.svg";
 
-export function RoomButton({ on, className, children, ...rest }) {
+export const RoomButton = forwardRef(
-  return (
+  ({ on, className, children, ...rest }, ref) => {
-    <button
+    return (
-      className={classNames(styles.roomButton, className, { [styles.on]: on })}
+      <button
-      {...rest}
+        className={classNames(styles.roomButton, className, {
-    >
+          [styles.on]: on,
-      {children}
+        })}
-    </button>
+        {...rest}
-  );
+        ref={ref}
-}
+      >
+        {children}
+      </button>
+    );
+  }
+);
 
 export function DropdownButton({ onChange, options, value, children }) {
   const buttonRef = useRef();
@@ -124,18 +128,21 @@ export function HangupButton({ className, ...rest }) {
   );
 }
 
-export function HeaderButton({ on, className, children, ...rest }) {
+export const HeaderButton = forwardRef(
-  return (
+  ({ on, className, children, ...rest }, ref) => {
-    <button
+    return (
-      className={classNames(styles.headerButton, className, {
+      <button
-        [styles.on]: on,
+        className={classNames(styles.headerButton, className, {
-      })}
+          [styles.on]: on,
-      {...rest}
+        })}
-    >
+        {...rest}
-      {children}
+        ref={ref}
-    </button>
+      >
-  );
+        {children}
-}
+      </button>
+    );
+  }
+);
 
 export function HeaderDropdownButton({ children, content }) {
   const buttonRef = useRef();
@@ -212,15 +219,6 @@ export function SettingsButton(props) {
   );
 }
 
-export function InviteButton(props) {
-  return (
-    <HeaderButton {...props}>
-      <ButtonTooltip>Add User</ButtonTooltip>
-      <AddUserIcon width={20} height={20} />
-    </HeaderButton>
-  );
-}
-
 export function LayoutToggleButton({ layout, setLayout, ...rest }) {
   return (
     <HeaderDropdownButton