refactor: update button variants to link

leather-io · Jan 17, 2024 · d8bf065 · d8bf065
1 parent 012425c
commit d8bf065
Show file tree

Hide file tree

Showing 24 changed files with 80 additions and 99 deletions.
diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx
@@ -9,7 +9,7 @@ import { createMoney } from '@shared/models/money.model';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { PreviewButton } from '@app/components/preview-button';
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 import { OnChooseFeeArgs } from '../bitcoin-fees-list/bitcoin-fees-list';
 import { TextInputField } from '../text-input-field';
@@ -89,14 +89,13 @@ export function BitcoinCustomFee({
               <Stack gap="space.05">
                 <styled.span color="accent.text-subdued" textStyle="body.02" maxWidth="21.5rem">
                   Higher fee rates typically lead to faster confirmation times.
-                  <Button
+                  <Link
                     ml="space.01"
                     onClick={() => openInNewTab('https://buybitcoinworldwide.com/fee-calculator/')}
                     textStyle="body.02"
-                    variant="link"
                   >
                     View fee calculator
-                  </Button>
+                  </Link>
                 </styled.span>
                 <Stack gap="space.01">
                   <TextInputField

diff --git a/src/app/components/disclaimer.tsx b/src/app/components/disclaimer.tsx
@@ -1,7 +1,7 @@
 import { Box, BoxProps, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 interface DisclaimerProps extends BoxProps {
   disclaimerText: string;
@@ -13,15 +13,10 @@ export function Disclaimer({ disclaimerText, learnMoreUrl, ...props }: Disclaime
       <styled.span textStyle="caption.02">
         {disclaimerText}
         {learnMoreUrl ? (
-          <Button
-            display="inline"
-            fontSize="14px"
-            onClick={() => openInNewTab(learnMoreUrl)}
-            variant="link"
-          >
+          <Link display="inline" fontSize="14px" onClick={() => openInNewTab(learnMoreUrl)}>
             {' '}
             Learn more
-          </Button>
+          </Link>
         ) : null}
         {learnMoreUrl ? '.' : null}
       </styled.span>

diff --git a/src/app/components/edit-nonce-button.tsx b/src/app/components/edit-nonce-button.tsx
@@ -1,12 +1,12 @@
-import { Button, ButtonProps } from '@app/ui/components/button/button';
+import { Link, LinkProps } from '@app/ui/components/link/link';
 
-interface EditNonceButtonProps extends ButtonProps {
+interface EditNonceButtonProps extends LinkProps {
   onEditNonce(): void;
 }
 export function EditNonceButton({ onEditNonce, ...props }: EditNonceButtonProps) {
   return (
-    <Button onClick={onEditNonce} textStyle="label.02" variant="link" {...props}>
+    <Link onClick={onEditNonce} {...props}>
       Edit nonce
-    </Button>
+    </Link>
   );
 }
diff --git a/src/app/components/fees-row/components/fee-estimate-item.tsx b/src/app/components/fees-row/components/fee-estimate-item.tsx
@@ -2,9 +2,9 @@ import { useMemo } from 'react';
 
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { Button } from '@app/ui/components/button/button';
 import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
 import { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon';
+import { Link } from '@app/ui/components/link/link';
 
 const labels = ['Low', 'Standard', 'High', 'Custom'];
 const testLabels = labels.map(label => label.toLowerCase());
@@ -29,7 +29,7 @@ export function FeeEstimateItem({
   }, [index, selectedItem]);
 
   return (
-    <Button
+    <Link
       _hover={{
         bg: isVisible ? 'accent.component-background-hover' : 'accent.background-primary',
         borderRadius: 'xs',
@@ -48,6 +48,6 @@ export function FeeEstimateItem({
         <styled.span textStyle="label.02">{labels[index]}</styled.span>
         {!disableFeeSelection && (isVisible ? selectedIcon : <ChevronDownIcon />)}
       </HStack>
-    </Button>
+    </Link>
   );
 }
diff --git a/src/app/components/generic-error/generic-error.layout.tsx b/src/app/components/generic-error/generic-error.layout.tsx
@@ -4,8 +4,8 @@ import GenericError from '@assets/images/generic-error.png';
 import { Flex, FlexProps, HStack, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { Button } from '@app/ui/components/button/button';
 import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon';
+import { Link } from '@app/ui/components/link/link';
 
 const supportUrl =
   'https://wallet.hiro.so/wallet-faq/where-can-i-find-support-for-the-stacks-wallet';
@@ -58,9 +58,9 @@ export function GenericErrorLayout(props: GenericErrorProps) {
           </HStack>
         </styled.li>
       </styled.ul>
-      <Button fontSize="14px" mt="space.05" onClick={onClose} variant="link">
+      <Link fontSize="14px" mt="space.05" onClick={onClose}>
         Close window
-      </Button>
+      </Link>
     </Flex>
   );
 }
diff --git a/src/app/components/inscription-preview-card/components/inscription-metadata.tsx b/src/app/components/inscription-preview-card/components/inscription-metadata.tsx
@@ -1,6 +1,6 @@
 import { Flex, styled } from 'leather-styles/jsx';
 
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 interface InscriptionMetadataProps {
   action?(): void;
@@ -22,9 +22,9 @@ export function InscriptionMetadata({
       <styled.span textStyle="label.01">{title}</styled.span>
       <styled.span textStyle="caption.02">{subtitle}</styled.span>
       {action ? (
-        <Button color="stacks" onClick={() => action()} textStyle="caption.02" variant="text">
+        <Link color="stacks" onClick={() => action()} textStyle="caption.02" variant="text">
           {actionLabel}
-        </Button>
+        </Link>
       ) : null}
     </Flex>
   );

diff --git a/src/app/components/leather-logo.tsx b/src/app/components/leather-logo.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react';
 
-import { Button } from '@app/ui/components/button/button';
+import { styled } from 'leather-styles/jsx';
+
 import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
 
 interface LeatherLogoProps {
@@ -11,16 +12,16 @@ export const LeatherLogo = memo((props: LeatherLogoProps) => {
   const { isClickable, onClick } = props;
 
   return (
-    <Button
+    <styled.button
       _hover={{ color: 'accent.action-primary-hover' }}
       color="accent.text-primary"
       cursor={isClickable ? 'pointer' : 'unset'}
       height="16px"
       onClick={onClick}
-      variant="text"
+      type="button"
       width="76px"
     >
       <LeatherIcon />
-    </Button>
+    </styled.button>
   );
 });
diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx
@@ -7,6 +7,7 @@ import { Box, Flex, FlexProps, HStack, styled } from 'leather-styles/jsx';
 import { useShowFieldError } from '@app/common/form-utils';
 import { capitalize } from '@app/common/utils';
 import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 import { TextInputFieldError } from './field-error';
 
@@ -79,7 +80,7 @@ export function TextInputField({
             {topInputOverlay ? <Box zIndex={999}>{topInputOverlay}</Box> : null}
           </Flex>
           {labelAction ? (
-            <Button
+            <Link
               data-testid={SendCryptoAssetSelectors.RecipientChooseAccountButton}
               fontWeight={500}
               // Prevents focusing underlying input
@@ -92,12 +93,11 @@ export function TextInputField({
                 if (ref.current !== null && ref.current === document.activeElement)
                   ref.current.blur();
               }}
-              textStyle="label.02"
               variant="text"
               zIndex={999}
             >
               {labelAction}
-            </Button>
+            </Link>
           ) : null}
         </HStack>
         <styled.input

diff --git a/src/app/features/collectibles/components/taproot-balance-displayer.tsx b/src/app/features/collectibles/components/taproot-balance-displayer.tsx
@@ -1,7 +1,7 @@
 import { formatMoney } from '@app/common/money/format-money';
 import { Tooltip } from '@app/components/tooltip';
 import { useCurrentTaprootAccountBalance } from '@app/query/bitcoin/balance/btc-taproot-balance.hooks';
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 const taprootSpendNotSupportedYetMsg = `
   Total amount of BTC in your Taproot account addresses. Click to
@@ -16,9 +16,9 @@ export function TaprootBalanceDisplayer({ onSelectRetrieveBalance }: TaprootBala
   if (balance.amount.isLessThanOrEqualTo(0)) return null;
   return (
     <Tooltip label={taprootSpendNotSupportedYetMsg}>
-      <Button onClick={() => onSelectRetrieveBalance()} textStyle="caption.02" variant="text">
+      <Link onClick={() => onSelectRetrieveBalance()} textStyle="caption.02" variant="text">
         {formatMoney(balance)}
-      </Button>
+      </Link>
     </Tooltip>
   );
 }
diff --git a/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx b/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx
@@ -9,7 +9,7 @@ import { StacksSendFormValues, StacksTransactionFormValues } from '@shared/model
 import { useOnMount } from '@app/common/hooks/use-on-mount';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
-import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 
 import { EditNonceForm } from './components/edit-nonce-form';
 
@@ -19,9 +19,9 @@ function CustomFeeMessaging() {
   return (
     <styled.span textStyle="caption.01">
       If your transaction has been pending for a long time, its nonce might not be correct.
-      <Button fontSize="14px" ml="space.01" onClick={() => openInNewTab(url)} variant="link">
+      <Link fontSize="14px" ml="space.01" onClick={() => openInNewTab(url)}>
         Learn more.
-      </Button>
+      </Link>
     </styled.span>
   );
 }

diff --git a/src/app/features/high-fee-drawer/components/high-fee-confirmation.tsx b/src/app/features/high-fee-drawer/components/high-fee-confirmation.tsx
@@ -10,6 +10,7 @@ import {
 import { useDrawers } from '@app/common/hooks/use-drawers';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { Button } from '@app/ui/components/button/button';
+import { Link } from '@app/ui/components/link/link';
 import { Caption } from '@app/ui/components/typography/caption';
 import { Title } from '@app/ui/components/typography/title';
 
@@ -26,9 +27,9 @@ export function HighFeeConfirmation({ learnMoreUrl }: { learnMoreUrl: string })
       </Title>
       <Caption>
         This action cannot be undone and the fees won't be returned, even if the transaction fails.{' '}
-        <Button fontSize="14px" onClick={() => openInNewTab(learnMoreUrl)} variant="link">
+        <Link onClick={() => openInNewTab(learnMoreUrl)} size="sm">
           Learn more
-        </Button>
+        </Link>
       </Caption>
       <HStack mt="space.05">
         <Button

diff --git a/...bt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx b/...bt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx
@@ -4,8 +4,8 @@ import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-l
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { Flag } from '@app/components/layout/flag';
 import { Tooltip } from '@app/components/tooltip';
-import { Button } from '@app/ui/components/button/button';
 import { CopyIcon } from '@app/ui/components/icons/copy-icon';
+import { Link } from '@app/ui/components/link/link';
 
 interface PsbtInputOutputItemLayoutProps {
   address: string;
@@ -42,9 +42,9 @@ export function PsbtInputOutputItemLayout({
             placement="bottom"
           >
             <Box display="flex" height="16px">
-              <Button onClick={onCopy} variant="text">
+              <Link onClick={onCopy} variant="text">
                 {addressHoverLabel ? <CopyIcon /> : null}
-              </Button>
+              </Link>
             </Box>
           </Tooltip>
           {label}
@@ -53,7 +53,7 @@ export function PsbtInputOutputItemLayout({
       </HStack>
       <Box mt="space.01">
         {txId && txIdHoverLabel ? (
-          <Button
+          <Link
             onClick={() =>
               handleOpenTxLink({
                 txid: txIdHoverLabel ?? '',
@@ -71,7 +71,7 @@ export function PsbtInputOutputItemLayout({
             >
               <styled.span textStyle="caption.02">{txId}</styled.span>
             </Tooltip>
-          </Button>
+          </Link>
         ) : null}
       </Box>
     </Flag>

diff --git a/.../psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx b/.../psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx
@@ -3,9 +3,9 @@ import { Box, HStack, styled } from 'leather-styles/jsx';
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { Flag } from '@app/components/layout/flag';
 import { Tooltip } from '@app/components/tooltip';
-import { Button } from '@app/ui/components/button/button';
 import { BtcIcon } from '@app/ui/components/icons/btc-icon';
 import { CopyIcon } from '@app/ui/components/icons/copy-icon';
+import { Link } from '@app/ui/components/link/link';
 
 interface PsbtAddressTotalItemProps {
   hoverLabel?: string;
@@ -32,9 +32,7 @@ export function PsbtAddressTotalItem({
       <HStack alignItems="center" justifyContent="space-between">
         <styled.span textStyle="label.01">{title ? title : 'Bitcoin'}</styled.span>
         {valueAction ? (
-          <Button onClick={valueAction} variant="link">
-            {value}
-          </Button>
+          <Link onClick={valueAction}>{value}</Link>
         ) : (
           <styled.span textStyle="label.01">{value}</styled.span>
         )}
@@ -54,9 +52,9 @@ export function PsbtAddressTotalItem({
               placement="bottom"
             >
               <Box display="flex" height="16px">
-                <Button onClick={onCopy} variant="text">
+                <Link onClick={onCopy} variant="text">
                   {hoverLabel ? <CopyIcon /> : null}
-                </Button>
+                </Link>
               </Box>
             </Tooltip>
           </HStack>

diff --git a/src/app/features/psbt-signer/components/psbt-request-details-section-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-section-header.tsx
@@ -1,7 +1,7 @@
 import { HStack, styled } from 'leather-styles/jsx';
 
-import { Button } from '@app/ui/components/button/button';
 import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon';
+import { Link } from '@app/ui/components/link/link';
 
 interface PsbtRequestDetailsSectionHeaderProps {
   hasDetails?: boolean;
@@ -19,15 +19,15 @@ export function PsbtRequestDetailsSectionHeader({
     <HStack alignItems="center" justifyContent="space-between">
       <styled.span textStyle="label.01">{title}</styled.span>
       {hasDetails && onSetShowDetails ? (
-        <Button onClick={() => onSetShowDetails(!showDetails)} variant="text">
+        <Link onClick={() => onSetShowDetails(!showDetails)} variant="text">
           {showDetails ? (
             <HStack gap="space.01">
               See less <ArrowUpIcon />
             </HStack>
           ) : (
             'See details'
           )}
-        </Button>
+        </Link>
       ) : null}
     </HStack>
   );

diff --git a/src/app/features/settings-dropdown/components/settings-menu-item.tsx b/src/app/features/settings-dropdown/components/settings-menu-item.tsx
@@ -1,15 +1,15 @@
 import { ReactNode } from 'react';
 
-import { Button, ButtonProps } from '@app/ui/components/button/button';
+import { Link, LinkProps } from '@app/ui/components/link/link';
 
-interface SettingsMenuItemProps extends ButtonProps {
+interface SettingsMenuItemProps extends LinkProps {
   color?: string;
   onClick(e: React.MouseEvent): void;
   children: ReactNode;
 }
 export function SettingsMenuItem({ color, onClick, children, ...props }: SettingsMenuItemProps) {
   return (
-    <Button
+    <Link
       _hover={{ bg: 'accent.component-background-hover' }}
       borderRadius="0px"
       color={color ? color : 'accent.text-primary'}
@@ -18,12 +18,11 @@ export function SettingsMenuItem({ color, onClick, children, ...props }: Setting
       onClick={e => {
         onClick?.(e);
       }}
-      textStyle="label.02"
       variant="text"
       width="100%"
       {...props}
     >
       {children}
-    </Button>
+    </Link>
   );
 }