feat: add common copy button using Button component

Author: arunjaindev

src/Shared/Components/CopyButton/CopyButton.tsx

@@ -0,0 +1,41 @@
+import { ReactComponent as ICClipboard } from '@Icons/ic-copy.svg'
+import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
+import { useState } from 'react'
+import { ComponentSizeType } from '@Shared/constants'
+import { copyToClipboard, showError } from '@Common/index'
+import { Button, ButtonProps, ButtonStyleType, ButtonVariantType } from '../Button'
+
+interface CopyButtonProps {
+    buttonConfig?: Partial<Pick<ButtonProps, 'style' | 'variant' | 'size' | 'text'>>
+    copyContent: string
+}
+
+const CopyButton = ({ buttonConfig, copyContent }: CopyButtonProps) => {
+    const [clicked, setClicked] = useState<boolean>(false)
+
+    const handleCopy = async () => {
+        try {
+            await copyToClipboard(copyContent)
+            setClicked(true)
+            setTimeout(() => {
+                setClicked(false)
+            }, 1000)
+        } catch (err) {
+            showError(err)
+        }
+    }
+
+    return (
+        <Button
+            dataTestId="copy-button"
+            text={buttonConfig?.text || 'Copy'}
+            startIcon={clicked ? <ICCheck /> : <ICClipboard />}
+            style={buttonConfig?.style ?? ButtonStyleType.default}
+            variant={buttonConfig?.variant ?? ButtonVariantType.primary}
+            size={buttonConfig?.size ?? ComponentSizeType.large}
+            onClick={handleCopy}
+        />
+    )
+}
+
+export default CopyButton

src/Shared/Components/CopyButton/index.tsx

@@ -0,0 +1 @@
+export { default as CopyButton } from './CopyButton'

src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx

@@ -90,6 +90,7 @@ export const DevtronLicenseCard = ({
                         transformStyle: 'preserve-3d',
                         transform: 'translateZ(0)',
                     }}
+                    whileHover={{ scale: 1.05 }}
                 >
                     <div className="p-20 flexbox-col dc__content-space flex-grow-1">
                         <div className="flexbox dc__content-space dc__gap-72">
@@ -98,9 +99,9 @@ export const DevtronLicenseCard = ({
                             </span>
                             <Icon name="ic-devtron" color="N900" size={24} />
                         </div>
-                        <div className="flexbox-col dc__gap-4">
+                        <div className="flexbox-col dc__gap-2">
                             <div className="flexbox dc__align-items-center dc__gap-6">
-                                <Icon name="ic-key" color={null} size={16} />
+                                <Icon name="ic-key" color="N900" size={16} />
                                 <div className="flex dc__gap-4 cn-7 fs-16 fw-5 lh-1-5 cn-9 font-ibm-plex-mono">
                                     <span>&bull;&bull;&bull;&bull;</span>
                                     <span>{licenseSuffix || licenseKey?.slice(-8)}</span>

src/Shared/Components/DevtronLicenseCard/licenseCard.scss

@@ -1,7 +1,7 @@
 .license-card {
 
     .trial-license-badge {
-        background-color: var(--bg-hover);
+        background-color: var(--divider-secondary-translucent);
         letter-spacing: 0.55px;
     }
 }

src/Shared/Components/LoginBanner/LoginBanner.tsx

@@ -27,7 +27,7 @@ const AnimatedBackground = () => (
                 r="2000"
                 fill="#FD0000"
                 animate={{ scale: [1, 0.9], y: [0, 50] }}
-                transition={{ duration: 8, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.circle
                 cx="418"
@@ -39,15 +39,15 @@ const AnimatedBackground = () => (
                     x: [0, 1000],
                     rotate: [0, 60],
                 }}
-                transition={{ duration: 8, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.circle
                 cx="418"
                 cy="2953"
                 r="1525"
                 fill="#A412DF"
                 animate={{ scale: [0.8, 1], x: [0, 50], y: [-100, 200] }}
-                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 2, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.circle
                 cx="418"
@@ -59,7 +59,7 @@ const AnimatedBackground = () => (
                     x: [0, 1000],
                     rotate: [0, 60],
                 }}
-                transition={{ duration: 8, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.ellipse
                 cx="759.5"
@@ -68,7 +68,7 @@ const AnimatedBackground = () => (
                 ry="975"
                 fill="white"
                 animate={{ scale: [0.8, 1], x: [0, 50], y: [-100, 200] }}
-                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 2, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.path
                 d="M1449.92 730.265C1649.97 261.314 2460.84 884.083 2656.59 1131.43C2852.35 1378.78 3240.21 2146.55 2913.48 2307.57C2508.24 2507.29 2384.89 1871.7 2116.5 1567.52C1848.1 1263.34 1326.48 1019.64 1449.92 730.265Z"
@@ -79,7 +79,7 @@ const AnimatedBackground = () => (
                         'M659.5 743.5C527.947 250.927 1702.5 356.5 2267 825.5C2831.5 1294.5 2825.95 1970.73 2476.5 2073.5C1657 2314.5 1824.89 1047.68 1556.5 743.5C1288.11 439.319 769 1153.5 659.5 743.5Z',
                     ],
                 }}
-                transition={{ duration: 8, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
             />
             <motion.circle
                 cx="1479"
@@ -91,7 +91,7 @@ const AnimatedBackground = () => (
                     x: [0, 1000],
                     rotate: [0, 60],
                 }}
-                transition={{ duration: 8, repeat: Infinity, repeatType: 'reverse' }}
+                transition={{ duration: 4, repeat: Infinity, repeatType: 'reverse' }}
             />
         </svg>
     </motion.div>
@@ -115,9 +115,11 @@ const LoginBanner = () => {
 
     return (
         <div className="flexbox-col br-12 border__primary dc__position-rel dc__overflow-hidden bg__primary">
-            <div className="flexbox-col flex-grow-1 pt-32 pl-32 dc__content-space">
-                <div className="flex h-36 w-130 dc__fill-available-space dc__zi-2">
-                    <Icon name="ic-devtron-header-logo" color="N900" />
+            <div className="flexbox-col flex-grow-1 dc__content-space">
+                <div className="pl-32 pt-32">
+                    <div className="flex h-36 w-130 dc__fill-available-space dc__zi-2">
+                        <Icon name="ic-devtron-header-logo" color="N900" />
+                    </div>
                 </div>
                 <AnimatedBackground />
                 <img

src/Shared/Components/index.ts

@@ -92,3 +92,4 @@ export * from './FlagImage'
 export * from './DevtronLicenseCard'
 export * from './LoginBanner'
 export * from './Confetti'
+export * from './CopyButton'