From b78a5a9187ddb9209ef75671f31393dc04c27ca9 Mon Sep 17 00:00:00 2001
From: Krystal <username0458478374@gmail.com>
Date: Sat, 11 Jan 2025 19:35:55 -0500
Subject: [PATCH] less obnoxious warning

---
 index.tsx | 11 +++++++++--
 style.css | 25 +++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 style.css

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: () => <>
-        <Forms.FormTitle style={{ color: "red", fontSize: "2rem", fontWeight: "bold" }}>Only you can view the badges. No, this can't and won't be changed.</Forms.FormTitle>
-        <Forms.FormText>You may need to reload Discord after editing your settings for them to apply.</Forms.FormText>
+        <Forms.FormText className="vc-badges-warning">
+            Only you can view the badges. No, this can't and won't be changed.
+        </Forms.FormText>
+        <Forms.FormText className="vc-badges-notice">
+            You may need to reload Discord after editing your settings for them to apply.
+        </Forms.FormText>
     </>,
+
     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;
+}