diff --git a/src/components/PluginSettings/PluginStatCards.tsx b/src/components/PluginSettings/PluginStatCards.tsx
index 12de62a6..6423a939 100644
--- a/src/components/PluginSettings/PluginStatCards.tsx
+++ b/src/components/PluginSettings/PluginStatCards.tsx
@@ -6,24 +6,54 @@
import "./styles.css";
-import { Text } from "@webpack/common";
+import { Text, Tooltip } from "@webpack/common";
export function StockPluginsCard({ totalStockPlugins, enabledStockPlugins }) {
return (
-
Enabled Stock Plugins
-
{enabledStockPlugins}
-
Total Stock Plugins: {totalStockPlugins}
+
+
+ Enabled Plugins
+ {enabledStockPlugins}
+
+
+
+ Total Plugins
+ {totalStockPlugins}
+
+
);
}
export function UserPluginsCard({ totalUserPlugins, enabledUserPlugins }) {
- return (
-
-
Enabled UserPlugins
-
{totalUserPlugins}
-
Total UserPlugins: {enabledUserPlugins}
+ if (totalUserPlugins <= 1) return (
+
+
+
+ Total UserPlugins
+ }>
+ {tooltipProps => (
+ {totalUserPlugins}
+ )}
+
+
+
+
+ );
+ else return (
+
+
+
+ Enabled UserPlugins
+ {enabledUserPlugins}
+
+
+
+ Total UserPlugins
+ {totalUserPlugins}
+
+
);
}
diff --git a/src/components/PluginSettings/styles.css b/src/components/PluginSettings/styles.css
index 973c73c6..848ac5e4 100644
--- a/src/components/PluginSettings/styles.css
+++ b/src/components/PluginSettings/styles.css
@@ -104,3 +104,20 @@
transform: translateY(-1px);
box-shadow: var(--elevation-high);
}
+
+.vc-plugin-stats-card-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.vc-plugin-stats-card-section {
+ text-align: center;
+ flex: 1;
+}
+
+.vc-plugin-stats-card-divider {
+ border-left: 1px solid #ccc;
+ height: 100%;
+ margin: 0 10px;
+}