From 58c7eea90a49a6de7a8c17bbbe83364c39f849c0 Mon Sep 17 00:00:00 2001
From: Cortex <126973723+verysillycat@users.noreply.github.com>
Date: Tue, 1 Oct 2024 20:50:12 -0600
Subject: [PATCH] feat(PluginsTab): make it alot more prettier

---
 .../PluginSettings/PluginStatCards.tsx        | 48 +++++++++++++++----
 src/components/PluginSettings/styles.css      | 17 +++++++
 2 files changed, 56 insertions(+), 9 deletions(-)

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 (
         <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 className="vc-plugin-stats-card-container">
+                <div className="vc-plugin-stats-card-section">
+                    <Text variant="text-md/semibold">Enabled Plugins</Text>
+                    <Text variant="heading-xl/bold">{enabledStockPlugins}</Text>
+                </div>
+                <div className="vc-plugin-stats-card-divider"></div>
+                <div className="vc-plugin-stats-card-section">
+                    <Text variant="text-md/semibold">Total Plugins</Text>
+                    <Text variant="heading-xl/bold">{totalStockPlugins}</Text>
+                </div>
+            </div>
         </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>
+    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>
+                </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>
+                </div>
+            </div>
         </div>
     );
 }
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;
+}