refactor: adjust styles for receive page buttons (#365)

ArdentHQ · Jun 4, 2024 · 494c8fb · 494c8fb
1 parent 389dc5a
commit 494c8fb
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 17 deletions.
diff --git a/src/components/receive/QRActionButtons.tsx b/src/components/receive/QRActionButtons.tsx
@@ -15,7 +15,7 @@ export const QRActionButtons = ({
     return (
         <button
             className={cn(
-                'transition-smoothEase flex flex-row items-center gap-3 px-5 py-1 text-base font-medium text-light-black hover:text-theme-secondary-600 dark:text-theme-secondary-200 dark:hover:text-white',
+                'transition-smoothEase flex flex-row items-center gap-3 rounded-2xl px-5 py-1 text-base font-medium text-light-black hover:bg-theme-secondary-50 dark:text-theme-secondary-200 dark:hover:bg-theme-secondary-700',
                 className,
             )}
             onClick={onClick}

diff --git a/src/components/receive/Recipient.tsx b/src/components/receive/Recipient.tsx
@@ -1,33 +1,21 @@
 import { useTranslation } from 'react-i18next';
 import { TransactionAddress } from '../transaction/Transaction.blocks';
+import { CopyAddress } from '../wallet/CopyAddress';
 import { usePrimaryWallet } from '@/lib/hooks/usePrimaryWallet';
-import useClipboard from '@/lib/hooks/useClipboard';
-import trimAddress from '@/lib/utils/trimAddress';
-import { Icon } from '@/shared/components';
 
 export const Recipient = () => {
     const primaryWallet = usePrimaryWallet();
     const address = primaryWallet?.address() ?? '';
     const { t } = useTranslation();
-    const { copy } = useClipboard();
 
     return (
         <div className='flex flex-col gap-1.5'>
             <span className='text-sm font-medium text-theme-secondary-500 dark:text-theme-secondary-200'>
                 {t('COMMON.RECIPIENT')}
             </span>
-            <div className='flex w-full items-center justify-between rounded-lg border border-theme-secondary-200 bg-white px-3 py-4 dark:border-theme-secondary-600 dark:bg-theme-secondary-800 dark:text-theme-secondary-400 dark:shadow-secondary-dark'>
+            <div className='flex w-full items-center justify-between rounded-lg border border-theme-secondary-200 bg-white py-2.5 pl-3 pr-1.5 dark:border-theme-secondary-600 dark:bg-theme-secondary-800 dark:text-theme-secondary-400 dark:shadow-secondary-dark'>
                 <TransactionAddress address={address} displayParenthesis />
-                <button
-                    type='button'
-                    className='block'
-                    onClick={() => copy(address, trimAddress(address, 'short'))}
-                >
-                    <Icon
-                        icon='copy'
-                        className='h-5 w-5 text-theme-primary-700 dark:text-theme-primary-600'
-                    />
-                </button>
+                <CopyAddress />
             </div>
         </div>
     );

diff --git a/src/components/wallet/CopyAddress.tsx b/src/components/wallet/CopyAddress.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { Icon, Tooltip } from '@/shared/components';
 import { usePrimaryWallet } from '@/lib/hooks/usePrimaryWallet';
 import useClipboard from '@/lib/hooks/useClipboard';
@@ -7,6 +8,7 @@ import { HeaderButton } from '@/shared/components/header/HeaderButton';
 
 export const CopyAddress = () => {
     const primaryWallet = usePrimaryWallet();
+    const { t } = useTranslation();
 
     const { copy } = useClipboard();
 
@@ -17,7 +19,7 @@ export const CopyAddress = () => {
     const trimmedAddress = trimAddress(primaryWallet.address(), 10);
 
     return (
-        <Tooltip content='Copy address' placement='bottom-end'>
+        <Tooltip content={t('COMMON.COPY_with_name', { name: 'Address' })} placement='bottom-end'>
             <HeaderButton
                 className='rounded-full'
                 onClick={() => {