feat(frontend): update tooltip and alert styles (#11212)

## Changes 🏗️

Matching updated changes in AutoGPT design system:

<img width="283" height="156" alt="Screenshot 2025-10-20 at 23 55 15"
src="https://github.com/user-attachments/assets/3a2e0ee7-cd53-4552-b72b-42f4631f1503"
/>
<img width="427" height="92" alt="Screenshot 2025-10-20 at 23 55 25"
src="https://github.com/user-attachments/assets/95344765-2155-4861-abdd-f5ec1497ace2"
/>
<img width="472" height="85" alt="Screenshot 2025-10-20 at 23 55 30"
src="https://github.com/user-attachments/assets/31084b40-0eea-4feb-a627-c5014790c40d"
/>
<img width="370" height="87" alt="Screenshot 2025-10-20 at 23 55 35"
src="https://github.com/user-attachments/assets/a81dba12-a792-4d41-b269-0bc32fc81271"
/>


## Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Check the stories for Tooltip and Alerts, they look good


#### For configuration changes:
None

autogpt_platform/frontend/src/components/atoms/Tooltip/BaseTooltip.tsx

@@ -29,7 +29,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 max-w-xs overflow-hidden rounded-md border border-slate-50 bg-white px-3 py-1.5 text-xs text-gray-900 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 max-w-xs overflow-hidden rounded-md bg-white px-3 py-1.5 text-xs font-normal leading-normal text-zinc-900 outline outline-1 outline-offset-[-1px] outline-gray-100 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}

autogpt_platform/frontend/src/components/molecules/Alert/Alert.tsx

@@ -5,14 +5,15 @@ import { InfoIcon, AlertTriangleIcon, XCircleIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border border-neutral-200 px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-[12px] [&>svg]:text-neutral-950 [&>svg~*]:pl-7",
+  "relative w-full rounded-lg border border-zinc-200 px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-1/2 [&>svg]:-translate-y-1/2 [&>svg]:text-zinc-800 [&>svg~*]:pl-7",
   {
     variants: {
       variant: {
-        default: "bg-white text-neutral-950 [&>svg]:text-blue-500",
+        default: "bg-white text-zinc-800 [&>svg]:text-purple-500",
         warning:
-          "bg-white border-orange-500/50 text-orange-600 [&>svg]:text-orange-500",
-        error: "bg-white border-red-500/50 text-red-500 [&>svg]:text-red-500",
+          "bg-[#FFF3E680] border-yellow-300 text-zinc-800 [&>svg]:text-orange-600",
+        error:
+          "bg-[#FDECEC80] border-red-300 text-zinc-800 [&>svg]:text-red-500",
       },
     },
     defaultVariants: {
@@ -45,7 +46,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
         className={cn(alertVariants({ variant: currentVariant }), className)}
         {...props}
       >
-        <IconComponent className="h-4 w-4" />
+        <IconComponent className="h-[1.125rem] w-[1.125rem]" />
         {children}
       </div>
     );