[WP] migrate to new Vencord components

src/renderer/components/ScreenSharePicker.tsx

@@ -7,16 +7,16 @@
 import "./screenSharePicker.css";
 
 import { classNameFactory } from "@vencord/types/api/Styles";
-import { CogWheel, FormSwitch, RestartIcon } from "@vencord/types/components";
+import { Button, Card, CogWheel, FormSwitch, Heading, Paragraph, RestartIcon } from "@vencord/types/components";
 import { closeModal, Logger, Modals, ModalSize, openModal, useAwaiter, useForceUpdater } from "@vencord/types/utils";
 import { onceReady } from "@vencord/types/webpack";
-import { Button, Card, FluxDispatcher, Forms, Select, Text, UserStore, useState } from "@vencord/types/webpack/common";
+import { FluxDispatcher, Select, UserStore, useState } from "@vencord/types/webpack/common";
 import { Node } from "@vencord/venmic";
 import type { Dispatch, SetStateAction } from "react";
 import { MediaEngineStore } from "renderer/common";
+import { isLinux, isWindows } from "renderer/constants";
 import { addPatch } from "renderer/patches/shared";
 import { State, useSettings, useVesktopState } from "renderer/settings";
-import { isLinux, isWindows } from "renderer/utils";
 
 const StreamResolutions = ["480", "720", "1080", "1440", "2160"] as const;
 const StreamFps = ["15", "30", "60"] as const;
@@ -165,9 +165,9 @@ function ScreenPicker({ screens, chooseScreen }: { screens: Source[]; chooseScre
                     />
 
                     <img src={url} alt="" />
-                    <Text className={cl("screen-name")} variant="text-sm/normal">
+                    <Paragraph className={cl("screen-name")} size="sm">
                         {name}
-                    </Text>
+                    </Paragraph>
                 </label>
             ))}
         </div>
