badge fixes

src/components/UsersTable.tsx

@@ -382,6 +382,7 @@ export default function UsersTable({
                 pagination={pagination}
                 rowCount={rowCount}
                 isNavigatingToAddPage={isNavigatingToAddPage}
+                addButtonText={t("accessUserCreate")}
                 searchQuery={searchParams.get("query")?.toString()}
                 onSearch={handleSearchChange}
                 onPaginationChange={handlePaginationChange}

src/components/alert-rule-editor/AlertRuleGraphEditor.tsx

@@ -39,6 +39,7 @@ import { useTranslations } from "next-intl";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { SwitchInput } from "@app/components/SwitchInput";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { Badge } from "../ui/badge";
 
 const FORM_ID = "alert-rule-form";
 
@@ -180,9 +181,9 @@ export default function AlertRuleGraphEditor({
                                     >
                                         <div className="flex flex-wrap items-center gap-2">
                                             {isNew && (
-                                                <span className="text-xs rounded-md border bg-muted px-2 py-1 text-muted-foreground">
+                                                <Badge variant="secondary" >
                                                     {t("alertingDraftBadge")}
-                                                </span>
+                                                </Badge>
                                             )}
                                         </div>
                                         <FormField

src/components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@app/lib/cn";
 
 const badgeVariants = cva(
-    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0",
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0",
     {
         variants: {
             variant: {
@@ -13,7 +13,7 @@ const badgeVariants = cva(
                 outlinePrimary:
                     "border-transparent bg-transparent border-primary text-primary",
                 secondary:
-                    "border-transparent bg-secondary text-secondary-foreground",
+                    "bg-muted border text-secondary-foreground",
                 destructive:
                     "border-transparent bg-destructive text-destructive-foreground",
                 outline: "text-foreground",