badge fixes

src/app/[orgId]/settings/access/users/create/page.tsx

@@ -50,6 +50,7 @@ import IdpTypeIcon from "@app/components/IdpTypeIcon";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import OrgRolesTagField from "@app/components/OrgRolesTagField";
+import CopyToClipboard from "@app/components/CopyToClipboard";
 
 type UserType = "internal" | "oidc";
 
@@ -670,9 +671,8 @@ export default function Page() {
                                                     days: expiresInDays
                                                 })}
                                             </p>
-                                            <CopyTextBox
+                                            <CopyToClipboard
                                                 text={inviteLink}
-                                                wrapText={false}
                                             />
                                         </div>
                                     </SettingsSectionBody>

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",