From c8887b881d2dd0e01adef14393f1d53c8f889421 Mon Sep 17 00:00:00 2001
From: prism <snawalt420@proton.me>
Date: Mon, 15 Dec 2025 16:35:59 +0100
Subject: [PATCH] (PluginModal) minor tweaks (#563)

* fix(Settings): add section header for Equicord Settings

* minor modal tweaks

* lint

* shrink size

* hard cap card size

---------

Co-authored-by: thororen1234 <78185467+thororen1234@users.noreply.github.com>
---
 .../settings/tabs/plugins/LinkIconButton.css  |  2 +-
 .../settings/tabs/plugins/PluginModal.css     | 39 +++++++++--
 .../settings/tabs/plugins/PluginModal.tsx     | 70 +++++++++----------
 .../tabs/plugins/components/styles.css        |  4 +-
 .../equicordHelper/pluginCards.css            |  3 +-
 5 files changed, 75 insertions(+), 43 deletions(-)

diff --git a/src/components/settings/tabs/plugins/LinkIconButton.css b/src/components/settings/tabs/plugins/LinkIconButton.css
index 97db07802..cae80ef09 100644
--- a/src/components/settings/tabs/plugins/LinkIconButton.css
+++ b/src/components/settings/tabs/plugins/LinkIconButton.css
@@ -9,4 +9,4 @@
 .vc-settings-modal-links {
     display: flex;
     gap: 0.2em;
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/tabs/plugins/PluginModal.css b/src/components/settings/tabs/plugins/PluginModal.css
index ee2bec39e..f6261c6ad 100644
--- a/src/components/settings/tabs/plugins/PluginModal.css
+++ b/src/components/settings/tabs/plugins/PluginModal.css
@@ -1,7 +1,38 @@
-.vc-plugin-modal-info {
-    align-items: center;
+.vc-plugin-modal-header {
+    align-items: flex-start;
+    position: relative;
+    padding: 16px 16px 0 24px;
+}
+
+.vc-plugin-modal-header-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
+}
+
+.vc-plugin-modal-header-trailing {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+}
+
+.vc-plugin-modal-title {
+    color: var(--text-strong);
+    padding-right: 32px;
 }
 
 .vc-plugin-modal-description {
-    flex-grow: 1;
-}
\ No newline at end of file
+    color: var(--text-subtle);
+    padding-right: 60px;
+}
+
+.vc-plugin-modal-links {
+    display: flex;
+    gap: 4px;
+    margin-left: auto;
+}
diff --git a/src/components/settings/tabs/plugins/PluginModal.tsx b/src/components/settings/tabs/plugins/PluginModal.tsx
index 36855558e..9af902c12 100644
--- a/src/components/settings/tabs/plugins/PluginModal.tsx
+++ b/src/components/settings/tabs/plugins/PluginModal.tsx
@@ -34,7 +34,7 @@ import { classes, isObjectEmpty } from "@utils/misc";
 import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { OptionType, Plugin } from "@utils/types";
 import { User } from "@vencord/discord-types";
-import { findByPropsLazy } from "@webpack";
+import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
 import { Clickable, FluxDispatcher, React, Toasts, Tooltip, useEffect, UserStore, UserSummaryItem, UserUtils, useState } from "@webpack/common";
 import { Constructor } from "type-fest";
 
@@ -47,6 +47,7 @@ import { GithubButton, WebsiteButton } from "./LinkIconButton";
 const cl = classNameFactory("vc-plugin-modal-");
 
 const AvatarStyles = findByPropsLazy("moreUsers", "emptyUser", "avatarContainer", "clickableAvatar");
+const CloseButton = findComponentByCodeLazy("CLOSE_BUTTON_LABEL");
 const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
 
 interface PluginModalProps extends ModalProps {
@@ -158,29 +159,26 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
 
     return (
         <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM}>
-            <ModalHeader separator={false} className={Margins.bottom8}>
-                <BaseText size="xl" weight="bold" style={{ flexGrow: 1 }}>{plugin.name}</BaseText>
-                <ModalCloseButton onClick={onClose} />
+            <ModalHeader separator={false} className={cl("header")}>
+                <div className={cl("header-content")}>
+                    <BaseText size="lg" weight="semibold" className={cl("title")}>{plugin.name}</BaseText>
+                    <BaseText size="sm" className={cl("description")}>{plugin.description}</BaseText>
+                    {!!plugin.settingsAboutComponent && (
+                        <div className={Margins.top8}>
+                            <ErrorBoundary message="An error occurred while rendering this plugin's custom Info Component">
+                                <plugin.settingsAboutComponent />
+                            </ErrorBoundary>
+                        </div>
+                    )}
+                </div>
+                <div className={cl("header-trailing")}>
+                    <CloseButton onClick={onClose} />
+                </div>
             </ModalHeader>
 
             <ModalContent className={Margins.bottom16}>
                 <section>
-                    <Flex className={cl("info")}>
-                        <Paragraph className={cl("description")}>{plugin.description}</Paragraph>
-                        {!pluginMeta.userPlugin && (
-                            <div className="vc-settings-modal-links">
-                                <WebsiteButton
-                                    text="View more info"
-                                    href={isEquicordPlugin ? `https://equicord.org/plugins/${plugin.name}` : `https://vencord.dev/plugins/${plugin.name}`}
-                                />
-                                <GithubButton
-                                    text="View source code"
-                                    href={`https://github.com/${gitRemote}/tree/main/${pluginMeta.folderName}`}
-                                />
-                            </div>
-                        )}
-                    </Flex>
-                    <BaseText size="lg" weight="semibold" className={classes(Margins.top8, Margins.bottom8)}>Authors</BaseText>
+                    <BaseText size="lg" weight="semibold" color="text-strong" className={Margins.bottom8}>Authors</BaseText>
                     <div style={{ width: "fit-content" }}>
                         <ErrorBoundary noop>
                             <UserSummaryItem
@@ -207,25 +205,15 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                     </div>
                 </section>
 
-                {!!plugin.settingsAboutComponent && (
-                    <div className={Margins.top16}>
-                        <section>
-                            <ErrorBoundary message="An error occurred while rendering this plugin's custom Info Component">
-                                <plugin.settingsAboutComponent />
-                            </ErrorBoundary>
-                        </section>
-                    </div>
-                )}
-
                 <section>
-                    <BaseText size="lg" weight="semibold" className={classes(Margins.top16, Margins.bottom8)}>Settings</BaseText>
+                    <BaseText size="lg" weight="semibold" color="text-strong" className={classes(Margins.top16, Margins.bottom8)}>Settings</BaseText>
                     {renderSettings()}
                 </section>
             </ModalContent>
-            {
-                hasSettings && <ModalFooter>
+            {hasSettings && (
+                <ModalFooter>
                     <Flex flexDirection="column" style={{ width: "100%" }}>
-                        <Flex style={{ justifyContent: "space-between" }}>
+                        <Flex style={{ justifyContent: "space-between", alignItems: "center" }}>
                             <Tooltip text="Reset to default settings" shouldShow={!isObjectEmpty(pluginSettings)}>
                                 {({ onMouseEnter, onMouseLeave }) => (
                                     <Button
@@ -240,10 +228,22 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                                     </Button>
                                 )}
                             </Tooltip>
+                            {!pluginMeta.userPlugin && (
+                                <div className={cl("links")}>
+                                    <WebsiteButton
+                                        text="View more info"
+                                        href={isEquicordPlugin ? `https://equicord.org/plugins/${plugin.name}` : `https://vencord.dev/plugins/${plugin.name}`}
+                                    />
+                                    <GithubButton
+                                        text="View source code"
+                                        href={`https://github.com/${gitRemote}/tree/main/${pluginMeta.folderName}`}
+                                    />
+                                </div>
+                            )}
                         </Flex>
                     </Flex>
                 </ModalFooter>
-            }
+            )}
         </ModalRoot >
     );
 }
