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/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..6ae302fd4c1 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 { 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({ 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..fbd8a9e72d5 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 { Link } from '@app/ui/components/link/link'; interface DisclaimerProps extends BoxProps { disclaimerText: string; @@ -13,15 +13,10 @@ export function Disclaimer({ disclaimerText, learnMoreUrl, ...props }: Disclaime {disclaimerText} {learnMoreUrl ? ( - openInNewTab(learnMoreUrl)} - variant="link" - > + openInNewTab(learnMoreUrl)}> {' '} Learn more - + ) : null} {learnMoreUrl ? '.' : null} diff --git a/src/app/components/edit-nonce-button.tsx b/src/app/components/edit-nonce-button.tsx deleted file mode 100644 index ae71f0ebf09..00000000000 --- a/src/app/components/edit-nonce-button.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ButtonProps, LeatherButton } from '@app/ui/components/button'; - -interface EditNonceButtonProps extends ButtonProps { - onEditNonce(): void; -} -export function EditNonceButton({ onEditNonce, ...props }: EditNonceButtonProps) { - return ( - - Edit nonce - - ); -} diff --git a/src/app/components/external-link.tsx b/src/app/components/external-link.tsx deleted file mode 100644 index 09d3dce9b5c..00000000000 --- a/src/app/components/external-link.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import { styled } from 'leather-styles/jsx'; - -const StyledA = styled('a'); - -interface ExternalLinkProps extends React.ComponentProps { - href: string; - children: React.ReactNode; -} - -export function ExternalLink({ href, children, ...rest }: ExternalLinkProps) { - return ( - - {children} - - ); -} 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..36062378d93 100644 --- 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 { LeatherButton } from '@app/ui/components/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,8 @@ export function FeeEstimateItem({ }, [index, selectedItem]); return ( - {labels[index]} {!disableFeeSelection && (isVisible ? selectedIcon : )} - + ); } diff --git a/src/app/components/fees-row/components/fee-estimate-select.layout.tsx b/src/app/components/fees-row/components/fee-estimate-select.layout.tsx index f4eb3f61398..6c7b0fb4168 100644 --- a/src/app/components/fees-row/components/fee-estimate-select.layout.tsx +++ b/src/app/components/fees-row/components/fee-estimate-select.layout.tsx @@ -44,6 +44,7 @@ export function FeeEstimateSelectLayout({ boxShadow="0px 8px 16px rgba(27, 39, 51, 0.08)" data-testid={SharedComponentsSelectors.FeeEstimateSelect} flexDirection="column" + gap="0px" minHeight="96px" minWidth="100px" overflow="hidden" diff --git a/src/app/components/generic-error/generic-error.layout.tsx b/src/app/components/generic-error/generic-error.layout.tsx index 148dae8939d..f8e0d2cf363 100644 --- 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 { LeatherButton } from '@app/ui/components/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) { - + Close window - + ); } diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx index c989663cc83..4ab3668797e 100644 --- a/src/app/components/header.tsx +++ b/src/app/components/header.tsx @@ -1,5 +1,4 @@ -import { useMemo } from 'react'; -import { useLocation, useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors'; import { SettingsSelectors } from '@tests/selectors/settings.selectors'; @@ -11,7 +10,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'; @@ -26,22 +25,10 @@ interface HeaderProps extends FlexProps { export function Header(props: HeaderProps) { const { actionButton, hideActions, onClose, title, ...rest } = props; const { isShowingSettings, setIsShowingSettings } = useDrawers(); - const { pathname } = useLocation(); const navigate = useNavigate(); const isBreakpointSm = useViewportMinWidth('sm'); - const leatherLogoIsClickable = useMemo(() => { - return ( - pathname !== RouteUrls.RequestDiagnostics && - pathname !== RouteUrls.Onboarding && - pathname !== RouteUrls.BackUpSecretKey && - pathname !== RouteUrls.SetPassword && - pathname !== RouteUrls.SignIn && - pathname !== RouteUrls.Home - ); - }, [pathname]); - return ( {onClose ? ( - + ) : null} {!title && (!onClose || isBreakpointSm) ? ( @@ -70,8 +57,7 @@ export function Header(props: HeaderProps) { navigate(RouteUrls.Home) : undefined} + onClick={() => navigate(RouteUrls.Home)} /> @@ -84,13 +70,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 3cd393928a2..9cf66b4600f 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..b31368f81de 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 { Link } from '@app/ui/components/link/link'; interface InscriptionMetadataProps { action?(): void; @@ -22,14 +22,9 @@ export function InscriptionMetadata({ {title} {subtitle} {action ? ( - action()} - textStyle="caption.02" - variant="text" - > + action()} textStyle="caption.02" variant="text"> {actionLabel} - + ) : null} ); diff --git a/src/app/components/leather-logo.tsx b/src/app/components/leather-logo.tsx index 91c301f076f..4deabad1bc1 100644 --- a/src/app/components/leather-logo.tsx +++ b/src/app/components/leather-logo.tsx @@ -1,26 +1,25 @@ import { memo } from 'react'; -import { LeatherButton } from '@app/ui/components/button'; +import { styled } from 'leather-styles/jsx'; + import { LeatherIcon } from '@app/ui/components/icons/leather-icon'; interface LeatherLogoProps { - isClickable: boolean; onClick?(): void; } export const LeatherLogo = memo((props: LeatherLogoProps) => { - const { isClickable, onClick } = props; + const { onClick } = props; return ( - - + ); }); 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..2f67d1d3dbe 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 { Link } from '@app/ui/components/link/link'; 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 b65bc0a8872..b5440a6cadd 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 { useCurrentTaprootAccountBalance } from '@app/query/bitcoin/balance/btc-taproot-balance.hooks'; import { useRecoverUninscribedTaprootUtxosFeatureEnabled } from '@app/query/common/remote-config/remote-config.query'; -import { LeatherButton } from '@app/ui/components/button'; +import { Link } from '@app/ui/components/link/link'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; const taprootSpendNotSupportedYetMsg = ` @@ -19,13 +19,9 @@ export function TaprootBalanceDisplayer({ onSelectRetrieveBalance }: TaprootBala if (balance.amount.isLessThanOrEqualTo(0)) return null; return ( - onSelectRetrieveBalance()} - textStyle="caption.02" - variant="text" - > + onSelectRetrieveBalance()} textStyle="caption.02" variant="text"> {formatMoney(balance)} - + ); } 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..d25677dead9 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 { Link } from '@app/ui/components/link/link'; 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"> + openInNewTab(url)}> Learn more. - + ); } diff --git a/src/app/features/feedback-button/feedback-button.tsx b/src/app/features/feedback-button/feedback-button.tsx index b540dfaf693..3a1351de27c 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..51aaa6015b2 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,8 @@ 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 { Link } from '@app/ui/components/link/link'; import { Caption } from '@app/ui/components/typography/caption'; import { Title } from '@app/ui/components/typography/title'; @@ -26,21 +27,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"> + openInNewTab(learnMoreUrl)} size="sm"> Learn more - + - 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..2e2c5b115ff 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 @@ -1,13 +1,12 @@ -import { Box, Flex, Stack, styled } from 'leather-styles/jsx'; +import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx'; import { capitalize } from '@app/common/utils'; 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'; +import { Link } from '@app/ui/components/link/link'; import { LedgerTitle } from '../../components/ledger-title'; import { LedgerWrapper } from '../../components/ledger-wrapper'; @@ -22,7 +21,7 @@ function PossibleReasonUnableToConnect(props: PossibleReasonUnableToConnectProps return ( - + {text} @@ -59,18 +58,20 @@ export function ConnectLedgerErrorLayout(props: ConnectLedgerErrorLayoutProps) { /> - + )} {showStacksConnectButton && ( - - - - Connect Stacks - - + + + Connect Stacks + + )} @@ -111,15 +109,16 @@ export function ConnectLedger(props: ConnectLedgerProps) { {showInstructions ? ( - + First time using Ledger on Leather? - - - Learn how to use Ledger device with Leather ↗ - - + + Learn how to use Ledger device with Leather ↗ + ) : null} 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/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx b/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx index 2bbc87d930f..3426dff57a2 100644 --- a/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx +++ b/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx @@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom'; import { styled } from 'leather-styles/jsx'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; -import { ExternalLink } from '@app/components/external-link'; import { UnsupportedBrowserImg } from '@app/features/ledger/illustrations/ledger-illu-unsupported-browser'; +import { Link } from '@app/ui/components/link/link'; import { LedgerTitle } from '../../components/ledger-title'; import { LedgerWrapper } from '../../components/ledger-wrapper'; @@ -19,14 +19,8 @@ export function UnsupportedBrowserLayout() { {' '} To connect your Ledger with Leather try{' '} - - Chrome - {' '} - or{' '} - - Brave - - . + Chrome or{' '} + Brave. 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 b092b1d95d2..1b66056696d 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 @@ -3,8 +3,8 @@ import { Box, Flex, HStack, styled } from 'leather-styles/jsx'; import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; import { Flag } from '@app/components/layout/flag'; -import { LeatherButton } from '@app/ui/components/button'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; +import { Link } from '@app/ui/components/link/link'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; interface PsbtInputOutputItemLayoutProps { @@ -39,9 +39,9 @@ export function PsbtInputOutputItemLayout({ side="bottom" > - + {addressHoverLabel ? : null} - + {label} @@ -50,7 +50,7 @@ export function PsbtInputOutputItemLayout({ {txId && txIdHoverLabel ? ( - handleOpenTxLink({ txid: txIdHoverLabel ?? '', @@ -61,7 +61,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 2e07d473d95..3c12fa02a4c 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 @@ -2,9 +2,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 { LeatherButton } from '@app/ui/components/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'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; interface PsbtAddressTotalItemProps { @@ -32,9 +32,7 @@ export function PsbtAddressTotalItem({ {title ? title : 'Bitcoin'} {valueAction ? ( - - {value} - + {value} ) : ( {value} )} @@ -51,9 +49,9 @@ export function PsbtAddressTotalItem({ side="bottom" > - + {hoverLabel ? : null} - + 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..4596f83d8ac 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,7 +1,7 @@ import { HStack, styled } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon'; +import { Link } from '@app/ui/components/link/link'; interface PsbtRequestDetailsSectionHeaderProps { hasDetails?: boolean; @@ -19,7 +19,7 @@ export function PsbtRequestDetailsSectionHeader({ {title} {hasDetails && onSetShowDetails ? ( - onSetShowDetails(!showDetails)} variant="text"> + onSetShowDetails(!showDetails)} variant="text"> {showDetails ? ( See less @@ -27,7 +27,7 @@ export function PsbtRequestDetailsSectionHeader({ ) : ( 'See details' )} - + ) : 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/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx b/src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx index 82b862cf530..5a2b226b6db 100644 --- a/src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx +++ b/src/app/features/retrieve-taproot-to-native-segwit/retrieve-taproot-to-native-segwit.tsx @@ -9,7 +9,6 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { formatMoneyPadded } from '@app/common/money/format-money'; import { delay } from '@app/common/utils'; import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer'; -import { ExternalLink } from '@app/components/external-link'; import { InfoCard, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card'; import { useCurrentTaprootAccountBalance, @@ -17,6 +16,7 @@ import { } from '@app/query/bitcoin/balance/btc-taproot-balance.hooks'; import { useBitcoinBroadcastTransaction } from '@app/query/bitcoin/transaction/use-bitcoin-broadcast-transaction'; import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; +import { Link } from '@app/ui/components/link/link'; import { truncateMiddle } from '@app/ui/utils/truncate-middle'; import { RetrieveTaprootToNativeSegwitLayout } from './components/retrieve-taproot-to-native-segwit.layout'; @@ -66,9 +66,9 @@ export function RetrieveTaprootToNativeSegwit() { key={utxo.txid} title={`Uninscribed UTXO #${i}`} value={ - + {`${truncateMiddle(utxo.txid, 4)}:${utxo.vout}`} ↗ - + } /> ))} 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..9d43c5f6158 100644 --- a/src/app/features/settings-dropdown/components/settings-menu-item.tsx +++ b/src/app/features/settings-dropdown/components/settings-menu-item.tsx @@ -1,29 +1,27 @@ import { ReactNode } from 'react'; -import { ButtonProps, LeatherButton } from '@app/ui/components/button'; +import { Box, BoxProps } from 'leather-styles/jsx'; -interface SettingsMenuItemProps extends ButtonProps { +interface SettingsMenuItemProps extends BoxProps { color?: string; onClick(e: React.MouseEvent): void; children: ReactNode; } export function SettingsMenuItem({ color, onClick, children, ...props }: SettingsMenuItemProps) { return ( - onClick?.(e)} px="space.04" py="space.04" - onClick={e => { - onClick?.(e); - }} textStyle="label.02" - variant="text" width="100%" {...props} > {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..1cd75b62174 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 { Link } from '@app/ui/components/link/link'; 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" + size="sm" variant="text" wordBreak="break-all" > {address} - + ); } diff --git a/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx b/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx index 5e49347b0f4..bce6c6504b2 100644 --- a/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx +++ b/src/app/features/stacks-transaction-request/stacks-transaction-signer.tsx @@ -16,7 +16,6 @@ import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { stxToMicroStx } from '@app/common/money/unit-conversion'; import { stxFeeValidator } from '@app/common/validation/forms/fee-validators'; import { nonceValidator } from '@app/common/validation/nonce-validators'; -import { EditNonceButton } from '@app/components/edit-nonce-button'; import { NonceSetter } from '@app/components/nonce-setter'; import { PopupHeader } from '@app/features/current-account/popup-header'; import { RequestingTabClosedWarningMessage } from '@app/features/errors/requesting-tab-closed-error-msg'; @@ -32,6 +31,7 @@ import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balan import { useCalculateStacksTxFees } from '@app/query/stacks/fees/fees.hooks'; import { useNextNonce } from '@app/query/stacks/nonce/account-nonces.hooks'; import { useTransactionRequestState } from '@app/store/transactions/requests.hooks'; +import { Link } from '@app/ui/components/link/link'; import { FeeForm } from './fee-form'; import { MinimalErrorMessage } from './minimal-error-message'; @@ -119,11 +119,13 @@ export function StacksTransactionSigner({ disableFeeSelection={disableFeeSelection} /> {!disableNonceSelection && ( - navigate(RouteUrls.EditNonce + search)} - /> + onClick={() => navigate(RouteUrls.EditNonce + search)} + > + Edit nonce + )} diff --git a/src/app/features/stacks-transaction-request/submit-action.tsx b/src/app/features/stacks-transaction-request/submit-action.tsx index 3979dc41142..10fd16699f6 100644 --- a/src/app/features/stacks-transaction-request/submit-action.tsx +++ b/src/app/features/stacks-transaction-request/submit-action.tsx @@ -8,15 +8,7 @@ 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'; - -function BaseConfirmButton(props: ButtonProps): React.JSX.Element { - return ( - - Confirm - - ); -} +import { Button } from '@app/ui/components/button/button'; export function SubmitAction() { const { handleSubmit, values, validateForm } = useFormikContext(); @@ -36,13 +28,16 @@ export function SubmitAction() { }; return ( - Confirm - + ); } 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 7e479bd9a8f..e8ce61bfba3 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 @@ -6,10 +6,10 @@ import { token } from 'leather-styles/tokens'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; import { Flag } from '@app/components/layout/flag'; -import { LeatherButton } from '@app/ui/components/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'; +import { Link } from '@app/ui/components/link/link'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; interface BitcoinContractLockAmountProps { @@ -65,7 +65,7 @@ export function BitcoinContractLockAmount({ ) : null} {subValue ? ( - + {subValue} @@ -74,7 +74,7 @@ export function BitcoinContractLockAmount({ ) : null} - + ) : 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 cb1ed24263e..308592aabb0 100644 --- a/src/app/pages/home/components/account-info-card.tsx +++ b/src/app/pages/home/components/account-info-card.tsx @@ -6,8 +6,8 @@ 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 { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon'; +import { Link } from '@app/ui/components/link/link'; import { AccountActions } from './account-actions'; @@ -29,10 +29,10 @@ export function AccountInfoCard() { pt={{ base: 'space.05', sm: 'space.06' }} pb={{ base: 'space.02', sm: 'space.06' }} > - setIsShowingSwitchAccountsState(true)} - variant="link" + setIsShowingSwitchAccountsState(true)} > @@ -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 0b8c02ae96f..3e6e5979294 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..497c0bd6290 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 { Link } from '@app/ui/components/link/link'; export function SignInContent({ onClick, @@ -18,9 +18,9 @@ export function SignInContent({ Speed things up by pasting your entire Secret Key in one go. - + {twentyFourWordMode ? 'Have a 12-word Secret Key?' : 'Use 24 word Secret Key'} - + ); } 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 bd56e043e0d..de153ec3e8c 100644 --- a/src/app/pages/onboarding/welcome/welcome.layout.tsx +++ b/src/app/pages/onboarding/welcome/welcome.layout.tsx @@ -2,9 +2,10 @@ 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'; +import { Link } from '@app/ui/components/link/link'; interface WelcomeLayoutProps { tagline: React.ReactNode; @@ -47,7 +48,7 @@ export function WelcomeLayout({ - Create new wallet - + - Use existing key - - + + + Use Ledger + + 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..907805a5a4c 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,5 @@ import { HStack, styled } from 'leather-styles/jsx'; -import { LeatherButton } from '@app/ui/components/button'; import { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon'; const labels = ['Address', 'BNS Name']; @@ -17,7 +16,7 @@ export function RecipientDropdownItem({ onSelectItem, }: RecipientDropdownItemProps) { return ( - onSelectItem(index)} pl={isVisible ? 'space.02' : 'unset'} - variant="text" + textStyle="label.02" + zIndex={999} > {labels[index]} {isVisible ? <> : } - + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown.layout.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown.layout.tsx index 4b52853a90e..4d49107c948 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown.layout.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown.layout.tsx @@ -31,6 +31,7 @@ export function RecipientDropdownLayout({ borderRadius="xs" boxShadow="0px 8px 16px rgba(27, 39, 51, 0.08)" flexDirection="column" + gap="0px" minWidth="100px" overflow="hidden" p="space.01" 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..22f99110ec0 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 { Link } from '@app/ui/components/link/link'; interface SendMaxButtonProps { balance: Money; @@ -30,13 +30,8 @@ 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 c848668ec4d..d777beb8c31 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 @@ -3,7 +3,7 @@ import { Box } from 'leather-styles/jsx'; import { Money } from '@shared/models/money.model'; -import { LeatherButton } from '@app/ui/components/button'; +import { Link } from '@app/ui/components/link/link'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { useSendMax } from '../hooks/use-send-max'; @@ -40,14 +40,13 @@ export function BitcoinSendMaxButton({ return ( - onSendMax()} - variant="link" {...props} > {isSendingMax ? 'Sending max' : 'Send max'} - + ); diff --git a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx index f20f5fb22a8..b34009109aa 100644 --- a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx +++ b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx @@ -1,13 +1,11 @@ -import { ExternalLink } from '@app/components/external-link'; import { WarningLabel } from '@app/components/warning-label'; +import { Link } from '@app/ui/components/link/link'; export function TestnetBtcMessage() { return ( This is a Bitcoin testnet transaction. Funds have no value.{' '} - - Get testnet BTC here ↗ - + Get testnet BTC here ↗ ); } 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..58ed4c4eb59 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,8 +6,8 @@ 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 { Brc20TokenIcon } from '@app/ui/components/icons/brc20-token-icon'; +import { Link } from '@app/ui/components/link/link'; import { AmountField } from '../../components/amount-field'; import { FormFooter } from '../../components/form-footer'; @@ -67,17 +67,16 @@ 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' ); }} textStyle="body.02" - 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/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx index 8a4041e0993..88ed4fa7bee 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx @@ -10,11 +10,11 @@ import { StacksSendFormValues } from '@shared/models/form.model'; import { Money } from '@shared/models/money.model'; import { RouteUrls } from '@shared/route-urls'; -import { EditNonceButton } from '@app/components/edit-nonce-button'; import { FeesRow } from '@app/components/fees-row/fees-row'; import { NonceSetter } from '@app/components/nonce-setter'; import { HighFeeDrawer } from '@app/features/high-fee-drawer/high-fee-drawer'; import { useUpdatePersistedSendFormValues } from '@app/features/popup-send-form-restoration/use-update-persisted-send-form-values'; +import { Link } from '@app/ui/components/link/link'; import { FormFooter } from '../../components/form-footer'; import { MemoField } from '../../components/memo-field'; @@ -69,11 +69,13 @@ export function StacksCommonSendForm({ - navigate(RouteUrls.EditNonce)} - /> + onClick={() => navigate(RouteUrls.EditNonce)} + > + Edit nonce + 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..e8b5e67d517 100644 --- a/src/app/pages/send/sent-summary/brc20-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/brc20-sent-summary.tsx @@ -19,8 +19,8 @@ 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 { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon'; +import { Link } from '@app/ui/components/link/link'; import { TxDone } from '../send-crypto-asset-form/components/tx-done'; @@ -62,15 +62,14 @@ export function Brc20SentSummary() { screen once its status changes to "Ready to send" - { openInNewTab('https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens'); }} - 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..c41728aaf67 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 @@ -2,10 +2,11 @@ import { SettingsSelectors } from '@tests/selectors/settings.selectors'; import { useFormik } from 'formik'; import { Box, HStack, styled } from 'leather-styles/jsx'; +import { useThemeSwitcher } from '@app/common/theme-provider'; 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 { @@ -16,6 +17,7 @@ export function SignOutConfirmLayout(props: SignOutConfirmLayoutProps) { const { onUserDeleteWallet, onUserSafelyReturnToHomepage } = props; const { whenWallet, walletType } = useWalletType(); + const { theme } = useThemeSwitcher(); const form = useFormik({ initialValues: { @@ -83,25 +85,26 @@ export function SignOutConfirmLayout(props: SignOutConfirmLayoutProps) { - onUserSafelyReturnToHomepage()} + variant="outline" > 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 0832b719aca..7af1ccfc87b 100644 --- a/src/app/pages/swap/components/swap-selected-asset.layout.tsx +++ b/src/app/pages/swap/components/swap-selected-asset.layout.tsx @@ -2,7 +2,7 @@ import { Box, HStack, styled } from 'leather-styles/jsx'; import { noop } from '@shared/utils'; -import { LeatherButton } from '@app/ui/components/button'; +import { Link } from '@app/ui/components/link/link'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; import { SelectAssetTriggerButton } from './select-asset-trigger-button'; @@ -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/transaction-request/transaction-request.tsx b/src/app/pages/transaction-request/transaction-request.tsx index 88c5fa001ec..e565a736125 100644 --- a/src/app/pages/transaction-request/transaction-request.tsx +++ b/src/app/pages/transaction-request/transaction-request.tsx @@ -18,7 +18,6 @@ import { useOnMount } from '@app/common/hooks/use-on-mount'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { stxFeeValidator } from '@app/common/validation/forms/fee-validators'; import { nonceValidator } from '@app/common/validation/nonce-validators'; -import { EditNonceButton } from '@app/components/edit-nonce-button'; import { NonceSetter } from '@app/components/nonce-setter'; import { PopupHeader } from '@app/features/current-account/popup-header'; import { RequestingTabClosedWarningMessage } from '@app/features/errors/requesting-tab-closed-error-msg'; @@ -43,6 +42,7 @@ import { useStacksTransactionBroadcast, useUnsignedStacksTransactionBaseState, } from '@app/store/transactions/transaction.hooks'; +import { Link } from '@app/ui/components/link/link'; function TransactionRequestBase() { const transactionRequest = useTransactionRequestState(); @@ -128,11 +128,9 @@ function TransactionRequestBase() { - navigate(RouteUrls.EditNonce)} - /> + navigate(RouteUrls.EditNonce)}> + Edit nonce + 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.tsx b/src/app/ui/components/button.tsx deleted file mode 100644 index cc7218ac643..00000000000 --- a/src/app/ui/components/button.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { styled } from 'leather-styles/jsx'; -import { type ButtonVariantProps, button as buttonRecipe } from 'leather-styles/recipes'; - -const StyledButton = styled('button'); - -export type ButtonProps = Omit< - React.ComponentProps, - keyof ButtonVariantProps -> & - ButtonVariantProps; - -export function LeatherButton(props: ButtonProps) { - const { children, variant, fullWidth, invert, size, type = 'button', ...rest } = props; - return ( - - {children} - - ); -} 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..c0d2277c292 --- /dev/null +++ b/src/app/ui/components/button/button.stories.tsx @@ -0,0 +1,89 @@ +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', + }, +}; + +// TODO: Remove invert code +export const InvertSolid: Story = { + parameters: { + backgrounds: { default: 'leather-dark-mode' }, + controls: { include: [] }, + }, + args: { + children: 'Button', + invert: true, + size: 'md', + variant: 'solid', + }, +}; + +// TODO: Remove invert code +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/button.tsx b/src/app/ui/components/button/button.tsx new file mode 100644 index 00000000000..e7bd05cb093 --- /dev/null +++ b/src/app/ui/components/button/button.tsx @@ -0,0 +1,20 @@ +import { styled } from 'leather-styles/jsx'; +import { type ButtonVariantProps, button as buttonRecipe } from 'leather-styles/recipes'; + +const StyledButton = styled('button'); + +type ButtonProps = Omit, keyof ButtonVariantProps> & + ButtonVariantProps; + +export function Button(props: ButtonProps) { + const { children, fullWidth, invert, size, trigger, type = 'button', variant, ...rest } = props; + return ( + + {children} + + ); +} diff --git a/src/app/ui/components/icons/btc-ledger-icon.tsx b/src/app/ui/components/icons/btc-ledger-icon.tsx index 553192c63b0..0ae3068e155 100644 --- a/src/app/ui/components/icons/btc-ledger-icon.tsx +++ b/src/app/ui/components/icons/btc-ledger-icon.tsx @@ -7,7 +7,7 @@ export function BtcLedgerIcon({ 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', + }, +}; + +// TODO: Remove invert code +export const InvertLink: Story = { + parameters: { + backgrounds: { default: 'leather-dark-mode' }, + controls: { include: [] }, + }, + args: { + children: 'Link', + invert: true, + 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..97e359844b5 --- /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 StyledLink = styled('a'); + +type LinkProps = Omit, keyof LinkVariantProps> & + LinkVariantProps; + +export function Link(props: LinkProps) { + const { children, fullWidth, invert, size, variant, ...rest } = props; + + return ( + + {children} + + ); +} diff --git a/theme/recipes/button-recipe.ts b/theme/recipes/button-recipe.ts index 72ef231e45b..5e26e867360 100644 --- a/theme/recipes/button-recipe.ts +++ b/theme/recipes/button-recipe.ts @@ -1,45 +1,25 @@ 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: { + animation: 'spin', + border: '2px solid', + borderColor: color, + borderTop: '2px solid', + boxSizing: 'border-box', content: '""', - position: 'absolute', - width: '20px', + display: 'inline-block', height: '20px', left: 'calc(50% - 10px)', + position: 'absolute', rounded: '50%', - display: 'inline-block', - borderTop: '2px solid', - borderColor: color, - borderRight: '2px solid transparent', - boxSizing: 'border-box', - animation: 'rotate 1s linear infinite', + top: 'calc(50% - 10px)', + width: '20px', }, + color: 'transparent !important', }, }; } @@ -48,151 +28,141 @@ 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: 'ink.12', - color: 'ink.1', - _hover: { bg: 'ink.10' }, - _active: { bg: 'ink.12' }, + _active: { + bg: 'accent.action-primary-default', + }, _disabled: { - _hover: { - bg: 'ink.6', + bg: 'accent.background-secondary', + color: 'accent.non-interactive', + }, + _focus: { + _before: { + border: '3px solid {colors.focus}', }, - bg: 'ink.6', - color: 'white', }, - ...focusStyles, - ...loadingStyles('ink.2'), + _hover: { + bg: 'accent.action-primary-hover', + }, + bg: 'accent.action-primary-default', + color: 'accent.background-primary', + ...loadingStyles('accent.background-primary'), }, - // Outline button outline: { - _hover: { bg: 'ink.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: 'ink.12', + _hover: { + bg: 'accent.component-background-hover', }, - ...loadingStyles('ink.12'), + border: '1px solid {colors.accent.action-primary-default}', + ...loadingStyles('accent.action-primary-default'), }, - // Ghost button ghost: { - _hover: { bg: 'accent.component-background-hover' }, - _focus: { _before: { border: '2px solid', borderColor: 'blue.500' } }, - ...loadingStyles('ink.12'), - }, - - // Link button - link: { - appearance: 'none', - pos: 'relative', - color: 'ink.12', - display: 'inline', - p: 'unset', - textAlign: 'left', - _hover: { color: 'ink.8' }, - _active: { color: 'ink.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: 'ink.6', - _hover: { color: 'ink.6' }, + _focus: { + _before: { + border: '3px solid {focus}', + }, }, - }, - - // Text as action button - text: { - appearance: 'none', - pos: 'relative', - color: 'ink.12', - display: 'inline', - p: 'unset', - textAlign: 'left', - _hover: { color: 'ink.8' }, - _active: { color: 'ink.8' }, - _disabled: { - color: 'ink.6', - _hover: { color: 'ink.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 + // TODO: Remove invert code invert: { true: {} }, - // Full width variant helper fullWidth: { true: { width: '100%' } }, + trigger: { true: {} }, }, defaultVariants: { + size: 'md', variant: 'solid', }, + // TODO: Remove invert code compoundVariants: [ { - variant: 'solid', - invert: true, css: { - bg: 'ink.2', - color: 'ink.12', - _hover: { bg: 'ink.1' }, - _active: { bg: 'ink.4' }, - _loading: { _after: { borderColor: 'ink.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: 'ink.2', - _before: { borderColor: 'ink.2' }, - _hover: { bg: 'ink.10' }, - _active: { bg: 'ink.12' }, - _loading: { _after: { borderColor: 'ink.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: 'ink.2', - _hover: { color: 'ink.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..88ba089d678 --- /dev/null +++ b/theme/recipes/link-recipe.ts @@ -0,0 +1,145 @@ +import { defineRecipe } from '@pandacss/dev'; + +// ts-unused-exports:disable-next-line +export const linkRecipe = defineRecipe({ + description: 'The styles for the Link component', + className: 'link', + jsx: ['Link'], + 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: '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: 'focus', + visibility: 'visible', + }, + color: 'accent.text-primary', + outline: 0, + }, + _hover: { + _before: { + background: 'accent.action-primary-hover', + visibility: 'visible', + }, + }, + }, + }, + + // TODO: Remove invert code + invert: { true: {} }, + + fullWidth: { true: { width: '100%' } }, + }, + + defaultVariants: { + size: 'md', + variant: 'underlined', + }, + + // TODO: Remove invert code + compoundVariants: [ + { + variant: 'underlined', + invert: true, + css: { + _focus: { + _before: { + background: 'accent.background-primary', + visibility: 'visible', + }, + outline: 0, + }, + _hover: { + _before: { + background: 'accent.background-primary', + visibility: 'visible', + }, + }, + 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}' }, + }, });