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/video-grid/VideoTile.tsx

@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ComponentProps, forwardRef, useCallback, useEffect } from "react";
+import {
+  ComponentProps,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -36,7 +42,6 @@ import { Avatar } from "../Avatar";
 import styles from "./VideoTile.module.css";
 import { useReactiveState } from "../useReactiveState";
 import { AudioButton, FullscreenButton } from "../button/Button";
-import { useModalTriggerState } from "../Modal";
 import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
 
 export interface ItemData {
@@ -117,11 +122,16 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
       onToggleFullscreen(data.id);
     }, [data, onToggleFullscreen]);
 
-    const {
-      modalState: videoTileSettingsModalState,
-      modalProps: videoTileSettingsModalProps,
-    } = useModalTriggerState();
-    const onOptionsPress = videoTileSettingsModalState.open;
+    const [videoTileSettingsModalOpen, setVideoTileSettingsModalOpen] =
+      useState(false);
+    const openVideoTileSettingsModal = useCallback(
+      () => setVideoTileSettingsModalOpen(true),
+      [setVideoTileSettingsModalOpen]
+    );
+    const closeVideoTileSettingsModal = useCallback(
+      () => setVideoTileSettingsModalOpen(false),
+      [setVideoTileSettingsModalOpen]
+    );
 
     const toolbarButtons: JSX.Element[] = [];
     if (!sfuParticipant.isLocal) {
@@ -130,7 +140,7 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
           key="localVolume"
           className={styles.button}
           volume={(sfuParticipant as RemoteParticipant).getVolume() ?? 0}
-          onPress={onOptionsPress}
+          onPress={openVideoTileSettingsModal}
         />
       );
 
@@ -208,10 +218,11 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
               : Track.Source.ScreenShare
           }
         />
-        {videoTileSettingsModalState.isOpen && !maximised && (
+        {!maximised && (
           <VideoTileSettingsModal
-            {...videoTileSettingsModalProps}
             data={data}
+            open={videoTileSettingsModalOpen}
+            onDismiss={closeVideoTileSettingsModal}
           />
         )}
       </animated.div>

src/video-grid/VideoTileSettingsModal.tsx

@@ -66,23 +66,21 @@ const LocalVolume: React.FC<LocalVolumeProps> = ({
   );
 };
 
-// TODO: Extend ModalProps
 interface Props {
   data: ItemData;
-  onClose: () => void;
+  open: boolean;
+  onDismiss: () => void;
 }
 
-export const VideoTileSettingsModal = ({ data, onClose, ...rest }: Props) => {
+export const VideoTileSettingsModal = ({ data, open, onDismiss }: Props) => {
   const { t } = useTranslation();
 
   return (
     <Modal
       className={styles.videoTileSettingsModal}
       title={t("Local volume")}
-      isDismissable
-      mobileFullScreen
-      onClose={onClose}
-      {...rest}
+      open={open}
+      onDismiss={onDismiss}
     >
       <div className={styles.content}>
         <LocalVolume