From cbc254e959f69cda7f6dfac7c12fa3ce33c369bc Mon Sep 17 00:00:00 2001
From: Cortex <126973723+verysillycat@users.noreply.github.com>
Date: Tue, 1 Oct 2024 21:12:29 -0600
Subject: [PATCH 1/2] reflactor(PluginsTab): reformat

---
 .../PluginSettings/PluginStatCards.tsx        | 63 +++++++++++--------
 1 file changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/components/PluginSettings/PluginStatCards.tsx b/src/components/PluginSettings/PluginStatCards.tsx
index 6423a939d..93afe418c 100644
--- a/src/components/PluginSettings/PluginStatCards.tsx
+++ b/src/components/PluginSettings/PluginStatCards.tsx
@@ -27,33 +27,46 @@ export function StockPluginsCard({ totalStockPlugins, enabledStockPlugins }) {
 }
 
 export function UserPluginsCard({ totalUserPlugins, enabledUserPlugins }) {
-    if (totalUserPlugins <= 1) return (
-        <div className="vc-plugin-stats vc-stockplugins-stats-card">
-            <div className="vc-plugin-stats-card-container ">
-                <div className="vc-plugin-stats-card-section">
-                    <Text variant="text-md/semibold">Total UserPlugins</Text>
-                    <Tooltip text={<img src="https://files.catbox.moe/x4plqa.png" style={{ width: "40px", height: "40px" }} />}>
-                        {tooltipProps => (
-                            <Text variant="heading-xl/bold" {...tooltipProps}>{totalUserPlugins}</Text>
-                        )}
-                    </Tooltip>
+    if (totalUserPlugins <= 1)
+        return (
+            <div className="vc-plugin-stats vc-stockplugins-stats-card">
+                <div className="vc-plugin-stats-card-container ">
+                    <div className="vc-plugin-stats-card-section">
+                        <Text variant="text-md/semibold">Total UserPlugins</Text>
+                        <Tooltip
+                            text={
+                                <img
+                                    src="https://discord.com/assets/ab6835d2922224154ddf.svg"
+                                    style={{ width: "40px", height: "40px" }}
+                                />
+                            }
+                        >
+                            {tooltipProps => (
+                                <span style={{ display: "inline", position: "relative" }}>
+                                    <Text variant="heading-xl/bold" {...tooltipProps}>
+                                        {totalUserPlugins}
+                                    </Text>
+                                </span>
+                            )}
+                        </Tooltip>
+                    </div>
                 </div>
             </div>
-        </div>
-    );
-    else return (
-        <div className="vc-plugin-stats vc-stockplugins-stats-card">
-            <div className="vc-plugin-stats-card-container">
-                <div className="vc-plugin-stats-card-section">
-                    <Text variant="text-md/semibold">Enabled UserPlugins</Text>
-                    <Text variant="heading-xl/bold">{enabledUserPlugins}</Text>
-                </div>
-                <div className="vc-plugin-stats-card-divider"></div>
-                <div className="vc-plugin-stats-card-section">
-                    <Text variant="text-md/semibold">Total UserPlugins</Text>
-                    <Text variant="heading-xl/bold">{totalUserPlugins}</Text>
+        );
+    else
+        return (
+            <div className="vc-plugin-stats vc-stockplugins-stats-card">
+                <div className="vc-plugin-stats-card-container">
+                    <div className="vc-plugin-stats-card-section">
+                        <Text variant="text-md/semibold">Enabled UserPlugins</Text>
+                        <Text variant="heading-xl/bold">{enabledUserPlugins}</Text>
+                    </div>
+                    <div className="vc-plugin-stats-card-divider"></div>
+                    <div className="vc-plugin-stats-card-section">
+                        <Text variant="text-md/semibold">Total UserPlugins</Text>
+                        <Text variant="heading-xl/bold">{totalUserPlugins}</Text>
+                    </div>
                 </div>
             </div>
-        </div>
-    );
+        );
 }

From 182377fd98bc4f57a6689221132fa46b887d1791 Mon Sep 17 00:00:00 2001
From: panbread <93918332+Panniku@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:26:12 +0400
Subject: [PATCH 2/2] fix(PluginCard): make infocard consistent (#44)

---
 src/components/PluginSettings/index.tsx  | 2 +-
 src/components/PluginSettings/styles.css | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx
index 0ccdea806..8e23d0bc1 100644
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@@ -346,7 +346,7 @@ export default function PluginSettings() {
             <ReloadRequiredCard required={changes.hasChanges} />
 
             <div className={cl("stats-container")} style={{
-                marginTop: "12px",
+                marginTop: "16px",
                 gap: "16px",
                 display: "flex",
                 flexDirection: "row",
diff --git a/src/components/PluginSettings/styles.css b/src/components/PluginSettings/styles.css
index 848ac5e42..45e3506b9 100644
--- a/src/components/PluginSettings/styles.css
+++ b/src/components/PluginSettings/styles.css
@@ -64,6 +64,8 @@
     display: flex;
     flex-direction: column;
     background-color: var(--background-secondary-alt) !important;
+    transition: 0.1s ease-out;
+    transition-property: box-shadow, transform, background, opacity;
 }
 
 .vc-plugins-info-card div {
@@ -99,6 +101,7 @@
     transition-property: box-shadow, transform, background, opacity;
 }
 
+.vc-plugins-info-card:hover,
 .vc-plugin-stats:hover {
     background-color: var(--background-tertiary);
     transform: translateY(-1px);