SheWhoReignsSupreme/Equicord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate All FormTitle & Fix Building

Browse source
This commit is contained in:
thororen1234 2025-10-10 21:11:31 -04:00
parent 651a22ad16
commit fe2742bfaa
No known key found for this signature in database
111 changed files with 592 additions and 498 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/ThemeSettings/ThemesTab.tsx
View file

@ -20,8 +20,11 @@ import "./themesStyles.css";
import { Settings, useSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import { BaseText } from "@components/BaseText";
import { Divider } from "@components/Divider";
import { ErrorCard } from "@components/ErrorCard";
import { Flex } from "@components/Flex";
import { Heading } from "@components/Heading";
import { CogWheel, DeleteIcon, FolderIcon, PaintbrushIcon, PencilIcon, PluginIcon, PlusIcon, RestartIcon } from "@components/Icons";
import { Link } from "@components/Link";
import { AddonCard, openPluginModal, QuickAction, QuickActionCard, SettingsTab, wrapTab } from "@components/settings";
@ -321,7 +324,7 @@ function ThemesTab() {
return (
<>
<Card className="vc-settings-card">
<Forms.FormTitle tag="h5">Find Themes:</Forms.FormTitle>
<Heading>Find Themes:</Heading>
<div style={{ marginBottom: ".5em", display: "flex", flexDirection: "column" }}>
<Link style={{ marginRight: ".5em" }} href="https://betterdiscord.app/themes">
BetterDiscord Themes
@ -332,7 +335,7 @@ function ThemesTab() {
</Card>
<section>
<Forms.FormTitle tag="h5">Local Themes</Forms.FormTitle>
<Heading>Local Themes</Heading>
<QuickActionCard>
<>
{IS_WEB ?
@ -465,9 +468,9 @@ function ThemesTab() {
return (
<>;
<section>
<Forms.FormTitle tag="h5">Online Themes</Forms.FormTitle>
<Heading>Online Themes</Heading>
<Card className="vc-settings-theme-add-card">
<Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
<BaseText>Make sure to use direct links to files (raw or github.io)!</BaseText>
<Flex flexDirection="row">
<TextInput placeholder="Theme Link" className="vc-settings-theme-link-input" value={currentThemeLink} onChange={setCurrentThemeLink} />
<Button onClick={() => addThemeLink(currentThemeLink)} disabled={!themeLinkValid}>Add</Button>
@ -580,18 +583,18 @@ export function CspErrorCard() {
return (
<ErrorCard className="vc-settings-card">
<Forms.FormTitle tag="h5">Blocked Resources</Forms.FormTitle>
<Forms.FormText>Some images, styles, or fonts were blocked because they come from disallowed domains.</Forms.FormText>
<Forms.FormText>It is highly recommended to move them to GitHub or Imgur. But you may also allow domains if you fully trust them.</Forms.FormText>
<Forms.FormText>
<Heading>Blocked Resources</Heading>
<BaseText>Some images, styles, or fonts were blocked because they come from disallowed domains.</BaseText>
<BaseText>It is highly recommended to move them to GitHub or Imgur. But you may also allow domains if you fully trust them.</BaseText>
<BaseText>
After allowing a domain, you have to fully close (from tray / task manager) and restart {IS_DISCORD_DESKTOP ? "Discord" : IS_EQUIBOP ? "Equibop" : "Vesktop"} to apply the change.
</Forms.FormText>
</BaseText>
<Forms.FormTitle tag="h5" className={classes(Margins.top16, Margins.bottom8)}>Blocked URLs</Forms.FormTitle>
<Heading className={classes(Margins.top16, Margins.bottom8)}>Blocked URLs</Heading>
<div className="vc-settings-csp-list">
{errors.map((url, i) => (
<div key={url}>
{i !== 0 && <Forms.FormDivider className={Margins.bottom8} />}
{i !== 0 && <Divider className={Margins.bottom8} />}
<div className="vc-settings-csp-row">
<Link href={url}>{url}</Link>
<Button color={Button.Colors.PRIMARY} onClick={() => allowUrl(url)} disabled={isImgurHtmlDomain(url)}>
@ -604,11 +607,11 @@ export function CspErrorCard() {
{hasImgurHtmlDomain && (
<>
<Forms.FormDivider className={classes(Margins.top8, Margins.bottom16)} />
<Forms.FormText>
<Divider className={classes(Margins.top8, Margins.bottom16)} />
<BaseText>
Imgur links should be direct links in the form of <code>https://i.imgur.com/...</code>
</Forms.FormText>
<Forms.FormText>To obtain a direct link, right-click the image and select "Copy image address".</Forms.FormText>
</BaseText>
<BaseText>To obtain a direct link, right-click the image and select "Copy image address".</BaseText>
</>
)}
</ErrorCard>
@ -619,11 +622,11 @@ function UserscriptThemesTab() {
return (
<SettingsTab title="Themes">
<Card className="vc-settings-card">
<Forms.FormTitle tag="h5">Themes are not supported on the Userscript!</Forms.FormTitle>
<Heading>Themes are not supported on the Userscript!</Heading>
<Forms.FormText>
<BaseText>
You can instead install themes with the <Link href={getStylusWebStoreUrl()}>Stylus extension</Link>!
</Forms.FormText>
</BaseText>
</Card>
</SettingsTab>
);

5
src/components/ThemeSettings/components/SettingNumberComponent.tsx
View file

@ -4,7 +4,8 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Forms, TextInput } from "@webpack/common";
import { Heading } from "@components/Heading";
import { TextInput } from "@webpack/common";
interface Props {
label: string;
@ -19,7 +20,7 @@ export function SettingNumberComponent({ label, name, themeSettings }: Props) {
return (
<section>
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
<Heading>{label}</Heading>
<TextInput
type="number"
pattern="-?[0-9]+"

5
src/components/ThemeSettings/components/SettingRangeComponent.tsx
View file

@ -4,7 +4,8 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Forms, Slider, useMemo } from "@webpack/common";
import { Heading } from "@components/Heading";
import { Slider, useMemo } from "@webpack/common";
interface Props {
label: string;
@ -36,7 +37,7 @@ export function SettingRangeComponent({ label, name, default: def, min, max, ste
return (
<section>
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
<Heading>{label}</Heading>
<Slider
initialValue={parseInt(themeSettings[name], 10)}
defaultValue={def}

5
src/components/ThemeSettings/components/SettingSelectComponent.tsx
View file

@ -4,9 +4,10 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Heading } from "@components/Heading";
import { identity } from "@utils/misc";
import { SelectOption } from "@vencord/discord-types";
import { Forms, Select, useMemo } from "@webpack/common";
import { Select, useMemo } from "@webpack/common";
interface Props {
label: string;
@ -36,7 +37,7 @@ export function SettingSelectComponent({ label, name, options, default: def, the
return (
<section>
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
<Heading>{label}</Heading>
<Select
placeholder={label}
key={name}

5
src/components/ThemeSettings/components/SettingTextComponent.tsx
View file

@ -4,7 +4,8 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Forms, TextInput } from "@webpack/common";
import { Heading } from "@components/Heading";
import { TextInput } from "@webpack/common";
interface Props {
label: string;
@ -19,7 +20,7 @@ export function SettingTextComponent({ label, name, themeSettings }: Props) {
return (
<section>
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
<Heading>{label}</Heading>
<TextInput
key={name}
value={themeSettings[name]}

4
src/components/settings/DonateButton.tsx
View file

@ -51,7 +51,7 @@ export function DonateButton({
look={look}
color={color}
onClick={() => VencordNative.native.openExternal("https://github.com/sponsors/thororen1234")}
innerClassName="vc-donate-button"
className="vc-donate-button"
>
<Heart />
Donate
@ -75,7 +75,7 @@ export function InviteButton({
showToast("Invalid or expired invite"),
);
}}
innerClassName="vc-donate-button"
className="vc-donate-button"
>
Invite
</Button>

3
src/components/settings/SpecialCard.tsx
View file

@ -20,6 +20,7 @@ import "./SpecialCard.css";
import { classNameFactory } from "@api/Styles";
import { Divider } from "@components/Divider";
import { Heading } from "@components/Heading";
import { Card, Clickable, Forms, React } from "@webpack/common";
import type { PropsWithChildren } from "react";
@ -46,7 +47,7 @@ export function SpecialCard({ title, subtitle, description, cardImage, backgroun
<Card className={cl("card", "card-special")} style={cardStyle}>
<div className={cl("card-flex")}>
<div className={cl("card-flex-main")}>
<Forms.FormTitle className={cl("title")} tag="h5">{title}</Forms.FormTitle>
<Heading className={cl("title")} tag="h5">{title}</Heading>
<Forms.FormText className={cl("subtitle")}>{subtitle}</Forms.FormText>
<Forms.FormText className={cl("text")}>{description}</Forms.FormText>

7
src/components/settings/tabs/changelog/NewPluginsSection.tsx
View file

@ -6,6 +6,7 @@
import { useSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import { Heading } from "@components/Heading";
import { PluginCard } from "@components/settings/tabs/plugins/PluginCard";
import { ChangeList } from "@utils/ChangeList";
import { Margins } from "@utils/margins";
@ -74,9 +75,9 @@ export function NewPluginsSection({
return (
<div className={cl("new-plugins-section")}>
<Forms.FormTitle tag="h5" className={Margins.bottom8}>
<Heading className={Margins.bottom8}>
New Plugins ({sortedPlugins.length})
</Forms.FormTitle>
</Heading>
<Forms.FormText className={Margins.bottom16}>
The following plugins have been added in recent updates:
@ -162,7 +163,7 @@ export function NewPluginsSection({
{tooltipProps => (
<Button
{...tooltipProps}
color={Button.Colors.YELLOW}
color={Button.Colors.LINK}
size={Button.Sizes.SMALL}
onClick={() => location.reload()}
className={Margins.top16}

69
src/components/settings/tabs/changelog/index.tsx
View file

@ -6,14 +6,17 @@
import "./styles.css";
import { BaseText } from "@components/BaseText";
import { Divider } from "@components/Divider";
import { ErrorCard } from "@components/ErrorCard";
import { Heading } from "@components/Heading";
import { DeleteIcon } from "@components/Icons";
import { Link } from "@components/Link";
import { SettingsTab, wrapTab } from "@components/settings/tabs/BaseTab";
import { Margins } from "@utils/margins";
import { useAwaiter } from "@utils/react";
import { getRepo, shortGitHash, UpdateLogger } from "@utils/updater";
import { Alerts, Button, Card, Forms, React, Toasts } from "@webpack/common";
import { Alerts, Button, Card, React, Toasts } from "@webpack/common";
import gitHash from "~git-hash";
@ -128,7 +131,7 @@ function UpdateLogCard({
<Button
size={Button.Sizes.NONE}
color={Button.Colors.TRANSPARENT}
look={Button.Looks.BLANK}
look={Button.Looks.LINK}
className="vc-changelog-delete-button"
style={{
padding: "4px",
@ -181,12 +184,9 @@ function UpdateLogCard({
{log.updatedPlugins.length > 0 && (
<div className="vc-changelog-log-plugins">
<Forms.FormTitle
tag="h6"
className={Margins.bottom8}
>
<Heading className={Margins.bottom8}>
Updated Plugins
</Forms.FormTitle>
</Heading>
<NewPluginsCompact
newPlugins={log.updatedPlugins}
maxDisplay={50}
@ -197,12 +197,9 @@ function UpdateLogCard({
{log.newSettings &&
getNewSettingsSize(log.newSettings) > 0 && (
<div className="vc-changelog-log-plugins">
<Forms.FormTitle
tag="h6"
className={Margins.bottom8}
>
<Heading className={Margins.bottom8}>
New Settings
</Forms.FormTitle>
</Heading>
<div className="vc-changelog-new-plugins-list">
{getNewSettingsEntries(log.newSettings).map(
([pluginName, settings]) =>
@ -494,13 +491,13 @@ function ChangelogContent() {
return (
<>
<Forms.FormText className={Margins.bottom16}>
<BaseText className={Margins.bottom16}>
View the most recent changes to Equicord. This fetches commits
directly from the repository to show you what's new.
</Forms.FormText>
</BaseText>
<Forms.FormTitle tag="h5">Repository</Forms.FormTitle>
<Forms.FormText className={Margins.bottom16}>
<Heading>Repository</Heading>
<BaseText className={Margins.bottom16}>
{repoPending ? (
repo
) : repoErr ? (
@ -515,7 +512,7 @@ function ChangelogContent() {
{shortGitHash()}
</span>
)
</Forms.FormText>
</BaseText>
<div className="vc-changelog-controls">
<Button
@ -587,25 +584,25 @@ function ChangelogContent() {
{error && (
<ErrorCard style={{ padding: "1em", marginBottom: "1em" }}>
<p>{error}</p>
<Forms.FormText
<BaseText
style={{
marginTop: "0.5em",
color: "var(--text-muted)",
}}
>
Make sure you have an internet connection and try again.
</Forms.FormText>
</BaseText>
</ErrorCard>
)}
<Forms.FormDivider className={Margins.bottom16} />
<Divider className={Margins.bottom16} />
{/* Current Changes Section */}
{hasCurrentChanges ? (
<div className="vc-changelog-current">
<Forms.FormTitle tag="h6" className={Margins.bottom8}>
<Heading className={Margins.bottom8}>
Recent Changes
</Forms.FormTitle>
</Heading>
{/* New Plugins Section */}
{newPlugins.length > 0 && (
@ -622,12 +619,9 @@ function ChangelogContent() {
{/* Updated Plugins Section */}
{updatedPlugins.length > 0 && (
<div className={Margins.bottom16}>
<Forms.FormTitle
tag="h6"
className={Margins.bottom8}
>
<Heading className={Margins.bottom8}>
Updated Plugins ({updatedPlugins.length})
</Forms.FormTitle>
</Heading>
<NewPluginsCompact newPlugins={updatedPlugins} />
</div>
)}
@ -635,13 +629,10 @@ function ChangelogContent() {
{/* Code Changes */}
{changelog.length > 0 && (
<div>
<Forms.FormTitle
tag="h6"
className={Margins.bottom8}
>
<Heading className={Margins.bottom8}>
Code Changes ({changelog.length}{" "}
{changelog.length === 1 ? "commit" : "commits"})
</Forms.FormTitle>
</Heading>
<div className="vc-changelog-commits-list">
{changelog.map(entry => (
<ChangelogCard
@ -659,11 +650,11 @@ function ChangelogContent() {
!isLoading &&
!error && (
<Card className="vc-changelog-empty">
<Forms.FormText>
<BaseText>
No commits available ahead of your current version.
Click "Fetch from Repository" to check for new
changes.
</Forms.FormText>
</BaseText>
</Card>
)
)}
@ -671,18 +662,18 @@ function ChangelogContent() {
{/* History Section */}
{showHistory && changelogHistory.length > 0 && (
<div className="vc-changelog-history">
<Forms.FormDivider
<Divider
className={Margins.top16}
style={{ marginBottom: "1em" }}
/>
<Forms.FormTitle tag="h5" className={Margins.bottom8}>
<Heading className={Margins.bottom8}>
Update Logs ({changelogHistory.length}{" "}
{changelogHistory.length === 1 ? "log" : "logs"})
</Forms.FormTitle>
<Forms.FormText className={Margins.bottom16}>
</Heading>
<BaseText className={Margins.bottom16}>
Previous update sessions with their commit history and
plugin changes.
</Forms.FormText>
</BaseText>
<div className="vc-changelog-history-list">
{changelogHistory.map(log => (

7
src/components/settings/tabs/patchHelper/PatchPreview.tsx
View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Heading } from "@components/Heading";
import { Margins } from "@utils/margins";
import { canonicalizeMatch, canonicalizeReplace } from "@utils/patches";
import { makeCodeblock } from "@utils/text";
@ -53,7 +54,7 @@ function Match({ matchResult }: { matchResult: RegExpMatchArray | null; }) {
return (
<>
<Forms.FormTitle>Match</Forms.FormTitle>
<Heading>Match</Heading>
<div style={{ userSelect: "text" }}>{Parser.parse(fullMatch)}</div>
<div style={{ userSelect: "text" }}>{Parser.parse(groups)}</div>
</>
@ -83,7 +84,7 @@ function Diff({ diff }: { diff: Change[] | null; }) {
return (
<>
<Forms.FormTitle>Diff</Forms.FormTitle>
<Heading>Diff</Heading>
{diffLines}
</>
);
@ -118,7 +119,7 @@ export function PatchPreview({ module, match, replacement, setReplacementError }
return (
<>
<Forms.FormTitle>Module {id}</Forms.FormTitle>
<Heading>Module {id}</Heading>
<Match matchResult={matchResult} />
<Diff diff={diff} />

5
src/components/settings/tabs/patchHelper/ReplacementInput.tsx
View file

@ -5,6 +5,7 @@
*/
import { FormSwitch } from "@components/FormSwitch";
import { Heading } from "@components/Heading";
import { Margins } from "@utils/margins";
import { Forms, Parser, TextInput, useEffect, useState } from "@webpack/common";
@ -52,7 +53,7 @@ export function ReplacementInput({ replacement, setReplacement, replacementError
return (
<>
{/* FormTitle adds a class if className is not set, so we set it to an empty string to prevent that */}
<Forms.FormTitle className="">Replacement</Forms.FormTitle>
<Heading className="">Replacement</Heading>
<TextInput
value={replacement?.toString()}
onChange={onChange}
@ -60,7 +61,7 @@ export function ReplacementInput({ replacement, setReplacement, replacementError
/>
{!isFunc && (
<div>
<Forms.FormTitle className={Margins.top8}>Cheat Sheet</Forms.FormTitle>
<Heading className={Margins.top8}>Cheat Sheet</Heading>
{Object.entries(RegexGuide).map(([placeholder, desc]) => (
<Forms.FormText key={placeholder}>

3
src/components/settings/tabs/plugins/ContributorModal.tsx
View file

@ -9,6 +9,7 @@ import "./ContributorModal.css";
import { useSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
import { HeadingPrimary } from "@components/Heading";
import { Link } from "@components/Link";
import { EquicordDevsById, VencordDevsById } from "@utils/constants";
import { fetchUserProfile } from "@utils/discord";
@ -70,7 +71,7 @@ function ContributorModal({ user }: { user: User; }) {
src={user.getAvatarURL(void 0, 512, true)}
alt=""
/>
<Forms.FormTitle tag="h2" className={cl("name")}>{user.username}</Forms.FormTitle>
<HeadingPrimary className={cl("name")}>{user.username}</HeadingPrimary>
<div className={classes("vc-settings-modal-links", cl("links"))}>
{website && (

4
src/components/settings/tabs/sync/CloudTab.tsx
View file

@ -30,7 +30,7 @@ import { SettingsTab, wrapTab } from "@components/settings/tabs/BaseTab";
import { authorizeCloud, cloudLogger, deauthorizeCloud, getCloudAuth, getCloudUrl } from "@utils/cloud";
import { Margins } from "@utils/margins";
import { deleteCloudSettings, getCloudSettings, putCloudSettings } from "@utils/settingsSync";
import { Alerts, Button, Forms, Tooltip, useState } from "@webpack/common";
import { Alerts, Button, Tooltip, useState } from "@webpack/common";
function validateUrl(url: string) {
try {
@ -73,7 +73,7 @@ function SettingsSyncSection() {
return (
<section className={Margins.top16}>
<Forms.FormTitle tag="h5">Settings Sync</Forms.FormTitle>
<Heading>Settings Sync</Heading>
<Paragraph size="md" className={Margins.bottom20}>
Synchronize your settings to the cloud. This allows easy synchronization across multiple devices with

7
src/components/settings/tabs/updater/index.tsx
View file

@ -21,6 +21,7 @@ import { Divider } from "@components/Divider";
import { ErrorCard } from "@components/ErrorCard";
import { Flex } from "@components/Flex";
import { FormSwitch } from "@components/FormSwitch";
import { Heading } from "@components/Heading";
import { Link } from "@components/Link";
import { handleSettingsTabError, SettingsTab, wrapTab } from "@components/settings";
import { Margins } from "@utils/margins";
@ -205,7 +206,7 @@ function Updater() {
return (
<SettingsTab title="Equicord Updater">
<Forms.FormTitle tag="h5">Updater Settings</Forms.FormTitle>
<Heading>Updater Settings</Heading>
<FormSwitch
title="Automatically update"
description="Automatically update Equicord without confirmation prompt"
@ -220,7 +221,7 @@ function Updater() {
disabled={!settings.autoUpdate}
/>
<Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
<Heading>Repo</Heading>
<Forms.FormText>
{repoPending
@ -238,7 +239,7 @@ function Updater() {
<Divider className={Margins.top8 + " " + Margins.bottom8} />
<Forms.FormTitle tag="h5">Updates</Forms.FormTitle>
<Heading>Updates</Heading>
{isNewer ? <Newer {...commonProps} /> : <Updatable {...commonProps} />}
</SettingsTab >

5
src/components/settings/tabs/vencord/MacVibrancySettings.tsx
View file

@ -6,16 +6,17 @@
import { useSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Heading } from "@components/Heading";
import { Margins } from "@utils/margins";
import { identity } from "@utils/misc";
import { Forms, Select } from "@webpack/common";
import { Select } from "@webpack/common";
export function VibrancySettings() {
const settings = useSettings(["macosVibrancyStyle"]);
return (
<>
<Forms.FormTitle tag="h5">Window vibrancy style (requires restart)</Forms.FormTitle>
<Heading>Window vibrancy style (requires restart)</Heading>
<ErrorBoundary noop>
<Select
className={Margins.bottom20}

15
src/components/settings/tabs/vencord/NotificationSettings.tsx
View file

@ -9,6 +9,7 @@ import { useSettings } from "@api/Settings";
import { ErrorCard } from "@components/ErrorCard";
import { Flex } from "@components/Flex";
import { FormSwitch } from "@components/FormSwitch";
import { Heading } from "@components/Heading";
import { Margins } from "@utils/margins";
import { identity } from "@utils/misc";
import { ModalCloseButton, ModalContent, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
@ -17,7 +18,7 @@ import { Button, Forms, Select, Slider, Text } from "@webpack/common";
export function NotificationSection() {
return (
<section className={Margins.top16}>
<Forms.FormTitle tag="h5">Notifications</Forms.FormTitle>
<Heading>Notifications</Heading>
<Forms.FormText className={Margins.bottom8}>
Settings for Notifications sent by Vencord.
This does NOT include Discord notifications (messages, etc)
@ -54,10 +55,10 @@ function NotificationSettings() {
return (
<div style={{ padding: "1em 0" }}>
<Forms.FormTitle tag="h5">Notification Style</Forms.FormTitle>
<Heading>Notification Style</Heading>
{settings.useNative !== "never" && Notification?.permission === "denied" && (
<ErrorCard style={{ padding: "1em" }} className={Margins.bottom8}>
<Forms.FormTitle tag="h5">Desktop Notification Permission denied</Forms.FormTitle>
<Heading>Desktop Notification Permission denied</Heading>
<Forms.FormText>You have denied Notification Permissions. Thus, Desktop notifications will not work!</Forms.FormText>
</ErrorCard>
)}
@ -81,7 +82,7 @@ function NotificationSettings() {
serialize={identity}
/>
<Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Position</Forms.FormTitle>
<Heading className={Margins.top16 + " " + Margins.bottom8}>Notification Position</Heading>
<Select
isDisabled={settings.useNative === "always"}
placeholder="Notification Position"
@ -94,14 +95,14 @@ function NotificationSettings() {
serialize={identity}
/>
<Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Missed Notification Count</Forms.FormTitle>
<Heading className={Margins.top16 + " " + Margins.bottom8}>Missed Notification Count</Heading>
<FormSwitch
title="When refocusing discord a notification will popup with how you missed"
value={settings.missed}
onChange={(v: boolean) => settings.missed = v}
/>
<Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Timeout</Forms.FormTitle>
<Heading className={Margins.top16 + " " + Margins.bottom8}>Notification Timeout</Heading>
<Forms.FormText className={Margins.bottom16}>Set to 0s to never automatically time out</Forms.FormText>
<Slider
disabled={settings.useNative === "always"}
@ -115,7 +116,7 @@ function NotificationSettings() {
stickToMarkers={false}
/>
<Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Log Limit</Forms.FormTitle>
<Heading className={Margins.top16 + " " + Margins.bottom8}>Notification Log Limit</Heading>
<Forms.FormText className={Margins.bottom16}>
The amount of notifications to save in the log until old ones are removed.
Set to <code>0</code> to disable Notification log and <code>∞</code> to never automatically remove old Notifications

9
src/components/settings/tabs/vencord/index.tsx
View file

@ -10,6 +10,7 @@ import { openNotificationLogModal } from "@api/Notifications/notificationLog";
import { useSettings } from "@api/Settings";
import { Divider } from "@components/Divider";
import { FormSwitch } from "@components/FormSwitch";
import { Heading } from "@components/Heading";
import { FolderIcon, GithubIcon, LogIcon, PaintbrushIcon, RestartIcon } from "@components/Icons";
import { openContributorModal, openPluginModal, SettingsTab, wrapTab } from "@components/settings";
import { DonateButton, InviteButton } from "@components/settings/DonateButton";
@ -157,7 +158,7 @@ function EquicordSettings() {
)}
<section>
<Forms.FormTitle tag="h5">Quick Actions</Forms.FormTitle>
<Heading>Quick Actions</Heading>
<QuickActionCard>
<QuickAction
@ -199,7 +200,7 @@ function EquicordSettings() {
<Divider />
<section className={Margins.top16}>
<Forms.FormTitle tag="h5">Settings</Forms.FormTitle>
<Heading>Settings</Heading>
<Forms.FormText className={Margins.bottom20} style={{ color: "var(--text-muted)" }}>
Hint: You can change the position of this settings section in the{" "}
<Button
@ -239,9 +240,9 @@ function EquicordSettings() {
{needsVibrancySettings && (
<>
<Forms.FormTitle tag="h5">
<Heading>
Window vibrancy style (requires restart)
</Forms.FormTitle>
</Heading>
<Select
className={Margins.bottom20}
placeholder="Window vibrancy style"

3
src/equicordplugins/absRPC/index.tsx
View file

@ -6,6 +6,7 @@
// alot of the code is from JellyfinRPC
import { definePluginSettings } from "@api/Settings";
import { HeadingSecondary } from "@components/Heading";
import { EquicordDevs } from "@utils/constants";
import { Logger } from "@utils/Logger";
import definePlugin, { OptionType } from "@utils/types";
@ -90,7 +91,7 @@ export default definePlugin({
settingsAboutComponent: () => (
<>
<Forms.FormTitle tag="h3">How to connect to AudioBookShelf</Forms.FormTitle>
<HeadingSecondary>How to connect to AudioBookShelf</HeadingSecondary>
<Forms.FormText>
Enter your AudioBookShelf server URL, username, and password to display your currently playing audiobooks as Discord Rich Presence.
<br /><br />

5
src/equicordplugins/baseDecoder/index.tsx
View file

@ -21,11 +21,12 @@ import { definePluginSettings } from "@api/Settings";
import { CodeBlock } from "@components/CodeBlock";
import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex";
import { Heading } from "@components/Heading";
import { EquicordDevs } from "@utils/constants";
import { copyWithToast } from "@utils/misc";
import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
import definePlugin, { OptionType } from "@utils/types";
import { Button, ChannelStore, Forms, Text } from "@webpack/common";
import { Button, ChannelStore, Text } from "@webpack/common";
const DecodeIcon = () => {
return (
@ -75,7 +76,7 @@ function openDecodedBase64Modal(decodedContent) {
</ModalHeader>
<ModalContent>
<div style={{ padding: "16px 0" }}>
<Forms.FormTitle tag="h5">Decoded Content</Forms.FormTitle>
<Heading>Decoded Content</Heading>
{decodedContent.map((content, index) => (
<CodeBlock key={index} content={content} lang="" />
))}

7
src/equicordplugins/betterBanReasons/index.tsx
View file

@ -8,10 +8,11 @@ import "./styles.css";
import { definePluginSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import { Heading } from "@components/Heading";
import { DeleteIcon, PlusIcon } from "@components/Icons";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { Button, Forms, TextInput } from "@webpack/common";
import { Button, TextInput } from "@webpack/common";
const cl = classNameFactory("vc-bbr-");
@ -20,7 +21,7 @@ function ReasonsComponent() {
return (
<section>
<Forms.FormTitle tag="h5">Reasons</Forms.FormTitle>
<Heading>Reasons</Heading>
{reasons.map((r, i) => (
<div
key={i}
@ -41,7 +42,7 @@ function ReasonsComponent() {
reasons.splice(i, 1);
settings.store.reasons = reasons;
}}
look={Button.Looks.BLANK}
look={Button.Looks.LINK}
size={Button.Sizes.MIN}
>
<DeleteIcon />

3
src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx
View file

@ -5,6 +5,7 @@
*/
import { classNameFactory } from "@api/Styles";
import { Heading } from "@components/Heading";
import { IS_MAC } from "@utils/constants";
import { classes } from "@utils/misc";
import { useForceUpdater } from "@utils/react";
@ -228,7 +229,7 @@ export function ChannelTabsPreview(p) {
return (
<>
<Forms.FormTitle>Startup tabs</Forms.FormTitle>
<Heading>Startup tabs</Heading>
<Flex flexDirection="row" style={{ gap: "2px" }}>
{currentTabs.map(t => <>
<PreviewTab {...t} />

7
src/equicordplugins/channelTabs/components/ContextMenus.tsx
View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Heading } from "@components/Heading";
import { getIntlMessage } from "@utils/discord";
import { Margins } from "@utils/margins";
import { closeModal, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
@ -51,14 +52,14 @@ export function EditModal({ modalProps, modalKey, bookmark, onSave }: {
<Text variant="heading-lg/semibold">Edit Bookmark</Text>
</ModalHeader>
<ModalContent>
<Forms.FormTitle className={Margins.top16}>Bookmark Name</Forms.FormTitle>
<Heading className={Margins.top16}>Bookmark Name</Heading>
<TextInput
value={name === placeholder ? undefined : name}
placeholder={placeholder}
onChange={v => setName(v)}
/>
{isBookmarkFolder(bookmark) && <>
<Forms.FormTitle className={Margins.top16}>Folder Color</Forms.FormTitle>
<Heading className={Margins.top16}>Folder Color</Heading>
<Select
options={
Object.entries(bookmarkFolderColors).map(([name, value]) => ({
@ -101,7 +102,7 @@ function AddToFolderModal({ modalProps, modalKey, bookmarks, onSave }: {
<Text variant="heading-lg/semibold">Add Bookmark to Folder</Text>
</ModalHeader>
<ModalContent>
<Forms.FormTitle className={Margins.top16}>Select a folder</Forms.FormTitle>
<Heading className={Margins.top16}>Select a folder</Heading>
<Select
options={[...Object.entries(bookmarks)
.filter(([, bookmark]) => isBookmarkFolder(bookmark))

3
src/equicordplugins/channelTabs/util/constants.tsx
View file

@ -5,6 +5,7 @@
*/
import { definePluginSettings } from "@api/Settings";
import { Heading } from "@components/Heading";
import { Logger } from "@utils/Logger";
import { OptionType } from "@utils/types";
import { Forms, SearchableSelect, useState } from "@webpack/common";
@ -84,7 +85,7 @@ function AnimationSettings(): JSX.Element {
return (
<section>
<Forms.FormTitle>Animation Controls</Forms.FormTitle>
<Heading>Animation Controls</Heading>
<Forms.FormText>
Enable or disable specific animations for channel tabs. Each option can be toggled independently.
</Forms.FormText>

7
src/equicordplugins/chatButtonsPlus/index.tsx
View file

@ -10,6 +10,7 @@ import { ChatBarButton } from "@api/ChatButtons";
import { DataStore } from "@api/index";
import { definePluginSettings, migratePluginSettings, Settings } from "@api/Settings";
import { FormSwitch } from "@components/FormSwitch";
import { Heading } from "@components/Heading";
import { EquicordDevs } from "@utils/constants";
import { getCurrentChannel, sendMessage } from "@utils/discord";
import { useForceUpdater } from "@utils/react";
@ -180,7 +181,7 @@ function ButtonEntries() {
return (
<div key={entry.id} className="chatButtonsPlus-card">
<div className="chatButtonsPlus-header">
<Forms.FormTitle tag="h5" className="chatButtonsPlus-title">Button {i + 1}</Forms.FormTitle>
<Heading className="chatButtonsPlus-title">Button {i + 1}</Heading>
<div className="chatButtonsPlus-controls">
<FormSwitch
title="Enabled"
@ -190,7 +191,7 @@ function ButtonEntries() {
/>
<Button
onClick={() => removeButtonEntry(entry.id, update)}
look={Button.Looks.OUTLINED}
look={Button.Looks.LINK}
color={Button.Colors.RED}
size={Button.Sizes.SMALL}
>
@ -243,7 +244,7 @@ function ButtonEntries() {
<Button onClick={() => addButtonEntry(update)}>Add Button</Button>
<Button
onClick={() => resetAllButtons(update)}
look={Button.Looks.OUTLINED}
look={Button.Looks.LINK}
color={Button.Colors.RED}
>
Reset All

5
src/equicordplugins/clientSideBlock/index.tsx
View file

@ -5,10 +5,11 @@
*/
import { definePluginSettings } from "@api/Settings";
import { BaseText } from "@components/BaseText";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
import { GuildMember } from "@vencord/discord-types";
import { ChannelStore, GuildMemberStore, GuildRoleStore, RelationshipStore, Text, UserStore } from "@webpack/common";
import { ChannelStore, GuildMemberStore, GuildRoleStore, RelationshipStore, UserStore } from "@webpack/common";
const settings = definePluginSettings(
{
@ -108,7 +109,7 @@ function isRoleAllBlockedMembers(roleId, guildId) {
function hiddenReplyComponent() {
switch (settings.store.blockedReplyDisplay) {
case "displayText":
return <Text tag="p" selectable={false} variant="text-sm/normal" style={{ marginTop: "0px", marginBottom: "0px" }}><i>↓ Replying to blocked message</i></Text>;
return <BaseText size="sm" tag="p" style={{ marginTop: "0px", marginBottom: "0px" }}><i>↓ Replying to blocked message</i></BaseText>;
case "hideReply":
return null;
}

9
src/equicordplugins/contentWarning/index.tsx
View file

@ -7,11 +7,12 @@
import { DataStore } from "@api/index";
import { definePluginSettings } from "@api/Settings";
import { Flex } from "@components/Flex";
import { HeadingTertiary } from "@components/Heading";
import { DeleteIcon } from "@components/Icons";
import { EquicordDevs } from "@utils/constants";
import { useForceUpdater } from "@utils/react";
import definePlugin, { OptionType } from "@utils/types";
import { Button, Forms, TextInput, useState } from "@webpack/common";
import { Button, TextInput, useState } from "@webpack/common";
const WORDS_KEY = "ContentWarning_words";
@ -91,8 +92,8 @@ function FlaggedInput({ index, forceUpdate }) {
<Button
onClick={removeSelf}
look={Button.Looks.BLANK}
size={Button.Sizes.ICON}
look={Button.Looks.LINK}
size={Button.Sizes.SMALL}
style={{
padding: 0,
color: "var(--primary-400)",
@ -118,7 +119,7 @@ function FlaggedWords() {
});
return (<>
<Forms.FormTitle tag="h4">Flagged Words</Forms.FormTitle>
<HeadingTertiary>Flagged Words</HeadingTertiary>
{inputs}
</>);
}

9
src/equicordplugins/customSounds/SoundOverrideComponent.tsx
View file

@ -7,11 +7,12 @@
import { AudioPlayerInterface, playAudio } from "@api/AudioPlayer";
import { classNameFactory } from "@api/Styles";
import { FormSwitch } from "@components/FormSwitch";
import { Heading } from "@components/Heading";
import { Margins } from "@utils/margins";
import { useForceUpdater } from "@utils/react";
import { makeRange } from "@utils/types";
import { findLazy } from "@webpack";
import { Button, Card, Forms, React, Select, showToast, Slider } from "@webpack/common";
import { Button, Card, React, Select, showToast, Slider } from "@webpack/common";
import { ComponentType, Ref, SyntheticEvent } from "react";
import { deleteAudio, getAllAudio, saveAudio, StoredAudioFile } from "./audioStore";
@ -190,7 +191,7 @@ export function SoundOverrideComponent({ type, override, onChange }: {
</Button>
</div>
<Forms.FormTitle>Volume</Forms.FormTitle>
<Heading>Volume</Heading>
<Slider
markers={makeRange(0, 100, 10)}
initialValue={override.volume}
@ -203,7 +204,7 @@ export function SoundOverrideComponent({ type, override, onChange }: {
disabled={!override.enabled}
/>
<Forms.FormTitle>Sound Source</Forms.FormTitle>
<Heading>Sound Source</Heading>
<Select
options={[
{ value: "default", label: "Default" },
@ -231,7 +232,7 @@ export function SoundOverrideComponent({ type, override, onChange }: {
{override.selectedSound === "custom" && (
<>
<Forms.FormTitle>Custom File</Forms.FormTitle>
<Heading>Custom File</Heading>
<Select
options={[
{ value: "", label: "Select a file..." },

5
src/equicordplugins/customSounds/index.tsx
View file

@ -10,9 +10,10 @@ import { addAudioProcessor, AudioProcessor, PreprocessAudioData, removeAudioProc
import { get as getFromDataStore } from "@api/DataStore";
import { definePluginSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import { Heading } from "@components/Heading";
import { Devs } from "@utils/constants";
import definePlugin, { OptionType, StartAt } from "@utils/types";
import { Button, Forms, React, showToast, TextInput } from "@webpack/common";
import { Button, React, showToast, TextInput } from "@webpack/common";
import { getAllAudio, getAudioDataURI } from "./audioStore";
import { SoundOverrideComponent } from "./SoundOverrideComponent";
@ -338,7 +339,7 @@ const settings = definePluginSettings({
</div>
<div className={cl("search")}>
<Forms.FormTitle>Search Sounds</Forms.FormTitle>
<Heading>Search Sounds</Heading>
<TextInput
value={searchQuery}
onChange={e => setSearchQuery(e)}

10
src/equicordplugins/customTimestamps/index.tsx
View file

@ -7,7 +7,9 @@
import "./style.css";
import { definePluginSettings, useSettings } from "@api/Settings";
import { Divider } from "@components/Divider";
import ErrorBoundary from "@components/ErrorBoundary";
import { Heading, HeadingPrimary } from "@components/Heading";
import { Link } from "@components/Link";
import { Devs, EquicordDevs } from "@utils/constants";
import { Margins } from "@utils/margins";
@ -112,7 +114,7 @@ const TimeRow = (props: TimeRowProps) => {
return (
<>
<Forms.FormTitle tag="h5">{props.format.name}</Forms.FormTitle>
<Heading>{props.format.name}</Heading>
<Forms.FormText>{props.format.description}</Forms.FormText>
<TextInput value={state} onChange={handleChange} />
</>
@ -198,8 +200,8 @@ const settings = definePluginSettings({
<section key={key}>
{key === "sameDayFormat" && (
<div className={Margins.bottom20}>
<Forms.FormDivider style={{ marginBottom: "10px" }} />
<Forms.FormTitle tag="h1">Calendar formats</Forms.FormTitle>
<Divider style={{ marginBottom: "10px" }} />
<Heading tag="h1">Calendar formats</Heading>
<Forms.FormText>
How to format the [calendar] value if used in the above timestamps.
</Forms.FormText>
@ -236,7 +238,7 @@ export default definePlugin({
settings,
settingsAboutComponent: () => (
<div className={"vc-cmt-info-card"}>
<Forms.FormTitle tag="h2">How to use:</Forms.FormTitle>
<HeadingPrimary>How to use:</HeadingPrimary>
<Forms.FormText>
<Link href="https://momentjs.com/docs/#/displaying/format/">Moment.js formatting documentation</Link>
<div className={Margins.top8}>

11
src/equicordplugins/customUserColors/SetColorModal.tsx
View file

@ -6,9 +6,10 @@
import { set } from "@api/DataStore";
import { classNameFactory } from "@api/Styles";
import { HeadingPrimary, HeadingSecondary } from "@components/Heading";
import { Margins } from "@utils/margins";
import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
import { Button, ColorPicker, Forms, useState } from "@webpack/common";
import { Button, ColorPicker, useState } from "@webpack/common";
import { colors, DATASTORE_KEY } from "./index";
@ -46,16 +47,16 @@ export function SetColorModal({ id, modalProps }: { id: string, modalProps: Moda
return (
<ModalRoot {...modalProps}>
<ModalHeader className={cl("modal-header")}>
<Forms.FormTitle tag="h2">
<HeadingPrimary>
Custom Color
</Forms.FormTitle>
</HeadingPrimary>
<ModalCloseButton onClick={modalProps.onClose} />
</ModalHeader>
<ModalContent className={cl("modal-content")} onKeyDown={handleKey}>
<section className={Margins.bottom16}>
<Forms.FormTitle tag="h3">
<HeadingSecondary>
Pick a Color
</Forms.FormTitle>
</HeadingSecondary>
<ColorPicker
color={colorPickerColor}
onChange={setUserColor}

5
src/equicordplugins/downloadify.desktop/settings.tsx
View file

@ -8,6 +8,7 @@ import "./style.css";
import { definePluginSettings } from "@api/Settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Heading } from "@components/Heading";
import { OptionType } from "@utils/types";
import { Button, Forms, showToast, Toasts, useState } from "@webpack/common";
import { JSX } from "react";
@ -39,9 +40,9 @@ function DefaultDirectorySetting(): JSX.Element {
return (
<ErrorBoundary>
<section>
<Forms.FormTitle className={d("form-title")}>
<Heading className={d("form-title")}>
Default Directory
</Forms.FormTitle>
</Heading>
<Forms.FormText className={d("form-description")}>
Default download location. If set, the file will always be downloaded in its original format even if alternatives are available. Leave empty to pick a folder and file type each time.
</Forms.FormText>

5
src/equicordplugins/fontLoader/index.tsx
View file

@ -7,6 +7,7 @@
import "./styles.css";
import { definePluginSettings } from "@api/Settings";
import { HeadingSecondary, HeadingTertiary } from "@components/Heading";
import { debounce } from "@shared/debounce";
import { EquicordDevs } from "@utils/constants";
import { Margins } from "@utils/margins";
@ -131,7 +132,7 @@ function GoogleFontSearch({ onSelect }: { onSelect: (font: GoogleFontMetadata) =
return (
<section>
<Forms.FormTitle tag="h3">Search Google Fonts</Forms.FormTitle>
<HeadingSecondary>Search Google Fonts</HeadingSecondary>
<Forms.FormText>Click on any font to apply it.</Forms.FormText>
<TextInput
@ -151,7 +152,7 @@ function GoogleFontSearch({ onSelect }: { onSelect: (font: GoogleFontMetadata) =
onClick={() => onSelect(font)}
>
<div className="eq-googlefonts-preview" style={{ fontFamily: font.family }}>
<Forms.FormTitle tag="h4">{font.displayName}</Forms.FormTitle>
<HeadingTertiary>{font.displayName}</HeadingTertiary>
<Forms.FormText>The quick brown fox jumps over the lazy dog</Forms.FormText>
</div>
{font.authors?.length && (

7
src/equicordplugins/friendCodes/FriendCodesPanel.tsx
View file

@ -6,6 +6,7 @@
import "./styles.css";
import { HeadingTertiary } from "@components/Heading";
import { copyToClipboard } from "@utils/clipboard";
import { findByPropsLazy } from "@webpack";
import { Button, Flex, Forms, Parser, Text, useEffect, useState } from "@webpack/common";
@ -41,9 +42,9 @@ function FriendInviteCard({ invite }: { invite: FriendInvite; }) {
<div className="vc-friend-codes-card">
<Flex justify={Flex.Justify.START}>
<div className="vc-friend-codes-card-title">
<Forms.FormTitle tag="h4" style={{ textTransform: "none" }}>
<HeadingTertiary style={{ textTransform: "none" }}>
{invite.code}
</Forms.FormTitle>
</HeadingTertiary>
<span>
Expires {Parser.parse(`<t:${new Date(invite.expires_at).getTime() / 1000}:R>`)} • {invite.uses}/{invite.max_uses} uses
</span>
@ -97,7 +98,7 @@ export default function FriendCodesPanel() {
<Button
style={{ marginLeft: "8px" }}
color={Button.Colors.RED}
look={Button.Looks.OUTLINED}
look={Button.Looks.LINK}
disabled={!invites.length}
onClick={() => revokeFriendInvites().then(setInvites([]))}
>

14
src/equicordplugins/friendTags/index.tsx
View file

@ -9,10 +9,12 @@ import "styles.css?managed";
import { NavContextMenuPatchCallback } from "@api/ContextMenu";
import { DataStore } from "@api/index";
import { definePluginSettings } from "@api/Settings";
import { BaseText } from "@components/BaseText";
import { Divider } from "@components/Divider";
import { Devs } from "@utils/constants";
import { useForceUpdater } from "@utils/react";
import definePlugin, { OptionType } from "@utils/types";
import { Button, ChannelStore, Forms, Menu, RelationshipStore, Text, TextInput, useEffect, UserStore, useState } from "@webpack/common";
import { Button, ChannelStore, Menu, RelationshipStore, Text, TextInput, useEffect, UserStore, useState } from "@webpack/common";
const tagStoreName = "vc-friendtags-tags";
@ -105,12 +107,12 @@ function TagConfigCard(props) {
return (
<>
<Text variant={"heading-md/normal"}>Name</Text>
<BaseText size="md" tag="h5">Name</BaseText>
<TextInput value={tagName} onChange={setTagName}></TextInput>
<Text variant={"heading-md/normal"}>Users (Seperated by comma)</Text>
<BaseText size="md" tag="h5">Users (Seperated by comma)</BaseText>
<TextInput value={userIds} onChange={setUserIDs}></TextInput>
<div className={"vc-friend-tags-user-header-container"}>
<Text variant="eyebrow">User List (Click A User To Remove)</Text>
<BaseText>User List (Click A User To Remove)</BaseText>
<div className={"vc-friend-tags-user-header-btns"}>
{
userIds.split(", ").map(user => {
@ -140,12 +142,12 @@ function TagConfigurationComponent() {
return (
<>
<Forms.FormDivider />
<Divider />
{
SavedData?.map(e => (
<>
<TagConfigCard tag={e} />
<Forms.FormDivider />
<Divider />
</>
))
}

2
src/equicordplugins/friendshipRanks/index.tsx
View file

@ -114,7 +114,7 @@ function getBadgeComponent(rank,) {
// there may be a better button component to do this with
return (
<div style={{ transform: "scale(0.80)" }}>
<Button onClick={() => openRankModal(rank)} width={"21.69px"} height={"21.69px"} size={Button.Sizes.NONE} look={Button.Looks.BLANK}>
<Button onClick={() => openRankModal(rank)} width={"21.69px"} height={"21.69px"} size={Button.Sizes.NONE} look={Button.Looks.LINK}>
<rank.assetSVG height={"21.69px"} />
</Button>
</div>

30
src/equicordplugins/gifCollections/index.tsx
View file

@ -9,7 +9,9 @@ import "./style.css";
import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
import { DataStore } from "@api/index";
import { definePluginSettings } from "@api/Settings";
import { Divider } from "@components/Divider";
import { Flex } from "@components/Flex";
import { Heading } from "@components/Heading";
import { copyToClipboard } from "@utils/clipboard";
import { Devs, EquicordDevs } from "@utils/constants";
import { ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
@ -173,12 +175,12 @@ export const settings = definePluginSettings({
return (
<div className="collections-sort-container">
<Forms.FormTitle className="collections-sort-title">Sort Collections</Forms.FormTitle>
<Forms.FormDivider className="collections-sort-divider" />
<Heading className="collections-sort-title">Sort Collections</Heading>
<Divider className="collections-sort-divider" />
<Forms.FormText className="collections-sort-description">
Choose a sorting criteria for your collections
</Forms.FormText>
<Forms.FormDivider className="collections-sort-divider" />
<Divider className="collections-sort-divider" />
<div className="collections-sort-section">
<Forms.FormText className="collections-sort-section-title">Sort By</Forms.FormText>
<div className="collections-sort-option">
@ -221,7 +223,7 @@ export const settings = definePluginSettings({
</label>
</div>
</div>
<Forms.FormDivider className="collections-sort-divider" />
<Divider className="collections-sort-divider" />
<div className="collections-sort-section">
<Forms.FormText className="collections-sort-section-title">Order</Forms.FormText>
<div className="collections-sort-option">
@ -463,19 +465,19 @@ const RemoveItemContextMenu = ({ type, nameOrId, instance }) => (
<ModalContent className="custom-modal-content">
<section>
<Flex className="collection-info">
<Forms.FormTitle tag="h5" className="collection-info-title">Name</Forms.FormTitle>
<Heading className="collection-info-title">Name</Heading>
<Forms.FormText className="collection-info-text">{collection.name.replace(/.+?:/, "")}</Forms.FormText>
</Flex>
<Flex className="collection-info">
<Forms.FormTitle tag="h5" className="collection-info-title">Gifs</Forms.FormTitle>
<Heading className="collection-info-title">Gifs</Heading>
<Forms.FormText className="collection-info-text">{collection.gifs.length}</Forms.FormText>
</Flex>
<Flex className="collection-info">
<Forms.FormTitle tag="h5" className="collection-info-title">Created At</Forms.FormTitle>
<Heading className="collection-info-title">Created At</Heading>
<Forms.FormText className="collection-info-text">{collection.createdAt ? new Date(collection.createdAt).toLocaleString() : "Unknown"}</Forms.FormText>
</Flex>
<Flex className="collection-info">
<Forms.FormTitle tag="h5" className="collection-info-title">Last Updated</Forms.FormTitle>
<Heading className="collection-info-title">Last Updated</Heading>
<Forms.FormText className="collection-info-text">{collection.lastUpdated ? new Date(collection.lastUpdated).toLocaleString() : "Unknown"}</Forms.FormText>
</Flex>
</section>
@ -524,15 +526,15 @@ const RemoveItemContextMenu = ({ type, nameOrId, instance }) => (
<ModalContent className="custom-modal-content">
<section>
<Flex className="gif-info">
<Forms.FormTitle tag="h5" className="gif-info-title">Added At</Forms.FormTitle>
<Heading className="gif-info-title">Added At</Heading>
<Forms.FormText className="gif-info-text">{gifInfo.addedAt ? new Date(gifInfo.addedAt).toLocaleString() : "Unknown"}</Forms.FormText>
</Flex>
<Flex className="gif-info">
<Forms.FormTitle tag="h5" className="gif-info-title">Width</Forms.FormTitle>
<Heading className="gif-info-title">Width</Heading>
<Forms.FormText className="gif-info-text">{gifInfo.width}</Forms.FormText>
</Flex>
<Flex className="gif-info">
<Forms.FormTitle tag="h5" className="gif-info-title">Height</Forms.FormTitle>
<Heading className="gif-info-title">Height</Heading>
<Forms.FormText className="gif-info-text">{gifInfo.height}</Forms.FormText>
</Flex>
</section>
@ -606,9 +608,9 @@ const RemoveItemContextMenu = ({ type, nameOrId, instance }) => (
<Forms.FormText className="custom-modal-title">Move To Collection</Forms.FormText>
</ModalHeader>
<ModalContent className="custom-modal-content">
<Forms.FormTitle tag="h5" className="custom-modal-text">
<Heading className="custom-modal-text">
Select a collection to move the item to
</Forms.FormTitle>
</Heading>
<div className="collection-buttons">
{cache_collections
.filter(col => col.name !== getItemCollectionNameFromId(nameOrId))
@ -758,7 +760,7 @@ function CreateCollectionModal({ gif, onClose, modalProps }) {
<Forms.FormText>Create Collection</Forms.FormText>
</ModalHeader>
<ModalContent>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Collection Name</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Collection Name</Heading>
<TextInput onChange={e => setName(e)} />
</ModalContent>
<div style={{ marginTop: "1rem" }}>

4
src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
View file

@ -101,7 +101,7 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
<Button
className={cl("button")}
size={Button.Sizes.SMALL}
look={Button.Looks.OUTLINED}
look={Button.Looks.LINK}
color={Button.Colors.TRANSPARENT}
onClick={openReposModal}
>
@ -136,7 +136,7 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
<Button
className={cl("show-more")}
size={Button.Sizes.SMALL}
look={Button.Looks.OUTLINED}
look={Button.Looks.LINK}
color={Button.Colors.TRANSPARENT}
onClick={openReposModal}
>

7
src/equicordplugins/githubRepos/components/ReposModal.tsx
View file

@ -4,8 +4,9 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { HeadingPrimary } from "@components/Heading";
import { ModalContent, ModalFooter, ModalHeader, ModalRoot } from "@utils/modal";
import { Button, Forms, React } from "@webpack/common";
import { Button, React } from "@webpack/common";
import { getLanguageColor } from "../colors";
import { GitHubRepo } from "../types";
@ -62,9 +63,9 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
return (
<ModalRoot className="vc-github-repos-modal" size="large" {...rootProps}>
<ModalHeader>
<Forms.FormTitle tag="h2" className="vc-github-repos-modal-title">
<HeadingPrimary className="vc-github-repos-modal-title">
{username}'s GitHub Repositories
</Forms.FormTitle>
</HeadingPrimary>
</ModalHeader>
<ModalContent className="vc-github-repos-modal-content">
<div className="vc-github-repos-table-container">

3
src/equicordplugins/globalBadges/badgeModal.tsx
View file

@ -5,6 +5,7 @@
*/
import ErrorBoundary from "@components/ErrorBoundary";
import { HeadingPrimary } from "@components/Heading";
import { ModalContent, ModalRoot, openModal } from "@utils/modal";
import { User } from "@vencord/discord-types";
import { Forms, React, Tooltip } from "@webpack/common";
@ -35,7 +36,7 @@ export function BadgeModal({ user }: { user: User; }) {
src={user.getAvatarURL(void 0, 512, true)}
alt=""
/>
<Forms.FormTitle tag="h2" className={cl("name")}>{user.username}</Forms.FormTitle>
<HeadingPrimary className={cl("name")}>{user.username}</HeadingPrimary>
</div>
{badgeImages.length ? (
<Forms.FormText>

2
src/equicordplugins/hideServers/components/HiddenServersButton.tsx
View file

@ -23,7 +23,7 @@ function HiddenServersButton() {
{actuallyHidden > 0 ? (
<Button
className={cl("button")}
look={Button.Looks.BLANK}
look={Button.Looks.LINK}
size={Button.Sizes.MIN}
onClick={() => openHiddenServersModal()}
>

9
src/equicordplugins/hideServers/components/HiddenServersMenu.tsx
View file

@ -5,6 +5,7 @@
*/
import { classNameFactory } from "@api/Styles";
import { Heading } from "@components/Heading";
import { getGuildAcronym } from "@utils/discord";
import { classes } from "@utils/misc";
import {
@ -19,7 +20,7 @@ import {
} from "@utils/modal";
import { Guild } from "@vencord/discord-types";
import { findByPropsLazy } from "@webpack";
import { Button, Forms, IconUtils, Text, useStateFromStores } from "@webpack/common";
import { Button, IconUtils, Text, useStateFromStores } from "@webpack/common";
import { SortedGuildStore } from "..";
import { HiddenServersStore } from "../HiddenServersStore";
@ -92,9 +93,9 @@ function GuildRow({ guild }) {
</div>
)}
</div>
<Forms.FormTitle className={cl("name")}>
<Heading className={cl("name")}>
{guild.name}
</Forms.FormTitle>
</Heading>
<Button
className="row-button"
color={Button.Colors.PRIMARY}
@ -135,7 +136,7 @@ export function HiddenServersMenu({ guilds }: { guilds: Guild[]; }) {
onClick={() => {
folderGuilds.forEach(g => restoreGuild(g, SortedGuildStore));
}}
size={Button.Sizes.TINY}
size={Button.Sizes.SMALL}
className={cl("restore-all")}
>
Remove All

4
src/equicordplugins/holyNotes/components/modals/NoteBookTab.tsx
View file

@ -146,8 +146,8 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }: { tabs: strin
ref={buttonRef}
{...props}
className={"vc-notebook-overflow-chevron"}
size={Button.Sizes.ICON}
look={Button.Looks.BLANK}
size={Button.Sizes.SMALL}
look={Button.Looks.LINK}
onClick={() => setShow(v => !v)}
>
<SvgOverFlowIcon className={classes(overflowIcon)} width={16} height={16} />

7
src/equicordplugins/iRememberYou/index.tsx
View file

@ -8,6 +8,7 @@ import "styles.css?managed";
import { DataStore } from "@api/index";
import { addMessagePreSendListener, removeMessagePreSendListener } from "@api/MessageEvents";
import { BaseText } from "@components/BaseText";
import { Heart } from "@components/Heart";
import { EquicordDevs } from "@utils/constants";
import { openUserProfile } from "@utils/discord";
@ -245,13 +246,13 @@ class DataUI {
{this.renderUserAvatar(user)}
<Tooltip text={this.userTooltipText(user)}>
{props =>
<Text {...props} selectable>{user.tag} {allowExtra.owner && user.extra?.isOwner && "(owner)"}</Text>
<BaseText {...props}>{user.tag} {allowExtra.owner && user.extra?.isOwner && "(owner)"}</BaseText>
}
</Tooltip>
</Flex>
</span>
<span style={{ height: "min-content" }}><Text selectable variant="code" style={{ opacity: 0.75 }}>{user.id}</Text></span>
<span style={{ height: "min-content" }}><BaseText style={{ opacity: 0.75 }}>{user.id}</BaseText></span>
</Flex>;
}
@ -279,7 +280,7 @@ class DataUI {
<TextArea value={JSON.stringify(usersCollection, null, "\t")} onChange={() => { }} rows={20} />
</Modal.ModalContent>
</Modal.ModalRoot>)}>
<Text variant="eyebrow" style={{ cursor: "pointer" }} >Open editor</Text>
<BaseText style={{ cursor: "pointer" }}>Open editor</BaseText>
</Clickable>
<Clickable onClick={

2
src/equicordplugins/iconViewer/IconModal.tsx
View file

@ -96,7 +96,7 @@ function ModalComponent(props: { iconName: string; Icon: t.Icon; } & ModalProps)
Save as
</Button>
<Button
color={Button.Colors.YELLOW}
color={Button.Colors.LINK}
className={classes(Margins.right8, "vc-iv-raw-modal-button")}
onClick={() => openRawModal(iconName, Icon, color)}
>

5
src/equicordplugins/iconViewer/IconsTab.tsx
View file

@ -18,11 +18,12 @@
import "./IconsTab.css";
import { Heading } from "@components/Heading";
import { SettingsTab, wrapTab } from "@components/settings";
import { Margins } from "@utils/margins";
import { classes } from "@utils/misc";
import * as t from "@vencord/discord-types";
import { Button, Clickable, Forms, React, TextInput, TooltipContainer } from "@webpack/common";
import { Button, Clickable, React, TextInput, TooltipContainer } from "@webpack/common";
import { openIconModal } from "./IconModal";
import { getNameByIcon } from "./names";
@ -55,7 +56,7 @@ function RenderIcons({ search, searchbyFunction }: { search: string; searchbyFun
<Icon className="vc-icon-icon" size="xxl" />
</div>
</Clickable>
<Forms.FormTitle className="vc-icon-title" tag="h3">{iconName}</Forms.FormTitle>
<Heading className="vc-icon-title" tag="h3">{iconName}</Heading>
</div>
</React.Fragment>
)}</div>;

2
src/equicordplugins/iconViewer/rawModal.tsx
View file

@ -53,7 +53,7 @@ function ModalComponent(props: { func: Function; iconName: string; color: number
Copy
</Button>
<Button
color={Button.Colors.YELLOW}
color={Button.Colors.LINK}
className={classes(Margins.right8, "vc-iv-log-to-console-button")}
onClick={() => { console.log(func); }}
>

5
src/equicordplugins/iconViewer/subComponents.tsx
View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { HeadingSecondary } from "@components/Heading";
import { copyToClipboard } from "@utils/clipboard";
import { getIntlMessage } from "@utils/discord";
import { Margins } from "@utils/margins";
@ -90,7 +91,7 @@ export const ModalHeaderTitle = ({ iconName, color, name }: { iconName: string;
export function SettingsAbout() {
return <>
<Forms.FormTitle tag="h3">Features</Forms.FormTitle>
<HeadingSecondary>Features</HeadingSecondary>
<Forms.FormText>
<Text variant="heading-sm/normal">
<ul className="vc-ic-unordered-list">
@ -103,7 +104,7 @@ export function SettingsAbout() {
</ul>
</Text>
</Forms.FormText>
<Forms.FormTitle tag="h3">Special thanks</Forms.FormTitle>
<HeadingSecondary>Special thanks</HeadingSecondary>
<Forms.FormText>
<Text variant="heading-sm/normal" className="vc-ic-unordered-list">
<ul>

3
src/equicordplugins/instantScreenshare/utils.tsx
View file

@ -5,6 +5,7 @@
*/
import { definePluginSettings } from "@api/Settings";
import { Heading } from "@components/Heading";
import { Logger } from "@utils/Logger";
import { OptionType } from "@utils/types";
import { findByCodeLazy } from "@webpack";
@ -93,7 +94,7 @@ function ScreenSetting() {
function SettingSection() {
return (
<section>
<Forms.FormTitle>Media source to stream</Forms.FormTitle>
<Heading>Media source to stream</Heading>
<Forms.FormText>Resets to main screen if not found</Forms.FormText>
<ScreenSetting />
</section>

5
src/equicordplugins/jellyfinRichPresence/index.tsx
View file

@ -6,6 +6,7 @@
// alot of the code is from LastFMRichPresence
import { definePluginSettings } from "@api/Settings";
import { HeadingSecondary } from "@components/Heading";
import { Devs, EquicordDevs } from "@utils/constants";
import { Logger } from "@utils/Logger";
import definePlugin, { OptionType } from "@utils/types";
@ -168,7 +169,7 @@ export default definePlugin({
settingsAboutComponent: () => (
<>
<Forms.FormTitle tag="h3">How to get an API key</Forms.FormTitle>
<HeadingSecondary>How to get an API key</HeadingSecondary>
<Forms.FormText>
Auth token can be found by following these steps:
<ol style={{ marginTop: 8, marginBottom: 8, paddingLeft: 20 }}>
@ -312,7 +313,7 @@ export default definePlugin({
break;
}
let tmdbData: { url: string; posterPath?: string | null } | null = null;
let tmdbData: { url: string; posterPath?: string | null; } | null = null;
if (settings.store.showTMDBButton) {
tmdbData = await fetchTmdbData(mediaData.seriesName || mediaData.name);
}

19
src/equicordplugins/keywordNotify/index.tsx
View file

@ -11,6 +11,7 @@ import { definePluginSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import { Flex } from "@components/Flex";
import { FormSwitch } from "@components/FormSwitch";
import { Heading, HeadingTertiary } from "@components/Heading";
import { DeleteIcon } from "@components/Icons";
import { EquicordDevs } from "@utils/constants";
import { Margins } from "@utils/margins";
@ -19,7 +20,7 @@ import { useForceUpdater } from "@utils/react";
import definePlugin, { OptionType } from "@utils/types";
import { Message } from "@vencord/discord-types";
import { findByCodeLazy, findByPropsLazy } from "@webpack";
import { Button, ChannelStore, FluxDispatcher, Forms, Select, SelectedChannelStore, TabBar, TextInput, Tooltip, UserStore, useState } from "@webpack/common";
import { Button, ChannelStore, FluxDispatcher, Select, SelectedChannelStore, TabBar, TextInput, Tooltip, UserStore, useState } from "@webpack/common";
import type { JSX, PropsWithChildren } from "react";
type IconProps = JSX.IntrinsicElements["svg"];
@ -99,8 +100,8 @@ function Collapsible({ title, children }) {
<div>
<Button
onClick={() => setIsOpen(!isOpen)}
look={Button.Looks.BLANK}
size={Button.Sizes.ICON}
look={Button.Looks.LINK}
size={Button.Sizes.SMALL}
className={cl("collapsible")}>
<div style={{ display: "flex", alignItems: "center" }}>
<div style={{
@ -108,7 +109,7 @@ function Collapsible({ title, children }) {
color: "var(--text-muted)",
paddingRight: "5px"
}}>{isOpen ? "▼" : "▶"}</div>
<Forms.FormTitle tag="h4">{title}</Forms.FormTitle>
<HeadingTertiary>{title}</HeadingTertiary>
</div>
</Button>
{isOpen && children}
@ -144,8 +145,8 @@ function ListedIds({ listIds, setListIds }) {
setListIds(values);
update();
}}
look={Button.Looks.BLANK}
size={Button.Sizes.ICON}
look={Button.Looks.LINK}
size={Button.Sizes.SMALL}
className={cl("delete")}>
<DeleteIcon />
</Button>
@ -220,8 +221,8 @@ function KeywordEntries() {
</div>
<Button
onClick={() => removeKeywordEntry(i, update)}
look={Button.Looks.BLANK}
size={Button.Sizes.ICON}
look={Button.Looks.LINK}
size={Button.Sizes.SMALL}
className={cl("delete")}>
<DeleteIcon />
</Button>
@ -234,7 +235,7 @@ function KeywordEntries() {
setIgnoreCase(i, !values[i].ignoreCase);
}}
/>
<Forms.FormTitle tag="h5">Whitelist/Blacklist</Forms.FormTitle>
<Heading>Whitelist/Blacklist</Heading>
<Flex flexDirection="row">
<div style={{ flexGrow: 1 }}>
<ListedIds listIds={values[i].listIds} setListIds={e => setListIds(i, e)} />

3
src/equicordplugins/listenBrainzRPC/index.tsx
View file

@ -5,6 +5,7 @@
*/
import { definePluginSettings } from "@api/Settings";
import { HeadingSecondary } from "@components/Heading";
import { Link } from "@components/Link";
import { EquicordDevs } from "@utils/constants";
import { Logger } from "@utils/Logger";
@ -163,7 +164,7 @@ export default definePlugin({
settingsAboutComponent: () => (
<>
<Forms.FormTitle tag="h3">About MusicBrainz API</Forms.FormTitle>
<HeadingSecondary>About MusicBrainz API</HeadingSecondary>
<Forms.FormText>
The MusicBrainz API does not require an API key, but it does require a{" "}
<Link href="https://musicbrainz.org/doc/MusicBrainz_API/Rate_Limiting#Provide_meaningful_User-Agent_strings">

2
src/equicordplugins/loginWithQR/ui/modals/VerifyModal.tsx
View file

@ -193,7 +193,7 @@ function VerifyModal({
}}
onPointerDown={startInput}
onPointerUp={endInput}
buttonRef={buttonRef}
ref={buttonRef}
disabled={inProgress}
>
Hold to confirm login

3
src/equicordplugins/mediaDownloader.desktop/index.tsx
View file

@ -9,6 +9,7 @@ import "./style.css";
import { ApplicationCommandInputType, ApplicationCommandOptionType, findOption, sendBotMessage } from "@api/Commands";
import * as DataStore from "@api/DataStore";
import { definePluginSettings } from "@api/Settings";
import { Divider } from "@components/Divider";
import ErrorBoundary from "@components/ErrorBoundary";
import { Link } from "@components/Link";
import { EquicordDevs } from "@utils/constants";
@ -153,7 +154,7 @@ const settings = definePluginSettings({
</Button>
</Link>
</Forms.FormText>
<Forms.FormDivider />
<Divider />
</>
)
},

5
src/equicordplugins/messageLoggerEnhanced/components/FolderSelectInput.tsx
View file

@ -17,8 +17,9 @@
*/
import { classNameFactory } from "@api/Styles";
import { Heading } from "@components/Heading";
import { copyWithToast } from "@utils/misc";
import { Button, Forms, Toasts } from "@webpack/common";
import { Button, Toasts } from "@webpack/common";
import { Native, settings } from "..";
import { DEFAULT_IMAGE_CACHE_DIR } from "../utils/constants";
@ -31,7 +32,7 @@ function createDirSelector(settingKey: "logsDir" | "imageCacheDir", successMessa
return (
<section>
<Forms.FormTitle>{option.description}</Forms.FormTitle>
<Heading>{option.description}</Heading>
<SelectFolderInput
settingsKey={settingKey}
successMessage={successMessage}

2
src/equicordplugins/messageLoggerEnhanced/components/LogsModal.tsx
View file

@ -158,7 +158,7 @@ export function LogsModal({ modalProps, initalQuery }: Props) {
</Button>
<Button
style={{ marginRight: "16px" }}
color={Button.Colors.YELLOW}
color={Button.Colors.LINK}
disabled={messages?.length === 0}
onClick={() => Alerts.show({
title: "Clear Logs",

14
src/equicordplugins/moreStickers/components/misc.tsx
View file

@ -6,7 +6,9 @@
import * as DataStore from "@api/DataStore";
import { CheckedTextInput } from "@components/CheckedTextInput";
import { Divider } from "@components/Divider";
import { Flex } from "@components/Flex";
import { Heading } from "@components/Heading";
import { Button, Forms, React, TabBar, Text, TextArea, Toasts } from "@webpack/common";
import { JSX } from "react";
@ -125,7 +127,7 @@ export const Settings = () => {
{tab === SettingsTabsKey.ADD_STICKER_PACK_URL &&
<div className="section">
<Forms.FormTitle tag="h5">Add Sticker Pack from URL</Forms.FormTitle>
<Heading>Add Sticker Pack from URL</Heading>
<Forms.FormText>
<p>
Currently LINE stickers/emojis supported only. <br />
@ -233,7 +235,7 @@ export const Settings = () => {
}
{tab === SettingsTabsKey.ADD_STICKER_PACK_HTML &&
<div className="section">
<Forms.FormTitle tag="h5">Add Sticker Pack from HTML</Forms.FormTitle>
<Heading>Add Sticker Pack from HTML</Heading>
<Forms.FormText>
<p>
When encountering errors while adding a sticker pack, you can try to add it using the HTML source code of the sticker pack page.<br />
@ -311,7 +313,7 @@ export const Settings = () => {
{
tab === SettingsTabsKey.ADD_STICKER_PACK_FILE &&
<div className="section">
<Forms.FormTitle tag="h5">Add Sticker Pack from File</Forms.FormTitle>
<Heading>Add Sticker Pack from File</Heading>
<Button
size={Button.Sizes.SMALL}
@ -367,7 +369,7 @@ export const Settings = () => {
{
tab === SettingsTabsKey.MISC &&
<div className="section">
<Forms.FormTitle tag="h5">Misc tools</Forms.FormTitle>
<Heading>Misc tools</Heading>
<Flex flexDirection="row" style={{
alignItems: "center",
@ -412,11 +414,11 @@ export const Settings = () => {
</Flex>
</div>
}
<Forms.FormDivider style={{
<Divider style={{
marginTop: "8px",
marginBottom: "8px"
}} />
<Forms.FormTitle tag="h5">Stickers Management</Forms.FormTitle>
<Heading>Stickers Management</Heading>
<div className="section">
<div style={{

9
src/equicordplugins/musicControls/settings.tsx
View file

@ -6,6 +6,7 @@
import { definePluginSettings } from "@api/Settings";
import { disableStyle, enableStyle } from "@api/Styles";
import { HeadingSecondary } from "@components/Heading";
import { makeRange, OptionType } from "@utils/types";
import { Button, Forms, MaskedLink, showToast, Toasts } from "@webpack/common";
@ -26,7 +27,7 @@ export function toggleHoverControls(value: boolean) {
function InstallInstructions() {
return (
<section>
<Forms.FormTitle tag="h3">How to install</Forms.FormTitle>
<HeadingSecondary>How to install</HeadingSecondary>
<Forms.FormText>
Install <MaskedLink href="https://github.com/Inrixia/TidaLuna#installation">TidaLuna</MaskedLink> from here, then go to TidalLuna settings &rarr; Plugin stores &rarr; Install <code>@vmohammad/api</code>
</Forms.FormText>
@ -115,7 +116,7 @@ export const settings = definePluginSettings({
type: OptionType.COMPONENT,
component: () => (
<section>
<Forms.FormTitle tag="h3">Spotify</Forms.FormTitle>
<HeadingSecondary>Spotify</HeadingSecondary>
</section>
)
},
@ -144,7 +145,7 @@ export const settings = definePluginSettings({
type: OptionType.COMPONENT,
component: () => (
<section>
<Forms.FormTitle tag="h3">Tidal</Forms.FormTitle>
<HeadingSecondary>Tidal</HeadingSecondary>
</section>
)
},
@ -194,7 +195,7 @@ export const settings = definePluginSettings({
type: OptionType.COMPONENT,
component: () => (
<section>
<Forms.FormTitle tag="h3">Youtube Music</Forms.FormTitle>
<HeadingSecondary>Youtube Music</HeadingSecondary>
</section>
)
},

9
src/equicordplugins/musicControls/spotify/lyrics/components/lyrics.tsx
View file

@ -4,8 +4,9 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { BaseText } from "@components/BaseText";
import { openModal } from "@utils/modal";
import { ContextMenuApi, React, Text, TooltipContainer, useEffect, useState, useStateFromStores } from "@webpack/common";
import { ContextMenuApi, React, TooltipContainer, useEffect, useState, useStateFromStores } from "@webpack/common";
import { settings } from "../../../settings";
import { SpotifyStore } from "../../SpotifyStore";
@ -41,12 +42,12 @@ function LyricsDisplay({ scroll = true }: { scroll?: boolean; }) {
>
{currentLyrics ? currentLyrics.map((line, i) => (
<div ref={lyricRefs[i]} key={i}>
<Text
variant={currLrcIndex === i ? "text-sm/normal" : "text-xs/normal"}
<BaseText
size={currLrcIndex === i ? "sm" : "xs"}
className={makeClassName(i)}
>
{line.text || NoteSvg()}
</Text>
</BaseText>
</div>
)) : ShowMusicNoteOnNoLyrics ? (
<TooltipContainer text="No synced lyrics found">

17
src/equicordplugins/musicControls/spotify/lyrics/components/modal.tsx
View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { BaseText } from "@components/BaseText";
import { openImageModal } from "@utils/discord";
import { ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
import { React, Text } from "@webpack/common";
@ -21,7 +22,7 @@ function ModalHeaderContent({ track }: { track: Track | null; }) {
if (!track) {
return (
<ModalHeader>
<Text variant="text-sm/semibold">No track playing</Text>
<BaseText size="sm" weight="semibold">No track playing</BaseText>
</ModalHeader>
);
}
@ -41,9 +42,9 @@ function ModalHeaderContent({ track }: { track: Track | null; }) {
/>
)}
<div>
<Text selectable variant="text-sm/semibold">{track.name}</Text>
<Text selectable variant="text-sm/normal">by {track.artists.map(a => a.name).join(", ")}</Text>
<Text selectable variant="text-sm/normal">on {track.album.name}</Text>
<BaseText size="sm" weight="semibold">{track.name}</BaseText>
<BaseText size="sm">by {track.artists.map(a => a.name).join(", ")}</BaseText>
<BaseText size="sm">on {track.album.name}</BaseText>
</div>
</div>
</ModalHeader>
@ -64,17 +65,17 @@ export function LyricsModal({ props }: { props: ModalProps; }) {
<div className={`${cl("lyrics-modal-container")} ${scrollClasses.auto}`}>
{currentLyrics ? (
currentLyrics.map((line, i) => (
<Text
<BaseText
key={i}
variant={currLrcIndex === i ? "text-md/semibold" : "text-sm/normal"}
selectable
size={currLrcIndex === i ? "md" : "sm"}
weight={currLrcIndex === i ? "semibold" : "normal"}
className={currLrcIndex === i ? modalCurrentLine : modalLine}
>
<span className={cl("modal-timestamp")} onClick={() => SpotifyStore.seek(line.time * 1000)}>
{formatTime(line.time)}
</span>
{line.text || NoteSvg()}
</Text>
</BaseText>
))
) : (
<Text variant="text-sm/normal" className={cl("modal-no-lyrics")}>

32
src/equicordplugins/musicControls/tidal/TidalPlayer.tsx
View file

@ -7,11 +7,12 @@
import "./tidalStyles.css";
import { Settings } from "@api/Settings";
import { BaseText } from "@components/BaseText";
import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
import { debounce } from "@shared/debounce";
import { openImageModal } from "@utils/discord";
import { classes, copyWithToast } from "@utils/misc";
import { ContextMenuApi, Flex, FluxDispatcher, Forms, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
import { ContextMenuApi, Flex, FluxDispatcher, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
import { SeekBar } from "../spotify/SeekBar";
import { type PlayerState, type Repeat, TidalStore } from "./TidalStore";
@ -179,13 +180,14 @@ function TdlSeekBar() {
return (
<div id={cl("progress-bar")}>
<Forms.FormText
variant="text-xs/medium"
<BaseText
size="xs"
weight="medium"
className={`${cl("progress-time")} ${cl("time-left")}`}
aria-label="Progress"
>
{msToHuman(position)}
</Forms.FormText>
</BaseText>
<SeekBar
initialValue={position}
minValue={0}
@ -194,13 +196,14 @@ function TdlSeekBar() {
asValueChanges={onChange}
onValueRender={msToHuman}
/>
<Forms.FormText
variant="text-xs/medium"
<BaseText
size="xs"
weight="medium"
className={`${cl("progress-time")} ${cl("time-right")}`}
aria-label="Total Duration"
>
{msToHuman(songDuration * 1000)}
</Forms.FormText>
</BaseText>
</div>
);
}
@ -279,25 +282,26 @@ function Info({ track }: { track: NonNullable<PlayerState["track"]>; }) {
<div id={cl("info-wrapper")}>
{i}
<div id={cl("titles")}>
<Forms.FormText
variant="text-sm/semibold"
<BaseText
size="sm"
weight="semibold"
id={cl("song-title")}
className={cl("ellipoverflow")}
title={track?.name}
{...makeLinkProps(`"${track.name}"`, track?.id, track?.url || `https://tidal.com/track/${track?.id}`)}
>
{track?.name}
</Forms.FormText>
</BaseText>
{track.artist && (
<Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
<BaseText size="sm" className={cl("ellipoverflow")}>
by&nbsp;
<span className={cl("artist")} style={{ fontSize: "inherit" }} title={track.artist}>
{track.artist}
</span>
</Forms.FormText>
</BaseText>
)}
{track.album && (
<Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
<BaseText size="sm" className={cl("ellipoverflow")}>
on&nbsp;
<span
id={cl("album-title")}
@ -307,7 +311,7 @@ function Info({ track }: { track: NonNullable<PlayerState["track"]>; }) {
>
{track.album}
</span>
</Forms.FormText>
</BaseText>
)}
</div>
</div>

15
src/equicordplugins/musicControls/tidal/lyrics/components/modal.tsx
View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { BaseText } from "@components/BaseText";
import { ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
import { Text } from "@webpack/common";
@ -29,9 +30,9 @@ function ModalHeaderContent({ track }: { track: Track; }) {
/>
)}
<div>
<Text selectable variant="text-sm/semibold">{track.name}</Text>
<Text selectable variant="text-sm/normal">by {track.artist}</Text>
{track.album && <Text selectable variant="text-sm/normal">on {track.album}</Text>}
<BaseText size="sm" weight="semibold">{track.name}</BaseText>
<BaseText size="sm">by {track.artist}</BaseText>
{track.album && <BaseText size="sm">on {track.album}</BaseText>}
</div>
</div>
</ModalHeader>
@ -51,10 +52,10 @@ export function LyricsModal({ rootProps }: { rootProps: ModalProps; }) {
<div className={cl("lyrics-modal-container") + ` ${scrollClasses.auto}`}>
{currentLyrics ? (
currentLyrics.map((line, i) => (
<Text
<BaseText
key={i}
variant={currLrcIndex === i ? "text-md/semibold" : "text-sm/normal"}
selectable
size={currLrcIndex === i ? "md" : "sm"}
weight={currLrcIndex === i ? "semibold" : "normal"}
className={currLrcIndex === i ? cl("modal-line-current") : cl("modal-line")}
>
<span className={cl("modal-timestamp")}
@ -109,7 +110,7 @@ export function LyricsModal({ rootProps }: { rootProps: ModalProps; }) {
) : (
line.text || NoteSvg(cl("modal-note"))
)}
</Text>
</BaseText>
))
) : (
<Text variant="text-sm/normal" className={cl("modal-no-lyrics")}>No lyrics available :(</Text>

32
src/equicordplugins/musicControls/youtubeMusic/PlayerComponent.tsx
View file

@ -18,12 +18,13 @@
import "./ytmStyles.css";
import { BaseText } from "@components/BaseText";
import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
import { SeekBar } from "@equicordplugins/musicControls/spotify/SeekBar";
import { debounce } from "@shared/debounce";
import { openImageModal } from "@utils/discord";
import { classes, copyWithToast } from "@utils/misc";
import { ContextMenuApi, Flex, FluxDispatcher, Forms, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
import { ContextMenuApi, Flex, FluxDispatcher, Menu, React, useEffect, useState, useStateFromStores } from "@webpack/common";
import { type Repeat, type Song, YoutubeMusicStore } from "./YtmStore";
@ -179,13 +180,14 @@ function YtmSeekBar() {
return (
<div id={cl("progress-bar")}>
<Forms.FormText
variant="text-xs/medium"
<BaseText
size="xs"
weight="medium"
className={`${cl("progress-time")} ${cl("time-left")}`}
aria-label="Progress"
>
{msToHuman(position)}
</Forms.FormText>
</BaseText>
<SeekBar
initialValue={position}
minValue={0}
@ -194,13 +196,14 @@ function YtmSeekBar() {
asValueChanges={onChange}
onValueRender={msToHuman}
/>
<Forms.FormText
variant="text-xs/medium"
<BaseText
size="xs"
weight="medium"
className={`${cl("progress-time")} ${cl("time-right")}`}
aria-label="Total Duration"
>
{msToHuman(songDuration * 1000)}
</Forms.FormText>
</BaseText>
</div>
);
}
@ -296,25 +299,26 @@ function Info({ track }: { track: NonNullable<Song>; }) {
<div id={cl("info-wrapper")}>
{i}
<div id={cl("titles")}>
<Forms.FormText
variant="text-sm/semibold"
<BaseText
size="sm"
weight="semibold"
id={cl("song-title")}
className={cl("ellipoverflow")}
title={track?.title}
{...makeLinkProps("Song", track?.videoId, `/watch?v=${track?.videoId}`)}
>
{track?.title}
</Forms.FormText>
</BaseText>
{track.artist && (
<Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
<BaseText size="sm" className={cl("ellipoverflow")}>
by&nbsp;
<span className={cl("artist")} style={{ fontSize: "inherit" }} title={track.artist}>
{track.artist}
</span>
</Forms.FormText>
</BaseText>
)}
{track.album && (
<Forms.FormText variant="text-sm/normal" className={cl("ellipoverflow")}>
<BaseText size="sm" className={cl("ellipoverflow")}>
on&nbsp;
<span
id={cl("album-title")}
@ -324,7 +328,7 @@ function Info({ track }: { track: NonNullable<Song>; }) {
>
{track.album}
</span>
</Forms.FormText>
</BaseText>
)}
</div>
</div>

108
src/equicordplugins/questify/settings.tsx
View file

@ -6,7 +6,7 @@
import { defaultAudioNames, playAudio } from "@api/AudioPlayer";
import { definePluginSettings } from "@api/Settings";
import { ErrorBoundary } from "@components/index";
import { Divider, ErrorBoundary, Heading } from "@components/index";
import { Logger } from "@utils/Logger";
import { OptionType } from "@utils/types";
import { Button, ColorPicker, ContextMenuApi, Forms, Menu, Select, TextInput, useEffect, useRef, useState } from "@webpack/common";
@ -520,14 +520,14 @@ function QuestButtonSettings(): JSX.Element {
return (
<ErrorBoundary>
<Forms.FormDivider className={q("setting-divider")} />
<Divider className={q("setting-divider")} />
<div className={q("setting", "quest-icon-setting")}>
<section>
<div className={q("main-inline-group")}>
<div>
<Forms.FormTitle className={q("form-title")}>
<Heading className={q("form-title")}>
Quest Button
</Forms.FormTitle>
</Heading>
<Forms.FormText className={q("form-description")}>
Show a Quest button in the server list with an optional indicator for unclaimed Quests.
</Forms.FormText>
@ -548,9 +548,9 @@ function QuestButtonSettings(): JSX.Element {
</div>
<div className={q("main-inline-group")}>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle", "form-subtitle-spacier")}>
<Heading className={q("form-subtitle", "form-subtitle-spacier")}>
Left Click Action
</Forms.FormTitle>
</Heading>
<Select
options={questButtonClickOptions}
className={q("select")}
@ -561,9 +561,9 @@ function QuestButtonSettings(): JSX.Element {
/>
</div>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle", "form-subtitle-spacier")}>
<Heading className={q("form-subtitle", "form-subtitle-spacier")}>
Middle Click Action
</Forms.FormTitle>
</Heading>
<Select
options={questButtonClickOptions}
className={q("select")}
@ -574,9 +574,9 @@ function QuestButtonSettings(): JSX.Element {
/>
</div>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle", "form-subtitle-spacier")}>
<Heading className={q("form-subtitle", "form-subtitle-spacier")}>
Right Click Action
</Forms.FormTitle>
</Heading>
<Select
options={questButtonClickOptions}
className={q("select")}
@ -589,17 +589,17 @@ function QuestButtonSettings(): JSX.Element {
</div>
<div className={q("main-inline-group")}>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Button Visibility
</Forms.FormTitle>
</Heading>
<RadioGroup
value={(currentQuestButtonDisplay as any).value}
options={questButtonDisplayOptions}
onChange={handleQuestButtonDisplayChange}
/>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Badge Color
</Forms.FormTitle>
</Heading>
<div className={q("sub-inline-group")}>
<ColorPicker
color={currentBadgeColor}
@ -621,9 +621,9 @@ function QuestButtonSettings(): JSX.Element {
</div>
</div>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Unclaimed Indicator
</Forms.FormTitle>
</Heading>
<RadioGroup
value={(currentQuestButtonUnclaimed as any).value}
options={questButtonUnclaimedOptions}
@ -633,9 +633,9 @@ function QuestButtonSettings(): JSX.Element {
</div>
<div className={q("main-inline-group")}>
<section>
<Forms.FormTitle className={q("form-subtitle", "form-subtitle-spacier")}>
<Heading className={q("form-subtitle", "form-subtitle-spacier")}>
Included Reward Types
</Forms.FormTitle>
</Heading>
<Forms.FormText className={q("form-description")}>
Only count Quests with these reward types as unclaimed when determining button
visibility, badge count, and when playing the alert sound.
@ -769,12 +769,12 @@ function DisableQuestsSetting(): JSX.Element {
return (
<ErrorBoundary>
<Forms.FormDivider className={q("setting-divider")} />
<Divider className={q("setting-divider")} />
<div className={q("setting", "disable-quests-setting")}>
<section>
<Forms.FormTitle className={q("form-title")}>
<Heading className={q("form-title")}>
Quest Features
</Forms.FormTitle>
</Heading>
<Forms.FormText className={q("form-description")}>
Modify specific Quest features.
<br /><br />
@ -947,13 +947,13 @@ function RestyleQuestsSetting() {
return (
<ErrorBoundary>
<Forms.FormDivider className={q("setting-divider")} />
<Divider className={q("setting-divider")} />
<div className={q("setting", "restyle-quests-setting")}>
<section>
<div>
<Forms.FormTitle className={q("form-title")}>
<Heading className={q("form-title")}>
Restyle Quests
</Forms.FormTitle>
</Heading>
<Forms.FormText className={q("form-description")}>
Highlight Quests with optional theme colors for visibility.
<br /><br />
@ -962,9 +962,9 @@ function RestyleQuestsSetting() {
</div>
<div className={q("main-inline-group")}>
<div className={q("gradient-setting-group", "inline-group-item", "flex-35")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Gradient Style
</Forms.FormTitle>
</Heading>
<Select
options={gradientOptions}
className={q("select")}
@ -975,9 +975,9 @@ function RestyleQuestsSetting() {
/>
</div>
<div className={q("preload-setting-group", "inline-group-item", "flex-65")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Asset Preload
</Forms.FormTitle>
</Heading>
<Select
options={preloadOptions}
className={q("select")}
@ -994,9 +994,9 @@ function RestyleQuestsSetting() {
key={label}
className={q("inline-group-item", "color-picker-group")}
>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
{label}
</Forms.FormTitle>
</Heading>
<div className={q("color-picker-with-buttons")}>
<ColorPicker
color={value}
@ -1083,13 +1083,13 @@ function ReorderQuestsSetting(): JSX.Element {
return (
<ErrorBoundary>
<Forms.FormDivider className={q("setting-divider")} />
<Divider className={q("setting-divider")} />
<div className={q("setting", "reorder-quests-setting")}>
<section>
<div>
<Forms.FormTitle className={q("form-title")}>
<Heading className={q("form-title")}>
Reorder Quests
</Forms.FormTitle>
</Heading>
<Forms.FormText className={q("form-description")}>
Sort Quests by their status. Applied when the "Questify" sort option is selected on the Quest page.
<br /><br />
@ -1124,9 +1124,9 @@ function ReorderQuestsSetting(): JSX.Element {
</div>
<div className={q("main-inline-group")}>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Unclaimed Subsort
</Forms.FormTitle>
</Heading>
<Select
options={getSubsortOptions("unclaimed")}
className={q("select")}
@ -1139,9 +1139,9 @@ function ReorderQuestsSetting(): JSX.Element {
/>
</div>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Claimed Subsort
</Forms.FormTitle>
</Heading>
<Select
options={getSubsortOptions("claimed")}
className={q("select")}
@ -1156,9 +1156,9 @@ function ReorderQuestsSetting(): JSX.Element {
</div>
<div className={q("main-inline-group")}>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Ignored Subsort
</Forms.FormTitle>
</Heading>
<Select
options={getSubsortOptions("ignored")}
className={q("select")}
@ -1171,9 +1171,9 @@ function ReorderQuestsSetting(): JSX.Element {
/>
</div>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Expired Subsort
</Forms.FormTitle>
</Heading>
<Select
options={getSubsortOptions("expired")}
className={q("select")}
@ -1188,9 +1188,9 @@ function ReorderQuestsSetting(): JSX.Element {
</div>
<div className={q("main-inline-group")}>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Ignored Quest Profile
</Forms.FormTitle>
</Heading>
<Select
options={[
{ label: "Shared: All accounts on this client share ignores.", value: "shared" },
@ -1206,9 +1206,9 @@ function ReorderQuestsSetting(): JSX.Element {
</div>
<div className={q("main-inline-group")}>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Remember Sort Choice
</Forms.FormTitle>
</Heading>
<Select
options={[
{ label: "Yes", value: true },
@ -1222,9 +1222,9 @@ function ReorderQuestsSetting(): JSX.Element {
/>
</div>
<div className={q("inline-group-item")}>
<Forms.FormTitle className={q("form-subtitle")}>
<Heading className={q("form-subtitle")}>
Remember Filter Choice
</Forms.FormTitle>
</Heading>
<Select
options={[
{ label: "Yes", value: true },
@ -1461,13 +1461,13 @@ function FetchingQuestsSetting(): JSX.Element {
return (
<ErrorBoundary>
<Forms.FormDivider className={q("setting-divider")} />
<Divider className={q("setting-divider")} />
<div className={q("setting", "fetching-quests-setting")}>
<section>
<div>
<Forms.FormTitle className={q("form-title")}>
<Heading className={q("form-title")}>
Fetching Quests
</Forms.FormTitle>
</Heading>
<Forms.FormText className={q("form-description")}>
Configure how often to fetch Quests from Discord and set up alerts for new Quests.
<br /><br />
@ -1483,9 +1483,9 @@ function FetchingQuestsSetting(): JSX.Element {
</div>
<div>
<div>
<Forms.FormTitle className={q("form-subtitle", "form-subtitle-spacier")}>
<Heading className={q("form-subtitle", "form-subtitle-spacier")}>
Fetch Interval
</Forms.FormTitle>
</Heading>
</div>
<div>
<DynamicDropdown
@ -1514,9 +1514,9 @@ function FetchingQuestsSetting(): JSX.Element {
</div>
<div>
<div>
<Forms.FormTitle className={q("form-subtitle", "form-subtitle-spacier")}>
<Heading className={q("form-subtitle", "form-subtitle-spacier")}>
Alert Sound
</Forms.FormTitle>
</Heading>
</div>
<div className={q("sub-inline-group")}>
<div className={q("inline-group-item")}>

4
src/equicordplugins/quoter/index.tsx
View file

@ -234,8 +234,8 @@ function QuoteModal({ message, ...props }: ModalProps & { message: Message; }) {
serialize={v => v}
/>
<br />
<Button color={Button.Colors.BRAND_NEW} size={Button.Sizes.SMALL} onClick={async () => await Export()} style={{ display: "inline-block", marginRight: "5px" }}>Export</Button>
<Button color={Button.Colors.BRAND_NEW} size={Button.Sizes.SMALL} onClick={async () => await SendInChat()} style={{ display: "inline-block" }}>Send</Button>
<Button color={Button.Colors.BRAND} size={Button.Sizes.SMALL} onClick={async () => await Export()} style={{ display: "inline-block", marginRight: "5px" }}>Export</Button>
<Button color={Button.Colors.BRAND} size={Button.Sizes.SMALL} onClick={async () => await SendInChat()} style={{ display: "inline-block" }}>Send</Button>
</ModalContent>
<br></br>
</ModalRoot>

29
src/equicordplugins/rpcEditor/ReplaceSettings.tsx
View file

@ -6,6 +6,7 @@
import { CheckedTextInput } from "@components/CheckedTextInput";
import { FormSwitch } from "@components/FormSwitch";
import { Heading, HeadingSecondary } from "@components/Heading";
import { Margins } from "@utils/margins";
import { identity } from "@utils/misc";
import { Activity } from "@vencord/discord-types";
@ -29,7 +30,7 @@ export function ReplaceTutorial() {
const activities: Activity[] = PresenceStore.getActivities(UserStore.getCurrentUser().id);
return (
<>
<Forms.FormTitle tag="h3">IDs of currently running activities</Forms.FormTitle>
<HeadingSecondary>IDs of currently running activities</HeadingSecondary>
{
activities.length === 0
? <Forms.FormText>No running activities</Forms.FormText>
@ -40,7 +41,7 @@ export function ReplaceTutorial() {
: null;
})
}
<Forms.FormTitle tag="h3" className={Margins.top8}>Available variables</Forms.FormTitle>
<HeadingSecondary className={Margins.top8}>Available variables</HeadingSecondary>
<Forms.FormText>
In all fields (except stream URL), you can put in variables that'll automatically be replaced by their original content:
<pre style={{ fontFamily: "monospace" }}>
@ -49,7 +50,7 @@ export function ReplaceTutorial() {
:large_image:, :large_text:, :small_image:, :small_text:
</pre>
</Forms.FormText>
<Forms.FormTitle tag="h3" className={Margins.top8}>More details</Forms.FormTitle>
<HeadingSecondary className={Margins.top8}>More details</HeadingSecondary>
<Forms.FormText>
Leave a field empty to leave it as is.
<br />
@ -87,9 +88,9 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
}}
className={Margins.bottom8}
hideBorder={true}
/> : <Forms.FormTitle tag="h3">Add new application</Forms.FormTitle>
/> : <HeadingSecondary>Add new application</HeadingSecondary>
}
<Forms.FormTitle className={`${Margins.top8} ${Margins.bottom8}`}>Application ID</Forms.FormTitle>
<Heading className={`${Margins.top8} ${Margins.bottom8}`}>Application ID</Heading>
<CheckedTextInput
value={setting.appId}
onChange={async v => {
@ -101,7 +102,7 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
/>
{
isValidSnowflake(setting.appId) && <>
<Forms.FormTitle className={Margins.top8}>New activity type</Forms.FormTitle>
<Heading className={Margins.top8}>New activity type</Heading>
<Select
options={[
{ label: "Playing", value: ActivityType.PLAYING },
@ -120,7 +121,7 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
{
setting.newActivityType === ActivityType.STREAMING &&
<>
<Forms.FormTitle className={`${Margins.top8} ${Margins.bottom8}`}>Stream URL (must be YouTube or Twitch)</Forms.FormTitle>
<Heading className={`${Margins.top8} ${Margins.bottom8}`}>Stream URL (must be YouTube or Twitch)</Heading>
<CheckedTextInput
value={setting.newStreamUrl}
onChange={async v => {
@ -136,7 +137,7 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
{
setting.newActivityType !== ActivityType.STREAMING &&
<>
<Forms.FormTitle className={Margins.top8}>New name {setting.newActivityType === ActivityType.PLAYING && "(first line)"}</Forms.FormTitle>
<Heading className={Margins.top8}>New name {setting.newActivityType === ActivityType.PLAYING && "(first line)"}</Heading>
<TextInput
className={Margins.top8}
value={setting.newName}
@ -146,7 +147,7 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
/>
</>
}
<Forms.FormTitle className={Margins.top8}>New details {setting.newActivityType === ActivityType.PLAYING ? "(second line)" : "(first line)"}</Forms.FormTitle>
<Heading className={Margins.top8}>New details {setting.newActivityType === ActivityType.PLAYING ? "(second line)" : "(first line)"}</Heading>
<TextInput
className={Margins.top8}
value={setting.newDetails}
@ -154,7 +155,7 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
onChange(v, i, "newDetails");
}}
/>
<Forms.FormTitle className={Margins.top8}>New state {setting.newActivityType === ActivityType.PLAYING ? "(third line)" : "(second line)"}</Forms.FormTitle>
<Heading className={Margins.top8}>New state {setting.newActivityType === ActivityType.PLAYING ? "(third line)" : "(second line)"}</Heading>
<TextInput
className={Margins.top8}
value={setting.newState}
@ -166,7 +167,7 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
!setting.disableAssets &&
<>
<Forms.FormText style={{ fontSize: "1.05rem", fontWeight: "500" }} className={Margins.top8}>Large image</Forms.FormText>
<Forms.FormTitle className={Margins.top8}>Text {setting.newActivityType !== ActivityType.PLAYING && "(also third line)"}</Forms.FormTitle>
<Heading className={Margins.top8}>Text {setting.newActivityType !== ActivityType.PLAYING && "(also third line)"}</Heading>
<TextInput
className={Margins.top8}
value={setting.newLargeImageText}
@ -174,7 +175,7 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
onChange(v, i, "newLargeImageText");
}}
/>
<Forms.FormTitle className={Margins.top8}>URL</Forms.FormTitle>
<Heading className={Margins.top8}>URL</Heading>
<TextInput
className={Margins.top8}
value={setting.newLargeImageUrl}
@ -183,7 +184,7 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
}}
/>
<Forms.FormText style={{ fontSize: "1.05rem", fontWeight: "500" }} className={Margins.top8}>Small image</Forms.FormText>
<Forms.FormTitle className={Margins.top8}>Text</Forms.FormTitle>
<Heading className={Margins.top8}>Text</Heading>
<TextInput
className={Margins.top8}
value={setting.newSmallImageText}
@ -191,7 +192,7 @@ export function ReplaceSettings({ appIds, update, save }: SettingsProps) {
onChange(v, i, "newSmallImageText");
}}
/>
<Forms.FormTitle className={Margins.top8}>URL</Forms.FormTitle>
<Heading className={Margins.top8}>URL</Heading>
<TextInput
className={Margins.top8}
value={setting.newSmallImageUrl}

15
src/equicordplugins/sekaiStickers/Components/SekaiStickersModal.tsx
View file

@ -6,8 +6,9 @@
import { Flex } from "@components/Flex";
import { FormSwitch } from "@components/FormSwitch";
import { Heading } from "@components/Heading";
import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
import { Button, ChannelStore, Forms, React, SelectedChannelStore, Slider, Text, TextArea, UploadHandler } from "@webpack/common";
import { Button, ChannelStore, React, SelectedChannelStore, Slider, Text, TextArea, UploadHandler } from "@webpack/common";
import { characters } from "../characters.json";
import Canvas from "./Canvas";
@ -104,19 +105,19 @@ export default function SekaiStickersModal({ modalProps, settings }: { modalProp
<Flex flexDirection="row" style={{ paddingTop: 12 }}>
<div style={{ marginRight: 30 }}>
<Canvas draw={draw} id="SekaiCard_Canvas" />
<Forms.FormTitle>Text Y Pos</Forms.FormTitle>
<Heading>Text Y Pos</Heading>
<Slider minValue={0} maxValue={256} asValueChanges={va => { va = Math.round(va); setPosition({ x: position.x, y: curve ? 256 + fontSize * 3 - va : 256 - va }); }} initialValue={curve ? 256 - position.y + fontSize * 3 : 256 - position.y} orientation={"vertical"} onValueRender={va => String(Math.round(va))} />
<Forms.FormTitle>Text XZ Pos</Forms.FormTitle>
<Heading>Text XZ Pos</Heading>
<Slider minValue={0} maxValue={296} asValueChanges={va => { va = Math.round(va); setPosition({ y: position.y, x: va }); }} initialValue={position.x} orientation={"horizontal"} onValueRender={(v: number) => String(Math.round(v))} />
</div>
<div style={{ marginRight: 10, width: "30vw" }}>
<Forms.FormTitle>Text</Forms.FormTitle>
<Heading>Text</Heading>
<TextArea onChange={setText} placeholder={text} rows={4} spellCheck={false} />
<Forms.FormTitle>Rotation</Forms.FormTitle>
<Heading>Rotation</Heading>
<Slider markers={[-10, -5, 0, 5, 10]} stickToMarkers={false} minValue={-10} maxValue={10} asValueChanges={val => setRotate(val)} initialValue={rotate} keyboardStep={0.2} orientation={"horizontal"} onValueRender={(v: number) => String(v.toFixed(2))} />
<Forms.FormTitle>Font Size</Forms.FormTitle>
<Heading>Font Size</Heading>
<Slider minValue={10} asValueChanges={val => setFontSize(Math.round(val))} maxValue={100} initialValue={fontSize} keyboardStep={1} orientation={"horizontal"} onValueRender={(v: number) => String(Math.round(v))} />
<Forms.FormTitle>Spacing</Forms.FormTitle>
<Heading>Spacing</Heading>
<Slider markers={[18, 36, 72, 100]} stickToMarkers={false} minValue={18} maxValue={100} initialValue={spaceSize} asValueChanges={e => setSpaceSize(e)} onValueRender={e => String(Math.round(e))} />
<FormSwitch title="Enable curve" value={curve} onChange={val => setCurve(val)} />
<Button onClick={() => openModal(props => <CharSelectModal modalProps={props} setCharacter={setChracter} />)}>Switch Character</Button>

4
src/equicordplugins/soundBoardLogger/components/Icons.tsx
View file

@ -42,10 +42,10 @@ export function IconWithTooltip({ text, icon, onClick }) {
aria-haspopup="dialog"
aria-label={text}
size=""
look={Button.Looks.BLANK}
look={Button.Looks.LINK}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
innerClassName={ButtonWrapperClasses.button}
className={ButtonWrapperClasses.button}
onClick={onClick}
style={{ padding: "0 4px" }}
>

10
src/equicordplugins/soundBoardLogger/components/MoreUsersModal.tsx
View file

@ -4,10 +4,12 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { BaseText } from "@components/BaseText";
import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex";
import { HeadingPrimary } from "@components/Heading";
import { closeModal, ModalContent, ModalRoot, openModal } from "@utils/modal";
import { Clickable, Forms } from "@webpack/common";
import { Clickable } from "@webpack/common";
import { cl, getEmojiUrl, SoundLogEntry, User } from "../utils";
@ -30,7 +32,7 @@ export default function MoreUsersModal({ item, users, onClickUser, closeModal }:
src={getEmojiUrl(item.emoji)}
alt=""
/>
<Forms.FormTitle tag="h2" className={cl("more-soundId")}>{item.soundId}</Forms.FormTitle>
<HeadingPrimary className={cl("more-soundId")}>{item.soundId}</HeadingPrimary>
</div>
<div className={cl("more-users")}>
{users.map(user => {
@ -48,9 +50,9 @@ export default function MoreUsersModal({ item, users, onClickUser, closeModal }:
alt=""
style={{ cursor: "pointer" }}
/>
<Forms.FormText variant="text-xs/medium" style={{ cursor: "pointer" }}>{user.username}</Forms.FormText>
<BaseText size="xs" weight="medium" style={{ cursor: "pointer" }}>{user.username}</BaseText>
</Flex>
<Forms.FormText variant="text-xs/medium" style={{ cursor: "pointer" }}>Played {currentUser.plays.length} {currentUser.plays.length === 1 ? "time" : "times"}</Forms.FormText>
<BaseText size="xs" weight="medium" style={{ cursor: "pointer" }}>Played {currentUser.plays.length} {currentUser.plays.length === 1 ? "time" : "times"}</BaseText>
</div>
</Clickable>
);

7
src/equicordplugins/soundBoardLogger/components/SoundBoardLog.tsx
View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { BaseText } from "@components/BaseText";
import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex";
import { Margins } from "@utils/margins";
@ -11,7 +12,7 @@ import { classes, copyWithToast } from "@utils/misc";
import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
import { User } from "@vencord/discord-types";
import { findComponentByCodeLazy } from "@webpack";
import { Button, Clickable, Forms, Text, Tooltip, useEffect, UserUtils, useState } from "@webpack/common";
import { Button, Clickable, Text, Tooltip, useEffect, UserUtils, useState } from "@webpack/common";
import settings from "../settings";
import { clearLoggedSounds, getLoggedSounds } from "../store";
@ -128,7 +129,7 @@ export default function SoundBoardLog({ data, closeModal }) {
src={getEmojiUrl(item.emoji)}
className={cl("sound-emoji")}
/>
<Forms.FormText variant="text-xs/medium" className={cl("sound-id")}>{item.soundId}</Forms.FormText>
<BaseText size="xs" weight="medium" className={cl("sound-id")}>{item.soundId}</BaseText>
</Flex>
<UserSummaryItem
users={itemUsers.slice(0, avatarsMax)} // Trimmed array to the size of max
@ -173,7 +174,7 @@ export default function SoundBoardLog({ data, closeModal }) {
src="https://raw.githubusercontent.com/fres621/assets/main/shiggy.png"
height="200px"
/>
<Forms.FormText variant="text-sm/medium" style={{ color: "var(--text-muted)" }} className={Margins.bottom16}>No sounds logged yet. Join a voice chat to start logging!</Forms.FormText>
<BaseText size="sm" weight="medium" style={{ color: "var(--text-muted)" }} className={Margins.bottom16}>No sounds logged yet. Join a voice chat to start logging!</BaseText>
</div>
}
</ModalContent >

5
src/equicordplugins/soundBoardLogger/components/UserModal.tsx
View file

@ -5,12 +5,13 @@
*/
import { Flex } from "@components/Flex";
import { HeadingPrimary } from "@components/Heading";
import { CopyIcon } from "@components/Icons";
import { openUserProfile } from "@utils/discord";
import { Margins } from "@utils/margins";
import { classes, copyWithToast } from "@utils/misc";
import { closeModal, ModalContent, ModalRoot, openModal } from "@utils/modal";
import { Clickable, Forms, Text, Timestamp } from "@webpack/common";
import { Clickable, Text, Timestamp } from "@webpack/common";
import moment from "moment";
import { AvatarStyles, cl, downloadAudio, getEmojiUrl, playSound, SoundLogEntry, User, UserSummaryItem } from "../utils";
@ -41,7 +42,7 @@ export default function UserModal({ item, user, sounds, closeModal }: { item: So
alt=""
style={{ cursor: "pointer" }}
/>
<Forms.FormTitle tag="h2" className={cl("user-name")} style={{ textTransform: "none", cursor: "pointer" }}>{user.username}</Forms.FormTitle>
<HeadingPrimary className={cl("user-name")} style={{ textTransform: "none", cursor: "pointer" }}>{user.username}</HeadingPrimary>
</div>
</Clickable>
<Flex flexDirection="row" style={{ gap: "10px" }}>

3
src/equicordplugins/soundBoardLogger/settings.tsx
View file

@ -5,6 +5,7 @@
*/
import { definePluginSettings } from "@api/Settings";
import { Heading } from "@components/Heading";
import { OptionType } from "@utils/types";
import { Button, Forms, TextInput, useState } from "@webpack/common";
@ -47,7 +48,7 @@ const settings = definePluginSettings({
return (
<section>
<Forms.FormTitle>The amount of soundboard ids you want to save at a time (0 lets you save infinite)</Forms.FormTitle>
<Heading>The amount of soundboard ids you want to save at a time (0 lets you save infinite)</Heading>
<TextInput
type="number"
pattern="-?[0-9]+"

3
src/equicordplugins/statsfmPresence/index.tsx
View file

@ -6,6 +6,7 @@
import { definePluginSettings } from "@api/Settings";
import { getUserSettingLazy } from "@api/UserSettings";
import { HeadingSecondary } from "@components/Heading";
import { EquicordDevs } from "@utils/constants";
import { Logger } from "@utils/Logger";
import definePlugin, { OptionType } from "@utils/types";
@ -224,7 +225,7 @@ export default definePlugin({
settingsAboutComponent: () => (
<>
<Forms.FormTitle tag="h3">How does this work?</Forms.FormTitle>
<HeadingSecondary>How does this work?</HeadingSecondary>
<Forms.FormText>
Hey this is just here to explain how this works. By putting your stats.fm username in the settings, it will show what you're currently listening to on your discord profile. (this doesnt require an api but requires you to have your listening history public)
</Forms.FormText>

2
src/equicordplugins/themeLibrary/components/LikesComponent.tsx
View file

@ -82,7 +82,7 @@ export const LikesComponent = ({ themeId, likedThemes: initialLikedThemes }: { t
<Button onClick={() => handleLikeClick(themeId)}
size={Button.Sizes.MEDIUM}
color={Button.Colors.PRIMARY}
look={Button.Looks.OUTLINED}
look={Button.Looks.LINK}
disabled={themeId === "preview"}
style={{ marginLeft: "8px" }}
>

7
src/equicordplugins/themeLibrary/components/ThemeCard.tsx
View file

@ -6,6 +6,7 @@
import { generateId } from "@api/Commands";
import { Settings } from "@api/Settings";
import { HeadingPrimary, HeadingTertiary } from "@components/Heading";
import { OpenExternalIcon } from "@components/Icons";
import { proxyLazy } from "@utils/lazy";
import { Margins } from "@utils/margins";
@ -64,7 +65,7 @@ export const ThemeCard: React.FC<ThemeCardProps> = ({ theme, themeLinks, likedTh
openModal(modalProps => (
<ModalRoot {...modalProps} size={ModalSize.SMALL}>
<ModalHeader>
<Forms.FormTitle tag="h4">Hold on!</Forms.FormTitle>
<HeadingTertiary>Hold on!</HeadingTertiary>
</ModalHeader>
<ModalContent>
<Forms.FormText style={{ padding: "8px" }}>
@ -114,9 +115,9 @@ export const ThemeCard: React.FC<ThemeCardProps> = ({ theme, themeLinks, likedTh
return (
<Card style={{ padding: ".5rem", marginBottom: ".5em", marginTop: ".5em", display: "flex", flexDirection: "column", backgroundColor: "var(--background-base-lower-alt)" }} key={theme.id}>
<Forms.FormTitle tag="h2" style={{ overflowWrap: "break-word", marginTop: 8 }} className="vce-theme-text">
<HeadingPrimary style={{ overflowWrap: "break-word", marginTop: 8 }} className="vce-theme-text">
{theme.name}
</Forms.FormTitle>
</HeadingPrimary>
<Forms.FormText className="vce-theme-text">
{Parser.parse(theme.description)}
</Forms.FormText>

29
src/equicordplugins/themeLibrary/components/ThemeInfoModal.tsx
View file

@ -5,6 +5,7 @@
*/
import { CodeBlock } from "@components/CodeBlock";
import { Heading, HeadingTertiary } from "@components/Heading";
import { Heart } from "@components/Heart";
import { copyToClipboard } from "@utils/clipboard";
import { openInviteModal } from "@utils/discord";
@ -48,10 +49,10 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
return (
<ModalRoot {...props}>
<ModalHeader>
<Forms.FormTitle tag="h4">{type} Details</Forms.FormTitle>
<HeadingTertiary>{type} Details</HeadingTertiary>
</ModalHeader>
<ModalContent>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>{authors.length > 1 ? "Authors" : "Author"}</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>{authors.length > 1 ? "Authors" : "Author"}</Heading>
<div style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
<div>
<div style={{ display: "flex", alignItems: "center" }}>
@ -72,19 +73,19 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
</div>
{version && (
<>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Version</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Version</Heading>
<Forms.FormText>
{version}
</Forms.FormText>
</>
)}
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Likes</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Likes</Heading>
<Forms.FormText>
{likes === 0 ? `Nobody liked this ${type} yet.` : `${likes} users liked this ${type}!`}
</Forms.FormText>
{donate && (
<>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Donate</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Donate</Heading>
<Forms.FormText>
You can support the author by donating below!
</Forms.FormText>
@ -98,7 +99,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
)}
{(guild || invite) && (
<>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Support Server</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Support Server</Heading>
{guild && (
<Forms.FormText>
{guild.name}
@ -106,7 +107,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
)}
<Forms.FormText>
<Button
color={Button.Colors.BRAND_NEW}
color={Button.Colors.BRAND}
look={Button.Looks.FILLED}
className={Margins.top8}
onClick={async e => {
@ -120,14 +121,14 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
</Forms.FormText>
</>
)}
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Source</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Source</Heading>
<Forms.FormText>
<Button
disabled={!theme.content || theme.id === "preview"}
onClick={() => openModal(modalProps => (
<ModalRoot {...modalProps} size={ModalSize.LARGE}>
<ModalHeader>
<Forms.FormTitle tag="h4">Theme Source</Forms.FormTitle>
<HeadingTertiary>Theme Source</HeadingTertiary>
</ModalHeader>
<ModalContent>
<Forms.FormText style={{
@ -139,7 +140,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
<ModalFooter>
<Button
color={Button.Colors.RED}
look={Button.Looks.OUTLINED}
look={Button.Looks.LINK}
onClick={() => modalProps.onClose()}
>
Close
@ -158,7 +159,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
</Forms.FormText>
{tags && (
<>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Tags</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Tags</Heading>
<Forms.FormText>
{tags.map(tag => (
<span className="vce-theme-info-tag" key={"vce-theme-info-tag"}>
@ -184,14 +185,14 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
<ModalFooter>
<Button
color={Button.Colors.RED}
look={Button.Looks.OUTLINED}
look={Button.Looks.LINK}
onClick={() => props.onClose()}
>
Close
</Button>
<Button
color={Button.Colors.GREEN}
look={Button.Looks.OUTLINED}
look={Button.Looks.LINK}
className={classes("vce-button", Margins.right8)}
disabled={!theme.content || theme.id === "preview"}
onClick={async () => {
@ -205,7 +206,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
openModal(modalProps => (
<ModalRoot {...modalProps} size={ModalSize.SMALL}>
<ModalHeader>
<Forms.FormTitle tag="h4">Conflict!</Forms.FormTitle>
<HeadingTertiary>Conflict!</HeadingTertiary>
</ModalHeader>
<ModalContent>
<Forms.FormText style={{

11
src/equicordplugins/themeLibrary/components/ThemeTab.tsx
View file

@ -9,6 +9,7 @@ import "./styles.css";
import * as DataStore from "@api/DataStore";
import { Settings } from "@api/Settings";
import { ErrorCard } from "@components/ErrorCard";
import { HeadingPrimary, HeadingTertiary } from "@components/Heading";
import { OpenExternalIcon } from "@components/Icons";
import { SettingsTab, wrapTab } from "@components/settings";
import { Logger } from "@utils/Logger";
@ -163,7 +164,7 @@ function ThemeTab() {
<>
{hideWarningCard ? null : (
<ErrorCard>
<Forms.FormTitle tag="h4">Want your theme removed?</Forms.FormTitle>
<HeadingTertiary>Want your theme removed?</HeadingTertiary>
<Forms.FormText className={Margins.top8}>
If you want your theme(s) permanently removed, please open an issue on <a href="https://github.com/Faf4a/plugins/issues/new?labels=removal&projects=&template=request_removal.yml&title=Theme+Removal">GitHub <OpenExternalIcon height={16} width={16} /></a>
</Forms.FormText>
@ -180,13 +181,13 @@ function ThemeTab() {
</ErrorCard>
)}
<div className={classes(Margins.bottom8, Margins.top16)}>
<Forms.FormTitle tag="h2"
<HeadingPrimary
style={{
overflowWrap: "break-word",
marginTop: 8,
}}>
{searchValue.status === SearchStatus.LIKED ? "Most Liked" : "Newest Additions"}
</Forms.FormTitle>
</HeadingPrimary>
{themes.slice(0, 2).map((theme: Theme) => (
<ThemeCard
@ -199,12 +200,12 @@ function ThemeTab() {
/>
))}
</div>
<Forms.FormTitle tag="h2" style={{
<HeadingPrimary style={{
overflowWrap: "break-word",
marginTop: 20,
}}>
Themes
</Forms.FormTitle>
</HeadingPrimary>
<div className={classes(Margins.bottom20, "vce-search-grid")}>
<TextInput value={searchValue.value} placeholder="Search for a theme..." onChange={onSearch} />
<div className={InputStyles.inputWrapper}>

5
src/equicordplugins/themeLibrary/utils/settings.tsx
View file

@ -7,6 +7,7 @@
import * as DataStore from "@api/DataStore";
import { definePluginSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import { HeadingSecondary } from "@components/Heading";
import { OpenExternalIcon } from "@components/Icons";
import { copyToClipboard } from "@utils/clipboard";
import { OptionType } from "@utils/types";
@ -55,7 +56,7 @@ export const settings = definePluginSettings({
return (
<section>
<Forms.FormTitle tag="h3" style={{ marginTop: 0, marginBottom: 8 }}>ThemeLibrary Auth</Forms.FormTitle>
<HeadingSecondary style={{ marginTop: 0, marginBottom: 8 }}>ThemeLibrary Auth</HeadingSecondary>
<div className={cl("button-grid")}>
<Button onClick={() => authorizeUser()}>
Authorize with ThemeLibrary
@ -67,7 +68,7 @@ export const settings = definePluginSettings({
Deauthorize ThemeLibrary
</Button>
</div>
<Forms.FormTitle tag="h3" style={{ marginTop: 8, marginBottom: 8 }}>Theme Removal</Forms.FormTitle>
<HeadingSecondary style={{ marginTop: 8, marginBottom: 8 }}>Theme Removal</HeadingSecondary>
<Forms.FormText style={{ marginTop: 0, marginBottom: 8 }}> All Theme Authors are given credit in the theme info, no source has been modified, if you wish your theme to be removed anyway, open an Issue by clicking below.</Forms.FormText>
<div className={cl("button-grid")}>
<Button onClick={() => VencordNative.native.openExternal("https://github.com/Faf4a/plugins/issues/new?labels=removal&projects=&template=request_removal.yml&title=Theme+Removal")}>

11
src/equicordplugins/timezones/TimezoneModal.tsx
View file

@ -6,9 +6,10 @@
import * as DataStore from "@api/DataStore";
import { classNameFactory } from "@api/Styles";
import { HeadingPrimary, HeadingSecondary } from "@components/Heading";
import { Margins } from "@utils/margins";
import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
import { Button, Forms, SearchableSelect, useEffect, useMemo, useState } from "@webpack/common";
import { Button, SearchableSelect, useEffect, useMemo, useState } from "@webpack/common";
import { DATASTORE_KEY, getSystemTimezone, resolveUserTimezone, settings, timezones } from ".";
import { setTimezone, setUserDatabaseTimezone } from "./database";
@ -41,17 +42,17 @@ export function SetTimezoneModal({ userId, modalProps, database }: { userId: str
return (
<ModalRoot {...modalProps}>
<ModalHeader className={cl("modal-header")}>
<Forms.FormTitle tag="h2">
<HeadingPrimary>
Timezones
</Forms.FormTitle>
</HeadingPrimary>
<ModalCloseButton onClick={modalProps.onClose} />
</ModalHeader>
<ModalContent className={cl("modal-content")}>
<section className={Margins.bottom16}>
<Forms.FormTitle tag="h3">
<HeadingSecondary>
Select Timezone
</Forms.FormTitle>
</HeadingSecondary>
<SearchableSelect
options={options}

5
src/equicordplugins/vcNarratorCustom/index.tsx
View file

@ -6,6 +6,7 @@
import { playAudio } from "@api/AudioPlayer";
import { definePluginSettings } from "@api/Settings";
import { Heading } from "@components/Heading";
import { Devs, EquicordDevs } from "@utils/constants";
import { Margins } from "@utils/margins";
import { wordsToTitle } from "@utils/text";
@ -397,9 +398,9 @@ export default definePlugin({
here
</a>
</Forms.FormText>
<Forms.FormTitle className={Margins.top20} tag="h3">
<Heading className={Margins.top20} tag="h3">
Play Example Sounds
</Forms.FormTitle>
</Heading>
<div
style={{
display: "grid",

13
src/equicordplugins/vcPanelSettings/index.tsx
View file

@ -7,12 +7,13 @@
import "./style.css";
import { definePluginSettings } from "@api/Settings";
import { Heading } from "@components/Heading";
import { Link } from "@components/Link";
import { Devs } from "@utils/constants";
import { identity } from "@utils/misc";
import definePlugin, { OptionType } from "@utils/types";
import { findByPropsLazy } from "@webpack";
import { FluxDispatcher, Forms, Select, Slider, Text, useEffect, useState } from "@webpack/common";
import { FluxDispatcher, Select, Slider, Text, useEffect, useState } from "@webpack/common";
const configModule = findByPropsLazy("getOutputVolume");
const settings = definePluginSettings({
@ -98,7 +99,7 @@ function OutputVolumeComponent() {
return (
<>
{settings.store.showOutputVolumeHeader && <Forms.FormTitle>Output volume</Forms.FormTitle>}
{settings.store.showOutputVolumeHeader && <Heading>Output volume</Heading>}
<Slider maxValue={200} minValue={0} onValueRender={v => `${v.toFixed(0)}%`} initialValue={outputVolume} asValueChanges={volume => {
FluxDispatcher.dispatch({
type: "AUDIO_SET_OUTPUT_VOLUME",
@ -119,7 +120,7 @@ function InputVolumeComponent() {
return (
<>
{settings.store.showInputVolumeHeader && <Forms.FormTitle>Input volume</Forms.FormTitle>}
{settings.store.showInputVolumeHeader && <Heading>Input volume</Heading>}
<Slider maxValue={100} minValue={0} initialValue={inputVolume} asValueChanges={volume => {
FluxDispatcher.dispatch({
type: "AUDIO_SET_INPUT_VOLUME",
@ -140,7 +141,7 @@ function OutputDeviceComponent() {
return (
<>
{settings.store.showOutputDeviceHeader && <Forms.FormTitle>Output device</Forms.FormTitle>}
{settings.store.showOutputDeviceHeader && <Heading>Output device</Heading>}
<Select options={Object.values(configModule.getOutputDevices()).map((device: any /* i am NOT typing this*/) => {
return { value: device.id, label: settings.store.showOutputDeviceHeader ? device.name : `🔊 ${device.name}` };
})}
@ -168,7 +169,7 @@ function InputDeviceComponent() {
return (
<div style={{ marginTop: "10px" }}>
{settings.store.showInputDeviceHeader && <Forms.FormTitle>Input device</Forms.FormTitle>}
{settings.store.showInputDeviceHeader && <Heading>Input device</Heading>}
<Select options={Object.values(configModule.getInputDevices()).map((device: any /* i am NOT typing this*/) => {
return { value: device.id, label: settings.store.showInputDeviceHeader ? device.name : `🎤 ${device.name}` };
})}
@ -196,7 +197,7 @@ function VideoDeviceComponent() {
return (
<div style={{ marginTop: "10px" }}>
{settings.store.showVideoDeviceHeader && <Forms.FormTitle>Camera</Forms.FormTitle>}
{settings.store.showVideoDeviceHeader && <Heading>Camera</Heading>}
<Select options={Object.values(configModule.getVideoDevices()).map((device: any /* i am NOT typing this*/) => {
return { value: device.id, label: settings.store.showVideoDeviceHeader ? device.name : `📷 ${device.name}` };
})}

14
src/equicordplugins/viewRawVariant/index.tsx
View file

@ -6,7 +6,9 @@
import { NavContextMenuPatchCallback } from "@api/ContextMenu";
import { CodeBlock } from "@components/CodeBlock";
import { Divider } from "@components/Divider";
import ErrorBoundary from "@components/ErrorBoundary";
import { Heading } from "@components/Heading";
import { Devs } from "@utils/constants";
import { getIntlMessage } from "@utils/discord";
import { Margins } from "@utils/margins";
@ -21,7 +23,7 @@ import {
} from "@utils/modal";
import definePlugin from "@utils/types";
import { Message } from "@vencord/discord-types";
import { Forms, Menu, Text } from "@webpack/common";
import { Menu, Text } from "@webpack/common";
type CustomMessage = Message & {
editHistory?: any;
@ -70,20 +72,18 @@ function openViewRawModal(obj: any, type: string, isMessage?: boolean) {
<div style={{ padding: "16px 0" }}>
{isMessage && (
<>
<Forms.FormTitle tag="h5">
<Heading>
Content
</Forms.FormTitle>
</Heading>
<CodeBlock
content={obj.content}
lang="markdown"
/>
<Forms.FormDivider
className={Margins.bottom20}
/>
<Divider className={Margins.bottom20} />
</>
)}
<Forms.FormTitle tag="h5">{type} Data</Forms.FormTitle>
<Heading>{type} Data</Heading>
<CodeBlock
content={JSON.stringify(obj, null, 4)}
lang="json"

2
src/equicordplugins/voiceButtons/utils.tsx
View file

@ -31,7 +31,7 @@ function VoiceUserButton({ user, tooltip, icon, onClick }: { user: User; tooltip
<Button
size={Button.Sizes.MIN}
color={Button.Colors.TRANSPARENT}
look={Button.Looks.BLANK}
look={Button.Looks.LINK}
disabled={disabled}
onClick={e => {
e.preventDefault();

11
src/equicordplugins/webpackTarball/index.tsx
View file

@ -6,12 +6,13 @@
import { definePluginSettings } from "@api/Settings";
import { FormSwitch } from "@components/FormSwitch";
import { Heading, HeadingPrimary } from "@components/Heading";
import { Devs } from "@utils/constants";
import { makeLazy } from "@utils/lazy";
import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
import definePlugin, { OptionType } from "@utils/types";
import { findByProps, wreq } from "@webpack";
import { Button, Flex, Forms, Text, Timestamp, useState } from "@webpack/common";
import { Button, Flex, Text, Timestamp, useState } from "@webpack/common";
import TarFile from "./tar";
import * as Webpack from "./webpack";
@ -97,9 +98,9 @@ function TarModal({ modalProps, close }: { modalProps: ModalProps; close(): void
return (
<ModalRoot {...modalProps}>
<ModalHeader>
<Forms.FormTitle tag="h2">
<HeadingPrimary>
Webpack Tarball
</Forms.FormTitle>
</HeadingPrimary>
<Text variant="text-md/normal">
<Timestamp timestamp={new Date(builtAt)} isInline={false}>
{"Build number "}
@ -111,9 +112,9 @@ function TarModal({ modalProps, close }: { modalProps: ModalProps; close(): void
<ModalContent>
<div style={{ marginTop: "8px", marginBottom: "24px" }}>
<Forms.FormTitle>
<Heading>
Lazy chunks
</Forms.FormTitle>
</Heading>
<Flex align={Flex.Align.CENTER}>
<Text
variant="text-md/normal"

7
src/equicordplugins/whosWatching/index.tsx
View file

@ -8,6 +8,7 @@ import { definePluginSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex";
import { Heading, HeadingSecondary } from "@components/Heading";
import { EquicordDevs } from "@utils/constants";
import { getIntlMessage, openUserProfile } from "@utils/discord";
import { Margins } from "@utils/margins";
@ -47,7 +48,7 @@ function Watching({ userIds, guildId }: WatchingProps): JSX.Element {
<div className={cl("content")}>
{userIds.length ?
(<>
<Forms.FormTitle>{getIntlMessage("SPECTATORS", { numViewers: userIds.length })}</Forms.FormTitle>
<Heading>{getIntlMessage("SPECTATORS", { numViewers: userIds.length })}</Heading>
<Flex flexDirection="column" style={{ gap: 6 }} >
{users.map(user => (
<Flex key={user.id} flexDirection="row" style={{ gap: 6, alignContent: "center" }} className={cl("user")} >
@ -118,9 +119,9 @@ export default definePlugin({
<>
<div {...props}>{props.children}</div>
<div className={classes(cl("spectators_panel"), Margins.top8)}>
<Forms.FormTitle tag="h3" style={{ marginTop: 8, marginBottom: 0, textTransform: "uppercase" }}>
<HeadingSecondary style={{ marginTop: 8, marginBottom: 0, textTransform: "uppercase" }}>
{getIntlMessage("SPECTATORS", { numViewers: userIds.length })}
</Forms.FormTitle>
</HeadingSecondary>
{users.length ?
<>
<UserSummaryItem

63
src/plugins/_api/badges/modals.tsx
View file

@ -6,10 +6,9 @@
import { Flex } from "@components/Flex";
import { Heart } from "@components/Heart";
import { DonateButton, ErrorBoundary, VCDonateButton } from "@components/index";
import { BaseText, DonateButton, ErrorBoundary, HeadingPrimary, VCDonateButton } from "@components/index";
import { Margins } from "@utils/margins";
import { closeModal, ModalContent, ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal";
import { Forms } from "@webpack/common";
export function VencordDonorModal() {
const modalKey = openModal(props => (
@ -19,19 +18,18 @@ export function VencordDonorModal() {
}}>
<ModalRoot {...props}>
<ModalHeader>
<Flex style={{ width: "100%", justifyContent: "center" }}>
<Forms.FormTitle
tag="h2"
style={{
width: "100%",
textAlign: "center",
margin: 0
}}
>
<HeadingPrimary
style={{
width: "100%",
textAlign: "center",
margin: 0
}}
>
<Flex style={{ justifyContent: "center", alignItems: "center", gap: "0.5em" }}>
<Heart />
Vencord Donor
</Forms.FormTitle>
</Flex>
</Flex>
</HeadingPrimary>
</ModalHeader>
<ModalContent>
<Flex>
@ -49,12 +47,12 @@ export function VencordDonorModal() {
/>
</Flex>
<div style={{ padding: "1em" }}>
<Forms.FormText>
<BaseText>
This Badge is a special perk for Vencord Donors
</Forms.FormText>
<Forms.FormText className={Margins.top20}>
Please consider supporting the development of Vencord by becoming a donor. It would mean a lot!
</Forms.FormText>
</BaseText>
<BaseText className={Margins.top20}>
Please consider supporting the development of Vencord by becoming a donor. It would mean a lot!!
</BaseText>
</div>
</ModalContent>
<ModalFooter>
@ -76,19 +74,18 @@ export function EquicordDonorModal() {
}}>
<ModalRoot {...props}>
<ModalHeader>
<Flex style={{ width: "100%", justifyContent: "center" }}>
<Forms.FormTitle
tag="h2"
style={{
width: "100%",
textAlign: "center",
margin: 0
}}
>
<HeadingPrimary
style={{
width: "100%",
textAlign: "center",
margin: 0
}}
>
<Flex style={{ justifyContent: "center", alignItems: "center", gap: "0.5em" }}>
<Heart />
Equicord Donor
</Forms.FormTitle>
</Flex>
</Flex>
</HeadingPrimary>
</ModalHeader>
<ModalContent>
<Flex>
@ -106,12 +103,12 @@ export function EquicordDonorModal() {
/>
</Flex>
<div style={{ padding: "1em" }}>
<Forms.FormText>
<BaseText>
This Badge is a special perk for Equicord (Not Vencord) Donors
</Forms.FormText>
<Forms.FormText className={Margins.top20}>
</BaseText>
<BaseText className={Margins.top20}>
Please consider supporting the development of Equicord by becoming a donor. It would mean a lot! :3
</Forms.FormText>
</BaseText>
</div>
</ModalContent>
<ModalFooter>

3
src/plugins/arRPC.web/index.tsx
View file

@ -18,6 +18,7 @@
import { popNotice, showNotice } from "@api/Notices";
import { migratePluginSettings } from "@api/Settings";
import { HeadingSecondary } from "@components/Heading";
import { Link } from "@components/Link";
import { Devs } from "@utils/constants";
import definePlugin, { ReporterTestable } from "@utils/types";
@ -56,7 +57,7 @@ export default definePlugin({
settingsAboutComponent: () => (
<>
<Forms.FormTitle tag="h3">How to use arRPC</Forms.FormTitle>
<HeadingSecondary>How to use arRPC</HeadingSecondary>
<Forms.FormText>
<Link href="https://github.com/OpenAsar/arrpc/tree/main#server">Follow the instructions in the GitHub repo</Link> to get the server running, and then enable the plugin.
</Forms.FormText>

7
src/plugins/betterSessions/components/RenameModal.tsx
View file

@ -16,8 +16,9 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { Heading, HeadingTertiary } from "@components/Heading";
import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
import { Button, Forms, React, TextInput } from "@webpack/common";
import { Button, React, TextInput } from "@webpack/common";
import { KeyboardEvent } from "react";
import { SessionInfo } from "../types";
@ -42,11 +43,11 @@ export function RenameModal({ props, session, state }: { props: ModalProps, sess
return (
<ModalRoot {...props}>
<ModalHeader>
<Forms.FormTitle tag="h4">Rename</Forms.FormTitle>
<HeadingTertiary>Rename</HeadingTertiary>
</ModalHeader>
<ModalContent>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>New device name</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>New device name</Heading>
<TextInput
style={{ marginBottom: "10px" }}
placeholder={getDefaultName(session.client_info)}

5
src/plugins/clientTheme/components/Settings.tsx
View file

@ -6,6 +6,7 @@
import { classNameFactory } from "@api/Styles";
import { ErrorCard } from "@components/ErrorCard";
import { HeadingPrimary, HeadingSecondary } from "@components/Heading";
import { Margins } from "@utils/margins";
import { findByCodeLazy, findStoreLazy } from "@webpack";
import { Button, ColorPicker, Forms, ThemeStore, useStateFromStores } from "@webpack/common";
@ -67,7 +68,7 @@ export function ThemeSettingsComponent() {
<div className={cl("settings")}>
<div className={cl("container")}>
<div className={cl("settings-labels")}>
<Forms.FormTitle tag="h3">Theme Color</Forms.FormTitle>
<HeadingSecondary>Theme Color</HeadingSecondary>
<Forms.FormText>Add a color to your Discord client theme</Forms.FormText>
</div>
<ColorPicker
@ -79,7 +80,7 @@ export function ThemeSettingsComponent() {
</div>
{(contrastWarning || nitroThemeEnabled) && (<>
<ErrorCard className={Margins.top8}>
<Forms.FormTitle tag="h2">Your theme won't look good!</Forms.FormTitle>
<HeadingPrimary>Your theme won't look good!</HeadingPrimary>
{contrastWarning && <Forms.FormText>{">"} Selected color won't contrast well with text</Forms.FormText>}
{nitroThemeEnabled && <Forms.FormText>{">"} Nitro themes aren't supported</Forms.FormText>}

3
src/plugins/customRPC/index.tsx
View file

@ -21,6 +21,7 @@ import { getUserSettingLazy } from "@api/UserSettings";
import { Divider } from "@components/Divider";
import { ErrorCard } from "@components/ErrorCard";
import { Flex } from "@components/Flex";
import { Heading } from "@components/Heading";
import { Link } from "@components/Link";
import { Devs } from "@utils/constants";
import { isTruthy } from "@utils/guards";
@ -391,7 +392,7 @@ export default definePlugin({
className={classes(Margins.top16, Margins.bottom16)}
style={{ padding: "1em" }}
>
<Forms.FormTitle>Notice</Forms.FormTitle>
<Heading>Notice</Heading>
<Forms.FormText>Activity Sharing isn't enabled, people won't be able to see your custom rich presence!</Forms.FormText>
<Button

3
src/plugins/decor/ui/modals/ChangeDecorationModal.tsx
View file

@ -7,6 +7,7 @@
import { Button as NewButton } from "@components/Button";
import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex";
import { Heading } from "@components/Heading";
import { openInviteModal } from "@utils/discord";
import { Margins } from "@utils/margins";
import { copyWithToast } from "@utils/misc";
@ -201,7 +202,7 @@ function ChangeDecorationModal(props: ModalProps) {
avatarDecorationOverride={avatarDecorationOverride}
user={UserStore.getCurrentUser()}
/>
{isActiveDecorationPreset && <Forms.FormTitle className="">Part of the {activeDecorationPreset.name} Preset</Forms.FormTitle>}
{isActiveDecorationPreset && <Heading className="">Part of the {activeDecorationPreset.name} Preset</Heading>}
{typeof activeSelectedDecoration === "object" &&
<Text
variant="text-sm/semibold"

5
src/plugins/decor/ui/modals/CreateDecorationModal.tsx
View file

@ -5,6 +5,7 @@
*/
import ErrorBoundary from "@components/ErrorBoundary";
import { Heading } from "@components/Heading";
import { Link } from "@components/Link";
import { openInviteModal } from "@utils/discord";
import { Margins } from "@utils/margins";
@ -90,7 +91,7 @@ function CreateDecorationModal(props: ModalProps) {
<div className={cl("create-decoration-modal-form")}>
{error !== null && <Text color="text-danger" variant="text-xs/normal">{error.message}</Text>}
<section>
<Forms.FormTitle tag="h5">File</Forms.FormTitle>
<Heading>File</Heading>
<FileUpload
filename={file?.name}
placeholder="Choose a file"
@ -103,7 +104,7 @@ function CreateDecorationModal(props: ModalProps) {
</Forms.FormText>
</section>
<section>
<Forms.FormTitle tag="h5">Name</Forms.FormTitle>
<Heading>Name</Heading>
<TextInput
placeholder="Companion Cube"
value={name}

5
src/plugins/experiments/index.tsx
View file

@ -8,6 +8,7 @@ import { definePluginSettings } from "@api/Settings";
import { disableStyle, enableStyle } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary";
import { ErrorCard } from "@components/ErrorCard";
import { HeadingPrimary, HeadingSecondary } from "@components/Heading";
import { Paragraph } from "@components/Paragraph";
import { Devs, IS_MAC } from "@utils/constants";
import { Margins } from "@utils/margins";
@ -131,7 +132,7 @@ export default definePlugin({
settingsAboutComponent: () => {
return (
<React.Fragment>
<Forms.FormTitle tag="h3">More Information</Forms.FormTitle>
<HeadingSecondary>More Information</HeadingSecondary>
<Paragraph size="md">
You can open Discord's DevTools via {" "}
<div className={KbdStyles.combo} style={{ display: "inline-flex" }}>
@ -146,7 +147,7 @@ export default definePlugin({
WarningCard: ErrorBoundary.wrap(() => (
<ErrorCard id="vc-experiments-warning-card" className={Margins.bottom16}>
<Forms.FormTitle tag="h2">Hold on!!</Forms.FormTitle>
<HeadingPrimary>Hold on!!</HeadingPrimary>
<Forms.FormText>
Experiments are unreleased Discord features. They might not work, or even break your client or get your account disabled.

3
src/plugins/expressionCloner/index.tsx
View file

@ -19,6 +19,7 @@
import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
import { migratePluginSettings } from "@api/Settings";
import { CheckedTextInput } from "@components/CheckedTextInput";
import { Heading } from "@components/Heading";
import { Devs } from "@utils/constants";
import { getGuildAcronym } from "@utils/discord";
import { Logger } from "@utils/Logger";
@ -186,7 +187,7 @@ function CloneModal({ data }: { data: Sticker | Emoji; }) {
return (
<>
<Forms.FormTitle className={Margins.top20}>Custom Name</Forms.FormTitle>
<Heading className={Margins.top20}>Custom Name</Heading>
<CheckedTextInput
value={name}
onChange={v => {

7
src/plugins/fakeProfileThemes/index.tsx
View file

@ -22,6 +22,7 @@ import "./style.css";
import { definePluginSettings } from "@api/Settings";
import { Divider } from "@components/Divider";
import ErrorBoundary from "@components/ErrorBoundary";
import { HeadingSecondary } from "@components/Heading";
import { Devs } from "@utils/constants";
import { fetchUserProfile } from "@utils/discord";
import { Margins } from "@utils/margins";
@ -115,7 +116,7 @@ function SettingsAboutComponent() {
return (
<section>
<Forms.FormTitle tag="h3">Usage</Forms.FormTitle>
<HeadingSecondary>Usage</HeadingSecondary>
<Forms.FormText>
After enabling this plugin, you will see custom colors in
the profiles of other people using compatible plugins.{" "}
@ -131,7 +132,7 @@ function SettingsAboutComponent() {
<Divider
className={classes(Margins.top8, Margins.bottom8)}
/>
<Forms.FormTitle tag="h3">Color pickers</Forms.FormTitle>
<HeadingSecondary>Color pickers</HeadingSecondary>
<Flex
direction={Flex.Direction.HORIZONTAL}
style={{ gap: "1rem" }}
@ -178,7 +179,7 @@ function SettingsAboutComponent() {
<Divider
className={classes(Margins.top8, Margins.bottom8)}
/>
<Forms.FormTitle tag="h3">Preview</Forms.FormTitle>
<HeadingSecondary>Preview</HeadingSecondary>
<div className="vc-fpt-preview">
<ProfileModal
user={UserStore.getCurrentUser()}

3
src/plugins/ignoreActivities/index.tsx
View file

@ -8,6 +8,7 @@ import { definePluginSettings, Settings } from "@api/Settings";
import { getUserSettingLazy } from "@api/UserSettings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex";
import { HeadingSecondary } from "@components/Heading";
import { Devs } from "@utils/constants";
import { Margins } from "@utils/margins";
import definePlugin, { OptionType } from "@utils/types";
@ -132,7 +133,7 @@ function IdsListComponent(props: { setValue: (value: string) => void; }) {
return (
<section>
<Forms.FormTitle tag="h3">Filter List</Forms.FormTitle>
<HeadingSecondary>Filter List</HeadingSecondary>
<Forms.FormText className={Margins.bottom8}>Comma separated list of activity IDs to filter (Useful for filtering specific RPC activities and CustomRPC</Forms.FormText>
<TextInput
type="text"

9
src/plugins/invisibleChat.desktop/components/DecryptionModal.tsx
View file

@ -16,6 +16,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { Heading, HeadingTertiary } from "@components/Heading";
import {
ModalContent,
ModalFooter,
@ -23,7 +24,7 @@ import {
ModalRoot,
openModal,
} from "@utils/modal";
import { Button, Forms, React, TextInput } from "@webpack/common";
import { Button, React, TextInput } from "@webpack/common";
import { decrypt } from "../index";
@ -34,13 +35,13 @@ export function DecModal(props: any) {
return (
<ModalRoot {...props}>
<ModalHeader>
<Forms.FormTitle tag="h4">Decrypt Message</Forms.FormTitle>
<HeadingTertiary>Decrypt Message</HeadingTertiary>
</ModalHeader>
<ModalContent>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Message with Encryption</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Message with Encryption</Heading>
<TextInput defaultValue={encryptedMessage} disabled={true}></TextInput>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Password</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Password</Heading>
<TextInput
style={{ marginBottom: "20px" }}
onChange={setPassword}

11
src/plugins/invisibleChat.desktop/components/EncryptionModal.tsx
View file

@ -17,6 +17,7 @@
*/
import { FormSwitch } from "@components/FormSwitch";
import { Heading, HeadingTertiary } from "@components/Heading";
import { insertTextIntoChatInputBox } from "@utils/discord";
import {
ModalContent,
@ -26,7 +27,7 @@ import {
ModalRoot,
openModal,
} from "@utils/modal";
import { Button, Forms, React, TextInput } from "@webpack/common";
import { Button, React, TextInput } from "@webpack/common";
import { encrypt } from "../index";
@ -41,24 +42,24 @@ function EncModal(props: ModalProps) {
return (
<ModalRoot {...props}>
<ModalHeader>
<Forms.FormTitle tag="h4">Encrypt Message</Forms.FormTitle>
<HeadingTertiary>Encrypt Message</HeadingTertiary>
</ModalHeader>
<ModalContent>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Secret</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Secret</Heading>
<TextInput
onChange={(e: string) => {
setSecret(e);
}}
/>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Cover (2 or more Words!!)</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Cover (2 or more Words!!)</Heading>
<TextInput
disabled={noCover}
onChange={(e: string) => {
setCover(e);
}}
/>
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Password</Forms.FormTitle>
<Heading style={{ marginTop: "10px" }}>Password</Heading>
<TextInput
style={{ marginBottom: "20px" }}
defaultValue={"password"}

3
src/plugins/lastfmRichPresence/index.tsx
View file

@ -18,6 +18,7 @@
import { definePluginSettings } from "@api/Settings";
import { getUserSettingLazy } from "@api/UserSettings";
import { HeadingSecondary } from "@components/Heading";
import { Link } from "@components/Link";
import { Devs } from "@utils/constants";
import { Logger } from "@utils/Logger";
@ -188,7 +189,7 @@ export default definePlugin({
settingsAboutComponent: () => (
<>
<Forms.FormTitle tag="h3">How to get an API key</Forms.FormTitle>
<HeadingSecondary>How to get an API key</HeadingSecondary>
<Forms.FormText>
An API key is required to fetch your current track. To get one, you can
visit <Link href="https://www.last.fm/api/account/create">this page</Link> and

10
src/plugins/messageLinkEmbeds/index.tsx
View file

@ -20,6 +20,7 @@ import { addMessageAccessory, removeMessageAccessory } from "@api/MessageAccesso
import { updateMessage } from "@api/MessageUpdater";
import { definePluginSettings } from "@api/Settings";
import { getUserSettingLazy } from "@api/UserSettings";
import { BaseText } from "@components/BaseText";
import { Devs } from "@utils/constants.js";
import { classes } from "@utils/misc";
import { Queue } from "@utils/Queue";
@ -37,7 +38,6 @@ import {
PermissionsBits,
PermissionStore,
RestAPI,
Text,
UserStore
} from "@webpack/common";
import { JSX } from "react";
@ -296,10 +296,10 @@ function ChannelMessageEmbedAccessory({ message, channel }: MessageEmbedProps):
rawDescription: "",
color: "var(--background-base-lower)",
author: {
name: <Text variant="text-xs/medium" tag="span">
name: <BaseText size="xs" weight="medium" tag="span">
<span>{channelLabel} - </span>
{Parser.parse(channel.isDM() ? `<@${dmReceiver.id}>` : `<#${channel.id}>`)}
</Text>,
</BaseText>,
iconProxyURL: iconUrl
}
}}
@ -329,7 +329,7 @@ function AutomodEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
return <AutoModEmbed
channel={channel}
childrenAccessories={
<Text color="text-muted" variant="text-xs/medium" tag="span" className={`${EmbedClasses.embedAuthor} ${EmbedClasses.embedMargin}`}>
<BaseText size="xs" weight="medium" color="text-muted" tag="span" className={`${EmbedClasses.embedAuthor} ${EmbedClasses.embedMargin}`}>
{iconUrl && <img src={iconUrl} className={EmbedClasses.embedAuthorIcon} alt="" />}
<span>
<span>{channelLabel} - </span>
@ -338,7 +338,7 @@ function AutomodEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
: Parser.parse(`<#${channel.id}>`)
}
</span>
</Text>
</BaseText>
}
compact={compact}
content={

5
src/plugins/mutualGroupDMs/index.tsx
View file

@ -18,6 +18,7 @@
import "./style.css";
import { BaseText } from "@components/BaseText";
import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
import { isNonNullish } from "@utils/guards";
@ -25,7 +26,7 @@ import { Logger } from "@utils/Logger";
import definePlugin from "@utils/types";
import { Channel, User } from "@vencord/discord-types";
import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, Text, useMemo, UserStore } from "@webpack/common";
import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, useMemo, UserStore } from "@webpack/common";
import { JSX } from "react";
const SelectedChannelActionCreators = findByPropsLazy("selectPrivateChannel");
@ -73,7 +74,7 @@ function renderClickableGDMs(mutualDms: Channel[], onClose: () => void) {
</Avatar>
<div className={MutualsListClasses.details}>
<div className={MutualsListClasses.name}>{getGroupDMName(c)}</div>
<Text variant="text-xs/medium">{c.recipients.length + 1} Members</Text>
<BaseText size="xs" weight="medium">{c.recipients.length + 1} Members</BaseText>
</div>
</Clickable>
));

Some files were not shown because too many files have changed in this diff Show more