diff --git a/index.tsx b/index.tsx
index 7a372be..d9bfd2b 100644
--- a/index.tsx
+++ b/index.tsx
@@ -14,6 +14,8 @@ import { Forms, Toasts, UserStore } from "@webpack/common";
// eslint-disable-next-line unused-imports/no-unused-imports
import { User } from "discord-types/general";
+import "./style.css";
+
function isCurrentUser(userId: string) {
const u = UserStore.getCurrentUser().id;
return u == userId;
@@ -27,9 +29,14 @@ export default definePlugin({
{ name: "KrystalSkullOfficial", id: 929208515883569182n }
],
settingsAboutComponent: () => <>
- Only you can view the badges. No, this can't and won't be changed.
- You may need to reload Discord after editing your settings for them to apply.
+
+ Only you can view the badges. No, this can't and won't be changed.
+
+
+ You may need to reload Discord after editing your settings for them to apply.
+
>,
+
settings: definePluginSettings({
discordStaff: {
type: OptionType.BOOLEAN,
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..daf99af
--- /dev/null
+++ b/style.css
@@ -0,0 +1,25 @@
+.vc-badges-warning {
+ font-size: 16px !important;
+ background-color: rgb(240 71 71 / 10%) !important;
+ color: rgb(240 71 71) !important;
+ border: 1px solid rgb(240 71 71 / 60%) !important;
+ border-radius: 5px !important;
+ font-weight: 500;
+ padding: 6px 10px;
+ text-align: center;
+ margin-top: 10px;
+ font-style: bold;
+}
+
+.vc-badges-notice {
+ font-size: 16px !important;
+ background-color: var(--info-warning-background) !important;
+ color: var(--info-warning-text) !important;
+ border: 1px solid var(--info-warning-foreground) !important;
+ border-radius: 5px !important;
+ font-weight: 500;
+ padding: 6px 10px;
+ text-align: center;
+ margin-top: 10px;
+ font-style: bold;
+}