feat: add playbook dropdown and fix a few minor styles

src/components/Forms/Formik/FormikConnectionField.tsx

@@ -45,7 +45,7 @@ export default function FormikConnectionField({
   return (
     <FormikSelectDropdown
       name={name}
-      className="h-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+      className="h-full rounded-md border-gray-300 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
       options={connections}
       label={label}
       isLoading={isLoading}

src/components/Forms/Formik/FormikPlaybooksDropdown.tsx

@@ -0,0 +1,44 @@
+import { useGetPlaybookNames } from "@flanksource-ui/api/query-hooks/playbooks";
+import PlaybookSpecIcon from "@flanksource-ui/components/Playbooks/Settings/PlaybookSpecIcon";
+import { useMemo } from "react";
+import FormikSelectDropdown from "./FormikSelectDropdown";
+
+type FormikPlaybooksDropdownProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  className?: string;
+};
+
+export default function FormikPlaybooksDropdown({
+  name,
+  label,
+  required = false,
+  hint,
+  className = "flex flex-col space-y-2 py-2"
+}: FormikPlaybooksDropdownProps) {
+  const { isLoading, data: checks } = useGetPlaybookNames();
+
+  const options = useMemo(
+    () =>
+      checks?.map((playbook) => ({
+        label: playbook.title || playbook.name,
+        value: playbook.id,
+        icon: <PlaybookSpecIcon playbook={playbook} />
+      })),
+    [checks]
+  );
+
+  return (
+    <FormikSelectDropdown
+      name={name}
+      className={className}
+      options={options}
+      label={label}
+      isLoading={isLoading}
+      required={required}
+      hint={hint}
+    />
+  );
+}

src/ui/Badge/Badge.tsx

@@ -4,7 +4,7 @@ type BadgeProps = {
   text: React.ReactNode;
   value?: string;
   size?: "xs" | "sm" | "md";
-  color?: "blue" | "gray";
+  color?: "blue" | "gray" | "yellow";
   dot?: string;
   title?: string;
   className?: string;
@@ -29,7 +29,9 @@ export function Badge({
   const colorClass =
     color === "blue"
       ? "bg-blue-100 text-blue-800"
-      : "bg-gray-100 text-gray-700";
+      : color === "yellow"
+        ? "bg-yellow-100 text-yellow-800"
+        : "bg-gray-100 text-gray-700";
   const spanClassName =
     size === "sm" ? "text-sm px-1 py-0.5" : "text-xs px-1 py-0.5";
   const svgClassName =