Modified for git comments

internal/ui/src/components/id.tsx

@@ -5,8 +5,17 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 import { TaskUnchecked, TaskChecked } from "@unkey/icons"
 
 type IdProps = {
+    /**
+    * Value displayed on the component.
+    */
     value: string;
+    /**
+    * Number to truncate the value to. If the value is longer than the truncate number, it will be truncated and an ellipse will be added to the end.
+    */
     truncate?: number;
+    /**
+    * Any additional classes to apply to the component.
+    */
     className?: string;
 };
 
@@ -33,28 +42,29 @@ export const Id: React.FC<IdProps> = ({ className, value, truncate, ...props })
 
     const ellipse = '••••';
     const truncateValue = truncate ? value?.slice(0, truncate) + ellipse : value;
-    const Comp = "button";
-
+
     return (
-        <Comp
-            className={cn("relative inline-flex w-full ring-2 ring-transparent focus:ring-gray-6 group items-center transition duration-150 justify-center gap-3 whitespace-nowrap tracking-normal rounded-lg font-medium bg-gray-1 w-fit max-w-96 border border-accent-6 hover:border-accent-8 text-accent-12 radius radius-2 font-mono h-8 px-3 py-1 text-xs overflow-hidden", className)}
-            onClick={() => copyTextToClipboard(value ?? "")}
+        <button
+            className={cn("relative inline-flex w-full ring-2 ring-transparent no-underline focus:ring-gray-6 group items-center transition duration-150 justify-center gap-3 whitespace-nowrap tracking-normal rounded-lg font-medium bg-gray-1 w-fit max-w-96 border border-accent-6 hover:border-accent-8 text-gray-12 radius radius-2 font-mono h-8 px-3 py-1 text-xs overflow-hidden", className)}
+            onClick={() => copyTextToClipboard(value)}
+            aria-label={`Copy ID: ${value}`}  
+            role="link"  
             {...props}
         >
             {truncateValue}
             <Tooltip>
                 <div className="absolute flex h-8 w-8 top-0 right-0 invisible group-hover:visible group-focus:visible">
                     <TooltipTrigger asChild>
-                        <div className=" flex justify-end border w-full border-none h-full text-gray-1 bg-gray-1">
-                            {!isCopied ? <TaskUnchecked className="size=[12] text-gray-10 item-end my-auto mr-2 bg-base-1" /> : <TaskChecked className="size=[12] text-gray-10 item-end my-auto mr-2" />}
+                        <div className=" flex justify-end border w-full border-none h-full bg-accent-1">
+                            {!isCopied ? <TaskUnchecked className="size=[12px] item-end my-auto mr-2 bg-gray-1" /> : <TaskChecked className="size=[12px] item-end my-auto mr-2 bg-gray-1" />}
                         </div>
                     </TooltipTrigger>
                     <TooltipContent side="bottom">
                         Copy ID
                     </TooltipContent>
                 </div>
             </Tooltip>
-        </Comp>);
+        </button>);
 };
 Id.displayName = "Id";
 

internal/ui/src/components/tooltip.tsx

@@ -4,7 +4,6 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 
 import { cn } from "../lib/utils";
- // Adjust the import path as necessary
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
@@ -20,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden shadow-md rounded rounded-md font-height-4 bg-gray-12 text-gray-1 px-2 py-1 gap-2 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 overflow-hidden font-medium shadow-md rounded rounded-lg leading-6 bg-gray-12 text-gray-1 px-2 py-1 gap-2 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}