From 35aa8e071eb62c1782d92e92a7d755db3273278c Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Tue, 2 Jan 2024 16:57:24 -0800 Subject: [PATCH 1/2] [PAY-2320] Fix explore tx link callouts --- .../harmony/src/components/text-link/TextLink.tsx | 14 ++++++++++++-- packages/harmony/src/components/text-link/types.ts | 9 ++++++++- packages/harmony/src/foundations/color/semantic.ts | 1 + packages/web/src/components/link/Link.module.css | 8 -------- .../components/PurchaseModalContent.tsx | 14 ++++++++------ .../components/SaleModalContent.tsx | 14 ++++++++------ 6 files changed, 37 insertions(+), 23 deletions(-) diff --git a/packages/harmony/src/components/text-link/TextLink.tsx b/packages/harmony/src/components/text-link/TextLink.tsx index 64959e99ae0..8f4405472d7 100644 --- a/packages/harmony/src/components/text-link/TextLink.tsx +++ b/packages/harmony/src/components/text-link/TextLink.tsx @@ -1,6 +1,5 @@ import { useTheme } from '@emotion/react' import { Slot } from '@radix-ui/react-slot' - import { Text } from 'components/text/Text' import type { TextLinkProps } from './types' @@ -17,6 +16,7 @@ export const TextLink = (props: TextLinkProps) => { onClick, textVariant, showUnderline, + applyHoverStylesToInnerSvg, ...other } = props @@ -24,19 +24,28 @@ export const TextLink = (props: TextLinkProps) => { const variantColors = { default: color.link.default, + subdued: color.link.subdued, visible: color.link.visible, inverted: color.static.white } const variantHoverColors = { default: color.primary.p300, + subdued: color.primary.p300, visible: color.link.visible, inverted: color.static.white } const hoverStyles = { textDecoration: 'underline', - color: variantHoverColors[variant] + color: variantHoverColors[variant], + ...(applyHoverStylesToInnerSvg + ? { + path: { + fill: variantHoverColors[variant] + } + } + : {}) } return ( @@ -47,6 +56,7 @@ export const TextLink = (props: TextLinkProps) => { css={{ color: variantColors[variant], textDecoration: 'none', + transition: 'none', ':hover': hoverStyles, ...(showUnderline && hoverStyles) }} diff --git a/packages/harmony/src/components/text-link/types.ts b/packages/harmony/src/components/text-link/types.ts index b7917581a11..60676f293c5 100644 --- a/packages/harmony/src/components/text-link/types.ts +++ b/packages/harmony/src/components/text-link/types.ts @@ -20,7 +20,7 @@ export type TextLinkProps = TextLinkTextProps & * Which variant to display. * @default default */ - variant?: 'default' | 'visible' | 'inverted' + variant?: 'default' | 'subdued' | 'visible' | 'inverted' /** * Which text variant to display. @@ -39,4 +39,11 @@ export type TextLinkProps = TextLinkTextProps & * @default false */ isExternal?: boolean + + /** + * Whether or not to apply styling to inner svgs. + * Some text links may include an icon that you wish to style similarly to the text + * (e.g. hover change colors/animations) + */ + applyHoverStylesToInnerSvg?: boolean } diff --git a/packages/harmony/src/foundations/color/semantic.ts b/packages/harmony/src/foundations/color/semantic.ts index 1b6e7a735ef..4ebe3edb731 100644 --- a/packages/harmony/src/foundations/color/semantic.ts +++ b/packages/harmony/src/foundations/color/semantic.ts @@ -22,6 +22,7 @@ const createSemanticTheme = (primitives: PrimitiveColors) => ({ }, link: { default: primitives.neutral.neutral, + subdued: primitives.neutral.n400, visible: primitives.primary.p500, inverted: primitives.static.white }, diff --git a/packages/web/src/components/link/Link.module.css b/packages/web/src/components/link/Link.module.css index 72d45653790..f9af2932ead 100644 --- a/packages/web/src/components/link/Link.module.css +++ b/packages/web/src/components/link/Link.module.css @@ -9,11 +9,3 @@ text-decoration: underline !important; text-decoration-color: var(--primary-light-2); } - -.root path { - transition: fill var(--expressive); -} - -.root:hover path { - fill: var(--primary); -} diff --git a/packages/web/src/components/usdc-purchase-details-modal/components/PurchaseModalContent.tsx b/packages/web/src/components/usdc-purchase-details-modal/components/PurchaseModalContent.tsx index 55f7766dd92..5a4ad110c27 100644 --- a/packages/web/src/components/usdc-purchase-details-modal/components/PurchaseModalContent.tsx +++ b/packages/web/src/components/usdc-purchase-details-modal/components/PurchaseModalContent.tsx @@ -6,7 +6,8 @@ import { ButtonType, Flex, IconArrowRight, - IconExternalLink + IconExternalLink, + TextLink } from '@audius/harmony' import { ModalHeader, @@ -18,7 +19,6 @@ import { import moment from 'moment' import { Icon } from 'components/Icon' -import { ExternalLink } from 'components/link' import { DynamicTrackArtwork } from 'components/track/DynamicTrackArtwork' import { Text } from 'components/typography' import { UserNameAndBadges } from 'components/user-name-and-badges/UserNameAndBadges' @@ -83,15 +83,17 @@ export const PurchaseModalContent = ({ {messages.transaction} - + } /> diff --git a/packages/web/src/components/usdc-purchase-details-modal/components/SaleModalContent.tsx b/packages/web/src/components/usdc-purchase-details-modal/components/SaleModalContent.tsx index c14756cb4b2..bdd1e926eb6 100644 --- a/packages/web/src/components/usdc-purchase-details-modal/components/SaleModalContent.tsx +++ b/packages/web/src/components/usdc-purchase-details-modal/components/SaleModalContent.tsx @@ -13,7 +13,8 @@ import { Flex, IconCart, IconExternalLink, - IconMessage + IconMessage, + TextLink } from '@audius/harmony' import { ModalContent, @@ -25,7 +26,6 @@ import moment from 'moment' import { useDispatch, useSelector } from 'react-redux' import { Icon } from 'components/Icon' -import { ExternalLink } from 'components/link' import { DynamicTrackArtwork } from 'components/track/DynamicTrackArtwork' import { Text } from 'components/typography' import { UserNameAndBadges } from 'components/user-name-and-badges/UserNameAndBadges' @@ -105,15 +105,17 @@ export const SaleModalContent = ({ {messages.transaction} - + } /> From ca6a556508e7ceb12a0a48657577e8c75ac8a27b Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Tue, 2 Jan 2024 17:16:39 -0800 Subject: [PATCH 2/2] Fix lint --- packages/harmony/src/components/text-link/TextLink.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/harmony/src/components/text-link/TextLink.tsx b/packages/harmony/src/components/text-link/TextLink.tsx index 8f4405472d7..95d0045b3e6 100644 --- a/packages/harmony/src/components/text-link/TextLink.tsx +++ b/packages/harmony/src/components/text-link/TextLink.tsx @@ -1,5 +1,6 @@ import { useTheme } from '@emotion/react' import { Slot } from '@radix-ui/react-slot' + import { Text } from 'components/text/Text' import type { TextLinkProps } from './types'