migrate to new modal api

src/renderer/components/ScreenSharePicker.tsx

@@ -8,7 +8,6 @@ import "./screenSharePicker.css";
 
 import { classNameFactory } from "@vencord/types/api/Styles";
 import {
-    BaseText,
     Button,
     Card,
     CogWheel,
@@ -20,18 +19,18 @@ import {
     RestartIcon,
     Span
 } from "@vencord/types/components";
+import { Logger, useAwaiter, useForceUpdater } from "@vencord/types/utils";
+import { onceReady } from "@vencord/types/webpack";
 import {
     closeModal,
-    Logger,
-    ModalCloseButton,
-    Modals,
-    ModalSize,
+    FluxDispatcher,
+    MediaEngineStore,
+    Modal,
     openModal,
-    useAwaiter,
-    useForceUpdater
-} from "@vencord/types/utils";
-import { onceReady } from "@vencord/types/webpack";
-import { FluxDispatcher, MediaEngineStore, Select, UserStore, useState } from "@vencord/types/webpack/common";
+    Select,
+    UserStore,
+    useState
+} from "@vencord/types/webpack/common";
 import { Node } from "@vencord/venmic";
 import type { Dispatch, SetStateAction } from "react";
 import { addPatch } from "renderer/patches/shared";
@@ -220,15 +219,13 @@ function AudioSettingsModal({
     const Settings = useSettings();
 
     return (
-        <Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
-            <Modals.ModalHeader className={cl("header")}>
-                <BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}>
-                    Audio Settings
-                </BaseText>
-                <ModalCloseButton onClick={close} />
-            </Modals.ModalHeader>
-
-            <Modals.ModalContent className={cl("modal", "venmic-settings")}>
+        <Modal
+            {...modalProps}
+            size="lg"
+            title="Audio Settings"
+            actions={[{ text: "Back", variant: "secondary", onClick: close }]}
+        >
+            <div className={cl("venmic-settings")}>
                 <FormSwitch
                     title="Initial Mute"
                     description="Fix an initial audio spike caused by chromium."
@@ -319,13 +316,8 @@ function AudioSettingsModal({
                     value={Settings.audio?.deviceSelect ?? false}
                     disabled={Settings.audio?.ignoreDevices}
                 />
-            </Modals.ModalContent>
-            <Modals.ModalFooter className={cl("footer")}>
-                <Button variant="secondary" onClick={close}>
-                    Back
-                </Button>
-            </Modals.ModalFooter>
-        </Modals.ModalRoot>
+            </div>
+        </Modal>
     );
 }
 
@@ -723,30 +715,7 @@ function ModalComponent({
         frameRate: "30"
     });
 
-    return (
-        <Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
-            <Modals.ModalHeader className={cl("header")}>
-                <BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}>
-                    Screen Share Picker
-                </BaseText>
-                <ModalCloseButton onClick={close} />
-            </Modals.ModalHeader>
-            <Modals.ModalContent className={cl("modal")}>
-                {!selected ? (
-                    <ScreenPicker screens={screens} chooseScreen={setSelected} />
-                ) : (
-                    <StreamSettingsUi
-                        source={screens.find(s => s.id === selected)!}
-                        settings={settings}
-                        setSettings={setSettings}
-                        skipPicker={skipPicker}
-                    />
-                )}
-            </Modals.ModalContent>
-            <Modals.ModalFooter className={cl("footer")}>
-                <Button
-                    disabled={!selected}
-                    onClick={() => {
+    function handleGoLive() {
         currentSettings = settings;
         try {
             const frameRate = Number(qualitySettings.frameRate);
@@ -790,10 +759,7 @@ function ModalComponent({
                 try {
                     await track.applyConstraints(constraints);
 
-                                    logger.info(
-                                        "Applied constraints successfully. New constraints:",
-                                        track.getConstraints()
-                                    );
+                    logger.info("Applied constraints successfully. New constraints:", track.getConstraints());
                 } catch (e) {
                     logger.error("Failed to apply constraints.", e);
                 }
@@ -803,21 +769,37 @@ function ModalComponent({
         }
 
         close();
-                    }}
-                >
-                    Go Live
-                </Button>
+    }
 
-                {selected && !skipPicker ? (
-                    <Button variant="secondary" onClick={() => setSelected(void 0)}>
-                        Back
-                    </Button>
+    const showGoBack = selected && !skipPicker;
+    return (
+        <Modal
+            {...modalProps}
+            size="lg"
+            title="Screen Share Picker"
+            actions={[
+                {
+                    text: showGoBack ? "Back" : "Cancel",
+                    variant: "secondary",
+                    onClick: () => (showGoBack ? setSelected(void 0) : close())
+                },
+                {
+                    text: "Go Live",
+                    disabled: !selected,
+                    onClick: handleGoLive
+                }
+            ]}
+        >
+            {!selected ? (
+                <ScreenPicker screens={screens} chooseScreen={setSelected} />
             ) : (
-                    <Button variant="secondary" onClick={close}>
-                        Cancel
-                    </Button>
+                <StreamSettingsUi
+                    source={screens.find(s => s.id === selected)!}
+                    settings={settings}
+                    setSettings={setSettings}
+                    skipPicker={skipPicker}
+                />
             )}
-            </Modals.ModalFooter>
-        </Modals.ModalRoot>
+        </Modal>
     );
 }

src/renderer/components/screenSharePicker.css

@@ -1,7 +1,3 @@
-.vcd-screen-picker-modal {
-    padding: 1em;
-}
-
 .vcd-screen-picker-header-close-button {
     margin-left: auto;
 }

src/renderer/components/settings/DeveloperOptions.tsx

@@ -4,18 +4,9 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { BaseText, Button, Heading, Paragraph, TextButton } from "@vencord/types/components";
-import {
-    Margins,
-    ModalCloseButton,
-    ModalContent,
-    ModalHeader,
-    ModalRoot,
-    ModalSize,
-    openModal,
-    useForceUpdater
-} from "@vencord/types/utils";
-import { Toasts } from "@vencord/types/webpack/common";
+import { Button, Heading, Paragraph, TextButton } from "@vencord/types/components";
+import { Margins, useForceUpdater } from "@vencord/types/utils";
+import { Modal, openModal, Toasts } from "@vencord/types/webpack/common";
 import { Settings } from "shared/settings";
 
 import { cl, SettingsComponent } from "./Settings";
@@ -26,20 +17,11 @@ export const DeveloperOptionsButton: SettingsComponent = ({ settings }) => {
 
 function openDeveloperOptionsModal(settings: Settings) {
     openModal(props => (
-        <ModalRoot {...props} size={ModalSize.MEDIUM}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}>
-                    Vesktop Developer Options
-                </BaseText>
-                <ModalCloseButton onClick={props.onClose} />
-            </ModalHeader>
-
-            <ModalContent>
-                <div style={{ padding: "1em 0" }}>
-                    <Heading tag="h5">Vencord Location</Heading>
+        <Modal {...props} size="lg" title="Vesktop Developer Options">
+            <Heading tag="h4">Vencord Location</Heading>
             <VencordLocationPicker settings={settings} />
 
-                    <Heading tag="h5" className={Margins.top16}>
+            <Heading tag="h4" className={Margins.top16}>
                 Debugging
             </Heading>
             <div className={cl("button-grid")}>
@@ -48,9 +30,7 @@ function openDeveloperOptionsModal(settings: Settings) {
                     Open chrome://webrtc-internals
                 </Button>
             </div>
-                </div>
-            </ModalContent>
-        </ModalRoot>
+        </Modal>
     ));
 }
 

src/renderer/components/settings/UserAssets.tsx

@@ -7,18 +7,8 @@
 import "./UserAssets.css";
 
 import { BaseText, Button, FormSwitch } from "@vencord/types/components";
-import {
-    Margins,
-    ModalCloseButton,
-    ModalContent,
-    ModalHeader,
-    ModalRoot,
-    ModalSize,
-    openModal,
-    wordsFromCamel,
-    wordsToTitle
-} from "@vencord/types/utils";
-import { showToast, useState } from "@vencord/types/webpack/common";
+import { Margins, wordsFromCamel, wordsToTitle } from "@vencord/types/utils";
+import { Modal, openModal, showToast, useState } from "@vencord/types/webpack/common";
 import { UserAssetType } from "main/userAssets";
 import { useSettings } from "renderer/settings";
 
@@ -32,22 +22,13 @@ export const UserAssetsButton: SettingsComponent = () => {
 
 function openAssetsModal() {
     openModal(props => (
-        <ModalRoot {...props} size={ModalSize.MEDIUM}>
-            <ModalHeader>
-                <BaseText size="lg" weight="semibold" tag="h3" style={{ flexGrow: 1 }}>
-                    User Assets
-                </BaseText>
-                <ModalCloseButton onClick={props.onClose} />
-            </ModalHeader>
-
-            <ModalContent>
+        <Modal {...props} size="lg" title="User Assets">
             <div className="vcd-user-assets">
                 {CUSTOMIZABLE_ASSETS.map(asset => (
                     <Asset key={asset} asset={asset} />
                 ))}
             </div>
-            </ModalContent>
-        </ModalRoot>
+        </Modal>
     ));
 }