@@ -188,7 +188,9 @@ function AudioSettingsModal({
     return (
         <Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
             <Modals.ModalHeader className={cl("header")}>
-                <Forms.FormTitle tag="h2">Venmic Settings</Forms.FormTitle>
+                <Heading tag="h2" className={cl("header-title")}>
+                    Venmic Settings
+                </Heading>
                 <Modals.ModalCloseButton onClick={close} className={cl("header-close-button")} />
             </Modals.ModalHeader>
 
@@ -289,7 +291,7 @@ function AudioSettingsModal({
                 />
             </Modals.ModalContent>
             <Modals.ModalFooter className={cl("footer")}>
-                <Button color={Button.Colors.TRANSPARENT} onClick={close}>
+                <Button variant="secondary" onClick={close}>
                     Back
                 </Button>
             </Modals.ModalFooter>
@@ -310,7 +312,9 @@ function OptionRadio<Settings extends object, Key extends keyof Settings>(props:
         <div className={cl("option-radios")}>
             {(options as string[]).map((option, idx) => (
                 <label className={cl("option-radio")} data-checked={settings[settingsKey] === option} key={option}>
-                    <Text variant="text-sm/bold">{labels?.[idx] ?? option}</Text>
+                    <Paragraph size="sm" weight="bold">
+                        {labels?.[idx] ?? option}
+                    </Paragraph>
                     <input
                         className={cl("option-input")}
                         type="radio"
@@ -361,18 +365,18 @@ function StreamSettingsUi({
 
     return (
         <div>
-            <Forms.FormTitle>What you're streaming</Forms.FormTitle>
+            <Heading>What you're streaming</Heading>
             <Card className={cl("card", "preview")}>
                 <img src={thumb} alt="" className={cl(isLinux ? "preview-img-linux" : "preview-img")} />
-                <Text variant="text-sm/normal">{source.name}</Text>
+                <Paragraph size="sm">{source.name}</Paragraph>
             </Card>
 
-            <Forms.FormTitle>Stream Settings</Forms.FormTitle>
+            <Heading>Stream Settings</Heading>
 
             <Card className={cl("card")}>
                 <div className={cl("quality")}>
                     <section className={cl("quality-section")}>
-                        <Forms.FormTitle>Resolution</Forms.FormTitle>
+                        <Heading>Resolution</Heading>
                         <OptionRadio
                             options={StreamResolutions}
                             settings={qualitySettings}
@@ -382,7 +386,7 @@ function StreamSettingsUi({
                     </section>
 
                     <section className={cl("quality-section")}>
-                        <Forms.FormTitle>Frame Rate</Forms.FormTitle>
+                        <Heading>Frame Rate</Heading>
                         <OptionRadio
                             options={StreamFps}
                             settings={qualitySettings}
@@ -393,7 +397,7 @@ function StreamSettingsUi({
                 </div>
                 <div className={cl("quality")}>
                     <section className={cl("quality-section")}>
-                        <Forms.FormTitle>Content Type</Forms.FormTitle>
+                        <Heading>Content Type</Heading>
                         <div>
                             <OptionRadio
                                 options={["motion", "detail"]}
@@ -578,7 +582,7 @@ function AudioSourcePickerLinux({
 
     if (!sources.ok && sources.isGlibCxxOutdated) {
         return (
-            <Forms.FormText>
+            <Paragraph>
                 Failed to retrieve Audio Sources because your C++ library is too old to run
                 <a href="https://github.com/Vencord/venmic" target="_blank">
                     venmic
@@ -588,13 +592,13 @@ function AudioSourcePickerLinux({
                     this guide
                 </a>{" "}
                 for possible solutions.
-            </Forms.FormText>
+            </Paragraph>
         );
     }
 
     if (!hasPipewirePulse && !ignorePulseWarning) {
         return (
-            <Text variant="text-sm/normal">
+            <Paragraph size="sm">
                 Could not find pipewire-pulse. See{" "}
                 <a href="https://gist.github.com/the-spyke/2de98b22ff4f978ebf0650c90e82027e#install" target="_blank">
                     this guide
@@ -603,7 +607,7 @@ function AudioSourcePickerLinux({
                 You can still continue, however, please{" "}
                 <b>beware that you can only share audio of apps that are running under pipewire</b>.{" "}
                 <a onClick={() => setIgnorePulseWarning(true)}>I know what I'm doing!</a>
-            </Text>
+            </Paragraph>
         );
     }
 
@@ -623,7 +627,7 @@ function AudioSourcePickerLinux({
         <>
             <div className={cl("audio-sources")}>
                 <section>
-                    <Forms.FormTitle>{loading ? "Loading Sources..." : "Audio Sources"}</Forms.FormTitle>
+                    <Heading>{loading ? "Loading Sources..." : "Audio Sources"}</Heading>
                     <Select
                         options={allSources.map(({ name, value }) => ({
                             label: name,
@@ -639,7 +643,7 @@ function AudioSourcePickerLinux({
                 </section>
                 {includeSources === "Entire System" && (
                     <section>
-                        <Forms.FormTitle>Exclude Sources</Forms.FormTitle>
+                        <Heading>Exclude Sources</Heading>
                         <Select
                             options={allSources
                                 .filter(x => x.name !== "Entire System")
@@ -658,15 +662,11 @@ function AudioSourcePickerLinux({
                 )}
             </div>
             <div className={cl("settings-buttons")}>
-                <Button
-                    color={Button.Colors.TRANSPARENT}
-                    onClick={refreshAudioSources}
-                    className={cl("settings-button")}
-                >
+                <Button variant="secondary" onClick={refreshAudioSources} className={cl("settings-button")}>
                     <RestartIcon className={cl("settings-button-icon")} />
                     Refresh Audio Sources
                 </Button>
-                <Button color={Button.Colors.TRANSPARENT} onClick={openSettings} className={cl("settings-button")}>
+                <Button variant="secondary" onClick={openSettings} className={cl("settings-button")}>
                     <CogWheel className={cl("settings-button-icon")} />
                     Open Audio Settings
                 </Button>
@@ -702,9 +702,12 @@ function ModalComponent({
     return (
         <Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
             <Modals.ModalHeader className={cl("header")}>
-                <Forms.FormTitle tag="h2">ScreenShare</Forms.FormTitle>
-                <Modals.ModalCloseButton onClick={close} />
+                <Heading tag="h2" className={cl("header-title")}>
+                    ScreenShare
+                </Heading>
+                <Modals.ModalCloseButton onClick={close} className={cl("header-close-button")} />
             </Modals.ModalHeader>
+
             <Modals.ModalContent className={cl("modal")}>
                 {!selected ? (
                     <ScreenPicker screens={screens} chooseScreen={setSelected} />
@@ -781,11 +784,11 @@ function ModalComponent({
                 </Button>
 
                 {selected && !skipPicker ? (
-                    <Button color={Button.Colors.TRANSPARENT} onClick={() => setSelected(void 0)}>
+                    <Button variant="secondary" onClick={() => setSelected(void 0)}>
                         Back
                     </Button>
                 ) : (
-                    <Button color={Button.Colors.TRANSPARENT} onClick={close}>
+                    <Button variant="secondary" onClick={close}>
                         Cancel
                     </Button>
                 )}

src/renderer/components/screenSharePicker.css

@@ -18,9 +18,10 @@
 
 .vcd-screen-picker-card {
     flex-grow: 1;
+    padding: 0.5em;
+    box-sizing: border-box;
 }
 
-
 /* Screen Grid */
 .vcd-screen-picker-screen-grid {
     display: grid;
@@ -54,11 +55,6 @@
     margin-inline: 0.5em;
 }
 
-.vcd-screen-picker-card {
-    padding: 0.5em;
-    box-sizing: border-box;
-}
-
 .vcd-screen-picker-preview-img-linux {
     width: 60%;
     margin-bottom: 0.5em;

src/renderer/components/settings/DeveloperOptions.tsx

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { Heading, Paragraph } from "@vencord/types/components";
 import {
     Margins,
     ModalCloseButton,
@@ -14,7 +15,7 @@ import {
     openModal,
     useForceUpdater
 } from "@vencord/types/utils";
-import { Button, Forms, Text, Toasts } from "@vencord/types/webpack/common";
+import { Button, Text, Toasts } from "@vencord/types/webpack/common";
 import { Settings } from "shared/settings";
 
 import { cl, SettingsComponent } from "./Settings";
@@ -35,12 +36,12 @@ function openDeveloperOptionsModal(settings: Settings) {
 
             <ModalContent>
                 <div style={{ padding: "1em 0" }}>
-                    <Forms.FormTitle tag="h5">Vencord Location</Forms.FormTitle>
+                    <Heading tag="h5">Vencord Location</Heading>
                     <VencordLocationPicker settings={settings} />
 
-                    <Forms.FormTitle tag="h5" className={Margins.top16}>
+                    <Heading tag="h5" className={Margins.top16}>
                         Debugging
-                    </Forms.FormTitle>
+                    </Heading>
                     <div className={cl("button-grid")}>
                         <Button onClick={() => VesktopNative.debug.launchGpu()}>Open chrome://gpu</Button>
                         <Button onClick={() => VesktopNative.debug.launchWebrtcInternals()}>
@@ -59,7 +60,7 @@ const VencordLocationPicker: SettingsComponent = ({ settings }) => {
 
     return (
         <>
-            <Forms.FormText>
+            <Paragraph>
                 Vencord files are loaded from{" "}
                 {vencordDir ? (
                     <a
@@ -74,7 +75,7 @@ const VencordLocationPicker: SettingsComponent = ({ settings }) => {
                 ) : (
                     "the default location"
                 )}
-            </Forms.FormText>
+            </Paragraph>
             <div className={cl("button-grid")}>
                 <Button
                     size={Button.Sizes.SMALL}

src/renderer/components/settings/Settings.tsx

@@ -7,11 +7,11 @@
 import "./settings.css";
 
 import { classNameFactory } from "@vencord/types/api/Styles";
-import { ErrorBoundary } from "@vencord/types/components";
-import { Forms, Text } from "@vencord/types/webpack/common";
+import { Divider, ErrorBoundary } from "@vencord/types/components";
+import { Text } from "@vencord/types/webpack/common";
 import { ComponentType } from "react";
+import { isMac, isWindows } from "renderer/constants";
 import { Settings, useSettings } from "renderer/settings";
-import { isMac, isWindows } from "renderer/utils";
 
 import { AutoStartToggle } from "./AutoStartToggle";
 import { DeveloperOptionsButton } from "./DeveloperOptions";
@@ -173,7 +173,7 @@ function SettingsSections() {
                 })}
             </div>
 
-            {i < arr.length - 1 && <Forms.FormDivider className={cl("category-divider")} />}
+            {i < arr.length - 1 && <Divider className={cl("category-divider")} />}
         </div>
     ));
 

src/renderer/components/settings/Updater.tsx

@@ -4,8 +4,9 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { Paragraph } from "@vencord/types/components";
 import { useAwaiter } from "@vencord/types/utils";
-import { Button, Text } from "@vencord/types/webpack/common";
+import { Button } from "@vencord/types/webpack/common";
 
 import { cl } from "./Settings";
 
@@ -16,8 +17,12 @@ export function Updater() {
 
     return (
         <div className={cl("updater-card")}>
-            <Text variant="text-md/semibold">Your Vesktop is outdated!</Text>
-            <Text variant="text-sm/normal">Staying up to date is important for security and stability.</Text>
+            <Paragraph size="md" weight="semibold">
+                Your Vesktop is outdated!
+            </Paragraph>
+            <Paragraph size="sm" weight="normal">
+                Staying up to date is important for security and stability.
+            </Paragraph>
 
             <Button
                 onClick={() => VesktopNative.app.openUpdater()}

src/renderer/components/settings/UserAssets.tsx

@@ -6,7 +6,7 @@
 
 import "./UserAssets.css";
 
-import { FormSwitch } from "@vencord/types/components";
+import { FormSwitch, Heading } from "@vencord/types/components";
 import {
     Margins,
     ModalCloseButton,
@@ -73,9 +73,7 @@ function Asset({ asset }: { asset: UserAssetType }) {
 
     return (
         <section>
-            <Text tag="h3" variant="text-md/semibold">
-                {wordsToTitle(wordsFromCamel(asset))}
-            </Text>
+            <Heading tag="h3">{wordsToTitle(wordsFromCamel(asset))}</Heading>
             <div className="vcd-user-assets-asset">
                 <img
                     className="vcd-user-assets-image"

src/renderer/components/settings/WindowsTransparencyControls.tsx

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { ErrorBoundary } from "@vencord/types/components";
+import { ErrorBoundary, Heading, Paragraph } from "@vencord/types/components";
 import { Margins } from "@vencord/types/utils";
-import { Forms, Select } from "@vencord/types/webpack/common";
+import { Select } from "@vencord/types/webpack/common";
 
 import { SettingsComponent } from "./Settings";
 
@@ -16,10 +16,10 @@ export const WindowsTransparencyControls: SettingsComponent = ({ settings }) =>
     return (
         <ErrorBoundary noop>
             <div>
-                <Forms.FormTitle className={Margins.bottom8}>Transparency Options</Forms.FormTitle>
-                <Forms.FormText className={Margins.bottom8}>
+                <Heading>Transparency Options</Heading>
+                <Paragraph className={Margins.bottom8}>
                     Requires a full restart. You will need a theme that supports transparency for this to work.
-                </Forms.FormText>
+                </Paragraph>
 
                 <Select
                     placeholder="None"

src/renderer/fixes.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { localStorage } from "./utils";
+import { localStorage } from "./constants";
 
 // Make clicking Notifications focus the window
 const originalSetOnClick = Object.getOwnPropertyDescriptor(Notification.prototype, "onclick")!.set!;

src/renderer/patches/platformClass.tsx

@@ -4,8 +4,8 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { isMac } from "renderer/constants";
 import { Settings } from "renderer/settings";
-import { isMac } from "renderer/utils";
 
 import { addPatch } from "./shared";
 

src/renderer/patches/screenShareFixes.ts

@@ -6,8 +6,8 @@
 
 import { Logger } from "@vencord/types/utils";
 import { currentSettings } from "renderer/components/ScreenSharePicker";
+import { isLinux } from "renderer/constants";
 import { State } from "renderer/settings";
-import { isLinux } from "renderer/utils";
 
 const logger = new Logger("VesktopStreamFixes");
 

src/renderer/settings.ts

@@ -7,8 +7,8 @@
 import { useEffect, useReducer } from "@vencord/types/webpack/common";
 import { SettingsStore } from "shared/utils/SettingsStore";
 
+import { localStorage } from "./constants";
 import { VesktopLogger } from "./logger";
-import { localStorage } from "./utils";
 
 export const Settings = new SettingsStore(VesktopNative.settings.get());
 Settings.addGlobalChangeListener((o, p) => VesktopNative.settings.set(o, p));