refactor: use Button component instead of plain button in CopyButton (calcom#25489)

* refactor: use Button component instead of plain button in CopyButton

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>

* add shrink-0 to StartIcon and EndIcon of Button

* remove unused class names

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: eunjae-lee

packages/features/insights/hooks/useInsightsColumns.tsx

@@ -1,5 +1,4 @@
 import { createColumnHelper } from "@tanstack/react-table";
-// eslint-disable-next-line no-restricted-imports
 import startCase from "lodash/startCase";
 import { useMemo } from "react";
 import { z } from "zod";
@@ -11,7 +10,7 @@ import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RoutingFormFieldType } from "@calcom/routing-forms/lib/FieldTypes";
 import { Badge } from "@calcom/ui/components/badge";
-import { Icon } from "@calcom/ui/components/icon";
+import { Button } from "@calcom/ui/components/button";
 
 import { BookedByCell } from "../components/BookedByCell";
 import { BookingAtCell } from "../components/BookingAtCell";
@@ -349,24 +348,16 @@ function CopyButton({ label, value }: { label: string; value: string }) {
   const { copyToClipboard, isCopied } = useCopy();
   const { t } = useLocale();
   return (
-    <button
-      className="flex w-full items-center gap-1 overflow-hidden"
-      title={value}
+    <Button
+      color="minimal"
+      size="sm"
+      className="overflow-hidden"
+      tooltip={value}
+      EndIcon={isCopied ? "check" : "clipboard"}
       onClick={() => {
         copyToClipboard(value);
       }}>
-      {!isCopied && (
-        <>
-          <span className="truncate">{label}</span>
-          <Icon name="clipboard" className="shrink-0" size={14} />
-        </>
-      )}
-      {isCopied && (
-        <>
-          <span className="grow truncate text-left">{t("copied")}</span>
-          <Icon name="check" className="shrink-0" size={14} />
-        </>
-      )}
-    </button>
+      <span className="truncate">{isCopied ? t("copied") : label}</span>
+    </Button>
   );
 }

packages/ui/components/button/Button.tsx

@@ -264,14 +264,15 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           <>
             {variant === "fab" ? (
               <>
-                <Icon name={StartIcon} className="hidden h-4 w-4 stroke-[1.5px]  md:inline-flex" />
-                <Icon name="plus" data-testid="plus" className="inline h-6 w-6 md:hidden" />
+                <Icon name={StartIcon} className="hidden h-4 w-4 shrink-0 stroke-[1.5px]  md:inline-flex" />
+                <Icon name="plus" data-testid="plus" className="inline h-6 w-6 shrink-0 md:hidden" />
               </>
             ) : (
               <Icon
                 data-name="start-icon"
                 name={StartIcon}
                 className={classNames(
+                  "shrink-0",
                   loading ? "invisible" : "visible",
                   "button-icon group-[:not(div):active]:translate-y-[0.5px]",
                   variant === "icon" && "h-4 w-4",
@@ -313,13 +314,14 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         <>
           {variant === "fab" ? (
             <>
-              <Icon name={EndIcon} className="-mr-1 me-2 ms-2 hidden h-5 w-5 md:inline" />
-              <Icon name="plus" data-testid="plus" className="inline h-6 w-6 md:hidden" />
+              <Icon name={EndIcon} className="-mr-1 me-2 ms-2 hidden h-5 w-5 shrink-0 md:inline" />
+              <Icon name="plus" data-testid="plus" className="inline h-6 w-6 shrink-0 md:hidden" />
             </>
           ) : (
             <Icon
               name={EndIcon}
               className={classNames(
+                "shrink-0",
                 loading ? "invisible" : "visible",
                 "group-[:not(div):active]:translate-y-[0.5px]",
                 variant === "icon" && "h-4 w-4",