From deadb5f210c79f03bd0903bdfec8cd19e70dacd8 Mon Sep 17 00:00:00 2001
From: Kyle Shanks <kyle.j.shanks@gmail.com>
Date: Thu, 27 Jul 2023 14:27:37 -0400
Subject: [PATCH] [C-2902] Update the upload forms to use the typography
 component (#3809)

---
 .../fields/SourceFilesView.module.css         |  7 +---
 .../upload-page/fields/SourceFilesView.tsx    |  5 ++-
 .../fields/SwitchRowField.module.css          | 11 -----
 .../upload-page/fields/SwitchRowField.tsx     |  9 ++--
 .../forms/AttributionModalForm.tsx            | 41 ++++++++++---------
 .../forms/ReleaseDateModalForm.module.css     |  8 ----
 .../forms/ReleaseDateModalForm.tsx            | 18 +++++---
 .../forms/RemixModalForm.module.css           |  8 ----
 .../upload-page/forms/RemixModalForm.tsx      |  7 +++-
 .../forms/SourceFilesModalForm.module.css     |  8 ----
 .../forms/SourceFilesModalForm.tsx            |  7 +++-
 .../TrackAvailabilityModalForm.module.css     |  8 ----
 .../forms/TrackAvailabilityModalForm.tsx      |  7 +++-
 13 files changed, 60 insertions(+), 84 deletions(-)

diff --git a/packages/web/src/pages/upload-page/fields/SourceFilesView.module.css b/packages/web/src/pages/upload-page/fields/SourceFilesView.module.css
index 72a8f78445..77581aaa3b 100644
--- a/packages/web/src/pages/upload-page/fields/SourceFilesView.module.css
+++ b/packages/web/src/pages/upload-page/fields/SourceFilesView.module.css
@@ -4,6 +4,7 @@
   flex-direction: column;
   overflow: auto;
 }
+
 .modalContainer {
   max-width: 536px;
   /* Need to account for the dropdown outside modal */
@@ -60,12 +61,6 @@
   fill: var(--neutral-light-6);
 }
 
