Migrate Some BaseText To Paragraph

src/components/ThemeSettings/ThemesTab.tsx

@@ -20,13 +20,13 @@ 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 { Paragraph } from "@components/Paragraph";
 import { AddonCard, openPluginModal, QuickAction, QuickActionCard, SettingsTab, wrapTab } from "@components/settings";
 import { OnlineThemeCard } from "@components/settings/OnlineThemeCard";
 import { CspBlockedUrls, useCspErrors } from "@utils/cspViolations";
@@ -470,7 +470,7 @@ function ThemesTab() {
                 <section>
                     <Heading>Online Themes</Heading>
                     <Card className="vc-settings-theme-add-card">
-                        <BaseText>Make sure to use direct links to files (raw or github.io)!</BaseText>
+                        <Paragraph>Make sure to use direct links to files (raw or github.io)!</Paragraph>
                         <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>
@@ -584,11 +584,11 @@ export function CspErrorCard() {
     return (
         <ErrorCard className="vc-settings-card">
             <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>
+            <Paragraph>Some images, styles, or fonts were blocked because they come from disallowed domains.</Paragraph>
+            <Paragraph>It is highly recommended to move them to GitHub or Imgur. But you may also allow domains if you fully trust them.</Paragraph>
+            <Paragraph>
                 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.
-            </BaseText>
+            </Paragraph>
 
             <Heading className={classes(Margins.top16, Margins.bottom8)}>Blocked URLs</Heading>
             <div className="vc-settings-csp-list">
@@ -608,10 +608,10 @@ export function CspErrorCard() {
             {hasImgurHtmlDomain && (
                 <>
                     <Divider className={classes(Margins.top8, Margins.bottom16)} />
-                    <BaseText>
+                    <Paragraph>
                         Imgur links should be direct links in the form of <code>https://i.imgur.com/...</code>
-                    </BaseText>
-                    <BaseText>To obtain a direct link, right-click the image and select "Copy image address".</BaseText>
+                    </Paragraph>
+                    <Paragraph>To obtain a direct link, right-click the image and select "Copy image address".</Paragraph>
                 </>
             )}
         </ErrorCard>
@@ -624,9 +624,9 @@ function UserscriptThemesTab() {
             <Card className="vc-settings-card">
                 <Heading>Themes are not supported on the Userscript!</Heading>
 
-                <BaseText>
+                <Paragraph>
                     You can instead install themes with the <Link href={getStylusWebStoreUrl()}>Stylus extension</Link>!
-                </BaseText>
+                </Paragraph>
             </Card>
         </SettingsTab>
     );

src/components/settings/tabs/changelog/index.tsx

@@ -6,12 +6,12 @@
 
 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 { Paragraph } from "@components/Paragraph";
 import { SettingsTab, wrapTab } from "@components/settings/tabs/BaseTab";
 import { Margins } from "@utils/margins";
 import { useAwaiter } from "@utils/react";
@@ -491,13 +491,13 @@ function ChangelogContent() {
 
     return (
         <>
-            <BaseText className={Margins.bottom16}>
+            <Paragraph className={Margins.bottom16}>
                 View the most recent changes to Equicord. This fetches commits
                 directly from the repository to show you what's new.
-            </BaseText>
+            </Paragraph>
 
             <Heading>Repository</Heading>
-            <BaseText className={Margins.bottom16}>
+            <Paragraph className={Margins.bottom16}>
                 {repoPending ? (
                     repo
                 ) : repoErr ? (
@@ -512,7 +512,7 @@ function ChangelogContent() {
                     {shortGitHash()}
                 </span>
                 )
-            </BaseText>
+            </Paragraph>
 
             <div className="vc-changelog-controls">
                 <Button
@@ -584,14 +584,14 @@ function ChangelogContent() {
             {error && (
                 <ErrorCard style={{ padding: "1em", marginBottom: "1em" }}>
                     <p>{error}</p>
-                    <BaseText
+                    <Paragraph
                         style={{
                             marginTop: "0.5em",
                             color: "var(--text-muted)",
                         }}
                     >
                         Make sure you have an internet connection and try again.
-                    </BaseText>
+                    </Paragraph>
                 </ErrorCard>
             )}
 
@@ -650,11 +650,11 @@ function ChangelogContent() {
                 !isLoading &&
                 !error && (
                     <Card className="vc-changelog-empty">
-                        <BaseText>
+                        <Paragraph>
                             No commits available ahead of your current version.
                             Click "Fetch from Repository" to check for new
                             changes.
-                        </BaseText>
+                        </Paragraph>
                     </Card>
                 )
             )}
@@ -670,10 +670,10 @@ function ChangelogContent() {
                         Update Logs ({changelogHistory.length}{" "}
                         {changelogHistory.length === 1 ? "log" : "logs"})
                     </Heading>
-                    <BaseText className={Margins.bottom16}>
+                    <Paragraph className={Margins.bottom16}>
                         Previous update sessions with their commit history and
                         plugin changes.
-                    </BaseText>
+                    </Paragraph>
 
                     <div className="vc-changelog-history-list">
                         {changelogHistory.map(log => (

src/components/settings/tabs/sync/CloudTab.tsx

@@ -18,7 +18,6 @@
 
 import { showNotification } from "@api/Notifications";
 import { Settings, useSettings } from "@api/Settings";
-import { BaseText } from "@components/BaseText";
 import { CheckedTextInput } from "@components/CheckedTextInput";
 import { Divider } from "@components/Divider";
 import { FormSwitch } from "@components/FormSwitch";
@@ -164,9 +163,9 @@ function CloudTab() {
                     }}
                 />
                 <Heading>Backend URL</Heading>
-                <BaseText className={Margins.bottom8}>
+                <Paragraph className={Margins.bottom8}>
                     Which backend to use when using cloud integrations.
-                </BaseText>
+                </Paragraph>
                 <CheckedTextInput
                     key={`backendUrl-${inputKey}`}
                     value={settings.cloud.url}

src/equicordplugins/clientSideBlock/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import { definePluginSettings } from "@api/Settings";
-import { BaseText } from "@components/BaseText";
+import { Paragraph } from "@components/Paragraph";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { GuildMember } from "@vencord/discord-types";
@@ -109,7 +109,7 @@ function isRoleAllBlockedMembers(roleId, guildId) {
 function hiddenReplyComponent() {
     switch (settings.store.blockedReplyDisplay) {
         case "displayText":
-            return <BaseText size="sm" tag="p" style={{ marginTop: "0px", marginBottom: "0px" }}><i>↓ Replying to blocked message</i></BaseText>;
+            return <Paragraph style={{ marginTop: "0px", marginBottom: "0px" }}><i>↓ Replying to blocked message</i></Paragraph>;
         case "hideReply":
             return null;
     }

src/equicordplugins/iRememberYou/index.tsx

@@ -8,8 +8,8 @@ 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 { Paragraph } from "@components/Paragraph";
 import { EquicordDevs } from "@utils/constants";
 import { openUserProfile } from "@utils/discord";
 import * as Modal from "@utils/modal";
@@ -246,13 +246,13 @@ class DataUI {
                     {this.renderUserAvatar(user)}
                     <Tooltip text={this.userTooltipText(user)}>
                         {props =>
-                            <BaseText {...props}>{user.tag} {allowExtra.owner && user.extra?.isOwner && "(owner)"}</BaseText>
+                            <Paragraph {...props}>{user.tag} {allowExtra.owner && user.extra?.isOwner && "(owner)"}</Paragraph>
                         }
                     </Tooltip>
                 </Flex>
             </span>
 
-            <span style={{ height: "min-content" }}><BaseText style={{ opacity: 0.75 }}>{user.id}</BaseText></span>
+            <span style={{ height: "min-content" }}><Paragraph style={{ opacity: 0.75 }}>{user.id}</Paragraph></span>
         </Flex>;
     }
 
@@ -280,7 +280,7 @@ class DataUI {
                         <TextArea value={JSON.stringify(usersCollection, null, "\t")} onChange={() => { }} rows={20} />
                     </Modal.ModalContent>
                 </Modal.ModalRoot>)}>
-                    <BaseText style={{ cursor: "pointer" }}>Open editor</BaseText>
+                    <Paragraph style={{ cursor: "pointer" }}>Open editor</Paragraph>
                 </Clickable>
 
                 <Clickable onClick={

src/plugins/_api/badges/modals.tsx

@@ -6,7 +6,7 @@
 
 import { Flex } from "@components/Flex";
 import { Heart } from "@components/Heart";
-import { BaseText, DonateButton, ErrorBoundary, HeadingPrimary, VCDonateButton } from "@components/index";
+import { DonateButton, ErrorBoundary, HeadingPrimary, Paragraph, VCDonateButton } from "@components/index";
 import { Margins } from "@utils/margins";
 import { closeModal, ModalContent, ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal";
 
@@ -47,12 +47,12 @@ export function VencordDonorModal() {
                         />
                     </Flex>
                     <div style={{ padding: "1em" }}>
-                        <BaseText>
+                        <Paragraph>
                             This Badge is a special perk for Vencord Donors
-                        </BaseText>
-                        <BaseText className={Margins.top20}>
+                        </Paragraph>
+                        <Paragraph className={Margins.top20}>
                             Please consider supporting the development of Vencord by becoming a donor. It would mean a lot!!
-                        </BaseText>
+                        </Paragraph>
                     </div>
                 </ModalContent>
                 <ModalFooter>
@@ -103,12 +103,12 @@ export function EquicordDonorModal() {
                         />
                     </Flex>
                     <div style={{ padding: "1em" }}>
-                        <BaseText>
+                        <Paragraph>
                             This Badge is a special perk for Equicord (Not Vencord) Donors
-                        </BaseText>
-                        <BaseText className={Margins.top20}>
+                        </Paragraph>
+                        <Paragraph className={Margins.top20}>
                             Please consider supporting the development of Equicord by becoming a donor. It would mean a lot! :3
-                        </BaseText>
+                        </Paragraph>
                     </div>
                 </ModalContent>
                 <ModalFooter>