From 1c554c6860e00673edc620e57fb1062b3389d84f Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Fri, 1 Mar 2024 09:28:41 -0800
Subject: [PATCH] [C-3924] Fix misc font/type issues on purchase flow (#7760)

---
 packages/harmony/src/components/text-link/TextLink.tsx      | 6 ++++--
 packages/harmony/src/components/text-link/types.ts          | 2 +-
 .../web/src/components/payment-method/PaymentMethod.tsx     | 2 +-
 .../components/PayToUnlockInfo.tsx                          | 2 +-
 .../src/components/track/LockedTrackDetailsTile.module.css  | 1 +
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/harmony/src/components/text-link/TextLink.tsx b/packages/harmony/src/components/text-link/TextLink.tsx
index 95d0045b3e6..8173d10fddd 100644
--- a/packages/harmony/src/components/text-link/TextLink.tsx
+++ b/packages/harmony/src/components/text-link/TextLink.tsx
@@ -27,14 +27,16 @@ export const TextLink = (props: TextLinkProps) => {
     default: color.link.default,
     subdued: color.link.subdued,
     visible: color.link.visible,
-    inverted: color.static.white
+    inverted: color.static.white,
+    secondary: color.secondary.secondary
   }
 
   const variantHoverColors = {
     default: color.primary.p300,
     subdued: color.primary.p300,
     visible: color.link.visible,
-    inverted: color.static.white
+    inverted: color.static.white,
+    secondary: color.secondary.secondary
   }
 
   const hoverStyles = {
diff --git a/packages/harmony/src/components/text-link/types.ts b/packages/harmony/src/components/text-link/types.ts
index 60676f293c5..ee95b23358a 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' | 'subdued' | 'visible' | 'inverted'
+    variant?: 'default' | 'subdued' | 'visible' | 'inverted' | 'secondary'
 
     /**
      * Which text variant to display.
diff --git a/packages/web/src/components/payment-method/PaymentMethod.tsx b/packages/web/src/components/payment-method/PaymentMethod.tsx
index f9fc2013af6..35704f5b713 100644
--- a/packages/web/src/components/payment-method/PaymentMethod.tsx
+++ b/packages/web/src/components/payment-method/PaymentMethod.tsx
@@ -174,7 +174,7 @@ export const PaymentMethod = ({
                   <Icon color='default' />
                 </Flex>
               ) : null}
-              <Text>{label}</Text>
+              <Text variant='body' strength='default' size='m'>{label}</Text>
             </Flex>
             <Text
               variant='body'
diff --git a/packages/web/src/components/premium-content-purchase-modal/components/PayToUnlockInfo.tsx b/packages/web/src/components/premium-content-purchase-modal/components/PayToUnlockInfo.tsx
index 2b3e44826f7..7f297e11523 100644
--- a/packages/web/src/components/premium-content-purchase-modal/components/PayToUnlockInfo.tsx
+++ b/packages/web/src/components/premium-content-purchase-modal/components/PayToUnlockInfo.tsx
@@ -35,7 +35,7 @@ export const PayToUnlockInfo = () => {
       <Text className={styles.copy} variant='body'>
         <span>{messages.copyPart1}</span>
         <TextLink
-          variant='visible'
+          variant='secondary'
           isExternal
           href={TERMS_OF_SERVICE}
           onClick={handleClickTOSLink}
diff --git a/packages/web/src/components/track/LockedTrackDetailsTile.module.css b/packages/web/src/components/track/LockedTrackDetailsTile.module.css
index bb92dc7efba..078bf32a94b 100644
--- a/packages/web/src/components/track/LockedTrackDetailsTile.module.css
+++ b/packages/web/src/components/track/LockedTrackDetailsTile.module.css
@@ -63,6 +63,7 @@
 
 .trackOwnerName {
   margin: 0 var(--unit-1);
+  color: var(--secondary);
 }
 
 .badgeIcon {