merge unconflict

Improved NxComponents

src/components/NxComponents.css

@@ -6,6 +6,15 @@
     color: var(--text-secondary);
 }
 
+.nx-card-small {
+    padding: 12px !important;
+}
+
+.nx-card-grand {
+    background-color: var(--background-base-lower) !important;
+    box-shadow: var(--elevation-low);
+}
+
 .nx-card-warning {
     background-color: var(--background-feedback-warning) !important;
 }
@@ -28,11 +37,6 @@
     background-color: unset !important;
 }
 
-.nx-card-grand {
-    background-color: var(--background-base-lower) !important;
-    box-shadow: var(--elevation-low);
-}
-
 .nx-title {
     font-family: var(--font-display);
     font-size: 16px;
@@ -47,4 +51,8 @@
 
 .nx-text {
     color: var(--text-secondary);
+}
+
+.nx-text-small {
+    color: var(--text-muted) !important;
 }

src/components/NxComponents.tsx

@@ -16,34 +16,46 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-/*
- * Before you go complaining that this component is unecessary,
- * This code was made *before* Vencord updated their UI, and it's
- * been used in so many places that deprecating it is not worth
- * the hastle - also cry about it.
-*/
-
 import "@components/NxComponents.css";
 
 import { classes } from "@utils/misc";
 import { Text } from "@webpack/common";
+import { HTMLProps, PropsWithChildren } from "react";
 
-export function NxCard({ children, className = "", ...props }) {
+
+
+interface NxCardProps extends PropsWithChildren<Omit<HTMLProps<HTMLDivElement>, "size">> {
+    variant?: "default" | "grand" | "warning" | "help" | "positive" | "danger" | "special";
+    size?: "small" | "medium";
+}
+
+export function NxCard(props: NxCardProps) {
+    props.variant ??= "default";
+    props.size ??= "medium";
     return (
-        <div className={`${"nx-card"} ${className}`} {...props}>
-            {children}
+        <div {...props} className={classes(props.className, "nx-card", props.size !== "medium" && "nx-card-small", props.variant !== "default" && `nx-card-${props.variant}`)}>
+            {props.children}
         </div>
     );
 }
 
-export function NxTitle({ children, className = "", ...props }) {
+
+
+export function NxTitle(props: PropsWithChildren<HTMLProps<HTMLElement>>) {
     return (
-        <Text variant="heading-md/bold" className={classes("nx-title", className)} {...props}>{children}</Text>
+        <Text variant="heading-md/bold" {...props} className={classes(props.className, "nx-title")}>{props.children}</Text>
     );
 }
 
-export function NxText({ children, className = "", ...props }) {
+
+
+interface NxTextProps extends PropsWithChildren<Omit<HTMLProps<HTMLElement>, "size">> {
+    size?: "small" | "medium";
+}
+
+export function NxText(props: NxTextProps) {
+    props.size ??= "medium";
     return (
-        <Text variant="text-md/normal" className={classes("nx-text", className)} {...props}>{children}</Text>
+        <Text {...props} variant={props.size === "medium" ? "text-md/normal" : "text-sm/normal"} className={classes(props.className, "nx-text", props.size === "small" && "nx-text-small")}>{props.children}</Text>
     );
 }

src/components/settings/QuickAction.tsx

@@ -8,7 +8,7 @@ import "./QuickAction.css";
 
 import { classNameFactory } from "@api/Styles";
 import { InfoIcon } from "@components/Icons";
-import { NxCard, NxTitle } from "@components/NxComponents";
+import { NxCard, NxText, NxTitle } from "@components/NxComponents";
 import { openInviteModal } from "@utils/discord";
 import { classes } from "@utils/misc";
 import { closeAllModals } from "@utils/modal";
@@ -59,8 +59,8 @@ export function QuickActionContainer({ title, children, columns = "3" }: PropsWi
                                         <img height="64px" width="64px" src="https://cdn.discordapp.com/emojis/1348781960453161011.gif" draggable="false"></img>
                                         <p>No one's around to help.</p>
                                     </div>
-                                    <NxCard className="nx-card-help">
-                                        If you're looking for actual help, please go ask in our Discord server (not Vencord's)! We'll always be there to help you out.
+                                    <NxCard variant="help">
+                                        <NxText>If you're looking for actual help, please go ask in our Discord server (not Vencord's)! We'll always be there to help you out.</NxText>
                                     </NxCard>
                                 </>
                             ),

src/components/settings/tabs/plugins/PluginModal.tsx

@@ -88,7 +88,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
 
     function renderSettings() {
         if (!hasSettings || !plugin.options)
-            return <NxCard className={classes("nx-card-help", Margins.top16)}>
+            return <NxCard variant="help" className={Margins.top16}>
                 <NxText>There are no settings for this plugin.</NxText>
             </NxCard>;
 
@@ -118,7 +118,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
         });
 
         return (
-            <NxCard className={classes(Margins.top16, Margins.bottom8, "nx-card-grand")}>
+            <NxCard variant="grand" className={classes(Margins.top16, Margins.bottom8)}>
                 <div className="vc-plugins-settings">
                     {options}
                 </div>

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

@@ -53,7 +53,7 @@ function ReloadRequiredCard({ required }: { required: boolean; }) {
                 </NxText>
             </NxCard>
             {required ? (
-                <NxCard className={classes("nx-card-warning", Margins.bottom16)}>
+                <NxCard variant="warning" className={Margins.bottom16}>
                     <Flex flexDirection="row" style={{ justifyContent: "space-between" }}>
                         <div>
                             <NxTitle>Restart required!</NxTitle>

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

@@ -28,8 +28,8 @@ import { Button, Text } from "@webpack/common";
 export function BackupAndRestoreTab() {
     return (
         <SettingsTab title="Backup & Restore">
-            <NxCard className={`nx-card-warning ${Margins.bottom16}`}>
-                <NxText>Importing a settings file will overwrite your current settings.</NxText>
+            <NxCard variant="warning" size="small" className={Margins.bottom16}>
+                <NxText size="small">Importing a settings file will overwrite your current settings.</NxText>
             </NxCard>
             <Text variant="text-md/normal" className={Margins.bottom8}>
                 You can import and export your Not-Nexulien settings as a JSON file.

src/components/settings/tabs/themes/LocalThemesTab.tsx

@@ -13,7 +13,6 @@ import { QuickAction, QuickActionContainer } from "@components/settings/QuickAct
 import { openPluginModal } from "@components/settings/tabs/plugins/PluginModal";
 import { UserThemeHeader } from "@main/themes";
 import { Margins } from "@utils/margins";
-import { classes } from "@utils/misc";
 import { findLazy } from "@webpack";
 import { Forms, useEffect, useRef, useState } from "@webpack/common";
 import ClientThemePlugin from "plugins/clientTheme";
@@ -104,7 +103,7 @@ export function LocalThemesTab() {
                 <NxText>If using the BD site, click on "Download" and place the downloaded <code className="nx-code-new">.theme.css</code> file into your themes folder.</NxText>
             </NxCard>
 
-            <NxCard className={classes("nx-card-help", Margins.bottom16)}>
+            <NxCard variant="help" className={Margins.bottom16}>
                 <NxTitle>External Resources</NxTitle>
                 <NxText>
                     For security reasons, loading resources (styles, fonts, images, ...) from most sites is blocked.

src/components/settings/tabs/themes/OnlineThemesTab.tsx

@@ -7,7 +7,6 @@
 import { useSettings } from "@api/Settings";
 import { NxCard, NxText, NxTitle } from "@components/NxComponents";
 import { Margins } from "@utils/margins";
-import { classes } from "@utils/misc";
 import { Forms, TextArea, useState } from "@webpack/common";
 
 export function OnlineThemesTab() {
@@ -28,14 +27,14 @@ export function OnlineThemesTab() {
 
     return (
         <>
-            <NxCard className={`${classes("nx-card-warning", Margins.bottom16)}`}>
+            <NxCard variant="warning" className={Margins.bottom16}>
                 <NxText>
                     This section is for advanced users. If you are having difficulties using it, use the
                     Local Themes tab instead.
                 </NxText>
             </NxCard>
             <NxCard className="vc-settings-card">
-                <NxTitle tag="h5">Paste links to css files here</NxTitle>
+                <NxTitle>Paste links to css files here</NxTitle>
                 <NxText>
                     <span>&mdash;&nbsp;One link per line</span><br></br>
                     <span>&mdash;&nbsp;You can prefix lines with <code className="nx-code-new">@light</code> or <code className="nx-code-new">@dark</code> to toggle them based on your Discord theme</span><br></br>

src/components/settings/tabs/updater/Components.tsx

@@ -81,7 +81,7 @@ export function Updatable(props: CommonProps) {
 
     return (
         <>
-            <NxCard className={classes(isOutdated ? "nx-card-warning" : (!updates && updateError ? "nx-card-danger" : "nx-card-positive"), Margins.bottom16)}>
+            <NxCard variant={isOutdated ? "warning" : (!updates && updateError ? "danger" : "positive")} className={Margins.bottom16}>
                 {!updates && updateError ? (
                     <>
                         <Forms.FormText>Failed to check for updates. Check the console for more info</Forms.FormText>

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

@@ -153,11 +153,17 @@ function VencordSettings() {
 
                 <Forms.FormSection className={Margins.top16} title="Settings" tag="h5">
                     {showHint ?
+<<<<<<< HEAD
                         <NxCard className={`nx-card-help ${Margins.bottom16}`}>
                             <NxText>
                                 If you'd like to change the position of the Not-Nexulien section, change the header card size, or just hide this hint, you can do so in the
+=======
+                        <NxCard variant="help" size="small" className={Margins.bottom16}>
+                            <NxText size="small">
+                                If you'd like to change the position of the Nexulien section, change the header card size, or just hide this hint, you can do so in the
+>>>>>>> 3258c7ff9ca64ba4e293a76120f11fa2c6b2bb58
                                 {" "}<button
-                                    style={{ all: undefined, color: "var(--text-link)", display: "inline-block", backgroundColor: "transparent", padding: 0, fontSize: 16 }}
+                                    style={{ all: undefined, color: "var(--text-link)", display: "inline-block", backgroundColor: "transparent", padding: 0, fontSize: 14 }}
                                     onClick={() => openPluginModal(Vencord.Plugins.plugins.Settings)}
                                 >
                                     settings of the Settings plugin
@@ -215,8 +221,8 @@ function HeaderCard() {
 
     return (
         <>
-            {headerCardSize !== "none" ?
-                <NxCard className={classes(cl("card", "header", headerCardSize === "minimal" ? "header-minimal" : ""), "nx-card-grand")}>
+            {headerCardSize !== "none" &&
+                <NxCard className={classes(cl("card", "header", headerCardSize === "minimal" && "header-minimal"), "nx-card-grand")}>
                     <div>
                         <span className={cl("logo-container")} onClick={() => nexulien()}>
                             <span className={cl("not-text")}>Not-</span>
@@ -234,12 +240,12 @@ function HeaderCard() {
 
                         {headerCardSize === "default" ? <NxText>
                             {/*                  ↓ Factual Information               */}
-                            <span>...the best (worst) discord client mod.</span><br></br><br></br>
+                            <span>...the best (worst) discord client mod.</span><br /><br />
                             <span>Nexulien doesn't need donations! Please go support <a href="https://github.com/sponsors/Vendicated" target="_blank" rel="noreferrer">Vendicated</a> instead!</span>
                             <span>Go support the <a href="https://github.com/nexulien/nexulien">original project</a>, this is not affiliated</span>
                         </NxText> : <></>}
 
-                        <div className={cl("buttonRow", headerCardSize === "minimal" ? "buttonRow-minimal" : "")}>
+                        <div className={cl("buttonRow", headerCardSize === "minimal" && "buttonRow-minimal")}>
                             <Button
                                 size={headerCardSize === "minimal" ? Button.Sizes.SMALL : Button.Sizes.MEDIUM}
                                 onClick={() => window.open("https://github.com/Not-Nexulien")}
@@ -262,9 +268,9 @@ function HeaderCard() {
                         </div>
                     </div>
 
-                    {headerCardSize === "default" ? <NxMascot /> : <></>}
+                    {headerCardSize === "default" && <NxMascot />}
                 </NxCard>
-                : <></>}
+            }
         </>
     );
 }

src/plugins/_api/badges/BadgeModal.tsx

@@ -10,7 +10,7 @@ import { classNameFactory } from "@api/Styles";
 import { Flex } from "@components/Flex";
 import { Heart } from "@components/Heart";
 import { Link } from "@components/Link";
-import { NxCard } from "@components/NxComponents";
+import { NxCard, NxText } from "@components/NxComponents";
 import DonateButton from "@components/settings/DonateButton";
 import { classes } from "@utils/misc";
 import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
@@ -20,7 +20,11 @@ import { NxSpark } from "./NxSpark";
 
 const cl = classNameFactory("nx-badge-modal-");
 
+<<<<<<< HEAD
 export function BadgeModal(badge: Record<"tooltip" | "title" | "name" | "badge" | "description" | "description2" | "link" | "linkdesc", string>, props: ModalProps, nxBadge: boolean, nnxBadge: boolean) {
+=======
+export function BadgeModal({ badge, props, nxBadge }: { badge: Record<"tooltip" | "badge", string>, props: ModalProps, nxBadge: boolean; }) {
+>>>>>>> 3258c7ff9ca64ba4e293a76120f11fa2c6b2bb58
     return (
         <ModalRoot {...props} className={classes(cl("root"), !nxBadge ? cl("root-vc") : "")}>
             <ModalHeader>
@@ -41,7 +45,7 @@ export function BadgeModal(badge: Record<"tooltip" | "title" | "name" | "badge"
                 </Flex>
             </ModalHeader>
             <ModalContent>
-                <NxCard className={classes(cl("header"), "nx-card-grand")}>
+                <NxCard variant="grand" className={cl("header")}>
                     <span className={classes(cl("badge"), !nxBadge ? cl("vc-badge") : "")}>
                         <img src={badge.badge} draggable="false"></img>
                     </span>
@@ -65,15 +69,15 @@ export function BadgeModal(badge: Record<"tooltip" | "title" | "name" | "badge"
                         </Forms.FormText>
                     </div>
                 </NxCard>
-                <NxCard className={cl("description")}>
-                    <Forms.FormText variant="text-sm/normal">
+                <NxCard size="small" className={cl("description")}>
+                    <NxText size="small">
                         {!nxBadge ?
                             "Please consider supporting the development of Vencord by becoming a donor! It would mean a lot to them." :
                             !nnxBadge ?
                                 "Currently the only way to get a badge is by asking @zoid.one, or getting a PR accepted in the assets repo." :
                                 badge.description2 || "Currently the only way to get one is by asking @defautluser2, or getting a PR accepted in the assets repo."
                         }
-                    </Forms.FormText>
+                    </NxText>
                 </NxCard>
             </ModalContent>
             <ModalFooter>

src/plugins/_api/badges/badgeModal.css

@@ -49,14 +49,6 @@
     align-self: center;
 }
 
-.nx-badge-modal-description {
-    padding: 12px;
-}
-
-.nx-badge-modal-description div {
-    color: var(--text-muted) !important;
-}
-
 .nx-badge-modal-root-vc {
     background: linear-gradient(var(--nx-vc-pink-background), transparent 50%), var(--modal-background);
 }

src/plugins/_api/badges/index.tsx

@@ -211,11 +211,15 @@ export default definePlugin({
                         closeModal(modalKey);
                         VencordNative.native.openExternal("https://github.com/sponsors/Vendicated");
                     }}>
+<<<<<<< HEAD
                         {
                             //                       ↓ nxBadge?
                             //                             ↓ !nxBadge?
                             BadgeModal(badge, props, false, false)
                         }
+=======
+                        <BadgeModal badge={badge} props={props} nxBadge={false}></BadgeModal>
+>>>>>>> 3258c7ff9ca64ba4e293a76120f11fa2c6b2bb58
                     </ErrorBoundary>
                 ));
             },
@@ -242,11 +246,15 @@ export default definePlugin({
                         closeModal(modalKey);
                         VencordNative.native.openExternal("https://github.com/not-nexulien/Not-Nexulien/blob/main/src/plugins/_api/badges/index.tsx");
                     }}>
+<<<<<<< HEAD
                         {
                             //                       ↓ nxBadge?
                             //                             ↓ !nxBadge?
                             BadgeModal(badge, props, true, false)
                         }
+=======
+                        <BadgeModal badge={badge} props={props} nxBadge={true}></BadgeModal>
+>>>>>>> 3258c7ff9ca64ba4e293a76120f11fa2c6b2bb58
                     </ErrorBoundary>
                 ));
             },