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; +}