Merge branch 'main' into dev

src/components/PluginSettings/PluginStatCards.tsx

@@ -0,0 +1,29 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./styles.css";
+
+import { Text } from "@webpack/common";
+
+export function StockPluginsCard({ totalStockPlugins, enabledStockPlugins }) {
+    return (
+        <div className="vc-plugin-stats vc-stockplugins-stats-card">
+            <Text variant="text-md/bold">Enabled Stock Plugins</Text>
+            <Text variant="heading-xxl/bold" style={{ textAlign: "center" }}>{enabledStockPlugins}</Text>
+            <Text variant="text-sm/normal">Total Stock Plugins: {totalStockPlugins} </Text>
+        </div>
+    );
+}
+
+export function UserPluginsCard({ totalUserPlugins, enabledUserPlugins }) {
+    return (
+        <div className="vc-plugin-stats vc-userplugins-stats-card">
+            <Text variant="text-md/bold">Enabled UserPlugins</Text>
+            <Text variant="heading-xxl/bold" style={{ textAlign: "center" }}>{totalUserPlugins}</Text>
+            <Text variant="text-sm/normal">Total UserPlugins: {enabledUserPlugins} </Text>
+        </div>
+    );
+}

src/components/PluginSettings/index.tsx

@@ -38,6 +38,8 @@ import { Alerts, Button, Card, Forms, lodash, Parser, React, Select, Text, TextI
 
 import Plugins, { ExcludedPlugins, PluginMeta } from "~plugins";
 
+import { StockPluginsCard, UserPluginsCard } from "./PluginStatCards";
+
 // Avoid circular dependency
 const { startDependenciesRecursive, startPlugin, stopPlugin } = proxyLazy(() => require("../../plugins"));
 
@@ -343,11 +345,23 @@ export default function PluginSettings() {
 
             <ReloadRequiredCard required={changes.hasChanges} />
 
-            <Card className={cl("info-card")} style={{ marginTop: "12px" }}>
-                <Forms.FormTitle tag="h5">Plugins Information</Forms.FormTitle>
-                <Forms.FormText>Total Plugins: {totalStockPlugins}, Total User Plugins: {totalUserPlugins}</Forms.FormText>
-                <Forms.FormText>Enabled Plugins: {enabledStockPlugins}, Enabled User Plugins: {enabledUserPlugins}</Forms.FormText>
-            </Card>
+            <div className={cl("stats-container")} style={{
+                marginTop: "12px",
+                gap: "16px",
+                display: "flex",
+                flexDirection: "row",
+                width: "100%"
+            }}>
+                <StockPluginsCard
+                    totalStockPlugins={totalStockPlugins}
+                    enabledStockPlugins={enabledStockPlugins}
+                />
+                <UserPluginsCard
+                    totalUserPlugins={totalUserPlugins}
+                    enabledUserPlugins={enabledUserPlugins}
+                />
+            </div>
+
 
             <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
                 Filters

src/components/PluginSettings/styles.css

@@ -63,6 +63,7 @@
     height: 8em;
     display: flex;
     flex-direction: column;
+    background-color: var(--background-secondary-alt) !important;
 }
 
 .vc-plugins-info-card div {
@@ -84,3 +85,22 @@
 .vc-plugins-info-button svg:not(:hover, :focus) {
     color: var(--text-muted);
 }
+
+.vc-plugin-stats {
+    background-color: var(--background-secondary-alt);
+    border-radius: 8px;
+    padding: 12px;
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    transition: 0.1s ease-out;
+    transition-property: box-shadow, transform, background, opacity;
+}
+
+.vc-plugin-stats:hover {
+    background-color: var(--background-tertiary);
+    transform: translateY(-1px);
+    box-shadow: var(--elevation-high);
+}