From 5258675995e602a4b3f18566ffe34dccd084dec3 Mon Sep 17 00:00:00 2001
From: Kyle Shanks <kyle.j.shanks@gmail.com>
Date: Thu, 24 Aug 2023 21:14:40 -0400
Subject: [PATCH] [C-2986] Upload flow qa round 1 (#3941)

---
 .../src/assets/images/iconValidationCheck.svg |  4 +-
 .../src/assets/icons/iconValidationCheck.svg  |  4 +-
 .../src/assets/img/iconValidationCheck.svg    |  4 +-
 .../data-entry/ContextualMenu.module.css      |  5 ++
 .../components/data-entry/ContextualMenu.tsx  |  4 +-
 .../components/data-entry/InputV2.module.css  |  4 ++
 .../web/src/components/data-entry/InputV2.tsx |  2 +-
 .../modal-radio/ModalRadioItem.module.css     | 12 +++--
 .../components/modal-radio/ModalRadioItem.tsx |  8 +--
 .../src/pages/upload-page/UploadPageNew.tsx   | 48 +++++++++--------
 .../upload-page/fields/AccessAndSaleField.tsx |  2 +-
 .../fields/DatePickerField.module.css         | 51 +++++++++++++++++--
 .../upload-page/fields/SourceFilesField.tsx   |  2 +-
 .../HiddenAvailabilityFields.module.css       | 15 +++---
 .../availability/HiddenAvailabilityFields.tsx | 34 ++++++++-----
 .../SpecialAccessFields.module.css            |  2 -
 .../availability/SpecialAccessFields.tsx      |  5 +-
 .../availability/UsdcPurchaseFields.tsx       |  2 +-
 18 files changed, 140 insertions(+), 68 deletions(-)

diff --git a/packages/mobile/src/assets/images/iconValidationCheck.svg b/packages/mobile/src/assets/images/iconValidationCheck.svg
index 3137a98de5..6d3f2c637d 100644
--- a/packages/mobile/src/assets/images/iconValidationCheck.svg
+++ b/packages/mobile/src/assets/images/iconValidationCheck.svg
@@ -4,7 +4,7 @@
         <g id="assets" transform="translate(-1087.000000, -2486.000000)">
             <g id="icon/ValidationCheck" transform="translate(1087.000000, 2486.000000)">
                 <g id="iconValidationCheck">
-                    <circle id="Oval" fill="#7ED321" cx="8" cy="8" r="8"></circle>
+                    <circle id="Oval" fill="#0F9E48" cx="8" cy="8" r="8"></circle>
                     <g id="icon/check">
                         <rect id="bound" x="0" y="0" width="16" height="16"></rect>
                         <path d="M7.14789088,11.7006258 C6.99968531,11.8870803 6.78506334,11.9960534 6.55768047,12 L6.54581507,12 C6.32298434,12 6.110228,11.8989199 5.96008217,11.7212445 L3.54170453,8.86579245 C3.24521876,8.51640168 3.26797944,7.97451577 3.59177802,7.65452279 C3.91550197,7.33549632 4.41758007,7.35998106 4.71317033,7.70945237 L6.52671103,9.85033665 L10.9332522,4.30333536 C11.0697417,4.12952593 11.2653342,4.02055274 11.4762996,4.00283352 C11.6863694,3.98422834 11.8955437,4.05784364 12.0556893,4.20604074 C12.2166558,4.35431838 12.315758,4.56630466 12.3312054,4.79303012 C12.3466528,5.02080261 12.2775499,5.24559506 12.1384486,5.41835744 L7.14789088,11.7006258 Z" id="Path" fill="#FFFFFF" fill-rule="evenodd"></path>
@@ -13,4 +13,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/stems/src/assets/icons/iconValidationCheck.svg b/packages/stems/src/assets/icons/iconValidationCheck.svg
index 3137a98de5..6d3f2c637d 100644
--- a/packages/stems/src/assets/icons/iconValidationCheck.svg
+++ b/packages/stems/src/assets/icons/iconValidationCheck.svg
@@ -4,7 +4,7 @@
         <g id="assets" transform="translate(-1087.000000, -2486.000000)">
             <g id="icon/ValidationCheck" transform="translate(1087.000000, 2486.000000)">
                 <g id="iconValidationCheck">
-                    <circle id="Oval" fill="#7ED321" cx="8" cy="8" r="8"></circle>
+                    <circle id="Oval" fill="#0F9E48" cx="8" cy="8" r="8"></circle>
                     <g id="icon/check">
                         <rect id="bound" x="0" y="0" width="16" height="16"></rect>
                         <path d="M7.14789088,11.7006258 C6.99968531,11.8870803 6.78506334,11.9960534 6.55768047,12 L6.54581507,12 C6.32298434,12 6.110228,11.8989199 5.96008217,11.7212445 L3.54170453,8.86579245 C3.24521876,8.51640168 3.26797944,7.97451577 3.59177802,7.65452279 C3.91550197,7.33549632 4.41758007,7.35998106 4.71317033,7.70945237 L6.52671103,9.85033665 L10.9332522,4.30333536 C11.0697417,4.12952593 11.2653342,4.02055274 11.4762996,4.00283352 C11.6863694,3.98422834 11.8955437,4.05784364 12.0556893,4.20604074 C12.2166558,4.35431838 12.315758,4.56630466 12.3312054,4.79303012 C12.3466528,5.02080261 12.2775499,5.24559506 12.1384486,5.41835744 L7.14789088,11.7006258 Z" id="Path" fill="#FFFFFF" fill-rule="evenodd"></path>
@@ -13,4 +13,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/web/src/assets/img/iconValidationCheck.svg b/packages/web/src/assets/img/iconValidationCheck.svg
index 3137a98de5..6d3f2c637d 100644
--- a/packages/web/src/assets/img/iconValidationCheck.svg
+++ b/packages/web/src/assets/img/iconValidationCheck.svg
@@ -4,7 +4,7 @@
         <g id="assets" transform="translate(-1087.000000, -2486.000000)">
             <g id="icon/ValidationCheck" transform="translate(1087.000000, 2486.000000)">
                 <g id="iconValidationCheck">
-                    <circle id="Oval" fill="#7ED321" cx="8" cy="8" r="8"></circle>
+                    <circle id="Oval" fill="#0F9E48" cx="8" cy="8" r="8"></circle>
                     <g id="icon/check">
                         <rect id="bound" x="0" y="0" width="16" height="16"></rect>
                         <path d="M7.14789088,11.7006258 C6.99968531,11.8870803 6.78506334,11.9960534 6.55768047,12 L6.54581507,12 C6.32298434,12 6.110228,11.8989199 5.96008217,11.7212445 L3.54170453,8.86579245 C3.24521876,8.51640168 3.26797944,7.97451577 3.59177802,7.65452279 C3.91550197,7.33549632 4.41758007,7.35998106 4.71317033,7.70945237 L6.52671103,9.85033665 L10.9332522,4.30333536 C11.0697417,4.12952593 11.2653342,4.02055274 11.4762996,4.00283352 C11.6863694,3.98422834 11.8955437,4.05784364 12.0556893,4.20604074 C12.2166558,4.35431838 12.315758,4.56630466 12.3312054,4.79303012 C12.3466528,5.02080261 12.2775499,5.24559506 12.1384486,5.41835744 L7.14789088,11.7006258 Z" id="Path" fill="#FFFFFF" fill-rule="evenodd"></path>
@@ -13,4 +13,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/web/src/components/data-entry/ContextualMenu.module.css b/packages/web/src/components/data-entry/ContextualMenu.module.css
index aecdfa7b5c..a5f912ccc2 100644
--- a/packages/web/src/components/data-entry/ContextualMenu.module.css
+++ b/packages/web/src/components/data-entry/ContextualMenu.module.css
@@ -2,6 +2,7 @@
   gap: var(--unit-4);
   padding: var(--unit-4) var(--unit-6);
   flex-direction: column;
+  cursor: pointer;
 }
 
 .preview {
@@ -41,3 +42,7 @@
   border: 1px solid var(---border-strong);
   background: var(--neutral-light-8);
 }
