Display QR code when sharing invite link

Fixes: #2495
Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>

src/room/InviteModal.module.css

@@ -24,3 +24,12 @@ limitations under the License.
 .button {
   width: 100%;
 }
+
+.qrCode {
+  display: flex;
+  justify-content: center;
+}
+
+.qrCode img {
+  margin-block-end: var(--cpd-space-8x);
+}

src/room/InviteModal.tsx

@@ -29,6 +29,7 @@ import { getAbsoluteRoomUrl } from "../utils/matrix";
 import styles from "./InviteModal.module.css";
 import { Toast } from "../Toast";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { QrCode } from "../QrCode";
 
 interface Props {
   room: Room;
@@ -61,6 +62,7 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
   return (
     <>
       <Modal title={t("invite_modal.title")} open={open} onDismiss={onDismiss}>
+        <QrCode className={styles.qrCode} data={url} />
         <Text className={styles.url} size="sm" weight="semibold">
           {url}
         </Text>