From f8d9f1d6056ddec72e71a9f96cf70f2de8fa3c5f Mon Sep 17 00:00:00 2001
From: PrettyCoffee <jonathan-holz@outlook.com>
Date: Mon, 22 Apr 2024 00:49:54 +0200
Subject: [PATCH] feat: Increase info tooltip accessibility

---
 src/components/InfoHint.tsx     | 9 ++++++++-
 src/components/TitleTooltip.tsx | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/InfoHint.tsx b/src/components/InfoHint.tsx
index 0290751..633f83a 100644
--- a/src/components/InfoHint.tsx
+++ b/src/components/InfoHint.tsx
@@ -2,13 +2,20 @@ import { PropsWithChildren } from "react"
 
 import { Info } from "lucide-react"
 
+import { textColor } from "~/utils/colors"
+
 import { Icon } from "./Icon"
 import { TitleTooltip } from "./TitleTooltip"
 
 export const InfoHint = ({ children }: PropsWithChildren) => (
   <TitleTooltip title={children as string} asChild>
     <span className="inline-flex size-8 items-center justify-center">
-      <Icon icon={Info} color="muted" size="sm" />
+      <Icon
+        icon={Info}
+        color="current"
+        size="sm"
+        className={textColor({ color: "blue" })}
+      />
     </span>
   </TitleTooltip>
 )
diff --git a/src/components/TitleTooltip.tsx b/src/components/TitleTooltip.tsx
index ba68c24..00fb559 100644
--- a/src/components/TitleTooltip.tsx
+++ b/src/components/TitleTooltip.tsx
@@ -22,7 +22,7 @@ export const TitleTooltip = ({
   !title || disabled ? (
     children
   ) : (
-    <Tooltip.Root disableHoverableContent>
+    <Tooltip.Root disableHoverableContent delayDuration={300}>
       <Tooltip.Trigger asChild={asChild}>{children}</Tooltip.Trigger>
       <Tooltip.Portal>
         <Tooltip.Content side={side} className="max-w-64">