+
+.selectedValueText {
+  text-transform: capitalize;
+}
diff --git a/packages/web/src/components/data-entry/ContextualMenu.tsx b/packages/web/src/components/data-entry/ContextualMenu.tsx
index 8960478071..5bcfb1d205 100644
--- a/packages/web/src/components/data-entry/ContextualMenu.tsx
+++ b/packages/web/src/components/data-entry/ContextualMenu.tsx
@@ -82,8 +82,8 @@ export const SelectedValue = (props: SelectedValueProps) => {
     <span className={styles.selectedValue}>
       {icon ? <Icon icon={icon} size='small' /> : null}
       {label ? (
-        <Text variant='body' strength='strong'>
-          {label}
+        <Text className={styles.selectedValueText} strength='strong'>
+          {label.toLowerCase()}
         </Text>
       ) : null}
       {children}
diff --git a/packages/web/src/components/data-entry/InputV2.module.css b/packages/web/src/components/data-entry/InputV2.module.css
index a8f05d98cb..6cbd4a6dab 100644
--- a/packages/web/src/components/data-entry/InputV2.module.css
+++ b/packages/web/src/components/data-entry/InputV2.module.css
@@ -82,6 +82,10 @@
   justify-content: space-between;
 }
 
+.inputContainer {
+  flex: 1 1 0;
+}
+
 /** 
  * Flex container so that the absolutely positioned elevated placeholder
  * starts out centered vertically
diff --git a/packages/web/src/components/data-entry/InputV2.tsx b/packages/web/src/components/data-entry/InputV2.tsx
index 74979aa91f..2ffbfe7377 100644
--- a/packages/web/src/components/data-entry/InputV2.tsx
+++ b/packages/web/src/components/data-entry/InputV2.tsx
@@ -87,7 +87,7 @@ export const InputV2 = (props: InputV2Props) => {
 
   const input = (
     <div className={cn(styles.inputRow, layoutStyles.row)}>
-      <div className={layoutStyles.row}>
+      <div className={cn(layoutStyles.row, styles.inputContainer)}>
         {startAdornment ? (
           <Text variant='label' size='large' color='neutralLight2'>
             {startAdornment}
diff --git a/packages/web/src/components/modal-radio/ModalRadioItem.module.css b/packages/web/src/components/modal-radio/ModalRadioItem.module.css
index 1ad1880a0d..840f699ba1 100644
--- a/packages/web/src/components/modal-radio/ModalRadioItem.module.css
+++ b/packages/web/src/components/modal-radio/ModalRadioItem.module.css
@@ -20,10 +20,11 @@
   display: flex;
   align-items: center;
   gap: var(--unit-2);
-  margin-left: var(--unit-2);
-  font-size: var(--font-2xl);
-  font-weight: var(--font-bold);
-  line-height: 150%;
+}
+
+.input {
+  height: 24px;
+  width: 24px;
 }
 
 .root:has(.input:disabled) .optionTitle {
@@ -33,9 +34,11 @@
 .root:has(.input:checked) .optionTitle {
   color: var(--secondary);
 }
+
 .optionTitle path {
   fill: var(--neutral);
 }
+
 .root:has(.input:checked) .optionTitle path {
   fill: var(--secondary);
 }
@@ -45,6 +48,7 @@
   overflow: visible hidden;
   transition: height var(--quick);
 }
+
 .collapsibleContainer.collapsed {
   display: none;
 }
diff --git a/packages/web/src/components/modal-radio/ModalRadioItem.tsx b/packages/web/src/components/modal-radio/ModalRadioItem.tsx
index 9a7ce85ab1..7ec5aaba23 100644
--- a/packages/web/src/components/modal-radio/ModalRadioItem.tsx
+++ b/packages/web/src/components/modal-radio/ModalRadioItem.tsx
@@ -42,7 +42,7 @@ export const ModalRadioItem = (props: ModalRadioItemProps) => {
 
   return (
     <label className={cn(styles.root, layoutStyles.col, layoutStyles.gap2)}>
-      <div className={cn(layoutStyles.row)}>
+      <div className={cn(layoutStyles.row, layoutStyles.gap4)}>
         <RadioButton
           className={styles.radio}
           inputClassName={styles.input}
@@ -50,10 +50,10 @@ export const ModalRadioItem = (props: ModalRadioItemProps) => {
           value={value}
           disabled={disabled}
         />
-        <div className={styles.optionTitle}>
+        <Text className={styles.optionTitle} variant='title' size='large'>
           {icon}
           <span>{title ?? label}</span>
-        </div>
+        </Text>
       </div>
       {checkedContent || description ? (
         <div
@@ -64,7 +64,7 @@ export const ModalRadioItem = (props: ModalRadioItemProps) => {
           aria-hidden={isCollapsed}
         >
           <div ref={ref} className={cn(layoutStyles.col, layoutStyles.gap4)}>
-            <Text size='medium'>{description}</Text>
+            <Text>{description}</Text>
             {checkedContent}
           </div>
         </div>
diff --git a/packages/web/src/pages/upload-page/UploadPageNew.tsx b/packages/web/src/pages/upload-page/UploadPageNew.tsx
index 482616d8e7..9f75a1a7e0 100644
--- a/packages/web/src/pages/upload-page/UploadPageNew.tsx
+++ b/packages/web/src/pages/upload-page/UploadPageNew.tsx
@@ -22,10 +22,8 @@ const { requestOpen: openUploadConfirmationModal } =
 
 const messages = {
   selectPageTitle: 'Upload Your Music',
-  editSingleTrackPageTitle: 'Complete Your Track',
-  editMultiTrackPageTitle: 'Complete Your Tracks',
-  finishSingleTrackPageTitle: 'Uploading Your Track',
-  finishMultiTrackPageTitle: 'Uploading Your Tracks'
+  editPageTitle: 'Complete Your ',
+  finishPageTitle: 'Uploading Your '
 }
 
 enum Phase {
@@ -34,6 +32,13 @@ enum Phase {
   FINISH
 }
 
+const uploadTypeStringMap: Record<UploadType, string> = {
+  [UploadType.INDIVIDUAL_TRACK]: 'Track',
+  [UploadType.INDIVIDUAL_TRACKS]: 'Tracks',
+  [UploadType.ALBUM]: 'Album',
+  [UploadType.PLAYLIST]: 'Playlist'
+}
+
 export const UploadPageNew = () => {
   const dispatch = useDispatch()
   const [phase, setPhase] = useState(Phase.SELECT)
@@ -43,7 +48,7 @@ export const UploadPageNew = () => {
     tracks: undefined
   })
 
-  const { tracks } = formState
+  const { tracks, uploadType } = formState
 
   // Pretty print json just for testing
   useEffect(() => {
@@ -69,21 +74,24 @@ export const UploadPageNew = () => {
     injectPrettifyScript()
   }, [phase])
 
-  const pageTitle = useMemo(() => {
-    switch (phase) {
-      case Phase.EDIT:
-        return tracks && tracks.length > 1
-          ? messages.editMultiTrackPageTitle
-          : messages.editSingleTrackPageTitle
-      case Phase.FINISH:
-        return tracks && tracks.length > 1
-          ? messages.finishMultiTrackPageTitle
-          : messages.finishSingleTrackPageTitle
-      case Phase.SELECT:
-      default:
-        return messages.selectPageTitle
-    }
-  }, [phase, tracks])
+  const pageTitleUploadType =
+    !uploadType ||
+    (uploadType === UploadType.INDIVIDUAL_TRACKS && tracks?.length === 1)
+      ? UploadType.INDIVIDUAL_TRACK
+      : uploadType
+
+  let pageTitle = messages.selectPageTitle
+  switch (phase) {
+    case Phase.EDIT:
+      pageTitle = `${messages.editPageTitle}${uploadTypeStringMap[pageTitleUploadType]}`
+      break
+    case Phase.FINISH:
+      pageTitle = `${messages.finishPageTitle}${uploadTypeStringMap[pageTitleUploadType]}`
+      break
+    case Phase.SELECT:
+    default:
+      pageTitle = messages.selectPageTitle
+  }
 
   let page
   switch (phase) {
diff --git a/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx b/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
index e09f7e4488..e642ba0895 100644
--- a/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
+++ b/packages/web/src/pages/upload-page/fields/AccessAndSaleField.tsx
@@ -67,7 +67,7 @@ const messages = {
   isRemix:
     'This track is marked as a remix. To enable additional availability options, unmark within Remix Settings.',
   done: 'Done',
-  public: 'Public (Default)',
+  public: 'Public (Free to Stream)',
   publicSubtitle:
     'Public tracks are visible to all users and appear throughout Audius.',
   usdcPurchase: 'Premium (Pay-to-Unlock)',
diff --git a/packages/web/src/pages/upload-page/fields/DatePickerField.module.css b/packages/web/src/pages/upload-page/fields/DatePickerField.module.css
index 1bc6c1a6f0..8ca06153bc 100644
--- a/packages/web/src/pages/upload-page/fields/DatePickerField.module.css
+++ b/packages/web/src/pages/upload-page/fields/DatePickerField.module.css
@@ -41,18 +41,59 @@
   display: none;
 }
 
-.datePickerField :global(.CalendarDay) {
+/* New Styles for date picker */
+:global(.CalendarMonth_caption) {
+  color: var(--neutral);
+  text-align: center;
+  font-family: Avenir Next LT Pro;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: var(--font-demi-bold);
+}
+
+:global(.CalendarDay) {
   font-family: var(--font-family);
   line-height: 38px;
   color: var(--neutral);
   font-size: var(--font-s);
-  font-weight: var(--font-bold);
+  font-weight: var(--font-demi-bold);
+  border: 1px solid var(--border-strong);
+  background: #fff;
+}
+
+:global(.CalendarDay):hover {
+  background: var(--neutral-light-8);
+}
+
+:global(.CalendarDay__selected) {
+  background-color: var(--secondary);
+  color: var(--static-white);
+  border: 1px solid var(--border-strong);
+}
+
+:global(.CalendarDay__selected):hover {
+  background-color: var(--secondary);
+  color: var(--static-white);
+  border: 1px solid var(--border-strong);
+}
+
+:global(.CalendarDay__blocked_out_of_range) {
+  color: var(--neutral-light-7);
 }
 
