feat: callout, closes #4311

src/app/components/error-label.tsx

@@ -8,6 +8,7 @@ export function ErrorLabel({ children, ...rest }: FlagProps) {
       spacing="space.02"
       color="red.action-primary-default"
       textStyle="body.02"
+      textAlign="left"
       {...rest}
     >
       {children}

src/app/components/fees-row/components/fees-row.layout.tsx

@@ -3,7 +3,7 @@ import { HStack, HstackProps, styled } from 'leather-styles/jsx';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
 import { SponsoredLabel } from '@app/components/sponsored-label';
-import { WarningLabel } from '@app/components/warning-label';
+import { Callout } from '@app/ui/components/callout/callout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 import { InfoCircleIcon } from '@app/ui/icons/info-circle-icon';
 
@@ -42,7 +42,11 @@ export function FeesRowLayout(props: FeesRowLayoutProps) {
         {feeField}
       </HStack>
       {isSponsored && <SponsoredLabel />}
-      {!meta.error && fieldWarning && <WarningLabel width="100%">{fieldWarning}</WarningLabel>}
+      {!meta.error && fieldWarning && (
+        <Callout variant="warning" width="100%">
+          {fieldWarning}
+        </Callout>
+      )}
     </HStack>
   );
 }

src/app/features/errors/requesting-tab-closed-error-msg.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
-import { WarningLabel } from '@app/components/warning-label';
 import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';
