[C-2986] Upload flow qa round 1 (#3941)

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;
+}

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}

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

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}

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;
 }

packages/web/src/components/modal-radio/ModalRadioItem.tsx

@@ -42,18 +42,18 @@ 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}
           aria-label={label}
           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>

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) {

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)',

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;
 }

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>

packages/web/src/pages/upload-page/fields/availability/HiddenAvailabilityFields.module.css

@@ -1,22 +1,25 @@
 .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 {
   flex: 1 1 calc(50% - var(--unit-3));
   min-width: 200px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  line-height: 22px;
+  gap: var(--unit-2);
 }
 
 .switchLabel {