-.datePickerField :global(.CalendarDay.CalendarDay__blocked_out_of_range) {
+:global(.CalendarDay__blocked_out_of_range):hover {
   color: var(--neutral-light-7);
+  background: #fff;
+}
+
+:global(.DayPicker_weekHeader) {
+  top: 60px;
+}
+
+:global(.DayPickerNavigation_button__horizontalDefault) {
+  padding: 2px 16px;
 }
 
-.datePickerField :global(.DayPicker_weekHeader) {
-  margin-top: -8px;
+:global(.CalendarMonth_caption) {
+  padding-bottom: 40px;
 }
diff --git a/packages/web/src/pages/upload-page/fields/SourceFilesField.tsx b/packages/web/src/pages/upload-page/fields/SourceFilesField.tsx
index 8a976e1e58..42562ed688 100644
--- a/packages/web/src/pages/upload-page/fields/SourceFilesField.tsx
+++ b/packages/web/src/pages/upload-page/fields/SourceFilesField.tsx
@@ -109,7 +109,7 @@ export const SourceFilesField = () => {
     if (followerGatedValue) {
       values.push(messages.values.followerGated)
     }
-    const stemsCategories = stemsValue.map((stem) => stem.category)
+    const stemsCategories = stemsValue?.map((stem) => stem.category) ?? []
     values = [...values, ...stemsCategories]
     return (
       <SelectedValues>
diff --git a/packages/web/src/pages/upload-page/fields/availability/HiddenAvailabilityFields.module.css b/packages/web/src/pages/upload-page/fields/availability/HiddenAvailabilityFields.module.css
index f1a39244cf..040c5da698 100644
--- a/packages/web/src/pages/upload-page/fields/availability/HiddenAvailabilityFields.module.css
+++ b/packages/web/src/pages/upload-page/fields/availability/HiddenAvailabilityFields.module.css
@@ -1,13 +1,17 @@
 .root {
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--unit-2) var(--unit-6);
+  flex-direction: column;
+  gap: var(--unit-4);
   padding: var(--unit-4);
   background: var(--background-surface-1);
   border: 1px solid var(--border-strong);
   border-radius: var(--unit-2);
-  font-size: var(--font-l);
-  font-weight: var(--font-demi-bold);
+}
+
+.switchContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--unit-2) var(--unit-6);
 }
 
 .switchRow {
@@ -15,8 +19,7 @@
   min-width: 200px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  line-height: 22px;
+  gap: var(--unit-2);
 }
 
 .switchLabel {
diff --git a/packages/web/src/pages/upload-page/fields/availability/HiddenAvailabilityFields.tsx b/packages/web/src/pages/upload-page/fields/availability/HiddenAvailabilityFields.tsx
index 29e0477c69..e4df6d135b 100644
--- a/packages/web/src/pages/upload-page/fields/availability/HiddenAvailabilityFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/availability/HiddenAvailabilityFields.tsx
@@ -1,16 +1,19 @@
 import { Switch } from '@audius/stems'
 import { useField } from 'formik'
 
+import { Text } from 'components/typography'
+
 import { FIELD_VISIBILITY } from '../AccessAndSaleField'
 
 import styles from './HiddenAvailabilityFields.module.css'
 
 const messages = {
-  showGenre: 'Show Genre',
-  showMood: 'Show Mood',
-  showTags: 'Show Tags',
-  showShareButton: 'Show Share Button',
-  showPlayCount: 'Show Play Count'
+  title: 'Visible Track Details',
+  showGenre: 'Genre',
+  showMood: 'Mood',
+  showTags: 'Tags',
+  showShareButton: 'Share Button',
+  showPlayCount: 'Play Count'
 }
 
 export enum UnlistedTrackMetadataField {
@@ -43,11 +46,16 @@ const unlistedTrackMetadataOrder = [
 export const HiddenAvailabilityFields = () => {
   return (
     <div className={styles.root}>
-      {unlistedTrackMetadataOrder.map((fieldName) => {
-        return <AvailabilityToggleField key={fieldName} fieldName={fieldName} />
-      })}
-      {/* Dummy row for spacing consistency */}
-      <div className={styles.switchRow}></div>
+      <Text variant='title'>{messages.title}</Text>
+      <div className={styles.switchContainer}>
+        {unlistedTrackMetadataOrder.map((fieldName) => {
+          return (
+            <AvailabilityToggleField key={fieldName} fieldName={fieldName} />
+          )
+        })}
+        {/* Dummy row for spacing consistency */}
+        <div className={styles.switchRow}></div>
+      </div>
     </div>
   )
 }
@@ -73,10 +81,10 @@ const AvailabilityToggleField = (props: AvailabilityToggleFieldProps) => {
   })
   return (
     <div className={styles.switchRow}>
-      <span className={styles.switchLabel}>
-        {messageByFieldName[fieldName]}
-      </span>
       <Switch {...field} />
+      <Text className={styles.switchLabel}>
+        {messageByFieldName[fieldName]}
+      </Text>
     </div>
   )
 }
diff --git a/packages/web/src/pages/upload-page/fields/availability/SpecialAccessFields.module.css b/packages/web/src/pages/upload-page/fields/availability/SpecialAccessFields.module.css
index 60558cd259..51f48798a3 100644
--- a/packages/web/src/pages/upload-page/fields/availability/SpecialAccessFields.module.css
+++ b/packages/web/src/pages/upload-page/fields/availability/SpecialAccessFields.module.css
@@ -6,8 +6,6 @@
   background: var(--background-surface-1);
   border: 1px solid var(--border-strong);
   border-radius: var(--unit-2);
-  font-weight: var(--font-demi-bold);
-  font-size: var(--font-l);
 }
 
 .radio {
diff --git a/packages/web/src/pages/upload-page/fields/availability/SpecialAccessFields.tsx b/packages/web/src/pages/upload-page/fields/availability/SpecialAccessFields.tsx
index 4cfcbc3518..5aa9d6c670 100644
--- a/packages/web/src/pages/upload-page/fields/availability/SpecialAccessFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/availability/SpecialAccessFields.tsx
@@ -7,6 +7,7 @@ import { useField } from 'formik'
 import { useSelector } from 'react-redux'
 
 import Tooltip from 'components/tooltip/Tooltip'
+import { Text } from 'components/typography'
 
 import {
   AccessAndSaleFormValues,
@@ -74,7 +75,7 @@ export const SpecialAccessFields = (props: TrackAvailabilityFieldsProps) => {
           value={SpecialAccessType.FOLLOW}
           disabled={disabled}
         />
-        <span>{messages.followersOnly}</span>
+        <Text>{messages.followersOnly}</Text>
       </label>
       <label className={cn(styles.row, { [styles.disabled]: disabled })}>
         <RadioButton
@@ -82,7 +83,7 @@ export const SpecialAccessFields = (props: TrackAvailabilityFieldsProps) => {
           value={SpecialAccessType.TIP}
           disabled={disabled}
         />
-        <span>{messages.supportersOnly}</span>
+        <Text>{messages.supportersOnly}</Text>
         <Tooltip
           className={styles.tooltip}
           text={messages.supportersInfo}
diff --git a/packages/web/src/pages/upload-page/fields/availability/UsdcPurchaseFields.tsx b/packages/web/src/pages/upload-page/fields/availability/UsdcPurchaseFields.tsx
index 893c0da26e..73171944e0 100644
--- a/packages/web/src/pages/upload-page/fields/availability/UsdcPurchaseFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/availability/UsdcPurchaseFields.tsx
@@ -97,7 +97,7 @@ const BoxedTextField = (props: BoxedTextFieldProps) => {
     >
       <div className={cn(layoutStyles.col, layoutStyles.gap2)}>
         <Text variant='title'>{title}</Text>
-        <Text variant='body'>{description}</Text>
+        <Text>{description}</Text>
       </div>
       <TextField {...inputProps} />
     </div>