fix: minor ui bugs

src/app/components/address-displayer/form-address-displayer.tsx

@@ -9,12 +9,12 @@ interface FormAddressDisplayerProps extends BoxProps {
 export function FormAddressDisplayer({ address, ...rest }: FormAddressDisplayerProps) {
   return (
     <Box
-      maxWidth="300px"
+      data-testid={SharedComponentsSelectors.AddressDisplayer}
       display="flex"
       flexWrap="wrap"
       justifyContent="end"
+      maxWidth="300px"
       mr="-8px"
-      data-testid={SharedComponentsSelectors.AddressDisplayer}
       {...rest}
     >
       <AddressDisplayer address={address} />

src/app/components/info-card/info-card.tsx

@@ -126,7 +126,7 @@ export function InfoCardFooter({ children }: InfoCardFooterProps) {
       alignItems="center"
       bg={whenPageMode({
         full: '',
-        popup: '#fff',
+        popup: 'accent.background-primary',
       })}
       bottom="0"
       justifyContent="center"

src/app/components/transaction/pending-label.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Stack, styled } from 'leather-styles/jsx';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { Tooltip } from '@app/components/tooltip';
 import { InfoIcon } from '@app/ui/components/icons/info-icon';
@@ -18,13 +18,10 @@ export function PendingLabel({
       <styled.span color="warning.label" mr="space.01" textStyle="label.03">
         Pending
       </styled.span>
-
       <Tooltip label={pendingWaitingMessage} placement="bottom">
-        <Stack>
-          <Box _hover={{ cursor: 'pointer' }} color="warning.label" height="10px" width="10px">
-            <InfoIcon />
-          </Box>
-        </Stack>
+        <Box>
+          <InfoIcon color="warning.label" size="xs" />
+        </Box>
       </Tooltip>
     </Flex>
   );

src/app/features/increase-fee-drawer/components/fee-multiplier-button.tsx

@@ -1,14 +1,24 @@
-import { ButtonProps, LeatherButton } from '@app/ui/components/button';
+import { HTMLStyledProps, styled } from 'leather-styles/jsx';
 
-interface FeeMultiplierButtonProps extends ButtonProps {
+interface FeeMultiplierButtonProps extends HTMLStyledProps<'button'> {
   multiplier: number;
 }
 export function FeeMultiplierButton(props: FeeMultiplierButtonProps) {
   const { multiplier, ...rest } = props;
 
   return (
-    <LeatherButton borderRadius="6px" key={`multiply-${multiplier}`} variant="outline" {...rest}>
+    <styled.button
+      _focus={{ border: 'focus' }}
+      _hover={{ bg: 'accent.component-background-hover' }}
+      border="default"
+      borderRadius="xs"
+      key={`multiply-${multiplier}`}
+      px="space.02"
+      py="space.01"
+      type="button"
+      {...rest}
+    >
       {multiplier}x
-    </LeatherButton>
+    </styled.button>
   );
 }

src/app/features/increase-fee-drawer/components/fee-multiplier.tsx

@@ -9,7 +9,7 @@ interface FeeMultiplierProps extends HstackProps {
   showReset?: boolean;
 }
 
-export function FeeMultiplier(props: FeeMultiplierProps): React.JSX.Element {
+export function FeeMultiplier(props: FeeMultiplierProps) {
   const { onSelectMultiplier, showReset, ...rest } = props;
 
   return (

src/app/features/increase-fee-drawer/components/increase-fee-field.tsx

@@ -23,10 +23,10 @@ export function IncreaseFeeField(props: IncreaseFeeFieldProps): React.JSX.Elemen
   }, [currentFee, modified, field.value]);
 
   const onSelectMultiplier = useCallback(
-    (multiplier: number) => {
+    async (multiplier: number) => {
       if (!currentFee) return;
       setModified(multiplier !== 1);
-      helpers.setValue(microStxToStx(currentFee * multiplier));
+      await helpers.setValue(microStxToStx(currentFee * multiplier));
     },
     [currentFee, helpers]
   );
@@ -35,7 +35,6 @@ export function IncreaseFeeField(props: IncreaseFeeFieldProps): React.JSX.Elemen
     <>
       <Stack position="relative" width="100%">
         <FeeMultiplier
-          pt="space.04"
           pr="space.03"
           height="100%"
           top={0}
@@ -45,15 +44,13 @@ export function IncreaseFeeField(props: IncreaseFeeFieldProps): React.JSX.Elemen
           showReset={showResetMultiplier}
           onSelectMultiplier={onSelectMultiplier}
         />
-
         <Flex>
           <styled.label display="block" fontSize={1} fontWeight={500} mb="space.02" htmlFor="fee">
             Fee
           </styled.label>
           <styled.input
             _focus={{ border: 'focus' }}
             autoComplete="off"
-            autoFocus
             bg="transparent"
             border="default"
             borderRadius="sm"

src/app/features/stacks-transaction-request/principal-value.tsx

@@ -13,7 +13,7 @@ export function PrincipalValue(props: PrincipalValueProps) {
     <LeatherButton
       onClick={() => openInNewTab(`https://explorer.hiro.so/address/${address}?chain=${mode}`)}
       textStyle="label.03"
-      variant="link"
+      variant="text"
       wordBreak="break-all"
     >
       {address}

src/app/pages/receive/components/receive-tokens.layout.tsx

@@ -45,8 +45,7 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) {
             data-testid={SharedComponentsSelectors.AddressDisplayer}
             flexWrap="wrap"
             justifyContent="center"
-            lineHeight={1.8}
-            maxWidth="280px"
+            maxWidth="300px"
             mt="space.04"
           >
             <AddressDisplayer address={address} />

src/app/pages/rpc-send-transfer/components/send-transfer-footer.tsx

@@ -11,10 +11,7 @@ export function SendTransferFooter({ children }: HasChildren) {
         full: 'unset',
         popup: 'accent.background-primary',
       })}
-      // TODO #4476 check this border colour it was EFEFF2
-      // - can we pass it with shorthand?
-      borderTop="1px solid"
-      borderColor="border-default"
+      borderTop="default"
       bottom="0"
       justifyContent="center"
       position={whenPageMode({

src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx

@@ -1,6 +1,5 @@
 import { Box } from 'leather-styles/jsx';
 import { Flex } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { Money } from '@shared/models/money.model';
 
@@ -13,6 +12,7 @@ export function FormFooter(props: { balance: Money; balanceTooltipLabel?: string
 
   return (
     <Box
+      bg="accent.background-primary"
       bottom="0px"
       height={['96px', '116px']}
       position={whenPageMode({
@@ -21,7 +21,6 @@ export function FormFooter(props: { balance: Money; balanceTooltipLabel?: string
       })}
       width="100%"
       zIndex={999}
-      bg={token('colors.accent.background-primary')}
     >
       <Flex gap="space.04" mt="space.03" px="space.05" direction="column">
         <PreviewButton />

src/app/pages/send/send-crypto-asset-form/components/tx-done.tsx

@@ -4,7 +4,7 @@ import { Flex, styled } from 'leather-styles/jsx';
 export function TxDone() {
   return (
     <Flex direction="column" alignItems="center">
-      <styled.img src={WaxSeal} width="208px" height="181px" alt="All done" mt="space.07" />
+      <styled.img src={WaxSeal} width="208px" height="181px" alt="All done" mt="space.04" />
       <styled.p textStyle="heading.02" mt="space.06">
         All done
       </styled.p>

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

@@ -51,14 +51,15 @@ export function SendFormConfirmation({
       data-testid={SendCryptoAssetSelectors.ConfirmationDetails}
       pb={whenPageMode({
         full: '0px',
-        popup: '80px',
+        popup: '120px',
       })}
     >
       <InfoCardAssetValue
         data-testid={SendCryptoAssetSelectors.ConfirmationDetailsAssetValue}
         fiatSymbol={txFiatValueSymbol}
         fiatValue={txFiatValue}
-        my="space.05"
+        mb="space.05"
+        mt={['unset', 'space.05']}
         px="space.05"
         symbol={symbol}
         value={Number(txValue)}

src/app/pages/send/sent-summary/stx-sent-summary.tsx

@@ -7,6 +7,7 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
 import { useExplorerLink } from '@app/common/hooks/use-explorer-link';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
+import { whenPageMode } from '@app/common/utils';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import {
   InfoCard,
@@ -56,7 +57,12 @@ export function StxSentSummary() {
   useRouteHeader(<ModalHeader hideActions defaultClose title="Sent" />);
 
   return (
-    <InfoCard>
+    <InfoCard
+      pb={whenPageMode({
+        full: '0px',
+        popup: '120px',
+      })}
+    >
       <TxDone />
 
       <InfoCardAssetValue

theme/typography.ts

@@ -90,12 +90,17 @@ export const textStyles = defineTextStyles({
   },
   'caption.02': {
     description: 'caption.02',
-    value: { ...commonDiatypeStyles, fontSize: '0.8125rem', lineHeight: '1.25rem' },
+    value: { ...commonDiatypeStyles, fontSize: '0.8125rem', lineHeight: '1rem' },
   },
 
   'mono.01': {
     description: 'mono.01',
-    value: { fontFamily: firaCode, fontSize: '1.0625rem', lineHeight: '1.75rem' },
+    value: {
+      fontFamily: firaCode,
+      fontSize: '1rem',
+      lineHeight: '1.5rem',
+      letterSpacing: '.08rem',
+    },
   },
   'mono.02': {
     description: 'mono.02',