Start using the new modal component

This attempts to converge all our modals on the new modal component while changing their designs as little as possible. This should reduce the bundle size a bit and make the app generally feel like it's converging on the new designs, even though individual modals still remain to be revamped.

src/settings/SettingsModal.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,18 +15,13 @@ limitations under the License.
 */
 
 .settingsModal {
-  width: 774px;
-  height: 480px;
+  block-size: 550px;
 }
 
 .settingsModal p {
   color: var(--cpd-color-text-secondary);
 }
 
-.tabContainer {
-  padding: 27px 20px;
-}
-
 .fieldRowText {
   margin-bottom: 0;
 }

src/settings/SettingsModal.tsx

@@ -51,11 +51,11 @@ import {
 } from "../livekit/MediaDevicesContext";
 
 interface Props {
-  isOpen: boolean;
+  open: boolean;
+  onDismiss: () => void;
   client: MatrixClient;
   roomId?: string;
   defaultTab?: string;
-  onClose: () => void;
 }
 
 export const SettingsModal = (props: Props) => {
@@ -119,7 +119,7 @@ export const SettingsModal = (props: Props) => {
   );
 
   const devices = useMediaDevices();
-  useMediaDeviceNames(devices);
+  useMediaDeviceNames(devices, props.open);
 
   const audioTab = (
     <TabItem
@@ -289,10 +289,9 @@ export const SettingsModal = (props: Props) => {
   return (
     <Modal
       title={t("Settings")}
-      isDismissable
-      mobileFullScreen
       className={styles.settingsModal}
-      {...props}
+      open={props.open}
+      onDismiss={props.onDismiss}
     >
       <TabContainer
         onSelectionChange={onSelectedTabChanged}

src/settings/submit-rageshake.ts

@@ -14,20 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useCallback, useContext, useEffect, useState } from "react";
+import {
+  ComponentProps,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import pako from "pako";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { OverlayTriggerState } from "@react-stately/overlays";
 import { ClientEvent } from "matrix-js-sdk/src/client";
 
 import { getLogsForReport } from "./rageshake";
 import { useClient } from "../ClientContext";
 import { InspectorContext } from "../room/GroupCallInspector";
-import { useModalTriggerState } from "../Modal";
 import { Config } from "../config/Config";
 import { ElementCallOpenTelemetry } from "../otel/otel";
+import { RageshakeRequestModal } from "../room/RageshakeRequestModal";
 
 const gzip = (text: string): Blob => {
   // encode as UTF-8
@@ -343,22 +348,12 @@ export function useRageshakeRequest(): (
 
   return sendRageshakeRequest;
 }
-interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-interface ModalPropsWithId extends ModalProps {
-  rageshakeRequestId: string;
-}
 
-export function useRageshakeRequestModal(roomId: string): {
-  modalState: OverlayTriggerState;
-  modalProps: ModalPropsWithId;
-} {
-  const { modalState, modalProps } = useModalTriggerState() as {
-    modalState: OverlayTriggerState;
-    modalProps: ModalProps;
-  };
+export function useRageshakeRequestModal(
+  roomId: string
+): ComponentProps<typeof RageshakeRequestModal> {
+  const [open, setOpen] = useState(false);
+  const onDismiss = useCallback(() => setOpen(false), [setOpen]);
   const { client } = useClient();
   const [rageshakeRequestId, setRageshakeRequestId] = useState<string>();
 
@@ -374,7 +369,7 @@ export function useRageshakeRequestModal(roomId: string): {
         client.getUserId() !== event.getSender()
       ) {
         setRageshakeRequestId(event.getContent().request_id);
-        modalState.open();
+        setOpen(true);
       }
     };
 
@@ -383,10 +378,12 @@ export function useRageshakeRequestModal(roomId: string): {
     return () => {
       client.removeListener(ClientEvent.Event, onEvent);
     };
-  }, [modalState.open, roomId, client, modalState]);
+  }, [setOpen, roomId, client]);
 
   return {
-    modalState,
-    modalProps: { ...modalProps, rageshakeRequestId: rageshakeRequestId ?? "" },
+    rageshakeRequestId: rageshakeRequestId ?? "",
+    roomId,
+    open,
+    onDismiss,
   };
 }