chore: refactor external links

src/app/components/external-link.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
 
-import { BoxProps } from 'leather-styles/jsx';
+import { styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
 
-interface ExternalLinkProps extends BoxProps {
+interface ExternalLinkProps {
   href: string;
   children: React.ReactNode;
+  textDecoration?: string;
 }
-export function ExternalLink(props: ExternalLinkProps) {
+export function ExternalLink({ href, children, textDecoration = 'none' }: ExternalLinkProps) {
   return (
-    <styled.span as="a" color={color('accent')} target="_blank" {...props}>
-      {props.children}
-    </styled.span>
+    <styled.a
+      color={token('colors.accent.action-primary-default')}
+      href={href}
+      target="_blank"
+      textDecoration={textDecoration}
+    >
+      {children}
+    </styled.a>
   );
 }

src/app/components/header.tsx

@@ -2,10 +2,11 @@ import { memo, useMemo } from 'react';
 import { FiArrowLeft } from 'react-icons/fi';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+// #4164 FIXME migrate  IconButton, useMediaQuery
 import { IconButton, useMediaQuery } from '@stacks/ui';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
-import { Box, Flex, FlexProps, IconButton, Stack, useMediaQuery } from 'leather-styles/jsx';
+import { Flex, FlexProps, HStack, styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
 import { BRANCH_NAME, COMMIT_SHA } from '@shared/environment';
@@ -15,7 +16,6 @@ import { useDrawers } from '@app/common/hooks/use-drawers';
 import { LeatherButton } from '@app/components/button/button';
 import { LeatherLogo } from '@app/components/leather-logo';
 import { NetworkModeBadge } from '@app/components/network-mode-badge';
-import { Title } from '@app/components/typography';
 
 import { HamburgerIcon } from './icons/hamburger-icon';
 
@@ -70,9 +70,9 @@ export const Header: React.FC<HeaderProps> = memo(props => {
       {...rest}
     >
       {onClose ? (
-        <Box flexBasis="20%" onClick={onClose} as="button">
+        <styled.button flexBasis="20%" onClick={onClose}>
           <IconButton alignSelf="center" icon={FiArrowLeft} iconSize="16px" />
-        </Box>
+        </styled.button>
       ) : null}
       {!title && (!onClose || desktopViewport) ? (
         <Flex
@@ -101,17 +101,18 @@ export const Header: React.FC<HeaderProps> = memo(props => {
           </Flex>
         </Flex>
       ) : (
-        <Title
+        <styled.span
           alignSelf="center"
           flexBasis="60%"
           fontSize="16px"
           fontWeight={500}
+          textStyle="label.02"
           lineHeight="24px"
           textAlign="center"
-          {...rest}
         >
           {title}
-        </Title>
+          {/*  #4164 TODO check this looks OK, then migrate remaining style */}
+        </styled.span>
       )}
       <HStack alignItems="center" flexBasis="20%" justifyContent="flex-end">
         <NetworkModeBadge />

src/app/components/typography.tsx

@@ -1,5 +1,8 @@
 import { forwardRefWithAs } from '@stacks/ui-core';
-import { Text as BaseText, BoxProps } from 'leather-styles/jsx';
+import { BoxProps, styled } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
+
+// #4164 FIXME migrate - get rid of this file when possible
 
 const interMetrics = {
   capHeight: 2048,
@@ -38,7 +41,7 @@ const captionStyles = (variant?: 'c1' | 'c2' | 'c3') => {
 type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
 
 export const Title = forwardRefWithAs<BoxProps, Headings>((props, ref) => (
-  <BaseText
+  <styled.span
     userSelect="none"
     letterSpacing="-0.01em"
     fontFamily="Diatype"
@@ -50,16 +53,16 @@ export const Title = forwardRefWithAs<BoxProps, Headings>((props, ref) => (
 ));
 
 export const Text = forwardRefWithAs<BoxProps, 'span'>((props, ref) => (
-  <BaseText letterSpacing="-0.01em" display="block" lineHeight="1.5" ref={ref} {...props} />
+  <styled.span letterSpacing="-0.01em" display="block" lineHeight="1.5" ref={ref} {...props} />
 ));
 
 export function Body(props: BoxProps) {
   return <styled.span css={c1} {...props} />;
 }
-
+// #4164 FIXME migrate - need to refactor all <Captions
 export const Caption = forwardRefWithAs<{ variant?: 'c1' | 'c2' | 'c3' } & BoxProps, 'span'>(
   ({ variant, ...props }, ref) => (
-    <BaseText
+    <styled.span
       letterSpacing="-0.01em"
       css={captionStyles(variant)}
       color={token('colors.accent.text-subdued')}

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

@@ -49,7 +49,8 @@ export function ConnectLedgerLayout(props: ConnectLedgerLayoutProps) {
           </Caption>
           <ExternalLink
             href="https://www.hiro.so/wallet-faq/how-can-i-use-my-ledger-device-with-hiro-wallet"
-            fontSize={1}
+            // #4164 FIXME migrate - check this text size
+            // fontSize={1}
           >
             See how to download the <Capitalize>{chain}</Capitalize> app
           </ExternalLink>

src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx

@@ -1,5 +1,5 @@
 import UnsupportedBrowserImg from '@assets/images/ledger/unsupported-browser.png';
-import { Box, Flex } from 'leather-styles/jsx';
+import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { figmaTheme } from '@app/common/utils/figma-theme';
 import { ExternalLink } from '@app/components/external-link';
@@ -13,8 +13,7 @@ export function UnsupportedBrowserLayout() {
         <img src={UnsupportedBrowserImg} width="239px" height="177px" />
       </Box>
       <LedgerTitle mt="space.02">Your browser isn't supported</LedgerTitle>
-      <styled.span
-        as="p"
+      <styled.p
         fontSize="16px"
         lineHeight="1.7"
         mt="space.04"
@@ -25,7 +24,7 @@ export function UnsupportedBrowserLayout() {
         To connect your Ledger with the Leather try{' '}
         <ExternalLink href="https://www.google.com/chrome/">Chrome</ExternalLink> or{' '}
         <ExternalLink href="https://brave.com/download/">Brave</ExternalLink>.
-      </styled.span>
+      </styled.p>
     </Flex>
   );
 }