From 0d4d020affa62ee8ff1cc327970352a691cfd246 Mon Sep 17 00:00:00 2001
From: nmsturcke <30734036+nmsturcke@users.noreply.github.com>
Date: Mon, 21 Nov 2022 21:10:01 +0100
Subject: Badge Component : Accept color & text properties

---
 .../PluginSettings/components/BadgeComponent.tsx   | 25 ++++++++++++++++++++++
 .../components/NewBadgeComponent.tsx               | 25 ----------------------
 src/components/PluginSettings/components/index.ts  |  2 +-
 src/components/PluginSettings/index.tsx            |  4 ++--
 src/components/PluginSettings/styles.ts            |  2 +-
 5 files changed, 29 insertions(+), 29 deletions(-)
 create mode 100644 src/components/PluginSettings/components/BadgeComponent.tsx
 delete mode 100644 src/components/PluginSettings/components/NewBadgeComponent.tsx

diff --git a/src/components/PluginSettings/components/BadgeComponent.tsx b/src/components/PluginSettings/components/BadgeComponent.tsx
new file mode 100644
index 0000000..99f89bf
--- /dev/null
+++ b/src/components/PluginSettings/components/BadgeComponent.tsx
@@ -0,0 +1,25 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { BadgeStyle } from "../styles";
+
+export function Badge({ text, color }): JSX.Element {
+    return (
+        <div style={{ backgroundColor: color, justifySelf: "flex-end", marginLeft: "auto", ...BadgeStyle }}>{text}</div>
+    );
+}
diff --git a/src/components/PluginSettings/components/NewBadgeComponent.tsx b/src/components/PluginSettings/components/NewBadgeComponent.tsx
deleted file mode 100644
index 50a6f37..0000000
--- a/src/components/PluginSettings/components/NewBadgeComponent.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { Badge } from "../styles";
-
-export function NewBadge(): JSX.Element {
-    return (
-        <div style={{ backgroundColor: "#ED4245", justifySelf: "flex-end", marginLeft: "auto", ...Badge }}>New</div>
-    );
-}
diff --git a/src/components/PluginSettings/components/index.ts b/src/components/PluginSettings/components/index.ts
index deac079..ab0dc96 100644
--- a/src/components/PluginSettings/components/index.ts
+++ b/src/components/PluginSettings/components/index.ts
@@ -29,7 +29,7 @@ export interface ISettingElementProps<T extends PluginOptionBase> {
     onError(hasError: boolean): void;
 }
 
-export * from "./NewBadgeComponent";
+export * from "./BadgeComponent";
 export * from "./SettingBooleanComponent";
 export * from "./SettingCustomComponent";
 export * from "./SettingNumericComponent";
diff --git a/src/components/PluginSettings/index.tsx b/src/components/PluginSettings/index.tsx
index 64eb34e..ad1cd32 100644
--- a/src/components/PluginSettings/index.tsx
+++ b/src/components/PluginSettings/index.tsx
@@ -33,7 +33,7 @@ import ErrorBoundary from "../ErrorBoundary";
 import { ErrorCard } from "../ErrorCard";
 import { Flex } from "../Flex";
 import { handleComponentFailed } from "../handleComponentFailed";
-import { NewBadge } from "./components";
+import { Badge } from "./components";
 import PluginModal from "./PluginModal";
 import * as styles from "./styles";
 
@@ -165,7 +165,7 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
                 hideBorder={true}
             >
                 <Flex style={{ marginTop: "auto", width: "100%", height: "100%", alignItems: "center", gap: "8px" }}>
-                    <Text variant="text-md/bold" style={{ display: "flex", width: "100%", alignItems: "center", flexGrow: "1", gap: "8px" }}>{plugin.name}{(isNew) && <NewBadge />}</Text>
+                    <Text variant="text-md/bold" style={{ display: "flex", width: "100%", alignItems: "center", flexGrow: "1", gap: "8px" }}>{plugin.name}{(isNew) && <Badge text="New" color="#ED4245" />}</Text>
                     <button role="switch" onClick={() => openModal()} style={styles.SettingsIcon} className="button-12Fmur">
                         {plugin.options
                             ? <CogWheel
diff --git a/src/components/PluginSettings/styles.ts b/src/components/PluginSettings/styles.ts
index 81243ca..e6dc3d9 100644
--- a/src/components/PluginSettings/styles.ts
+++ b/src/components/PluginSettings/styles.ts
@@ -49,7 +49,7 @@ export const SettingsIcon: React.CSSProperties = {
     marginRight: 8
 };
 
-export const Badge: React.CSSProperties = {
+export const BadgeStyle: React.CSSProperties = {
     paddingTop: "0",
     paddingBottom: "0",
     paddingRight: "6px",
-- 
cgit