-.title {
-  font-size: var(--font-s);
-  font-weight: var(--font-demi-bold);
-  color: var(--neutral);
-}
-
 .dropdownContainer {
   width: 242px;
   margin-right: 16px;
diff --git a/packages/web/src/pages/upload-page/fields/SourceFilesView.tsx b/packages/web/src/pages/upload-page/fields/SourceFilesView.tsx
index 3230868657..0944442e51 100644
--- a/packages/web/src/pages/upload-page/fields/SourceFilesView.tsx
+++ b/packages/web/src/pages/upload-page/fields/SourceFilesView.tsx
@@ -10,6 +10,7 @@ import cn from 'classnames'
 
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Dropdown from 'components/navigation/Dropdown'
+import { Text } from 'components/typography'
 import { Dropzone } from 'components/upload/Dropzone'
 
 import styles from './SourceFilesView.module.css'
@@ -165,7 +166,9 @@ const StemListItem = ({
           textClassName={styles.dropdownText}
         />
       </div>
-      <div className={styles.title}>{metadata.title}</div>
+      <Text size='Small' strength='Strong'>
+        {metadata.title}
+      </Text>
       {renderDeleteButton()}
     </li>
   )
diff --git a/packages/web/src/pages/upload-page/fields/SwitchRowField.module.css b/packages/web/src/pages/upload-page/fields/SwitchRowField.module.css
index a4e58881be..dbfe59834f 100644
--- a/packages/web/src/pages/upload-page/fields/SwitchRowField.module.css
+++ b/packages/web/src/pages/upload-page/fields/SwitchRowField.module.css
@@ -11,20 +11,9 @@
 }
 
 .title {
-  color: var(--neutral);
-  font-family: Avenir Next LT Pro;
-  font-size: var(--font-l);
-  font-weight: var(--font-bold);
   line-height: 20px;
 }
 
-.description {
-  color: var(--neutral);
-  font-size: var(--font-m);
-  font-weight: var(--font-medium);
-  line-height: 130%;
-}
-
 .switch :global(label) {
   width: 48px;
   height: 26px;
diff --git a/packages/web/src/pages/upload-page/fields/SwitchRowField.tsx b/packages/web/src/pages/upload-page/fields/SwitchRowField.tsx
index b93e8aa1f0..c615be3cfd 100644
--- a/packages/web/src/pages/upload-page/fields/SwitchRowField.tsx
+++ b/packages/web/src/pages/upload-page/fields/SwitchRowField.tsx
@@ -1,9 +1,10 @@
 import { ChangeEvent, ComponentProps, PropsWithChildren } from 'react'
 
 import { Switch } from '@audius/stems'
-import cn from 'classnames'
 import { useField } from 'formik'
 
+import { Text } from 'components/typography'
+
 import styles from './SwitchRowField.module.css'
 
 type ToggleFieldProps = PropsWithChildren & {
@@ -34,8 +35,10 @@ export const SwitchRowField = (props: ToggleFieldProps) => {
   return (
     <div className={styles.root}>
       <div className={styles.content}>
-        <h3 className={cn(styles.title, styles.modalHeading)}>{header}</h3>
-        <p className={styles.description}>{description}</p>
+        <Text className={styles.title} variant='title' size='Large'>
+          {header}
+        </Text>
+        <Text>{description}</Text>
         {(inverted ? !field.checked : field.checked) ? children : null}
       </div>
       <Switch
diff --git a/packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx b/packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx
index 1577728c20..398dcb620a 100644
--- a/packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx
+++ b/packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx
@@ -11,6 +11,7 @@ import { AiAttributionDropdown } from 'components/ai-attribution-modal/AiAttribu
 import { InputV2, InputV2Variant } from 'components/data-entry/InputV2'
 import { Divider } from 'components/divider'
 import layoutStyles from 'components/layout/layout.module.css'
+import { Text } from 'components/typography'
 import typeStyles from 'components/typography/typography.module.css'
 
 import { EditFormValues } from '../components/EditPageNew'
@@ -158,12 +159,10 @@ export const AttributionModalForm = () => {
 
   const preview = (
     <div className={cn(layoutStyles.col, layoutStyles.gap2)}>
-      <label className={cn(typeStyles.title, typeStyles.titleLarge)}>
+      <Text variant='title' size='Large'>
         {messages.title}
-      </label>
-      <div className={cn(typeStyles.body, typeStyles.bodyMedium)}>
-        {messages.description}
-      </div>
+      </Text>
+      <Text>{messages.description}</Text>
     </div>
   )
 
@@ -227,9 +226,9 @@ const AttributionModalFields = () => {
       </SwitchRowField>
       <Divider />
       <div className={cn(layoutStyles.col, layoutStyles.gap4)}>
-        <div
-          className={cn(typeStyles.title, typeStyles.titleLarge)}
-        >{`${messages.isrc.header} / ${messages.iswc.header}`}</div>
+        <Text variant='title' size='Large'>
+          {`${messages.isrc.header} / ${messages.iswc.header}`}
+        </Text>
         <span className={cn(layoutStyles.row, layoutStyles.gap6)}>
           <InputV2
             {...isrcField}
@@ -247,9 +246,9 @@ const AttributionModalFields = () => {
       </div>
       <Divider />
       <div className={cn(layoutStyles.col, layoutStyles.gap6)}>
-        <div className={cn(typeStyles.title, typeStyles.titleLarge)}>
+        <Text variant='title' size='Large'>
           {messages.licenseType}
-        </div>
+        </Text>
         <div className={styles.attributionCommercialRow}>
           <div
             className={cn(
@@ -258,9 +257,9 @@ const AttributionModalFields = () => {
               layoutStyles.gap2
             )}
           >
-            <div className={cn(typeStyles.title, typeStyles.titleMedium)}>
+            <Text variant='title' size='Medium'>
               {messages.allowAttribution.header}
-            </div>
+            </Text>
             <SegmentedControl
               defaultSelected={allowAttribution}
               // @ts-ignore boolean support works
@@ -280,9 +279,9 @@ const AttributionModalFields = () => {
               }
             )}
           >
-            <div className={cn(typeStyles.title, typeStyles.titleMedium)}>
+            <Text variant='title' size='Medium'>
               {messages.commercialUse.header}
-            </div>
+            </Text>
             <SegmentedControl
               fullWidth
               defaultSelected={commercialUse}
@@ -295,13 +294,15 @@ const AttributionModalFields = () => {
           </div>
         </div>
         <div className={cn(layoutStyles.col, layoutStyles.gap2)}>
-          <div
-            className={cn(typeStyles.title, typeStyles.titleMedium, {
+          <Text
+            className={cn({
               [styles.disabled]: !allowAttribution
             })}
+            variant='title'
+            size='Medium'
           >
             {messages.derivativeWorks.header}
-          </div>
+          </Text>
           <SegmentedControl
             fullWidth
             defaultSelected={derivativeWorks}
@@ -322,12 +323,12 @@ const AttributionModalFields = () => {
               ))}
             </div>
           ) : null}
-          <div className={cn(typeStyles.title, typeStyles.titleMedium)}>
+          <Text variant='title' size='Medium'>
             {licenseType}
-          </div>
+          </Text>
         </div>
         {licenseDescription ? (
-          <div className={typeStyles.bodySmall}>{licenseDescription}</div>
+          <Text size='Small'>{licenseDescription}</Text>
         ) : null}
       </div>
     </div>
diff --git a/packages/web/src/pages/upload-page/forms/ReleaseDateModalForm.module.css b/packages/web/src/pages/upload-page/forms/ReleaseDateModalForm.module.css
index 4a3aed9b6d..4202de161d 100644
--- a/packages/web/src/pages/upload-page/forms/ReleaseDateModalForm.module.css
+++ b/packages/web/src/pages/upload-page/forms/ReleaseDateModalForm.module.css
@@ -6,17 +6,9 @@
 }
 
 .title {
-  font-family: var(--font-family);
-  font-style: normal;
-  font-weight: var(--font-bold);
-  font-size: var(--font-l);
   line-height: 20px;
 }
 
-.description {
-  font-weight: var(--font-medium);
-}
-
 .preview {
   display: flex;
   flex-direction: column;
diff --git a/packages/web/src/pages/upload-page/forms/ReleaseDateModalForm.tsx b/packages/web/src/pages/upload-page/forms/ReleaseDateModalForm.tsx
index ec1b46e703..5ecd36783b 100644
--- a/packages/web/src/pages/upload-page/forms/ReleaseDateModalForm.tsx
+++ b/packages/web/src/pages/upload-page/forms/ReleaseDateModalForm.tsx
@@ -6,6 +6,8 @@ import { Formik, useField } from 'formik'
 import { get, set } from 'lodash'
 import moment from 'moment'
 
+import { Text } from 'components/typography'
+
 import { EditFormValues } from '../components/EditPageNew'
 import { DatePickerField } from '../fields/DatePickerField'
 import { ModalField } from '../fields/ModalField'
@@ -48,9 +50,11 @@ export const ReleaseDateModalForm = () => {
   const preview = (
     <div className={styles.preview}>
       <div className={styles.header}>
-        <label className={styles.title}>{messages.title}</label>
+        <Text className={styles.title} variant='title' size='Large'>
+          {messages.title}
+        </Text>
       </div>
-      <div className={styles.description}>{messages.description}</div>
+      <Text>{messages.description}</Text>
       <div className={styles.valueDisplay}>
         <IconCalendar className={styles.calendarIcon} />
         <input
@@ -76,10 +80,14 @@ export const ReleaseDateModalForm = () => {
         icon={<IconCalendar className={styles.titleIcon} />}
         preview={preview}
       >
-        <h3 className={cn(styles.title, styles.modalHeading)}>
+        <Text
+          className={cn(styles.title, styles.modalHeading)}
+          variant='title'
+          size='Large'
+        >
           {messages.title}
-        </h3>
-        <p className={styles.description}>{messages.description}</p>
+        </Text>
+        <Text>{messages.description}</Text>
         <div className={styles.datePicker}>
           <DatePickerField name={RELEASE_DATE} label={messages.title} />
         </div>
diff --git a/packages/web/src/pages/upload-page/forms/RemixModalForm.module.css b/packages/web/src/pages/upload-page/forms/RemixModalForm.module.css
index fecae6f236..ca37702521 100644
--- a/packages/web/src/pages/upload-page/forms/RemixModalForm.module.css
+++ b/packages/web/src/pages/upload-page/forms/RemixModalForm.module.css
@@ -6,10 +6,6 @@
 }
 
 .title {
-  font-family: var(--font-family);
-  font-style: normal;
-  font-weight: var(--font-bold);
-  font-size: var(--font-l);
   line-height: 20px;
 }
 
@@ -25,10 +21,6 @@
   gap: var(--unit-2);
 }
 
-.description {
-  font-weight: var(--font-medium);
-}
-
 .fields {
   display: flex;
   flex-direction: column;
diff --git a/packages/web/src/pages/upload-page/forms/RemixModalForm.tsx b/packages/web/src/pages/upload-page/forms/RemixModalForm.tsx
index f15e63b32d..072ebf3d02 100644
--- a/packages/web/src/pages/upload-page/forms/RemixModalForm.tsx
+++ b/packages/web/src/pages/upload-page/forms/RemixModalForm.tsx
@@ -23,6 +23,7 @@ import {
 } from 'components/data-entry/InputV2'
 import { Divider } from 'components/divider'
 import DynamicImage from 'components/dynamic-image/DynamicImage'
+import { Text } from 'components/typography'
 import UserBadges from 'components/user-badges/UserBadges'
 import { useTrackCoverArt } from 'hooks/useTrackCoverArt'
 import { fullTrackPage, stripBaseUrl } from 'utils/route'
@@ -129,9 +130,11 @@ export const RemixModalForm = () => {
   const preview = (
     <div className={styles.preview}>
       <div className={styles.header}>
-        <label className={styles.title}>{messages.title}</label>
+        <Text className={styles.title} variant='title' size='Large'>
+          {messages.title}
+        </Text>
       </div>
-      <div className={styles.description}>{messages.description}</div>
+      <Text>{messages.description}</Text>
     </div>
   )
 
diff --git a/packages/web/src/pages/upload-page/forms/SourceFilesModalForm.module.css b/packages/web/src/pages/upload-page/forms/SourceFilesModalForm.module.css
index 02c0cb1479..eb315fffa5 100644
--- a/packages/web/src/pages/upload-page/forms/SourceFilesModalForm.module.css
+++ b/packages/web/src/pages/upload-page/forms/SourceFilesModalForm.module.css
@@ -6,10 +6,6 @@
 }
 
 .title {
-  font-family: var(--font-family);
-  font-style: normal;
-  font-weight: var(--font-bold);
-  font-size: var(--font-l);
   line-height: 20px;
 }
 
@@ -25,10 +21,6 @@
   gap: var(--unit-2);
 }
 
-.description {
-  font-weight: var(--font-medium);
-}
-
 .fields {
   display: flex;
   flex-direction: column;
diff --git a/packages/web/src/pages/upload-page/forms/SourceFilesModalForm.tsx b/packages/web/src/pages/upload-page/forms/SourceFilesModalForm.tsx
index d3e8ee775b..fefa07229a 100644
--- a/packages/web/src/pages/upload-page/forms/SourceFilesModalForm.tsx
+++ b/packages/web/src/pages/upload-page/forms/SourceFilesModalForm.tsx
@@ -6,6 +6,7 @@ import { get, set } from 'lodash'
 
 import { ReactComponent as IconSourceFiles } from 'assets/img/iconSourceFiles.svg'
 import { Divider } from 'components/divider'
+import { Text } from 'components/typography'
 
 import { ModalField } from '../fields/ModalField'
 import {
@@ -78,9 +79,11 @@ export const SourceFilesModalForm = () => {
   const preview = (
     <div className={styles.preview}>
       <div className={styles.header}>
-        <label className={styles.title}>{messages.title}</label>
+        <Text className={styles.title} variant='title' size='Large'>
+          {messages.title}
+        </Text>
       </div>
-      <div className={styles.description}>{messages.description}</div>
+      <Text>{messages.description}</Text>
     </div>
   )
 
diff --git a/packages/web/src/pages/upload-page/forms/TrackAvailabilityModalForm.module.css b/packages/web/src/pages/upload-page/forms/TrackAvailabilityModalForm.module.css
index b0a49f8571..eddc8e35fd 100644
--- a/packages/web/src/pages/upload-page/forms/TrackAvailabilityModalForm.module.css
+++ b/packages/web/src/pages/upload-page/forms/TrackAvailabilityModalForm.module.css
@@ -6,17 +6,9 @@
 }
 
 .title {
-  font-family: var(--font-family);
-  font-style: normal;
-  font-weight: var(--font-bold);
-  font-size: var(--font-l);
   line-height: 20px;
 }
 
-.description {
-  font-weight: var(--font-medium);
-}
-
 .preview {
   display: flex;
   flex-direction: column;
diff --git a/packages/web/src/pages/upload-page/forms/TrackAvailabilityModalForm.tsx b/packages/web/src/pages/upload-page/forms/TrackAvailabilityModalForm.tsx
index ef1daa6838..714531c899 100644
--- a/packages/web/src/pages/upload-page/forms/TrackAvailabilityModalForm.tsx
+++ b/packages/web/src/pages/upload-page/forms/TrackAvailabilityModalForm.tsx
@@ -25,6 +25,7 @@ import { useSelector } from 'react-redux'
 
 import { HelpCallout } from 'components/help-callout/HelpCallout'
 import { ModalRadioItem } from 'components/modal-radio/ModalRadioItem'
+import { Text } from 'components/typography'
 import { useFlag } from 'hooks/useRemoteConfig'
 import { defaultFieldVisibility } from 'pages/track-page/utils'
 
@@ -177,9 +178,11 @@ export const TrackAvailabilityModalForm = () => {
   const preview = (
     <div className={styles.preview}>
       <div className={styles.header}>
-        <label className={styles.title}>{messages.title}</label>
+        <Text className={styles.title} variant='title' size='Large'>
+          {messages.title}
+        </Text>
       </div>
-      <div className={styles.description}>{messages.description}</div>
+      <Text>{messages.description}</Text>
       {/* TODO: Rich preview display */}
     </div>
   )