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

frontend/src/pages/organization/AuditLogsPage/components/LogsFilter.tsx

@@ -8,7 +8,6 @@ import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 import {
-  Badge,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -20,6 +19,7 @@ import {
   Select,
   SelectItem
 } from "@app/components/v2";
+import { Badge } from "@app/components/v3";
 import { useOrganization } from "@app/context";
 import { useGetUserProjects } from "@app/hooks/api";
 import {
@@ -124,7 +124,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
         <Button variant="outline_bg" colorSchema="primary" className="relative">
           <FontAwesomeIcon icon={faFilterCircleXmark} />
           {activeFilterCount > 0 && (
-            <Badge className="absolute right-0 bottom-0" variant="primary">
+            <Badge className="absolute -top-2 -right-2" variant="info">
               {activeFilterCount}
             </Badge>
           )}
@@ -137,7 +137,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
               <div className="flex w-full items-center justify-between">
                 <div className="flex items-center gap-2">
                   <span>Filters</span>
-                  <Badge className="px-1.5 py-0.5" variant="primary">
+                  <Badge isSquare variant="info">
                     {activeFilterCount}
                   </Badge>
                 </div>

frontend/src/pages/organization/AuditLogsPage/components/LogsSection.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from "react";
-import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ms from "ms";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { DocumentationLinkBadge } from "@app/components/v3";
 import {
   OrgPermissionAuditLogsActions,
   OrgPermissionSubjects,
@@ -76,22 +75,9 @@ const LogsSectionComponent = ({
       <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
           <div>
-            <div className="flex items-center gap-1 whitespace-nowrap">
+            <div className="flex items-center gap-x-2 whitespace-nowrap">
               <p className="text-xl font-medium text-mineshaft-100">Audit History</p>
-              <a
-                href="https://infisical.com/docs/documentation/platform/audit-logs"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div className="mt-[0.1rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
-                  <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
-                  <span>Docs</span>
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.07rem] ml-1.5 text-[10px]"
-                  />
-                </div>
-              </a>
+              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/audit-logs" />
             </div>
           </div>
           <div className="flex flex-wrap items-center gap-2 lg:justify-end">