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/home/JoinExistingCallModal.tsx

@@ -17,36 +17,29 @@ limitations under the License.
 import { PressEvent } from "@react-types/shared";
 import { useTranslation } from "react-i18next";
 
-import { Modal, ModalContent } from "../Modal";
+import { Modal } from "../Modal";
 import { Button } from "../button";
 import { FieldRow } from "../input/Input";
 import styles from "./JoinExistingCallModal.module.css";
 
 interface Props {
+  open: boolean;
+  onDismiss: () => void;
   onJoin: (e: PressEvent) => void;
-  onClose: () => void;
-  // TODO: add used parameters for <Modal>
-  [index: string]: unknown;
 }
-export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
+
+export function JoinExistingCallModal({ onJoin, open, onDismiss }: Props) {
   const { t } = useTranslation();
 
   return (
-    <Modal
-      title={t("Join existing call?")}
-      isDismissable
-      {...rest}
-      onClose={onClose}
-    >
-      <ModalContent>
-        <p>{t("This call already exists, would you like to join?")}</p>
-        <FieldRow rightAlign className={styles.buttons}>
-          <Button onPress={onClose}>{t("No")}</Button>
-          <Button onPress={onJoin} data-testid="home_joinExistingRoom">
-            {t("Yes, join call")}
-          </Button>
-        </FieldRow>
-      </ModalContent>
+    <Modal title={t("Join existing call?")} open={open} onDismiss={onDismiss}>
+      <p>{t("This call already exists, would you like to join?")}</p>
+      <FieldRow rightAlign className={styles.buttons}>
+        <Button onPress={onDismiss}>{t("No")}</Button>
+        <Button onPress={onJoin} data-testid="home_joinExistingRoom">
+          {t("Yes, join call")}
+        </Button>
+      </FieldRow>
     </Modal>
   );
 }

src/home/RegisteredView.tsx

@@ -33,7 +33,6 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
-import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Caption, Title } from "../typography/Typography";
 import { Form } from "../form/Form";
@@ -56,7 +55,12 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
   const [optInAnalytics] = useOptInAnalytics();
   const history = useHistory();
   const { t } = useTranslation();
-  const { modalState, modalProps } = useModalTriggerState();
+  const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =
+    useState(false);
+  const onDismissJoinExistingCallModal = useCallback(
+    () => setJoinExistingCallModalOpen(false),
+    [setJoinExistingCallModalOpen]
+  );
   const [e2eeEnabled] = useEnableE2EE();
 
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
@@ -93,7 +97,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
           setExistingAlias(roomAliasLocalpartFromRoomName(roomName));
           setLoading(false);
           setError(undefined);
-          modalState.open();
+          setJoinExistingCallModalOpen(true);
         } else {
           console.error(error);
           setLoading(false);
@@ -101,7 +105,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
         }
       });
     },
-    [client, history, modalState, callType, e2eeEnabled]
+    [client, history, setJoinExistingCallModalOpen, callType, e2eeEnabled]
   );
 
   const recentRooms = useGroupCallRooms(client);
@@ -175,9 +179,11 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
           )}
         </main>
       </div>
-      {modalState.isOpen && (
-        <JoinExistingCallModal onJoin={onJoinExistingRoom} {...modalProps} />
-      )}
+      <JoinExistingCallModal
+        onJoin={onJoinExistingRoom}
+        open={joinExistingCallModalOpen}
+        onDismiss={onDismissJoinExistingCallModal}
+      />
     </>
   );
 }

src/home/UnauthenticatedView.tsx

@@ -30,7 +30,6 @@ import {
   sanitiseRoomNameInput,
 } from "../matrix-utils";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
-import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useRecaptcha } from "../auth/useRecaptcha";
 import { Body, Caption, Link } from "../typography/Typography";
@@ -55,7 +54,12 @@ export const UnauthenticatedView: FC = () => {
   const { recaptchaKey, register } = useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
 
-  const { modalState, modalProps } = useModalTriggerState();
+  const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =
+    useState(false);
+  const onDismissJoinExistingCallModal = useCallback(
+    () => setJoinExistingCallModalOpen(false),
+    [setJoinExistingCallModalOpen]
+  );
   const [onFinished, setOnFinished] = useState<() => void>();
   const history = useHistory();
   const { t } = useTranslation();
@@ -110,7 +114,7 @@ export const UnauthenticatedView: FC = () => {
             });
 
             setLoading(false);
-            modalState.open();
+            setJoinExistingCallModalOpen(true);
             return;
           } else {
             throw error;
@@ -139,7 +143,7 @@ export const UnauthenticatedView: FC = () => {
       execute,
       history,
       callType,
-      modalState,
+      setJoinExistingCallModalOpen,
       setClient,
       e2eeEnabled,
     ]
@@ -235,8 +239,12 @@ export const UnauthenticatedView: FC = () => {
           </Body>
         </footer>
       </div>
-      {modalState.isOpen && onFinished && (
-        <JoinExistingCallModal onJoin={onFinished} {...modalProps} />
+      {onFinished && (
+        <JoinExistingCallModal
+          onJoin={onFinished}
+          open={joinExistingCallModalOpen}
+          onDismiss={onDismissJoinExistingCallModal}
+        />
       )}
     </>
   );