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>
+      <HeaderButton>
+        <ButtonTooltip>Add User</ButtonTooltip>
+        <AddUserIcon width={20} height={20} />
+      </HeaderButton>
+      {(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(
+  ({ on, className, children, ...rest }, ref) => {
     return (
       <button
-      className={classNames(styles.roomButton, className, { [styles.on]: on })}
+        className={classNames(styles.roomButton, className, {
+          [styles.on]: on,
+        })}
         {...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(
+  ({ on, className, children, ...rest }, ref) => {
     return (
       <button
         className={classNames(styles.headerButton, className, {
           [styles.on]: on,
         })}
         {...rest}
+        ref={ref}
       >
         {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