feature: migrate to v3 badge, additional badge stories, re-useable documentation link badge and misc styling fixes/improvements

frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx

@@ -7,16 +7,15 @@ import {
   faTrash,
   faUsers,
   faUserXmark,
-  faWarning,
   faXmark
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AlertTriangleIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import {
-  Badge,
   Button,
   Checkbox,
   DeleteActionModal,
@@ -38,6 +37,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useSubscription, useUser } from "@app/context";
 import {
   getUserTablePreference,
@@ -451,7 +451,7 @@ export const ServerAdminsTable = () => {
                 const email = user.email ?? user.username;
                 return (
                   <li key={user.id}>
-                    <div className="flex items-center">
+                    <div className="flex items-center gap-x-1">
                       <p>
                         {user.firstName || user.lastName ? (
                           <>
@@ -464,15 +464,10 @@ export const ServerAdminsTable = () => {
                       </p>
                       {userId === user.id && (
                         <Tooltip content="Are you sure you want to remove yourself from this instance?">
-                          <div className="inline-block">
-                            <Badge
-                              variant="primary"
-                              className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
-                            >
-                              <FontAwesomeIcon icon={faWarning} />
-                              <span>Deleting Yourself</span>
-                            </Badge>
-                          </div>
+                          <Badge variant="danger">
+                            <AlertTriangleIcon />
+                            Deleting Yourself
+                          </Badge>
                         </Tooltip>
                       )}
                     </div>