From c297afe1de683a8535497bcfcfb406ba10417170 Mon Sep 17 00:00:00 2001
From: tylerslaton <mtslaton1@gmail.com>
Date: Fri, 1 Nov 2024 10:35:52 -0400
Subject: [PATCH] fix: do not invert tool icons from /admin/assets

Signed-off-by: tylerslaton <mtslaton1@gmail.com>
---
 ui/admin/app/components/agent/ToolEntry.tsx               | 6 +++---
 ui/admin/app/components/tools/ToolIcon.tsx                | 5 ++++-
 ui/admin/app/components/tools/toolGrid/CategoryHeader.tsx | 2 +-
 ui/admin/app/components/tools/toolGrid/ToolCard.tsx       | 3 +--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/ui/admin/app/components/agent/ToolEntry.tsx b/ui/admin/app/components/agent/ToolEntry.tsx
index c2711db50..22555f01d 100644
--- a/ui/admin/app/components/agent/ToolEntry.tsx
+++ b/ui/admin/app/components/agent/ToolEntry.tsx
@@ -3,9 +3,9 @@ import useSWR from "swr";
 
 import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
 
-import { ToolIcon } from "../tools/ToolIcon";
-import { LoadingSpinner } from "../ui/LoadingSpinner";
-import { Button } from "../ui/button";
+import { ToolIcon } from "~/components/tools/ToolIcon";
+import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
+import { Button } from "~/components/ui/button";
 
 export function ToolEntry({
     tool,
diff --git a/ui/admin/app/components/tools/ToolIcon.tsx b/ui/admin/app/components/tools/ToolIcon.tsx
index a556d72f0..197ee208c 100644
--- a/ui/admin/app/components/tools/ToolIcon.tsx
+++ b/ui/admin/app/components/tools/ToolIcon.tsx
@@ -24,7 +24,10 @@ export function ToolIcon(props: ToolIconProps) {
         <img
             alt={name}
             src={icon}
-            className={cn("w-6 h-6 dark:invert", className)}
+            className={cn("w-6 h-6", className, {
+                // icons served from /admin/assets are colored, so we should not invert them.
+                "dark:invert": !icon.startsWith("/admin/assets"),
+            })}
         />
     ) : (
         <WrenchIcon className={cn("w-4 h-4 mr-2", className)} />
diff --git a/ui/admin/app/components/tools/toolGrid/CategoryHeader.tsx b/ui/admin/app/components/tools/toolGrid/CategoryHeader.tsx
index 04c69ca7b..4aff1e99f 100644
--- a/ui/admin/app/components/tools/toolGrid/CategoryHeader.tsx
+++ b/ui/admin/app/components/tools/toolGrid/CategoryHeader.tsx
@@ -19,7 +19,7 @@ export function CategoryHeader({
 }: CategoryHeaderProps) {
     return (
         <div className="flex items-center space-x-4">
-            <div className="w-10 h-10 flex items-center justify-center bg-muted rounded-full mb-2 border">
+            <div className="w-10 h-10 flex items-center justify-center rounded-full mb-2 border">
                 {tools[0]?.metadata?.icon ? (
                     <ToolIcon
                         className="w-6 h-6"
diff --git a/ui/admin/app/components/tools/toolGrid/ToolCard.tsx b/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
index 9f7490232..9d4e9b2a7 100644
--- a/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
+++ b/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
@@ -10,6 +10,7 @@ import {
     TypographySmall,
 } from "~/components/Typography";
 import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
+import { ToolIcon } from "~/components/tools/ToolIcon";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import {
@@ -25,8 +26,6 @@ import {
     TooltipTrigger,
 } from "~/components/ui/tooltip";
 
-import { ToolIcon } from "../ToolIcon";
-
 interface ToolCardProps {
     tool: ToolReference;
     onDelete: (id: string) => void;