[C-3924] Fix misc font/type issues on purchase flow (#7760)

AudiusProject · Mar 1, 2024 · 1c554c6 · 1c554c6
1 parent b695203
commit 1c554c6
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -63,6 +63,7 @@
 
 .trackOwnerName {
   margin: 0 var(--unit-1);
+  color: var(--secondary);
 }
 
 .badgeIcon {