diff --git a/.storybook/preview.ts b/.storybook/preview.ts index f63d25c48e6..ae4ce4cab9a 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -5,6 +5,19 @@ import '../src/app/index.css'; const preview: Preview = { parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, + backgrounds: { + default: 'leather-light-mode', + values: [ + { + name: 'leather-light-mode', + value: '#FFFFFF', + }, + { + name: 'leather-dark-mode', + value: '#12100F', + }, + ], + }, controls: { matchers: { color: /(background|color)$/i, diff --git a/package.json b/package.json index 2bebb3df159..89c21939efc 100644 --- a/package.json +++ b/package.json @@ -240,7 +240,7 @@ "@actions/core": "1.10.1", "@btckit/types": "0.0.19", "@leather-wallet/prettier-config": "0.0.1", - "@leather-wallet/tokens": "0.0.3", + "@leather-wallet/tokens": "0.0.4", "@ls-lint/ls-lint": "2.2.2", "@pandacss/dev": "0.26.2", "@playwright/test": "1.40.1", diff --git a/panda.config.ts b/panda.config.ts index 347b905b9bc..c2ed4de2c60 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -4,6 +4,7 @@ import { breakpoints } from './theme/breakpoints'; import { globalCss } from './theme/global/global'; import { keyframes } from './theme/keyframes'; import { buttonRecipe } from './theme/recipes/button-recipe'; +import { linkRecipe } from './theme/recipes/link-recipe'; import { semanticTokens } from './theme/semantic-tokens'; import { tokens } from './theme/tokens'; import { textStyles } from './theme/typography'; @@ -32,7 +33,7 @@ export default defineConfig({ keyframes, textStyles, breakpoints, - recipes: { button: buttonRecipe }, + recipes: { button: buttonRecipe, link: linkRecipe }, }, }, outdir: 'leather-styles', diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx index b2cb03e8b1e..84015117018 100644 --- 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 { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { OnChooseFeeArgs } from '../bitcoin-fees-list/bitcoin-fees-list'; import { TextInputField } from '../text-input-field'; @@ -89,14 +89,14 @@ export function BitcoinCustomFee({ Higher fee rates typically lead to faster confirmation times. - openInNewTab('https://buybitcoinworldwide.com/fee-calculator/')} textStyle="body.02" variant="link" > View fee calculator - + because of the error: {message.toLowerCase()}} - + ); diff --git a/src/app/components/disclaimer.tsx b/src/app/components/disclaimer.tsx index a623d4396dc..54bc93c70b7 100644 --- 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 { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface DisclaimerProps extends BoxProps { disclaimerText: string; @@ -13,7 +13,7 @@ export function Disclaimer({ disclaimerText, learnMoreUrl, ...props }: Disclaime {disclaimerText} {learnMoreUrl ? ( - openInNewTab(learnMoreUrl)} @@ -21,7 +21,7 @@ export function Disclaimer({ disclaimerText, learnMoreUrl, ...props }: Disclaime > {' '} Learn more - + ) : null} {learnMoreUrl ? '.' : null} diff --git a/src/app/components/edit-nonce-button.tsx b/src/app/components/edit-nonce-button.tsx index ae71f0ebf09..e6f44d7d8f9 100644 --- a/src/app/components/edit-nonce-button.tsx +++ b/src/app/components/edit-nonce-button.tsx @@ -1,12 +1,12 @@ -import { ButtonProps, LeatherButton } from '@app/ui/components/button'; +import { Button, ButtonProps } from '@app/ui/components/button/button'; interface EditNonceButtonProps extends ButtonProps { onEditNonce(): void; } export function EditNonceButton({ onEditNonce, ...props }: EditNonceButtonProps) { return ( - + ); } diff --git a/src/app/components/fees-row/components/fee-estimate-item.tsx b/src/app/components/fees-row/components/fee-estimate-item.tsx index a2147b54228..e982776f863 100644 --- a/src/app/components/fees-row/components/fee-estimate-item.tsx +++ b/src/app/components/fees-row/components/fee-estimate-item.tsx @@ -2,7 +2,7 @@ import { useMemo } from 'react'; import { HStack, styled } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +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'; @@ -29,7 +29,7 @@ export function FeeEstimateItem({ }, [index, selectedItem]); return ( - {labels[index]} {!disableFeeSelection && (isVisible ? selectedIcon : )} - + ); } diff --git a/src/app/components/generic-error/generic-error.layout.tsx b/src/app/components/generic-error/generic-error.layout.tsx index 148dae8939d..7256e1976fe 100644 --- a/src/app/components/generic-error/generic-error.layout.tsx +++ b/src/app/components/generic-error/generic-error.layout.tsx @@ -4,7 +4,7 @@ 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 { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon'; const supportUrl = @@ -58,9 +58,9 @@ export function GenericErrorLayout(props: GenericErrorProps) { - + ); } diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx index c989663cc83..12a9403a8bc 100644 --- a/src/app/components/header.tsx +++ b/src/app/components/header.tsx @@ -11,7 +11,7 @@ import { useDrawers } from '@app/common/hooks/use-drawers'; import { useViewportMinWidth } from '@app/common/hooks/use-media-query'; import { LeatherLogo } from '@app/components/leather-logo'; import { NetworkModeBadge } from '@app/components/network-mode-badge'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon'; import { HamburgerIcon } from '@app/ui/components/icons/hamburger-icon'; @@ -54,9 +54,9 @@ export function Header(props: HeaderProps) { > {onClose ? ( - + ) : null} {!title && (!onClose || isBreakpointSm) ? ( @@ -84,13 +84,13 @@ export function Header(props: HeaderProps) { {!hideActions && ( - setIsShowingSettings(!isShowingSettings)} variant="ghost" > - + )} {actionButton ? actionButton : null} diff --git a/src/app/components/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx index d8309f1a61e..72fc6e79ecc 100644 --- a/src/app/components/info-card/info-card.tsx +++ b/src/app/components/info-card/info-card.tsx @@ -6,7 +6,7 @@ import { Box, BoxProps, Flex, FlexProps, HStack, Stack, styled } from 'leather-s import { isString } from '@shared/utils'; import { whenPageMode } from '@app/common/utils'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { DashedHr } from '@app/ui/components/hr'; // InfoCard @@ -105,14 +105,14 @@ interface InfoCardBtnProps { } export function InfoCardBtn({ icon, label, onClick }: InfoCardBtnProps) { return ( - + ); } diff --git a/src/app/components/inscription-preview-card/components/inscription-metadata.tsx b/src/app/components/inscription-preview-card/components/inscription-metadata.tsx index 052a8b3e261..b5a9dfa84dc 100644 --- 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 { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface InscriptionMetadataProps { action?(): void; @@ -22,14 +22,9 @@ export function InscriptionMetadata({ {title} {subtitle} {action ? ( - action()} - textStyle="caption.02" - variant="text" - > + ) : null} ); diff --git a/src/app/components/leather-logo.tsx b/src/app/components/leather-logo.tsx index 91c301f076f..a28f3fbe434 100644 --- a/src/app/components/leather-logo.tsx +++ b/src/app/components/leather-logo.tsx @@ -1,6 +1,6 @@ import { memo } from 'react'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { LeatherIcon } from '@app/ui/components/icons/leather-icon'; interface LeatherLogoProps { @@ -11,7 +11,7 @@ export const LeatherLogo = memo((props: LeatherLogoProps) => { const { isClickable, onClick } = props; return ( - { width="76px" > - + ); }); diff --git a/src/app/components/modal-header.tsx b/src/app/components/modal-header.tsx index f8d41c06aff..7c8708e2f09 100644 --- a/src/app/components/modal-header.tsx +++ b/src/app/components/modal-header.tsx @@ -7,7 +7,7 @@ import { token } from 'leather-styles/tokens'; import { RouteUrls } from '@shared/route-urls'; import { NetworkModeBadge } from '@app/components/network-mode-badge'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon'; import { CloseIcon } from '@app/ui/components/icons/close-icon'; @@ -54,14 +54,14 @@ export function ModalHeader({ > {onGoBack || defaultGoBack ? ( - - + ) : ( @@ -76,9 +76,9 @@ export function ModalHeader({ {hasCloseIcon && ( - + )} diff --git a/src/app/components/preview-button.tsx b/src/app/components/preview-button.tsx index 6161fd23a1a..cf624992db5 100644 --- a/src/app/components/preview-button.tsx +++ b/src/app/components/preview-button.tsx @@ -1,7 +1,7 @@ import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors'; import { useFormikContext } from 'formik'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface PreviewButtonProps { text?: string; @@ -11,7 +11,7 @@ export function PreviewButton({ text = 'Continue', isDisabled, ...props }: Previ const { handleSubmit } = useFormikContext(); return ( - handleSubmit()} @@ -19,6 +19,6 @@ export function PreviewButton({ text = 'Continue', isDisabled, ...props }: Previ {...props} > {text} - + ); } diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx index c9c42010869..1e87f6c88b1 100644 --- a/src/app/components/request-password.tsx +++ b/src/app/components/request-password.tsx @@ -7,7 +7,7 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useKeyActions } from '@app/common/hooks/use-key-actions'; import { buildEnterKeyEvent } from '@app/common/hooks/use-modifier-key'; import { WaitingMessages, useWaitingMessage } from '@app/common/utils/use-waiting-message'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ErrorLabel } from './error-label'; import { TwoColumnLayout } from './secret-key/two-column.layout'; @@ -104,7 +104,7 @@ export function RequestPassword({ title, caption, onSuccess }: RequestPasswordPr /> {error && {error}} - Continue - + } /> diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx index a8acd2abefb..09089e900af 100644 --- a/src/app/components/text-input-field.tsx +++ b/src/app/components/text-input-field.tsx @@ -6,7 +6,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 { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { TextInputFieldError } from './field-error'; @@ -79,7 +79,7 @@ export function TextInputField({ {topInputOverlay ? {topInputOverlay} : null} {labelAction ? ( - {labelAction} - + ) : null} {error} ) : null} - Add network - + )} diff --git a/src/app/features/asset-list/components/connect-ledger-asset-button.tsx b/src/app/features/asset-list/components/connect-ledger-asset-button.tsx index f939a78282d..2aab7517425 100644 --- a/src/app/features/asset-list/components/connect-ledger-asset-button.tsx +++ b/src/app/features/asset-list/components/connect-ledger-asset-button.tsx @@ -7,7 +7,7 @@ import { RouteUrls } from '@shared/route-urls'; import { capitalize } from '@app/common/utils'; import { immediatelyAttemptLedgerConnection } from '@app/features/ledger/hooks/use-when-reattempt-ledger-connection'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { LedgerIcon } from '@app/ui/components/icons/ledger-icon'; interface ConnectLedgerAssetBtnProps { @@ -27,7 +27,7 @@ export function ConnectLedgerAssetBtn({ chain }: ConnectLedgerAssetBtnProps) { }); }; return ( - Connect {capitalize(chain)} - + ); } diff --git a/src/app/features/collectibles/components/taproot-balance-displayer.tsx b/src/app/features/collectibles/components/taproot-balance-displayer.tsx index f42caa1882c..62b1e9bdec8 100644 --- 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 { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; const taprootSpendNotSupportedYetMsg = ` Total amount of BTC in your Taproot account addresses. Click to @@ -16,13 +16,9 @@ export function TaprootBalanceDisplayer({ onSelectRetrieveBalance }: TaprootBala if (balance.amount.isLessThanOrEqualTo(0)) return null; return ( - onSelectRetrieveBalance()} - textStyle="caption.02" - variant="text" - > + ); } diff --git a/src/app/features/edit-nonce-drawer/components/edit-nonce-form.tsx b/src/app/features/edit-nonce-drawer/components/edit-nonce-form.tsx index 4453550a8a5..8d1d37dbff1 100644 --- a/src/app/features/edit-nonce-drawer/components/edit-nonce-form.tsx +++ b/src/app/features/edit-nonce-drawer/components/edit-nonce-form.tsx @@ -1,6 +1,6 @@ import { HStack } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { EditNonceField } from './edit-nonce-field'; @@ -16,12 +16,12 @@ export function EditNonceForm(props: EditNonceFormProps): React.JSX.Element { <> - + + ); diff --git a/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx b/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx index 7f7fa233268..e1047603943 100644 --- 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 { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { EditNonceForm } from './components/edit-nonce-form'; @@ -19,9 +19,9 @@ function CustomFeeMessaging() { return ( If your transaction has been pending for a long time, its nonce might not be correct. - openInNewTab(url)} variant="link"> + ); } diff --git a/src/app/features/feedback-button/feedback-button.tsx b/src/app/features/feedback-button/feedback-button.tsx index 08dd1641a99..392f91dfd05 100644 --- a/src/app/features/feedback-button/feedback-button.tsx +++ b/src/app/features/feedback-button/feedback-button.tsx @@ -4,7 +4,7 @@ import { Flex } from 'leather-styles/jsx'; import { analytics } from '@shared/utils/analytics'; import { useThemeSwitcher } from '@app/common/theme-provider'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { MegaphoneIcon } from '@app/ui/components/icons/megaphone-icon'; export function openFeedbackDialog() { @@ -18,7 +18,7 @@ export function openFeedbackDialog() { export function FeedbackButton() { const { theme } = useThemeSwitcher(); return ( - Give feedback - + ); } 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 index 64eac1cefa9..9809af4dee5 100644 --- a/src/app/features/high-fee-drawer/components/high-fee-confirmation.tsx +++ b/src/app/features/high-fee-drawer/components/high-fee-confirmation.tsx @@ -9,7 +9,7 @@ import { import { useDrawers } from '@app/common/hooks/use-drawers'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { Caption } from '@app/ui/components/typography/caption'; import { Title } from '@app/ui/components/typography/title'; @@ -26,21 +26,21 @@ export function HighFeeConfirmation({ learnMoreUrl }: { learnMoreUrl: string }) This action cannot be undone and the fees won't be returned, even if the transaction fails.{' '} - openInNewTab(learnMoreUrl)} variant="link"> + - setIsShowingHighFeeConfirmation(false)} width="50%" variant="outline" > Edit fee - - handleSubmit()} width="50%" type="submit"> + + ); diff --git a/src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx b/src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx index 497713d5bee..4d4a757f7fb 100644 --- a/src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx +++ b/src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx @@ -3,7 +3,7 @@ import { Flex } from 'leather-styles/jsx'; import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading'; import { useWalletType } from '@app/common/use-wallet-type'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface IncreaseFeeActionsProps { isDisabled: boolean; @@ -20,10 +20,10 @@ export function IncreaseFeeActions(props: IncreaseFeeActionsProps) { return ( - + ); } diff --git a/src/app/features/leather-intro-dialog/leather-intro-steps.tsx b/src/app/features/leather-intro-dialog/leather-intro-steps.tsx index 73651ffc890..766d3b8c5bd 100644 --- a/src/app/features/leather-intro-dialog/leather-intro-steps.tsx +++ b/src/app/features/leather-intro-dialog/leather-intro-steps.tsx @@ -8,7 +8,7 @@ import { Box, Flex, Stack, styled } from 'leather-styles/jsx'; import { HasChildren } from '@app/common/has-children'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { confettiConfig } from './confetti-config'; import { useLeatherIntroDialogContext } from './leather-intro-dialog'; @@ -55,14 +55,14 @@ export function LeatherIntroDialogPart1() { evolved into something even more incredible - { context.onRevealNewName(); setShowConfetti(true); }} > {!showConfetti ? 'Click to reveal our new name' : 'Introducing…'} - + @@ -117,10 +117,10 @@ export function LeatherIntroDialogPart2() { . - Accept new terms - + + ); diff --git a/src/app/features/ledger/flows/stacks-tx-signing/steps/contract-principal-bug-warning.tsx b/src/app/features/ledger/flows/stacks-tx-signing/steps/contract-principal-bug-warning.tsx index ed26ccd6d71..1800cbb0a87 100644 --- a/src/app/features/ledger/flows/stacks-tx-signing/steps/contract-principal-bug-warning.tsx +++ b/src/app/features/ledger/flows/stacks-tx-signing/steps/contract-principal-bug-warning.tsx @@ -5,7 +5,7 @@ import { useLoading } from '@app/common/hooks/use-loading'; import { delay } from '@app/common/utils'; import { LedgerTitle } from '@app/features/ledger/components/ledger-title'; import { LedgerWrapper } from '@app/features/ledger/components/ledger-wrapper'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { useLedgerTxSigningContext } from '../../../generic-flows/tx-signing/ledger-sign-tx.context'; @@ -38,12 +38,12 @@ export function ContractPrincipalBugWarning() { > Open Ledger Live ↗ - context.hasUserSkippedBuggyAppWarning.done('ignored-warning')} variant="outline" > Continue anyway - + ); diff --git a/src/app/features/ledger/generic-flows/request-keys/steps/add-more-keys.tsx b/src/app/features/ledger/generic-flows/request-keys/steps/add-more-keys.tsx index 0e286d51536..b9c82506337 100644 --- a/src/app/features/ledger/generic-flows/request-keys/steps/add-more-keys.tsx +++ b/src/app/features/ledger/generic-flows/request-keys/steps/add-more-keys.tsx @@ -4,7 +4,7 @@ import { Stack } from 'leather-styles/jsx'; import { LedgerTitle } from '@app/features/ledger/components/ledger-title'; import { LedgerWrapper } from '@app/features/ledger/components/ledger-wrapper'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { Caption } from '@app/ui/components/typography/caption'; import { Capitalize } from '@app/ui/utils/capitalize'; @@ -24,12 +24,12 @@ export function AddMoreKeysLayout() { {addKeysChain}? - navigate(`/get-started/${addKeysChain}/connect-your-ledger`)}> + + diff --git a/src/app/features/ledger/generic-steps/broadcast-error/broadcast-error.layout.tsx b/src/app/features/ledger/generic-steps/broadcast-error/broadcast-error.layout.tsx index b5262a07652..5203111ec9b 100644 --- a/src/app/features/ledger/generic-steps/broadcast-error/broadcast-error.layout.tsx +++ b/src/app/features/ledger/generic-steps/broadcast-error/broadcast-error.layout.tsx @@ -1,7 +1,7 @@ import BroadcastError from '@assets/images/unhappy-face-ui.png'; import { Box, Flex, styled } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { LedgerTitle } from '../../components/ledger-title'; import { LedgerWrapper } from '../../components/ledger-wrapper'; @@ -25,9 +25,9 @@ export function LedgerBroadcastErrorLayout(props: LedgerBroadcastErrorLayoutProp Your transaction failed to broadcast {error && <>because of the error: {error}} - + ); diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx index b2bf3df5ece..d5e94f7c8dc 100644 --- a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx +++ b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx @@ -5,7 +5,7 @@ import { ErrorLabel } from '@app/components/error-label'; import { ExternalLink } from '@app/components/external-link'; import { WarningLabel } from '@app/components/warning-label'; import { ConnectLedgerErr } from '@app/features/ledger/illustrations/ledger-illu-connect-ledger-error'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { CircleIcon } from '@app/ui/components/icons/circle-icon'; import { Caption } from '@app/ui/components/typography/caption'; @@ -59,9 +59,9 @@ export function ConnectLedgerErrorLayout(props: ConnectLedgerErrorLayoutProps) { /> - + If the problem persists, check our{' '} {showBitcoinConnectButton && ( - Connect Bitcoin - + )} {showStacksConnectButton && ( - Connect Stacks - + )} diff --git a/src/app/features/ledger/generic-steps/invalid-payload/device-invalid-payload.layout.tsx b/src/app/features/ledger/generic-steps/invalid-payload/device-invalid-payload.layout.tsx index fe0196a48e6..17c64e0599b 100644 --- a/src/app/features/ledger/generic-steps/invalid-payload/device-invalid-payload.layout.tsx +++ b/src/app/features/ledger/generic-steps/invalid-payload/device-invalid-payload.layout.tsx @@ -1,7 +1,7 @@ import { Box, Flex, styled } from 'leather-styles/jsx'; import { ConnectLedgerErr } from '@app/features/ledger/illustrations/ledger-illu-connect-ledger-error'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { LedgerWrapper } from '../../components/ledger-wrapper'; @@ -23,9 +23,9 @@ export function LedgerDeviceInvalidPayloadLayout({ Your Ledger device has rejected the payload stating it is invalid - + ); diff --git a/src/app/features/ledger/generic-steps/ledger-disconnected/ledger-disconnected.layout.tsx b/src/app/features/ledger/generic-steps/ledger-disconnected/ledger-disconnected.layout.tsx index ac47112a36b..5549aa5532e 100644 --- a/src/app/features/ledger/generic-steps/ledger-disconnected/ledger-disconnected.layout.tsx +++ b/src/app/features/ledger/generic-steps/ledger-disconnected/ledger-disconnected.layout.tsx @@ -1,6 +1,6 @@ import { Box, HStack } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { LedgerTitle } from '../../components/ledger-title'; import { LedgerWrapper } from '../../components/ledger-wrapper'; @@ -19,12 +19,12 @@ export function LedgerDisconnectedLayout(props: LedgerDisconnectedLayoutProps) { Your Ledger has disconnected - + + ); diff --git a/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.layout.tsx b/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.layout.tsx index 2b10bd335be..ae0b8ef13b4 100644 --- a/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.layout.tsx +++ b/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.layout.tsx @@ -1,7 +1,7 @@ import { Box } from 'leather-styles/jsx'; import { LedgerTxRejected } from '@app/features/ledger/illustrations/ledger-illu-transaction-rejected'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { LedgerTitle } from '../../components/ledger-title'; import { LedgerWrapper } from '../../components/ledger-wrapper'; @@ -20,9 +20,9 @@ export function LedgerOperationRejectedLayout({ {description} - + ); } diff --git a/src/app/features/ledger/generic-steps/public-key-mismatch/public-key-mismatch.layout.tsx b/src/app/features/ledger/generic-steps/public-key-mismatch/public-key-mismatch.layout.tsx index a55d7f12865..cf95b8df2cc 100644 --- a/src/app/features/ledger/generic-steps/public-key-mismatch/public-key-mismatch.layout.tsx +++ b/src/app/features/ledger/generic-steps/public-key-mismatch/public-key-mismatch.layout.tsx @@ -1,7 +1,7 @@ import { Box, Flex, styled } from 'leather-styles/jsx'; import { ConnectLedgerErr } from '@app/features/ledger/illustrations/ledger-illu-connect-ledger-error'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { LedgerWrapper } from '../../components/ledger-wrapper'; @@ -22,10 +22,10 @@ export function PublicKeyMismatchLayout({ onClose, onTryAgain }: PublicKeyMismat Ensure you're using the same Ledger you used when setting up Leather - + + ); diff --git a/src/app/features/message-signer/stacks-sign-message-action.tsx b/src/app/features/message-signer/stacks-sign-message-action.tsx index 57012272e54..29545f98539 100644 --- a/src/app/features/message-signer/stacks-sign-message-action.tsx +++ b/src/app/features/message-signer/stacks-sign-message-action.tsx @@ -1,7 +1,7 @@ import { HStack } from 'leather-styles/jsx'; import { useWalletType } from '@app/common/use-wallet-type'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface StacksSignMessageActionsProps { onSignMessage(): void; @@ -14,12 +14,12 @@ export function SignMessageActions(props: StacksSignMessageActionsProps) { return ( - + + ); } diff --git a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx index 272b753bbc6..de0e8988551 100644 --- a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx +++ b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx @@ -4,7 +4,7 @@ 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 { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; interface PsbtInputOutputItemLayoutProps { @@ -42,9 +42,9 @@ export function PsbtInputOutputItemLayout({ placement="bottom" > - + {label} @@ -53,7 +53,7 @@ export function PsbtInputOutputItemLayout({ {txId && txIdHoverLabel ? ( - handleOpenTxLink({ txid: txIdHoverLabel ?? '', @@ -71,7 +71,7 @@ export function PsbtInputOutputItemLayout({ > {txId} - + ) : null} diff --git a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx index 0669543c04e..bbd25183d4e 100644 --- a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx +++ b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx @@ -3,7 +3,7 @@ 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 { LeatherButton } from '@app/ui/components/button'; +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'; @@ -32,9 +32,9 @@ export function PsbtAddressTotalItem({ {title ? title : 'Bitcoin'} {valueAction ? ( - + ) : ( {value} )} @@ -54,9 +54,9 @@ export function PsbtAddressTotalItem({ placement="bottom" > - + diff --git a/src/app/features/psbt-signer/components/psbt-request-actions.tsx b/src/app/features/psbt-signer/components/psbt-request-actions.tsx index 8a314ebf5ba..966e6c95fa3 100644 --- a/src/app/features/psbt-signer/components/psbt-request-actions.tsx +++ b/src/app/features/psbt-signer/components/psbt-request-actions.tsx @@ -1,6 +1,6 @@ import { Box, HStack } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface PsbtRequestActionsProps { isLoading?: boolean; @@ -20,12 +20,12 @@ export function PsbtRequestActions({ isLoading, onCancel, onSignPsbt }: PsbtRequ zIndex={999} > - + + ); 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 index 9d578a39f66..7ad68b5f6ae 100644 --- 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,6 +1,6 @@ import { HStack, styled } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon'; interface PsbtRequestDetailsSectionHeaderProps { @@ -19,7 +19,7 @@ export function PsbtRequestDetailsSectionHeader({ {title} {hasDetails && onSetShowDetails ? ( - onSetShowDetails(!showDetails)} variant="text"> + ) : null} ); diff --git a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx index e7a901a13bd..2a0713d9a51 100644 --- a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx +++ b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx @@ -2,7 +2,7 @@ import { Flex, styled } from 'leather-styles/jsx'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { WarningLabel } from '@app/components/warning-label'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { BtcIcon } from '@app/ui/components/icons/btc-icon'; interface RetrieveTaprootToNativeSegwitLayoutProps { @@ -39,14 +39,14 @@ export function RetrieveTaprootToNativeSegwitLayout( displays no inscription. If it does display one, do not proceed with retrieval or you may lose it! - Retrieve bitcoin - + ); diff --git a/src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx b/src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx index ef77237b23f..f87216d8c73 100644 --- a/src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx +++ b/src/app/features/secret-key-displayer/secret-key-displayer.layout.tsx @@ -4,7 +4,7 @@ import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors'; import { SettingsSelectors } from '@tests/selectors/settings.selectors'; import { Flex, styled } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; import { EyeIcon } from '@app/ui/components/icons/eye-icon'; import { EyeSlashIcon } from '@app/ui/components/icons/eye-slash-icon'; @@ -35,7 +35,7 @@ export function SecretKeyDisplayerLayout(props: SecretKeyDisplayerLayoutProps) { ))} - {showSecretKey ? : } {showSecretKey ? 'Hide key' : 'Show key'} - - + - I've backed it up - + ); } diff --git a/src/app/features/settings-dropdown/components/settings-menu-item.tsx b/src/app/features/settings-dropdown/components/settings-menu-item.tsx index c0b0392442f..359ac8c8e80 100644 --- a/src/app/features/settings-dropdown/components/settings-menu-item.tsx +++ b/src/app/features/settings-dropdown/components/settings-menu-item.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react'; -import { ButtonProps, LeatherButton } from '@app/ui/components/button'; +import { Button, ButtonProps } from '@app/ui/components/button/button'; interface SettingsMenuItemProps extends ButtonProps { color?: string; @@ -9,7 +9,7 @@ interface SettingsMenuItemProps extends ButtonProps { } export function SettingsMenuItem({ color, onClick, children, ...props }: SettingsMenuItemProps) { return ( - {children} - + ); } diff --git a/src/app/features/stacks-transaction-request/principal-value.tsx b/src/app/features/stacks-transaction-request/principal-value.tsx index 207d995267e..a401897b44b 100644 --- a/src/app/features/stacks-transaction-request/principal-value.tsx +++ b/src/app/features/stacks-transaction-request/principal-value.tsx @@ -1,6 +1,6 @@ import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface PrincipalValueProps { address: string; @@ -10,13 +10,13 @@ export function PrincipalValue(props: PrincipalValueProps) { const { mode } = useCurrentNetworkState(); return ( - openInNewTab(`https://explorer.hiro.so/address/${address}?chain=${mode}`)} textStyle="label.03" variant="text" wordBreak="break-all" > {address} - + ); } diff --git a/src/app/features/stacks-transaction-request/submit-action.tsx b/src/app/features/stacks-transaction-request/submit-action.tsx index 3979dc41142..2599a868b17 100644 --- a/src/app/features/stacks-transaction-request/submit-action.tsx +++ b/src/app/features/stacks-transaction-request/submit-action.tsx @@ -8,13 +8,13 @@ import { isEmpty } from '@shared/utils'; import { useDrawers } from '@app/common/hooks/use-drawers'; import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading'; import { useTransactionError } from '@app/features/stacks-transaction-request/hooks/use-transaction-error'; -import { ButtonProps, LeatherButton } from '@app/ui/components/button'; +import { Button, ButtonProps } from '@app/ui/components/button/button'; function BaseConfirmButton(props: ButtonProps): React.JSX.Element { return ( - + ); } diff --git a/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx b/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx index 753f0cad84f..dd8227d7680 100644 --- a/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx +++ b/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx @@ -15,7 +15,7 @@ import { ErrorMessage } from '@app/features/stacks-transaction-request/transacti import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks'; import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; import { useTransactionRequestState } from '@app/store/transactions/requests.hooks'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { Caption } from '@app/ui/components/typography/caption'; import { truncateMiddle } from '@app/ui/utils/truncate-middle'; @@ -34,10 +34,10 @@ function InsufficientFundsActionButtons({ eventName }: InsufficientFundsActionBu return ( <> - Get STX - setIsShowingSwitchAccountsState(true)} variant="outline"> + + ); } diff --git a/src/app/features/switch-account-drawer/components/create-account-action.tsx b/src/app/features/switch-account-drawer/components/create-account-action.tsx index 9f4bfc9938b..c3de671b39b 100644 --- a/src/app/features/switch-account-drawer/components/create-account-action.tsx +++ b/src/app/features/switch-account-drawer/components/create-account-action.tsx @@ -1,6 +1,6 @@ import { Flex } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface CreateAccountActionProps { onCreateAccount(): void; @@ -17,9 +17,9 @@ export function CreateAccountAction({ onCreateAccount }: CreateAccountActionProp width="100%" zIndex={1} > - onCreateAccount()}> + ); } diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx index e2fea0b02e6..dc9272c1e20 100644 --- a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx +++ b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx @@ -7,7 +7,7 @@ import { token } from 'leather-styles/tokens'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; import { Flag } from '@app/components/layout/flag'; import { Tooltip } from '@app/components/tooltip'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon'; import { BtcIcon } from '@app/ui/components/icons/btc-icon'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; @@ -68,7 +68,7 @@ export function BitcoinContractLockAmount({ ) : null} {subValue ? ( - + ) : null} diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx index 234bceb0c78..71625f243cf 100644 --- a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx +++ b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx @@ -2,7 +2,7 @@ import { BitcoinContractRequestSelectors } from '@tests/selectors/bitcoin-contra import { Box, HStack } from 'leather-styles/jsx'; import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface BitcoinContractRequestActionsProps { isLoading: boolean; @@ -33,15 +33,15 @@ export function BitcoinContractRequestActions({ zIndex={999} > - Reject - - + ); diff --git a/src/app/pages/home/components/account-info-card.tsx b/src/app/pages/home/components/account-info-card.tsx index 8e89090a3e7..7da284fd96e 100644 --- a/src/app/pages/home/components/account-info-card.tsx +++ b/src/app/pages/home/components/account-info-card.tsx @@ -6,7 +6,7 @@ import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance'; import { useDrawers } from '@app/common/hooks/use-drawers'; import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon'; import { AccountActions } from './account-actions'; @@ -29,7 +29,7 @@ export function AccountInfoCard() { pt={{ base: 'space.05', sm: 'space.06' }} pb={{ base: 'space.02', sm: 'space.06' }} > - setIsShowingSwitchAccountsState(true)} variant="link" _before={{ bg: 'transparent' }} @@ -42,7 +42,7 @@ export function AccountInfoCard() { - + { +interface ActionButtonProps extends React.ComponentProps { icon: React.ReactNode; label: string; } export function ActionButton({ icon, label, ...rest }: ActionButtonProps) { return ( - + ); } diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx index 0191a7151c4..a34476fcc76 100644 --- a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx +++ b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx @@ -3,7 +3,7 @@ import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors'; import { css } from 'leather-styles/css'; import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon'; import { LeatherIcon } from '@app/ui/components/icons/leather-icon'; @@ -52,22 +52,22 @@ export function AllowDiagnosticsLayout(props: AllowDiagnosticsLayoutProps) { - onUserDenyDiagnostics()} data-testid={OnboardingSelectors.DenyAnalyticsBtn} > Deny - - + diff --git a/src/app/pages/onboarding/set-password/set-password.tsx b/src/app/pages/onboarding/set-password/set-password.tsx index 75d1fa21b32..d09df9956b5 100644 --- a/src/app/pages/onboarding/set-password/set-password.tsx +++ b/src/app/pages/onboarding/set-password/set-password.tsx @@ -23,7 +23,7 @@ import { Header } from '@app/components/header'; import { TwoColumnLayout } from '@app/components/secret-key/two-column.layout'; import { OnboardingGate } from '@app/routes/onboarding-gate'; import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { PasswordField } from './components/password-field'; @@ -155,7 +155,7 @@ function SetPasswordPage() { Your password - Continue - + } /> diff --git a/src/app/pages/onboarding/sign-in/components/sign-in.content.tsx b/src/app/pages/onboarding/sign-in/components/sign-in.content.tsx index f88640bb8cf..1baefc9082f 100644 --- a/src/app/pages/onboarding/sign-in/components/sign-in.content.tsx +++ b/src/app/pages/onboarding/sign-in/components/sign-in.content.tsx @@ -1,6 +1,6 @@ import { styled } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; export function SignInContent({ onClick, @@ -18,9 +18,9 @@ export function SignInContent({ Speed things up by pasting your entire Secret Key in one go. - + ); } diff --git a/src/app/pages/onboarding/sign-in/mnemonic-form.tsx b/src/app/pages/onboarding/sign-in/mnemonic-form.tsx index 56b148ed5d8..e0c2f0b1060 100644 --- a/src/app/pages/onboarding/sign-in/mnemonic-form.tsx +++ b/src/app/pages/onboarding/sign-in/mnemonic-form.tsx @@ -8,7 +8,7 @@ import { createNullArrayOfLength } from '@app/common/utils'; import { ErrorLabel } from '@app/components/error-label'; import { SecretKeyGrid } from '@app/components/secret-key/secret-key-grid'; import { useSignIn } from '@app/pages/onboarding/sign-in/hooks/use-sign-in'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { MnemonicWordInput } from '../../../components/secret-key/mnemonic-key/mnemonic-word-input'; import { @@ -93,7 +93,7 @@ export function MnemonicForm({ mnemonic, setMnemonic, twentyFourWordMode }: Mnem )} - Continue - + ); diff --git a/src/app/pages/onboarding/welcome/welcome.layout.tsx b/src/app/pages/onboarding/welcome/welcome.layout.tsx index f3e5ce85dbc..eac2302b581 100644 --- a/src/app/pages/onboarding/welcome/welcome.layout.tsx +++ b/src/app/pages/onboarding/welcome/welcome.layout.tsx @@ -2,7 +2,7 @@ import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors'; import { Box, Flex, styled } from 'leather-styles/jsx'; import { useViewportMinWidth } from '@app/common/hooks/use-media-query'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { LeatherIcon } from '@app/ui/components/icons/leather-icon'; import { LeatherLettermarkIcon } from '@app/ui/components/icons/leather-lettermark-icon'; @@ -47,7 +47,7 @@ export function WelcomeLayout({ - Create new wallet - + - Use existing key - - + diff --git a/src/app/pages/receive/components/receive-item.tsx b/src/app/pages/receive/components/receive-item.tsx index 1b1c12f8454..95d97cec82c 100644 --- a/src/app/pages/receive/components/receive-item.tsx +++ b/src/app/pages/receive/components/receive-item.tsx @@ -1,7 +1,7 @@ import { Flex, HStack, Stack, styled } from 'leather-styles/jsx'; import { Flag } from '@app/components/layout/flag'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; import { QrCodeIcon } from '@app/ui/components/icons/qr-code-icon'; import { truncateMiddle } from '@app/ui/utils/truncate-middle'; @@ -31,18 +31,13 @@ export function ReceiveItem({ {truncateMiddle(address, 6)} - + {onClickQrCode && ( - + )} diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx index 54981fe688e..3fc721c3bfc 100644 --- a/src/app/pages/receive/components/receive-tokens.layout.tsx +++ b/src/app/pages/receive/components/receive-tokens.layout.tsx @@ -7,7 +7,7 @@ import { useLocationState } from '@app/common/hooks/use-location-state'; import { AddressDisplayer } from '@app/components/address-displayer/address-displayer'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { QrCode } from './address-qr-code'; @@ -51,9 +51,9 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) { - onCopyAddressToClipboard(address)}> + ); diff --git a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx index 74574a34863..38c6b696339 100644 --- a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx +++ b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx @@ -1,7 +1,7 @@ import { Box, Flex, styled } from 'leather-styles/jsx'; import { RequesterFlag } from '@app/components/requester-flag'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { LeatherIcon } from '@app/ui/components/icons/leather-icon'; import { LeatherLIcon } from '@app/ui/components/icons/leather-l-icon'; @@ -29,12 +29,12 @@ export function GetAddressesLayout(props: GetAddressesLayoutProps) { - onUserApproveGetAddresses()} fullWidth> + - + ); } diff --git a/src/app/pages/select-network/components/add-network-button.tsx b/src/app/pages/select-network/components/add-network-button.tsx index afaf774d29e..f26b43de8ed 100644 --- a/src/app/pages/select-network/components/add-network-button.tsx +++ b/src/app/pages/select-network/components/add-network-button.tsx @@ -1,7 +1,7 @@ import { SettingsSelectors } from '@tests/selectors/settings.selectors'; import { Flex } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface AddNetworkButtonProps { onAddNetwork(): void; @@ -9,9 +9,9 @@ interface AddNetworkButtonProps { export function AddNetworkButton({ onAddNetwork }: AddNetworkButtonProps) { return ( - + ); } diff --git a/src/app/pages/select-network/components/network-list-item.layout.tsx b/src/app/pages/select-network/components/network-list-item.layout.tsx index ccc114ac72c..d6d6ba0ee8e 100644 --- a/src/app/pages/select-network/components/network-list-item.layout.tsx +++ b/src/app/pages/select-network/components/network-list-item.layout.tsx @@ -5,7 +5,7 @@ import { styled } from 'leather-styles/jsx'; import { NetworkConfiguration } from '@shared/constants'; import { getUrlHostname } from '@app/common/utils'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { TrashIcon } from '@app/ui/components/icons/trash-icon'; import { NetworkStatusIndicator } from './network-status-indicator'; @@ -60,7 +60,7 @@ export function NetworkListItemLayout({ {isCustom && ( - { @@ -69,7 +69,7 @@ export function NetworkListItemLayout({ }} > - + )} diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx index 27097f7f214..a992e03fce4 100644 --- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx +++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx @@ -9,7 +9,7 @@ import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { ErrorLabel } from '@app/components/error-label'; import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview'; import { InscriptionPreviewCard } from '@app/components/inscription-preview-card/inscription-preview-card'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { OrdinalIcon } from '@app/ui/components/icons/ordinal-icon'; import { RecipientField } from '../send-crypto-asset-form/components/recipient-field'; @@ -56,7 +56,7 @@ export function SendInscriptionForm() { {currentError && {currentError}} - Continue + diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx index 2ff7ac6dc4c..36ec06caeaa 100644 --- a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx +++ b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx @@ -14,7 +14,7 @@ import { InscriptionPreview } from '@app/components/inscription-preview-card/com import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks'; import { useAppDispatch } from '@app/store'; import { inscriptionSent } from '@app/store/ordinals/ordinals.slice'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { InscriptionPreviewCard } from '../../../components/inscription-preview-card/inscription-preview-card'; import { useBitcoinBroadcastTransaction } from '../../../query/bitcoin/transaction/use-bitcoin-broadcast-transaction'; @@ -82,9 +82,9 @@ export function SendInscriptionReview() { - + ); diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx index 79b02db151b..78b4e9204f8 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx @@ -1,6 +1,6 @@ import { HStack, styled } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon'; const labels = ['Address', 'BNS Name']; @@ -17,7 +17,7 @@ export function RecipientDropdownItem({ onSelectItem, }: RecipientDropdownItemProps) { return ( - {labels[index]} {isVisible ? <> : } - + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/components/send-max-button.tsx b/src/app/pages/send/send-crypto-asset-form/components/send-max-button.tsx index 40c274848be..74deb29424d 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/send-max-button.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/send-max-button.tsx @@ -8,7 +8,7 @@ import { Box } from 'leather-styles/jsx'; import { Money } from '@shared/models/money.model'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface SendMaxButtonProps { balance: Money; @@ -30,13 +30,13 @@ export function SendMaxButton({ balance, sendMaxBalance, ...props }: SendMaxButt if (sendMaxBalance === '0') return ; return ( - Send max - + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx index 776626c5b10..3d55e938f01 100644 --- a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx +++ b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx @@ -4,7 +4,7 @@ import { Box } from 'leather-styles/jsx'; import { Money } from '@shared/models/money.model'; import { Tooltip } from '@app/components/tooltip'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { useSendMax } from '../hooks/use-send-max'; @@ -45,14 +45,14 @@ export function BitcoinSendMaxButton({ placement="bottom" > - onSendMax()} variant="link" {...props} > {isSendingMax ? 'Sending max' : 'Send max'} - + ); diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form-confirmation.tsx index 8dc600b4abe..6889b03bb9c 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form-confirmation.tsx @@ -23,7 +23,7 @@ import { ModalHeader } from '@app/components/modal-header'; import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks'; import { useBrc20Transfers } from '@app/query/bitcoin/ordinals/brc20/use-brc-20'; import { useBitcoinBroadcastTransaction } from '@app/query/bitcoin/transaction/use-bitcoin-broadcast-transaction'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { useSendFormNavigate } from '../../hooks/use-send-form-navigate'; @@ -130,9 +130,9 @@ export function Brc20SendFormConfirmation() { - + ); diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx index 8e0ea15e638..90ee0e6cff0 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx @@ -6,7 +6,7 @@ import get from 'lodash.get'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { InfoLabel } from '@app/components/info-label'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { Brc20TokenIcon } from '@app/ui/components/icons/brc20-token-icon'; import { AmountField } from '../../components/amount-field'; @@ -67,7 +67,7 @@ export function Brc20SendForm() {
  • 1. Create transfer inscription with amount to send
  • 2. Send transfer inscription to recipient of choice
    • - { openInNewTab( 'https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens' @@ -77,7 +77,7 @@ export function Brc20SendForm() { variant="link" > Learn more - + diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx index a26e1e8b649..5511df43143 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx @@ -29,7 +29,7 @@ import { ModalHeader } from '@app/components/modal-header'; import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks'; import { useBitcoinBroadcastTransaction } from '@app/query/bitcoin/transaction/use-bitcoin-broadcast-transaction'; import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { useSendFormNavigate } from '../../hooks/use-send-form-navigate'; @@ -157,9 +157,9 @@ export function BtcSendFormConfirmation() { - + ); diff --git a/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx index a98a681fb66..0188e324015 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx @@ -11,7 +11,7 @@ import { InfoCardSeparator, } from '@app/components/info-card/info-card'; import { InfoLabel } from '@app/components/info-label'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface SendFormConfirmationProps { recipient: string; @@ -93,14 +93,14 @@ export function SendFormConfirmation({ - Confirm and send transaction - + ); diff --git a/src/app/pages/send/sent-summary/brc20-sent-summary.tsx b/src/app/pages/send/sent-summary/brc20-sent-summary.tsx index 559c5713804..353ef729cc0 100644 --- a/src/app/pages/send/sent-summary/brc20-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/brc20-sent-summary.tsx @@ -19,7 +19,7 @@ import { } from '@app/components/info-card/info-card'; import { InfoLabel } from '@app/components/info-label'; import { ModalHeader } from '@app/components/modal-header'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon'; import { TxDone } from '../send-crypto-asset-form/components/tx-done'; @@ -62,7 +62,7 @@ export function Brc20SentSummary() { screen once its status changes to "Ready to send" - { openInNewTab('https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens'); @@ -70,7 +70,7 @@ export function Brc20SentSummary() { variant="link" > Learn more - + diff --git a/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx b/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx index b26078e739e..15090af31cd 100644 --- a/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx +++ b/src/app/pages/sign-out-confirm/sign-out-confirm.layout.tsx @@ -5,7 +5,7 @@ import { Box, HStack, styled } from 'leather-styles/jsx'; import { useWalletType } from '@app/common/use-wallet-type'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { Flag } from '@app/components/layout/flag'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ErrorIcon } from '@app/ui/components/icons/error-icon'; interface SignOutConfirmLayoutProps { @@ -83,7 +83,7 @@ export function SignOutConfirmLayout(props: SignOutConfirmLayoutProps) { - onUserSafelyReturnToHomepage()} > Cancel - - +     diff --git a/src/app/pages/swap/components/select-asset-trigger-button.tsx b/src/app/pages/swap/components/select-asset-trigger-button.tsx index 9f6a2c7897b..32c9f89e891 100644 --- a/src/app/pages/swap/components/select-asset-trigger-button.tsx +++ b/src/app/pages/swap/components/select-asset-trigger-button.tsx @@ -2,7 +2,7 @@ import { SwapSelectors } from '@tests/selectors/swap.selectors'; import { useField } from 'formik'; import { HStack, styled } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon'; interface SelectAssetTriggerButtonProps { @@ -20,7 +20,7 @@ export function SelectAssetTriggerButton({ const [field] = useField(name); return ( - {symbol} - + ); } diff --git a/src/app/pages/swap/components/swap-selected-asset.layout.tsx b/src/app/pages/swap/components/swap-selected-asset.layout.tsx index 6a7284e8ec7..02ef75c0036 100644 --- a/src/app/pages/swap/components/swap-selected-asset.layout.tsx +++ b/src/app/pages/swap/components/swap-selected-asset.layout.tsx @@ -3,7 +3,7 @@ import { Box, HStack, styled } from 'leather-styles/jsx'; import { noop } from '@shared/utils'; import { Tooltip } from '@app/components/tooltip'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { SelectAssetTriggerButton } from './select-asset-trigger-button'; import { SelectedAsset } from './selected-asset'; @@ -82,14 +82,14 @@ export function SwapSelectedAssetLayout({ {showError ? error : caption} - {value} - + ) : null} diff --git a/src/app/pages/swap/swap-review/swap-review.tsx b/src/app/pages/swap/swap-review/swap-review.tsx index 54306d04e0f..accef3a66a9 100644 --- a/src/app/pages/swap/swap-review/swap-review.tsx +++ b/src/app/pages/swap/swap-review/swap-review.tsx @@ -5,7 +5,7 @@ import { SwapSelectors } from '@tests/selectors/swap.selectors'; import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { ModalHeader } from '@app/components/modal-header'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { SwapAssetsPair } from '../components/swap-assets-pair/swap-assets-pair'; import { SwapContentLayout } from '../components/swap-content.layout'; @@ -28,7 +28,7 @@ export function SwapReview() { - Swap - + diff --git a/src/app/pages/swap/swap.tsx b/src/app/pages/swap/swap.tsx index 81c86719649..64b8cb5fce4 100644 --- a/src/app/pages/swap/swap.tsx +++ b/src/app/pages/swap/swap.tsx @@ -9,7 +9,7 @@ import { isUndefined } from '@shared/utils'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { LoadingSpinner } from '@app/components/loading-spinner'; import { ModalHeader } from '@app/components/modal-header'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; import { SwapContentLayout } from './components/swap-content.layout'; import { SwapFooterLayout } from './components/swap-footer.layout'; @@ -37,14 +37,14 @@ export function Swap() { - Review and swap - + diff --git a/src/app/pages/update-profile-request/components/update-action.layout.tsx b/src/app/pages/update-profile-request/components/update-action.layout.tsx index 21722a58e1d..e11cd1ced3d 100644 --- a/src/app/pages/update-profile-request/components/update-action.layout.tsx +++ b/src/app/pages/update-profile-request/components/update-action.layout.tsx @@ -1,7 +1,7 @@ import { UpdateProfileRequestSelectors } from '@tests/selectors/requests.selectors'; import { HStack } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; +import { Button } from '@app/ui/components/button/button'; interface UpdateActionLayoutProps { onUpdateProfile(): Promise; @@ -15,10 +15,10 @@ export function UpdateActionLayout({ }: UpdateActionLayoutProps) { return ( - + ); } diff --git a/src/app/ui/components/button/button.stories.tsx b/src/app/ui/components/button/button.stories.tsx new file mode 100644 index 00000000000..7646e88b2b3 --- /dev/null +++ b/src/app/ui/components/button/button.stories.tsx @@ -0,0 +1,87 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { HStack, styled } from 'leather-styles/jsx'; + +import { BtcIcon } from '../icons/btc-icon'; +import { ChevronDownIcon } from '../icons/chevron-down-icon'; +import { PlaceholderIcon } from '../icons/placeholder-icon'; +import { Button as Component } from './button'; + +const meta: Meta = { + component: Component, + tags: ['autodocs'], + title: 'Button', +}; + +export default meta; +type Story = StoryObj; + +export const Button: Story = { + parameters: { + controls: { include: ['size', 'variant'] }, + }, + args: { + children: 'Button', + size: 'md', + variant: 'solid', + }, +}; + +export const InvertSolid: Story = { + parameters: { + backgrounds: { default: 'leather-dark-mode' }, + controls: { include: [] }, + }, + args: { + children: 'Button', + invert: true, + size: 'md', + variant: 'solid', + }, +}; + +export const InvertOutline: Story = { + parameters: { + backgrounds: { default: 'leather-dark-mode' }, + controls: { include: [] }, + }, + args: { + children: 'Button', + invert: true, + size: 'md', + variant: 'outline', + }, +}; + +export const WithIcons: Story = { + parameters: { + controls: { include: ['size', 'variant'] }, + }, + args: { + children: ( + + + Button + + + ), + size: 'md', + variant: 'solid', + }, +}; + +export const WithToken: Story = { + parameters: { + controls: { include: [] }, + }, + args: { + children: ( + + + Button + + + ), + trigger: true, + variant: 'ghost', + }, +}; diff --git a/src/app/ui/components/button.tsx b/src/app/ui/components/button/button.tsx similarity index 65% rename from src/app/ui/components/button.tsx rename to src/app/ui/components/button/button.tsx index cc7218ac643..b0a4a31c2aa 100644 --- a/src/app/ui/components/button.tsx +++ b/src/app/ui/components/button/button.tsx @@ -9,11 +9,11 @@ export type ButtonProps = Omit< > & ButtonVariantProps; -export function LeatherButton(props: ButtonProps) { - const { children, variant, fullWidth, invert, size, type = 'button', ...rest } = props; +export function Button(props: ButtonProps) { + const { children, fullWidth, invert, size, trigger, type = 'button', variant, ...rest } = props; return ( diff --git a/src/app/ui/components/icons/placeholder-icon.tsx b/src/app/ui/components/icons/placeholder-icon.tsx index bf07bd4486c..9e44dd4d6d4 100644 --- a/src/app/ui/components/icons/placeholder-icon.tsx +++ b/src/app/ui/components/icons/placeholder-icon.tsx @@ -14,7 +14,7 @@ export function PlaceholderIcon({ size = 'md', ...props }: SvgProps) { > = { + component: Component, + tags: ['autodocs'], + title: 'Link', +}; + +export default meta; +type Story = StoryObj; + +export const Link: Story = { + parameters: { + controls: { include: ['size', 'variant'] }, + }, + args: { + children: 'Link', + size: 'md', + variant: 'underlined', + }, +}; diff --git a/src/app/ui/components/link/link.tsx b/src/app/ui/components/link/link.tsx new file mode 100644 index 00000000000..1d394bc47d0 --- /dev/null +++ b/src/app/ui/components/link/link.tsx @@ -0,0 +1,21 @@ +import { styled } from 'leather-styles/jsx'; +import { type LinkVariantProps, link as linkRecipe } from 'leather-styles/recipes/link'; + +const StyledButton = styled('button'); + +export type LinkProps = Omit, keyof LinkVariantProps> & + LinkVariantProps; + +export function Link(props: LinkProps) { + const { children, fullWidth, invert, size, type = 'button', variant, ...rest } = props; + + return ( + + {children} + + ); +} diff --git a/theme/recipes/button-recipe.ts b/theme/recipes/button-recipe.ts index 3d1881d6617..a86265ee569 100644 --- a/theme/recipes/button-recipe.ts +++ b/theme/recipes/button-recipe.ts @@ -1,45 +1,23 @@ import { defineRecipe } from '@pandacss/dev'; import { ColorToken } from 'leather-styles/tokens'; -const basePesudoOutlineProps = { - content: '""', - position: 'absolute', - rounded: 'xs', - top: 0, - left: 0, - bottom: 0, - right: 0, -}; - -const focusStyles = { - _focus: { - _before: { - ...basePesudoOutlineProps, - border: '2px solid', - borderColor: 'blue.500', - }, - _focusWithin: { outline: 'none' }, - }, -}; - function loadingStyles(color: ColorToken) { return { _loading: { - color: 'transparent !important', _after: { - content: '""', - position: 'absolute', - width: '20px', - height: '20px', - left: 'calc(50% - 10px)', - rounded: '50%', - display: 'inline-block', - borderTop: '2px solid', + animation: 'spin', + border: '2px solid', borderColor: color, - borderRight: '2px solid transparent', + borderTop: '2px solid white', boxSizing: 'border-box', - animation: 'rotate 1s linear infinite', + content: '""', + display: 'inline-block', + height: '16px', + left: '50%', + rounded: '50%', + width: '16px', }, + color: 'transparent !important', }, }; } @@ -48,151 +26,138 @@ function loadingStyles(color: ColorToken) { export const buttonRecipe = defineRecipe({ description: 'The styles for the Button component', className: 'button', - jsx: ['LeatherButton'], + jsx: ['Button'], base: { + _disabled: { + cursor: 'not-allowed', + }, position: 'relative', - py: 'space.03', - px: 'space.04', rounded: 'xs', - textStyle: 'label.01', - _disabled: { cursor: 'not-allowed' }, + textStyle: 'label.02', }, variants: { size: { sm: { - textStyle: 'label.02', - py: 'space.02', - px: 'space.03', + px: 'space.02', + py: 'space.01', + }, + md: { + px: 'space.04', + py: 'space.03', }, }, variant: { - // Solid button solid: { - bg: 'brown.12', - color: 'brown.1', - _hover: { bg: 'brown.10' }, - _active: { bg: 'brown.12' }, + _active: { + bg: 'accent.action-primary-default', + }, _disabled: { - _hover: { - bg: 'brown.6', + bg: 'accent.background-secondary', + color: 'accent.non-interactive', + }, + _focus: { + _before: { + border: '3px solid {colors.focus}', }, - bg: 'brown.6', - color: 'white', }, - ...focusStyles, - ...loadingStyles('brown.2'), + _hover: { + bg: 'accent.action-primary-hover', + }, + bg: 'accent.action-primary-default', + color: 'accent.background-primary', + ...loadingStyles('accent.component-background-hover'), }, - // Outline button outline: { - _hover: { bg: 'brown.3' }, + _active: { + bg: 'accent.component-background-pressed', + }, _focus: { - _before: { border: '2px solid', borderColor: 'blue.500' }, + _before: { + border: '3px solid {colors.focus}', + }, }, - _before: { - ...basePesudoOutlineProps, - border: '1px solid', - borderColor: 'brown.12', + _hover: { + bg: 'accent.component-background-hover', }, - ...loadingStyles('brown.12'), + border: '1px solid {colors.accent.action-primary-default}', + ...loadingStyles('accent.action-primary-default'), }, - // Ghost button ghost: { - _hover: { bg: 'brown.2' }, - _focus: { _before: { border: '2px solid', borderColor: 'blue.500' } }, - ...loadingStyles('brown.12'), - }, - - // Link button - link: { - appearance: 'none', - pos: 'relative', - color: 'brown.12', - display: 'inline', - p: 'unset', - textAlign: 'left', - _hover: { color: 'brown.8' }, - _active: { color: 'brown.8' }, - _focus: { - outline: 0, - _before: { color: 'blue.500' }, - }, - _before: { - content: '""', - position: 'absolute', - left: 0, - right: 0, - bottom: '-2px', - height: '2px', - background: 'currentColor', + _active: { + bg: 'accent.component-background-pressed', }, - _disabled: { - color: 'brown.6', - _hover: { color: 'brown.6' }, + _focus: { + _before: { + border: '3px solid {focus}', + }, }, - }, - - // Text as action button - text: { - appearance: 'none', - pos: 'relative', - color: 'brown.12', - display: 'inline', - p: 'unset', - textAlign: 'left', - _hover: { color: 'brown.8' }, - _active: { color: 'brown.8' }, - _disabled: { - color: 'brown.6', - _hover: { color: 'brown.6' }, + _hover: { + bg: 'accent.component-background-hover', }, + ...loadingStyles('accent.action-primary-default'), }, }, - // Invert variant - // - Flag that allows using dark mode in light mode (and vice versa), used - // in some UIs invert: { true: {} }, - - // Full width variant helper fullWidth: { true: { width: '100%' } }, + trigger: { true: {} }, }, defaultVariants: { + size: 'md', variant: 'solid', }, compoundVariants: [ { - variant: 'solid', - invert: true, css: { - bg: 'brown.2', - color: 'brown.12', - _hover: { bg: 'brown.1' }, - _active: { bg: 'brown.4' }, - _loading: { _after: { borderColor: 'brown.12' } }, + _active: { + bg: 'accent.component-background-pressed', + }, + _hover: { + bg: 'accent.background-primary', + }, + _loading: { + _after: { + borderColor: 'accent.text-primary', + }, + }, + bg: 'accent.background-secondary', + color: 'accent.text-primary', }, + invert: true, + variant: 'solid', }, { - variant: 'outline', - invert: true, css: { - color: 'brown.2', - _before: { borderColor: 'brown.2' }, - _hover: { bg: 'brown.10' }, - _active: { bg: 'brown.12' }, - _loading: { _after: { borderColor: 'brown.12' } }, + _active: { + bg: 'accent.text-primary', + }, + _before: { + borderColor: 'accent.background-secondary', + }, + _hover: { + bg: 'accent.action-primary-hover', + }, + _loading: { + _after: { + borderColor: 'accent.text-primary', + }, + }, + border: '1px solid {colors.accent.background-secondary}', + color: 'accent.background-secondary', }, + invert: true, + variant: 'outline', }, { - variant: 'link', - invert: true, css: { - color: 'brown.2', - _hover: { color: 'brown.5' }, + p: 'space.02', }, + trigger: true, + variant: 'ghost', }, ], }); diff --git a/theme/recipes/link-recipe.ts b/theme/recipes/link-recipe.ts new file mode 100644 index 00000000000..d82132f3899 --- /dev/null +++ b/theme/recipes/link-recipe.ts @@ -0,0 +1,131 @@ +import { defineRecipe } from '@pandacss/dev'; +import { token } from 'leather-styles/tokens'; + +// ts-unused-exports:disable-next-line +export const linkRecipe = defineRecipe({ + description: 'The styles for the Link component', + className: 'link', + jsx: ['Button'], + base: { + _disabled: { + cursor: 'not-allowed', + }, + appearance: 'none', + color: 'accent.text-primary', + display: 'inline', + mb: 'space.01', + p: 'unset', + pos: 'relative', + position: 'relative', + pt: 'space.01', + textAlign: 'left', + }, + variants: { + size: { + sm: { + textStyle: 'label.03', + }, + md: { + textStyle: 'label.02', + }, + lg: { + textStyle: 'label.01', + }, + }, + variant: { + underlined: { + _before: { + content: '""', + background: 'accent.non-interactive', + bottom: '-2px', + height: '2px', + left: 0, + position: 'absolute', + right: 0, + }, + _active: { + _before: { + background: 'accent.text-primary', + }, + color: 'accent.text-primary', + }, + _disabled: { + _before: { + background: 'accent.non-interactive', + }, + color: 'accent.non-interactive', + }, + _focus: { + _before: { background: token('focus') }, + color: 'accent.text-primary', + outline: 0, + }, + _hover: { + _before: { + background: 'accent.action-primary-hover', + }, + }, + }, + + text: { + _before: { + content: '""', + background: 'accent.action-primary-hover', + bottom: '-2px', + height: '2px', + left: 0, + position: 'absolute', + right: 0, + visibility: 'hidden', + }, + _active: { + _before: { + background: 'accent.text-primary', + }, + color: 'accent.text-primary', + visibility: 'visible', + }, + _disabled: { + _before: { + background: 'accent.non-interactive', + visibility: 'visible', + }, + color: 'accent.non-interactive', + }, + _focus: { + _before: { + background: token('focus'), + visibility: 'visible', + }, + color: 'accent.text-primary', + outline: 0, + }, + _hover: { + _before: { + background: 'accent.action-primary-hover', + visibility: 'visible', + }, + }, + }, + }, + + invert: { true: {} }, + fullWidth: { true: { width: '100%' } }, + }, + + defaultVariants: { + size: 'md', + variant: 'underlined', + }, + + compoundVariants: [ + { + variant: 'underlined', + invert: true, + css: { + _hover: { color: 'accent.component-background-hover' }, + color: 'accent.background-secondary', + }, + }, + ], +}); diff --git a/theme/semantic-tokens.ts b/theme/semantic-tokens.ts index cc2dd434cd9..86757928986 100644 --- a/theme/semantic-tokens.ts +++ b/theme/semantic-tokens.ts @@ -4,4 +4,8 @@ import { defineSemanticTokens } from '@pandacss/dev'; // ts-unused-exports:disable-next-line export const semanticTokens = defineSemanticTokens({ ...leatherSemanticTokens, + // TODO: Move to mono repo + focus: { + value: { base: '{colors.lightModeBlue.500}', _dark: '{colors.darkModeBlue.500}' }, + }, }); diff --git a/yarn.lock b/yarn.lock index 88f14d0b5af..b16ad8802b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2484,10 +2484,10 @@ "@trivago/prettier-plugin-sort-imports" "^4.2.0" prettier "^3.0.3" -"@leather-wallet/tokens@0.0.3": - version "0.0.3" - resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.3.tgz#c120820e51a0af3df2a62dccb9149b99b739d358" - integrity sha512-ga2gLj17dGLEZKK59J/T12w/p2ibdO23yj5tGwSL8e6Nu7sWid06xTVwGixS3JdYZnW1531wEBm4rsX+I4pl+w== +"@leather-wallet/tokens@0.0.4": + version "0.0.4" + resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.4.tgz#16eefec9ebce9b546436243bc07b0942a4e9d55f" + integrity sha512-6klYyoM/frCl+5HNYHooZaAIv0pZJ2103xu3lN3CRqHQl/epMWfq58BPtquh48/XmQT8VoMD/qLR+o/tUvBopQ== "@ledgerhq/devices@^8.0.7", "@ledgerhq/devices@^8.2.0": version "8.2.0"