feat: add animation to copy button <Check />s (#22319)

This pull-request adds a tiny little animation for the `<Check />` when
the copy button activates. This is inline with how `sonner` does their
animations (means things are a little more uniform).


![preview-check-animation](https://github.com/user-attachments/assets/533f644a-1d86-4b11-8ca3-c670a9913b57)

site/src/components/AnimatedIcons/Check.tsx

@@ -0,0 +1,19 @@
+import { CheckIcon as LucideCheckIcon } from "lucide-react";
+import { cn } from "utils/cn";
+
+type CheckIconProps = React.ComponentProps<typeof LucideCheckIcon>;
+
+export const CheckIcon: React.FC<CheckIconProps> = ({
+	className,
+	...props
+}) => {
+	return (
+		<LucideCheckIcon
+			className={cn(
+				"animate-in fade-in-0 zoom-in-[0.8] duration-300",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};

site/src/components/CopyButton/CopyButton.tsx

@@ -1,3 +1,4 @@
+import { CheckIcon } from "components/AnimatedIcons/Check";
 import { Button, type ButtonProps } from "components/Button/Button";
 import {
 	Tooltip,
@@ -5,7 +6,7 @@ import {
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useClipboard } from "hooks/useClipboard";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { CopyIcon } from "lucide-react";
 import type { FC } from "react";
 
 type CopyButtonProps = ButtonProps & {

site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx

@@ -1,4 +1,5 @@
 import type * as TypesGen from "api/typesGenerated";
+import { CheckIcon } from "components/AnimatedIcons/Check";
 import {
 	DropdownMenuItem,
 	DropdownMenuSeparator,
@@ -10,7 +11,6 @@ import {
 } from "components/Tooltip/Tooltip";
 import { useClipboard } from "hooks/useClipboard";
 import {
-	CheckIcon,
 	CircleUserIcon,
 	CopyIcon,
 	LogOutIcon,