mirrors/Equicord
1
1
Fork 0
mirror of https://github.com/Equicord/Equicord.git synced 2025-02-12 08:14:01 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(PluginsTab): make it alot more prettier

Browse source
This commit is contained in:
Cortex 2024-10-01 20:50:12 -06:00
parent 983a79743a
commit 58c7eea90a
2 changed files with 56 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/components/PluginSettings/PluginStatCards.tsx
View file

@ -6,24 +6,54 @@
import "./styles.css"; import "./styles.css";
import { Text } from "@webpack/common"; import { Text, Tooltip } from "@webpack/common";
export function StockPluginsCard({ totalStockPlugins, enabledStockPlugins }) { export function StockPluginsCard({ totalStockPlugins, enabledStockPlugins }) {
return ( return (
<div className="vc-plugin-stats vc-stockplugins-stats-card"> <div className="vc-plugin-stats vc-stockplugins-stats-card">
<Text variant="text-md/bold">Enabled Stock Plugins</Text> <div className="vc-plugin-stats-card-container">
<Text variant="heading-xxl/bold" style={{ textAlign: "center" }}>{enabledStockPlugins}</Text> <div className="vc-plugin-stats-card-section">
<Text variant="text-sm/normal">Total Stock Plugins: {totalStockPlugins} </Text> <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> </div>
); );
} }
export function UserPluginsCard({ totalUserPlugins, enabledUserPlugins }) { export function UserPluginsCard({ totalUserPlugins, enabledUserPlugins }) {
return ( if (totalUserPlugins <= 1) return (
<div className="vc-plugin-stats vc-userplugins-stats-card"> <div className="vc-plugin-stats vc-stockplugins-stats-card">
<Text variant="text-md/bold">Enabled UserPlugins</Text> <div className="vc-plugin-stats-card-container ">
<Text variant="heading-xxl/bold" style={{ textAlign: "center" }}>{totalUserPlugins}</Text> <div className="vc-plugin-stats-card-section">
<Text variant="text-sm/normal">Total UserPlugins: {enabledUserPlugins} </Text> <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> </div>
); );
} }

17
src/components/PluginSettings/styles.css
View file

@ -104,3 +104,20 @@
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: var(--elevation-high); 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;
}