refactor(gitops): migrate git form to react [EE-4849] (#8268)

app/react/components/buttons/CopyButton/CopyButton.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { ComponentProps, PropsWithChildren } from 'react';
 import clsx from 'clsx';
 import { Check, Copy } from 'lucide-react';
 
@@ -14,6 +14,7 @@ export interface Props {
   fadeDelay?: number;
   displayText?: string;
   className?: string;
+  color?: ComponentProps<typeof Button>['color'];
 }
 
 export function CopyButton({
@@ -21,6 +22,7 @@ export function CopyButton({
   fadeDelay = 1000,
   displayText = 'copied',
   className,
+  color,
   children,
 }: PropsWithChildren<Props>) {
   const { handleCopy, copiedSuccessfully } = useCopy(copyText, fadeDelay);
@@ -29,19 +31,20 @@ export function CopyButton({
     <div className={styles.container}>
       <Button
         className={className}
+        color={color}
         size="small"
         onClick={handleCopy}
         title="Copy Value"
         type="button"
+        icon={Copy}
       >
-        <Icon icon={Copy} />
         {children}
       </Button>
 
       <span
         className={clsx(
           copiedSuccessfully && styles.fadeout,
-          styles.displayText,
+          styles.copyButton,
           'space-left',
           'vertical-center'
         )}