Badge Component : Accept color & text properties

4 files changed, 7 insertions, 7 deletions

diff --git a/src/components/PluginSettings/components/NewBadgeComponent.tsx b/src/components/PluginSettings/components/BadgeComponent.tsx
index 50a6f37..99f89bf 100644
--- a/src/components/PluginSettings/components/NewBadgeComponent.tsx
+++ b/src/components/PluginSettings/components/BadgeComponent.tsx
@@ -16,10 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Badge } from "../styles";
+import { BadgeStyle } from "../styles";
 
-export function NewBadge(): JSX.Element {
+export function Badge({ text, color }): JSX.Element {
     return (
-        <div style={{ backgroundColor: "#ED4245", justifySelf: "flex-end", marginLeft: "auto", ...Badge }}>New</div>
+        <div style={{ backgroundColor: color, justifySelf: "flex-end", marginLeft: "auto", ...BadgeStyle }}>{text}</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",