resolve comments

babylonlabs-io · Jan 29, 2025 · 54cc7ad · 54cc7ad
1 parent 931ec20
commit 54cc7ad
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 21 deletions.
diff --git a/src/components/common/Hint/index.tsx b/src/components/common/Hint/index.tsx
@@ -8,7 +8,8 @@ type HintStatus = "default" | "warning" | "error";
 interface HintProps {
   tooltip?: ReactNode;
   status?: HintStatus;
-  hasIcon?: boolean;
+  /** Attach tooltip to children instead of showing separate icon */
+  attachToChildren?: boolean;
 }
 
 const STATUS_COLORS = {
@@ -21,40 +22,56 @@ export function Hint({
   children,
   tooltip,
   status = "default",
-  hasIcon = true,
+  attachToChildren = false,
 }: PropsWithChildren<HintProps>) {
   const id = useId();
+  const statusColor = STATUS_COLORS[status];
+
+  if (!tooltip) {
+    return (
+      <div className={twJoin("inline-flex items-center gap-1", statusColor)}>
+        {children}
+      </div>
+    );
+  }
 
   return (
-    <div
-      className={twJoin(
-        "inline-flex items-center gap-1",
-        STATUS_COLORS[status],
-      )}
-    >
-      {(!tooltip || hasIcon) && children && <p>{children}</p>}
-      {tooltip && (
+    <div className={twJoin("inline-flex items-center gap-1", statusColor)}>
+      {attachToChildren ? (
+        <span
+          className="cursor-pointer"
+          data-tooltip-id={id}
+          data-tooltip-content={
+            typeof tooltip === "string" ? tooltip : undefined
+          }
+          data-tooltip-place="top"
+        >
+          {children}
+        </span>
+      ) : (
         <>
+          {children}
           <span
-            className={twJoin("cursor-pointer text-xs", STATUS_COLORS[status])}
+            className={twJoin("cursor-pointer text-xs", statusColor)}
             data-tooltip-id={id}
             data-tooltip-content={
               typeof tooltip === "string" ? tooltip : undefined
             }
             data-tooltip-place="top"
           >
-            {hasIcon ? <AiOutlineInfoCircle /> : children}
+            <AiOutlineInfoCircle />
           </span>
-          <Tooltip
-            id={id}
-            className="tooltip-wrap"
-            openOnClick={false}
-            clickable={true}
-          >
-            {typeof tooltip !== "string" && tooltip}
-          </Tooltip>
         </>
       )}
+
+      <Tooltip
+        id={id}
+        className="tooltip-wrap"
+        openOnClick={false}
+        clickable={true}
+      >
+        {typeof tooltip !== "string" && tooltip}
+      </Tooltip>
     </div>
   );
 }
diff --git a/src/components/delegations/DelegationList/components/ActionButton.tsx b/src/components/delegations/DelegationList/components/ActionButton.tsx
@@ -52,7 +52,7 @@ export function ActionButton(props: ActionButtonProps) {
   if (!buttonProps) return null;
 
   return (
-    <Hint tooltip={props.tooltip} hasIcon={false}>
+    <Hint tooltip={props.tooltip} attachToChildren={true}>
       <button
         className="btn btn-outline btn-xs inline-flex text-sm font-normal text-primary-dark"
         onClick={() => props.onClick?.(buttonProps.action, props.delegation)}