fix styling, align the button without flex (#87)

Author: PatrickDinh

src/features/accounts/components/account-link.tsx

@@ -21,7 +21,7 @@ export const AccountLink = fixedForwardRef(
       toast.success('Address copied to clipboard')
     }, [address])
     return (
-      <div className={cn('inline-flex gap-2 items-center')}>
+      <>
         <TemplatedNavLink
           className={cn(!children && 'text-primary underline', className)}
           urlTemplate={Urls.Explore.Account.ByAddress}
@@ -31,8 +31,8 @@ export const AccountLink = fixedForwardRef(
         >
           {children ? children : short ? <abbr title={address}>{ellipseAddress(address)}</abbr> : address}
         </TemplatedNavLink>
-        {showCopyButton && <CopyButton onClick={copyClipboard} />}
-      </div>
+        {showCopyButton && <CopyButton onClick={copyClipboard} className={cn('align-middle ml-2')} />}
+      </>
     )
   }
 )

src/features/assets/components/asset-link.tsx

@@ -39,7 +39,7 @@ function Link(props: AssetIdLinkProps | AssetIdAndNameLinkProps) {
   }, [props.assetId])
 
   return (
-    <div className={cn('inline-flex gap-2 items-center')}>
+    <>
       <TemplatedNavLink
         className={cn(!props.children && 'text-primary underline', props.className)}
         urlTemplate={Urls.Explore.Asset.ById}
@@ -48,8 +48,8 @@ function Link(props: AssetIdLinkProps | AssetIdAndNameLinkProps) {
         {props.children ? props.children : props.assetId}
       </TemplatedNavLink>
       {'assetName' in props && props.assetName && ` (${props.assetName})`}
-      {props.showCopyButton && <CopyButton onClick={copyClipboard} />}
-    </div>
+      {props.showCopyButton && <CopyButton onClick={copyClipboard} className={cn('align-middle ml-2')} />}
+    </>
   )
 }
 

src/features/common/components/button.tsx

@@ -22,7 +22,6 @@ const buttonVariants = cva(
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'size-10',
-        ['sm-icon']: 'size-4',
       },
     },
     defaultVariants: {

src/features/common/components/copy-button.tsx

@@ -1,16 +1,18 @@
 import { CopyIcon } from 'lucide-react'
 import { Button } from './button'
+import { cn } from '@/features/common/utils.ts'
 
 type Props = {
   onClick: () => void
+  className?: string
 }
 
 export const copyButtonLabel = 'Copy'
 
-export function CopyButton({ onClick }: Props) {
+export function CopyButton({ onClick, className }: Props) {
   return (
-    <Button onClick={onClick} variant="no-style" size="sm-icon" aria-label={copyButtonLabel} className="hover:bg-transparent">
-      <CopyIcon className="size-4" />
+    <Button onClick={onClick} variant="no-style" size="icon" aria-label={copyButtonLabel} className={cn('size-4', className)}>
+      <CopyIcon size={'1rem'} />
     </Button>
   )
 }