refactor: change default icon and type, color of CopyButton

lablup · Nov 1, 2024 · d9036e4 · d9036e4
1 parent 188d31f
commit d9036e4
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/react/src/components/lablupTalkativotUI/CopyButton.tsx b/react/src/components/lablupTalkativotUI/CopyButton.tsx
@@ -1,6 +1,6 @@
-import { Button, ButtonProps, Tooltip } from 'antd';
+import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import { Button, ButtonProps, theme, Tooltip } from 'antd';
 import { CopyConfig } from 'antd/es/typography/Base';
-import { CheckIcon, CopyIcon } from 'lucide-react';
 import React from 'react';
 import { useEffect } from 'react';
 import { useState } from 'react';
@@ -13,8 +13,9 @@ interface CopyButtonProps extends ButtonProps {
 const CopyButton: React.FC<CopyButtonProps> = ({
   copyable,
   defaultIcon,
-  ...props
+  ...buttonProps
 }) => {
+  const { token } = theme.useToken();
   const [isCopied, setIsCopied] = useState(false);
 
   const handleCopy = async () => {
@@ -38,9 +39,17 @@ const CopyButton: React.FC<CopyButtonProps> = ({
       <CopyToClipboard text={copyable?.text || ''} onCopy={handleCopy}>
         <Button
           icon={
-            isCopied ? <CheckIcon /> : defaultIcon ? defaultIcon : <CopyIcon />
+            isCopied ? (
+              <CheckOutlined />
+            ) : defaultIcon ? (
+              defaultIcon
+            ) : (
+              <CopyOutlined />
+            )
           }
-          {...props}
+          type="text"
+          style={{ color: token.colorPrimary }}
+          {...buttonProps}
         />
       </CopyToClipboard>
     </Tooltip>