diff --git a/src/components/settings/tabs/plugins/components/styles.css b/src/components/settings/tabs/plugins/components/styles.css
index 52da69841..f8ce82c00 100644
--- a/src/components/settings/tabs/plugins/components/styles.css
+++ b/src/components/settings/tabs/plugins/components/styles.css
@@ -26,10 +26,10 @@
     color: var(--text-strong);
 }
 
-.vc-plugins-setting-description {
+.vc-plugins-setting-inline .vc-plugins-setting-description {
     color: var(--text-subtle);
 }
 
 .vc-plugins-setting-error {
     color: var(--text-feedback-critical, #FF5C5C);
-}
\ No newline at end of file
+}
diff --git a/src/equicordplugins/equicordHelper/pluginCards.css b/src/equicordplugins/equicordHelper/pluginCards.css
index d3582266b..d94bf69be 100644
--- a/src/equicordplugins/equicordHelper/pluginCards.css
+++ b/src/equicordplugins/equicordHelper/pluginCards.css
@@ -1,6 +1,7 @@
 .vc-plugins-management-cards.vc-plugins-grid {
     display: flex;
     flex-wrap: wrap;
+    width: 600px;
 }
 
 .vc-plugins-management-cards .vc-addon-card {
@@ -14,4 +15,4 @@
 .vc-plugins-management-cards .vc-addon-title {
     position: static;
     overflow: visible;
-}
+}
\ No newline at end of file