Implement the new invite modal designs

src/room/InviteModal.module.css

@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.copyButton {
+.url {
+  text-align: center;
+  color: var(--cpd-color-text-secondary);
+  margin-block-end: var(--cpd-space-8x);
+}
+
+.button {
   width: 100%;
 }

src/room/InviteModal.tsx

@@ -14,15 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { FC } from "react";
+import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Room } from "matrix-js-sdk";
+import { Button, Text } from "@vector-im/compound-web";
+import { ReactComponent as LinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg";
+import { ReactComponent as CheckIcon } from "@vector-im/compound-design-tokens/icons/check.svg";
+import useClipboard from "react-use-clipboard";
 
 import { Modal } from "../Modal";
-import { CopyButton } from "../button";
 import { getAbsoluteRoomUrl } from "../matrix-utils";
 import styles from "./InviteModal.module.css";
 import { useRoomSharedKey } from "../e2ee/sharedKeyManagement";
+import { Toast } from "../Toast";
 
 interface Props {
   room: Room;
@@ -33,19 +37,48 @@ interface Props {
 export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
   const { t } = useTranslation();
   const roomSharedKey = useRoomSharedKey(room.roomId);
+  const url = useMemo(
+    () =>
+      getAbsoluteRoomUrl(room.roomId, room.name, roomSharedKey ?? undefined),
+    [room, roomSharedKey]
+  );
+  const [, setCopied] = useClipboard(url);
+  const [toastOpen, setToastOpen] = useState(false);
+  const onToastDismiss = useCallback(() => setToastOpen(false), [setToastOpen]);
+
+  const onButtonClick = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      setCopied();
+      onDismiss();
+      setToastOpen(true);
+    },
+    [setCopied, onDismiss]
+  );
 
   return (
-    <Modal title={t("Invite to this call")} open={open} onDismiss={onDismiss}>
-      <p>{t("Copy and share this call link")}</p>
-      <CopyButton
-        className={styles.copyButton}
-        value={getAbsoluteRoomUrl(
-          room.roomId,
-          room.name,
-          roomSharedKey ?? undefined
-        )}
-        data-testid="modal_inviteLink"
-      />
-    </Modal>
+    <>
+      <Modal title={t("Invite to this call")} open={open} onDismiss={onDismiss}>
+        <Text className={styles.url} size="sm" weight="semibold">
+          {url}
+        </Text>
+        <Button
+          className={styles.button}
+          Icon={LinkIcon}
+          onClick={onButtonClick}
+          data-testid="modal_inviteLink"
+        >
+          {t("Copy link")}
+        </Button>
+      </Modal>
+      <Toast
+        open={toastOpen}
+        onDismiss={onToastDismiss}
+        autoDismiss={2000}
+        Icon={CheckIcon}
+      >
+        {t("Link copied to clipboard")}
+      </Toast>
+    </>
   );
 };