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

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncSourceSection.tsx

@@ -1,10 +1,12 @@
 import { subject } from "@casl/ability";
-import { faEdit, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AlertTriangleIcon } from "lucide-react";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { GenericFieldLabel } from "@app/components/secret-syncs";
-import { Badge, IconButton, Tooltip } from "@app/components/v2";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { TSecretSync } from "@app/hooks/api/secretSyncs";
@@ -34,12 +36,9 @@ export const SecretSyncSourceSection = ({ secretSync, onEditSource }: Props) =>
             {(!folder || !environment) && (
               <Tooltip content="The source location for this sync has been deleted. Configure a new source or remove this sync.">
                 <div className="mr-1 inline-block w-min">
-                  <Badge
-                    className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
-                    variant="primary"
-                  >
-                    <FontAwesomeIcon icon={faTriangleExclamation} />
-                    <span>Folder Deleted</span>
+                  <Badge variant="danger">
+                    <AlertTriangleIcon />
+                    Folder Deleted
                   </Badge>
                 </div>
               </Tooltip>