+import { Callout } from '@app/ui/components/callout/callout';
 
 export function RequestingTabClosedWarningMessage() {
   const [hasTabClosed, setHasTabClosed] = useState(false);
@@ -14,8 +14,8 @@ export function RequestingTabClosedWarningMessage() {
   if (!hasTabClosed) return null;
 
   return (
-    <WarningLabel mb="space.05" title="Requesting window closed" width="100%">
+    <Callout variant="warning" mb="space.05" title="Requesting window closed" width="100%">
       The window making this request closed, but you can still broadcast the transaction
-    </WarningLabel>
+    </Callout>
   );
 }

src/app/features/ledger/components/ledger-inline-warnings.tsx

@@ -2,7 +2,7 @@ import { styled } from 'leather-styles/jsx';
 
 import { SupportedBlockchains } from '@shared/constants';
 
-import { WarningLabel } from '@app/components/warning-label';
+import { Callout } from '@app/ui/components/callout/callout';
 import { Capitalize } from '@app/ui/utils/capitalize';
 
 import { LatestDeviceResponse } from '../utils/generic-ledger-utils';
@@ -19,30 +19,30 @@ interface CommonLedgerInlineWarningsProps extends RequiresChainProp {
 
 function OutdatedLedgerAppWarning({ chain }: RequiresChainProp) {
   return (
-    <WarningLabel textAlign="left">
+    <Callout variant="warning" textAlign="left">
       Latest version of <Capitalize>{chain} app</Capitalize> required
       <styled.a href="ledgerlive://manager" textDecoration="underline">
         Update on Ledger Live to continue
       </styled.a>
-    </WarningLabel>
+    </Callout>
   );
 }
 
 function LedgerDeviceLockedWarning({ chain }: RequiresChainProp) {
   return (
-    <WarningLabel textAlign="left">
+    <Callout variant="warning" textAlign="left">
       Your Ledger is locked. Unlock it and open the {''}
       <Capitalize>{chain}</Capitalize>
       {''} app to continue.
-    </WarningLabel>
+    </Callout>
   );
 }
 
 function LedgerAppClosedWarning({ chain }: RequiresChainProp) {
   return (
-    <WarningLabel textAlign="left">
+    <Callout variant="warning" textAlign="left">
       The <Capitalize>{chain}</Capitalize> app appears to be closed on Ledger. Open it to continue.
-    </WarningLabel>
+    </Callout>
   );
 }
 

src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx

@@ -1,9 +1,8 @@
 import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
-import { ErrorLabel } from '@app/components/error-label';
-import { WarningLabel } from '@app/components/warning-label';
 import { ConnectLedgerErr } from '@app/features/ledger/illustrations/ledger-illu-connect-ledger-error';
 import { Button } from '@app/ui/components/button/button';
+import { Callout } from '@app/ui/components/callout/callout';
 import { Link } from '@app/ui/components/link/link';
 import { CircleIcon } from '@app/ui/icons/circle-icon';
 
@@ -40,13 +39,11 @@ export function ConnectLedgerErrorLayout(props: ConnectLedgerErrorLayoutProps) {
         <ConnectLedgerErr />
       </Box>
       <LedgerTitle mt="space.07">We're unable to connect to your Ledger device</LedgerTitle>
-      {warningText ? (
-        <WarningLabel mt="space.04" px="space.06" fontSize="14px">
-          {warningText}
-        </WarningLabel>
-      ) : (
-        <ErrorLabel mt="space.02">Unable to connect</ErrorLabel>
-      )}
+
+      <Callout variant={warningText ? 'warning' : 'error'} mt="space.04">
+        {warningText ? warningText : 'Unable to connect'}
+      </Callout>
+
       <Stack borderRadius="md" gap="space.01" textAlign="left" py="space.05">
         <PossibleReasonUnableToConnect text="Check if Ledger Live is open. Close it and try again" />
         <PossibleReasonUnableToConnect text="Ensure you only have one instance of Leather open" />

src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.tsx

@@ -11,8 +11,8 @@ export function ConnectLedgerError() {
   const latestLedgerError = useLatestLedgerError();
   const ledgerNavigate = useLedgerNavigate();
   const chain = useLocationState<SupportedBlockchains>('chain');
-  // TODO: here it would be better to use
-  // the actual app name from LEDGER_APPS_MAP at src/app/features/ledger/utils/generic-ledger-utils.ts
+  // TODO: here it would be better to use the actual app name from
+  // LEDGER_APPS_MAP at src/app/features/ledger/utils/generic-ledger-utils.ts
 
   const appName = capitalize(chain);
   return (

src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx

@@ -1,13 +1,13 @@
-import { WarningLabel } from '@app/components/warning-label';
+import { Callout } from '@app/ui/components/callout/callout';
 
 interface PsbtRequestSighashWarningLabelProps {
   origin: string;
 }
 export function PsbtRequestSighashWarningLabel({ origin }: PsbtRequestSighashWarningLabelProps) {
   return (
-    <WarningLabel title="Be careful with this transaction" width="100%">
+    <Callout variant="warning" title="Be careful with this transaction">
       The details of this transaction are not guaranteed and could be modified later. Continue only
       if you trust {origin}
-    </WarningLabel>
+    </Callout>
   );
 }

src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx

@@ -1,9 +1,9 @@
 import { Flex, styled } from 'leather-styles/jsx';
 
 import { BaseDrawer } from '@app/components/drawer/base-drawer';
-import { WarningLabel } from '@app/components/warning-label';
 import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
 import { Button } from '@app/ui/components/button/button';
+import { Callout } from '@app/ui/components/callout/callout';
 
 interface RetrieveTaprootToNativeSegwitLayoutProps {
   isBroadcasting: boolean;
@@ -34,11 +34,11 @@ export function RetrieveTaprootToNativeSegwitLayout(
           This transaction may take upwards of 30 minutes to confirm.
         </styled.span>
         {children}
-        <WarningLabel mt="space.05">
+        <Callout variant="warning" mt="space.05">
           We recommend you check the URL for each "Uninscribed UTXO" listed above to ensure it
           displays no inscription. If it does display one, do not proceed with retrieval or you may
           lose it!
-        </WarningLabel>
+        </Callout>
         <Button
           onClick={onApproveTransaction}
           aria-busy={isBroadcasting}

src/app/features/stacks-transaction-request/post-condition-mode-warning.tsx

@@ -1,17 +1,17 @@
 import { PostConditionMode } from '@stacks/transactions';
 
-import { WarningLabel } from '@app/components/warning-label';
 import { usePostConditionModeState } from '@app/store/transactions/post-conditions.hooks';
+import { Callout } from '@app/ui/components/callout/callout';
 
 export function PostConditionModeWarning(): React.JSX.Element | null {
   const mode = usePostConditionModeState();
 
   if (mode !== PostConditionMode.Allow) return null;
 
   return (
-    <WarningLabel mb="space.05" title="This transaction is not secure" width="100%">
+    <Callout variant="warning" mb="space.05" title="This transaction is not secure">
       If you confirm, you allow it to transfer any of your tokens. Only confirm if you trust and
       have verified the contract.
-    </WarningLabel>
+    </Callout>
   );
 }

src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-warning-label.tsx

@@ -1,19 +1,18 @@
 import { BitcoinContractRequestSelectors } from '@tests/selectors/bitcoin-contract-request.selectors';
 
-import { WarningLabel } from '@app/components/warning-label';
+import { Callout } from '@app/ui/components/callout/callout';
 
 export function BitcoinContractRequestWarningLabel(props: { appName?: string }) {
   const { appName } = props;
-  const title = `Do not proceed unless you trust ${appName ?? 'Unknown'}!`;
 
   return (
-    <WarningLabel
-      title={title}
-      width="100%"
+    <Callout
       data-testid={BitcoinContractRequestSelectors.BitcoinContractWarningLabel}
+      variant="warning"
+      title={`Do not proceed unless you trust ${appName ?? 'Unknown'}!`}
     >
       By signing the contract YOU AGREE TO LOCK YOUR BITCOIN with {appName} into a contract where it
       will remain until a triggering event will release it.
-    </WarningLabel>
+    </Callout>
   );
 }

src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx

@@ -5,8 +5,8 @@ import { Box, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { InfoLabel } from '@app/components/info-label';
 import { Brc20TokenIcon } from '@app/ui/components/avatar-icon/brc20-token-icon';
+import { Callout } from '@app/ui/components/callout/callout';
 import { Link } from '@app/ui/components/link/link';
 
 import { AmountField } from '../../components/amount-field';
@@ -62,7 +62,7 @@ export function Brc20SendForm() {
                   autoComplete="off"
                 />
                 <SelectedAssetField icon={<Brc20TokenIcon />} name={tick} symbol={tick} />
-                <InfoLabel title="Sending BRC-20 tokens requires two steps">
+                <Callout variant="info" title="Sending BRC-20 tokens requires two steps">
                   <styled.ol mb="space.02">
                     <li>1. Create transfer inscription with amount to send</li>
                     <li>2. Send transfer inscription to recipient of choice</li>
@@ -77,7 +77,7 @@ export function Brc20SendForm() {
                   >
                     Learn more
                   </Link>
-                </InfoLabel>
+                </Callout>
               </SendCryptoAssetFormLayout>
 
               <FormFooter

src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx

@@ -12,6 +12,8 @@ import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-se
 import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { BtcIcon } from '@app/ui/components/avatar-icon/btc-icon';
+import { Callout } from '@app/ui/components/callout/callout';
+import { Link } from '@app/ui/components/link/link';
 
 import { AmountField } from '../../components/amount-field';
 import { FormFooter } from '../../components/form-footer';
@@ -20,7 +22,6 @@ import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-fo
 import { SendFiatValue } from '../../components/send-fiat-value';
 import { BitcoinRecipientField } from '../../family/bitcoin/components/bitcoin-recipient-field';
 import { BitcoinSendMaxButton } from '../../family/bitcoin/components/bitcoin-send-max-button';
-import { TestnetBtcMessage } from '../../family/bitcoin/components/testnet-btc-message';
 import { useSendFormRouteState } from '../../hooks/use-send-form-route-state';
 import { createDefaultInitialFormValues, defaultSendFormFormikProps } from '../../send-form.utils';
 import { useBtcSendForm } from './use-btc-send-form';
@@ -89,13 +90,14 @@ export function BtcSendForm() {
                   name={btcBalance.asset.name}
                   symbol={symbol}
                 />
-
                 <BitcoinRecipientField />
-
                 {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && (
-                  <Box mt="space.04">
-                    <TestnetBtcMessage />
-                  </Box>
+                  <Callout variant="warning" mt="space.04">
+                    {'This is a Bitcoin testnet transaction. Funds have no value. '}
+                    <Link href="https://coinfaucet.eu/en/btc-testnet" textStyle="caption.02">
+                      Get testnet BTC here ↗
+                    </Link>
+                  </Callout>
                 )}
               </SendCryptoAssetFormLayout>
               <FormFooter balance={btcBalance.balance} />

src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx

@@ -10,8 +10,8 @@ import {
   InfoCardRow,
   InfoCardSeparator,
 } from '@app/components/info-card/info-card';
-import { InfoLabel } from '@app/components/info-label';
 import { Button } from '@app/ui/components/button/button';
+import { Callout } from '@app/ui/components/callout/callout';
 
 interface SendFormConfirmationProps {
   recipient: string;
@@ -64,9 +64,9 @@ export function SendFormConfirmation({
         value={Number(txValue)}
       />
 
-      <InfoLabel px="space.05" mb="space.05" title="Sending to an exchange?">
+      <Callout variant="info" title="Sending to an exchange?" px="space.03" mb="space.05">
         {`Make sure you include the memo so the exchange can credit the ${symbol} to your account`}
-      </InfoLabel>
+      </Callout>
 
       <Stack pb="space.06" px="space.06" width="100%">
         <InfoCardRow