[PB-3523]: migrate Copyable component to @internxt/ui

src/components/index.ts

@@ -5,7 +5,6 @@ export { default as BreadcrumbsMenuBackups } from './BreadcrumbsMenuBackups';
 export { default as BreadcrumbsMenuDrive } from './BreadcrumbsMenuDrive';
 export { default as BreadcrumbsMoveItemsDialogView } from './BreadcrumbsMoveItemsDialogView';
 export * from './BreadcrumbsHelper';
-export { default as Copyable } from './Copyable';
 export { default as ExpiredLinkView } from './ExpiredLinkView';
 export { LoadingRowSkeleton } from './LoadingRowSkeleton';
 export { OnboardingModal } from './OnBoardingModal';

src/views/NewSettings/components/BillingPaymentMethodCard.tsx

@@ -32,7 +32,7 @@ const BillingPaymentMethodCard = ({
 
   useEffect(() => {
     (defaultPaymentMethod.tag === 'ready' && defaultPaymentMethod.card) ||
-      (defaultPaymentMethod.tag === 'ready' && defaultPaymentMethod.type)
+    (defaultPaymentMethod.tag === 'ready' && defaultPaymentMethod.type)
       ? setExistsPaymentMethod(true)
       : setExistsPaymentMethod(false);
   }, [defaultPaymentMethod]);

src/views/NewSettings/components/Sections/Account/Security/components/TwoFactorAuthenticationEnableModal.tsx

@@ -1,11 +1,10 @@
 import { Warning } from '@phosphor-icons/react';
 import { useEffect, useState } from 'react';
 import authService, { generateNew2FA } from 'services/auth.service';
-import { Button, Input, Loader, Modal } from '@internxt/ui';
+import { Button, Copyable, Input, Loader, Modal } from '@internxt/ui';
 import appStoreIcon from 'app/../assets/icons/app-store.svg';
 import playStoreIcon from 'app/../assets/icons/play-store.svg';
 import useEffectAsync from 'hooks/useEffectAsync';
-import Copyable from 'components/Copyable';
 import notificationsService, { ToastType } from 'app/notifications/services/notifications.service';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import errorService from 'services/error.service';
@@ -70,7 +69,7 @@ const TwoFactorAuthenticationEnableModal = ({
           </div>
           <p className="mx-4 text-gray-50">{translate('views.account.tabs.security.2FA.modal.or')}</p>
           <div className="flex flex-col items-center">
-            <Copyable className="w-60" text={qr.key} />
+            <Copyable className="w-60" classText="select-text truncate text-gray-80" text={qr.key} />
             <p className="mt-2 px-2 text-center text-sm text-gray-60">
               {translate('views.account.tabs.security.2FA.modal.steps.qr.description')}
             </p>
@@ -84,7 +83,7 @@ const TwoFactorAuthenticationEnableModal = ({
 
   const backupKeyStep = (
     <div className="py-5">
-      {qr && <Copyable className="mx-auto w-60" text={qr.key} />}
+      {qr && <Copyable className="mx-auto w-60" classText="select-text truncate" text={qr.key} />}
       <div className="mt-2 flex items-center">
         <Warning size={24} className="text-yellow" style={{ marginLeft: '83px' }} weight="fill" />
         <p className="ml-2 w-64 text-sm text-gray-60">

src/views/NewSettings/components/Sections/Workspace/Members/MembersSection.tsx

@@ -153,8 +153,9 @@ const MembersSection = ({ onClosePreferences }: { onClosePreferences: () => void
                   return (
                     <button
                       key={id}
-                      className={`flex h-14 flex-row justify-between border-l border-gray-10 px-5 py-2 text-base  font-medium text-gray-100 dark:bg-gray-1 ${members && i === members.length - 1 ? 'rounded-bl-xl border-b' : ' border-b'
-                        }
+                      className={`flex h-14 flex-row justify-between border-l border-gray-10 px-5 py-2 text-base  font-medium text-gray-100 dark:bg-gray-1 ${
+                        members && i === members.length - 1 ? 'rounded-bl-xl border-b' : ' border-b'
+                      }
               ${hoverItemIndex === id ? 'bg-gray-5 dark:bg-gray-5' : 'bg-surface'}`}
                       onMouseEnter={() => setHoverItemIndex(id)}
                       onMouseLeave={() => setHoverItemIndex(null)}
@@ -183,8 +184,9 @@ const MembersSection = ({ onClosePreferences }: { onClosePreferences: () => void
                   return (
                     <button
                       key={id}
-                      className={`flex h-14 items-center justify-between border-gray-10 px-5 py-2 text-base font-normal text-gray-60 dark:bg-gray-1 ${members && i === members.length - 1 ? 'border-b' : ' border-b'
-                        } ${hoverItemIndex === id ? 'bg-gray-5 dark:bg-gray-5' : 'bg-surface'}`}
+                      className={`flex h-14 items-center justify-between border-gray-10 px-5 py-2 text-base font-normal text-gray-60 dark:bg-gray-1 ${
+                        members && i === members.length - 1 ? 'border-b' : ' border-b'
+                      } ${hoverItemIndex === id ? 'bg-gray-5 dark:bg-gray-5' : 'bg-surface'}`}
                       onMouseEnter={() => setHoverItemIndex(id)}
                       onMouseLeave={() => setHoverItemIndex(null)}
                       onClick={() => setSelectedMember(member)}
@@ -217,8 +219,9 @@ const MembersSection = ({ onClosePreferences }: { onClosePreferences: () => void
                   return (
                     <button
                       key={id}
-                      className={`flex h-14 flex-row items-center justify-between border-r border-gray-10 py-2 pl-5 text-base font-normal text-gray-60 dark:bg-gray-1 ${members && i === members.length - 1 ? 'rounded-br-xl border-b' : 'border-b'
-                        } ${hoverItemIndex === id ? 'bg-gray-5 dark:bg-gray-5' : ''}`}
+                      className={`flex h-14 flex-row items-center justify-between border-r border-gray-10 py-2 pl-5 text-base font-normal text-gray-60 dark:bg-gray-1 ${
+                        members && i === members.length - 1 ? 'rounded-br-xl border-b' : 'border-b'
+                      } ${hoverItemIndex === id ? 'bg-gray-5 dark:bg-gray-5' : ''}`}
                       onMouseEnter={() => setHoverItemIndex(id)}
                       onMouseLeave={() => setHoverItemIndex(null)}
                     >