From d63a0915aecf3366cfc89aa6cf1513bad51823d5 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Mon, 28 Aug 2023 16:24:28 -0500
Subject: [PATCH 1/5] fix description field styling

---
 packages/web/src/components/data-entry/TextAreaV2.module.css     | 1 +
 .../web/src/pages/upload-page/fields/TrackMetadataFields.tsx     | 1 +
 packages/web/src/pages/upload-page/forms/EditCollectionForm.tsx  | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/web/src/components/data-entry/TextAreaV2.module.css b/packages/web/src/components/data-entry/TextAreaV2.module.css
index 7b1316cae2..d2c46e5735 100644
--- a/packages/web/src/components/data-entry/TextAreaV2.module.css
+++ b/packages/web/src/components/data-entry/TextAreaV2.module.css
@@ -57,6 +57,7 @@
 .scrollArea {
   display: flex;
   flex-direction: row;
+  flex-grow: 1;
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-gutter: stable;
diff --git a/packages/web/src/pages/upload-page/fields/TrackMetadataFields.tsx b/packages/web/src/pages/upload-page/fields/TrackMetadataFields.tsx
index 2e7687f4e5..92d386dc40 100644
--- a/packages/web/src/pages/upload-page/fields/TrackMetadataFields.tsx
+++ b/packages/web/src/pages/upload-page/fields/TrackMetadataFields.tsx
@@ -46,6 +46,7 @@ export const TrackMetadataFields = () => {
           placeholder={messages.description}
           maxLength={1000}
           showMaxLength
+          grows
         />
       </div>
     </div>
diff --git a/packages/web/src/pages/upload-page/forms/EditCollectionForm.tsx b/packages/web/src/pages/upload-page/forms/EditCollectionForm.tsx
index 2e10598d20..dcaa405cd7 100644
--- a/packages/web/src/pages/upload-page/forms/EditCollectionForm.tsx
+++ b/packages/web/src/pages/upload-page/forms/EditCollectionForm.tsx
@@ -104,6 +104,7 @@ export const EditCollectionForm = (props: EditCollectionFormProps) => {
                 maxLength={1000}
                 showMaxLength
                 className={styles.description}
+                grows
               />
             </div>
           </div>

From 1f36db1e0f6dc2390c371fd8c9f98bb6d32ff389 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Mon, 28 Aug 2023 16:32:58 -0500
Subject: [PATCH 2/5] fix track action button styling

---
 .../fields/CollectionTrackField.module.css       |  4 ++++
 .../upload-page/fields/CollectionTrackField.tsx  | 16 ++++++----------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/web/src/pages/upload-page/fields/CollectionTrackField.module.css b/packages/web/src/pages/upload-page/fields/CollectionTrackField.module.css
index 556e0a537c..50b90968e6 100644
--- a/packages/web/src/pages/upload-page/fields/CollectionTrackField.module.css
+++ b/packages/web/src/pages/upload-page/fields/CollectionTrackField.module.css
@@ -43,6 +43,10 @@
   gap: var(--unit-12);
 }
 
+.actionButton {
+  color: var(--text-subdued);
+}
+
 .trackInformation {
   display: flex;
   padding-left: 72px;
diff --git a/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx b/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx
index 3d96980d19..52f894ca40 100644
--- a/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx
+++ b/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx
@@ -1,9 +1,7 @@
 import { useCallback, useEffect } from 'react'
 
 import {
-  HarmonyButton,
-  HarmonyButtonSize,
-  HarmonyButtonType,
+  HarmonyPlainButton,
   IconDrag,
   IconPlay,
   IconTrash
@@ -69,7 +67,7 @@ export const CollectionTrackField = (props: CollectionTrackFieldProps) => {
           <Icon icon={IconDrag} size='large' />
         </span>
         <Text size='small' className={styles.trackindex}>
-          {index}
+          {index + 1}
         </Text>
         <TrackNameField name={`tracks.${index}.metadata.title`} />
       </div>
@@ -88,16 +86,14 @@ export const CollectionTrackField = (props: CollectionTrackFieldProps) => {
           <Text>{messages.overrideLabel}</Text>
         </div>
         <div className={styles.actions}>
-          <HarmonyButton
-            variant={HarmonyButtonType.GHOST}
-            size={HarmonyButtonSize.SMALL}
+          <HarmonyPlainButton
+            className={styles.actionButton}
             text={messages.preview}
             iconLeft={IconPlay}
           />
-          <HarmonyButton
+          <HarmonyPlainButton
+            className={styles.actionButton}
             disabled={disableDelete}
-            variant={HarmonyButtonType.GHOST}
-            size={HarmonyButtonSize.SMALL}
             text={messages.delete}
             iconLeft={IconTrash}
             onClick={handleRemove}

From a1f83ea3a1bd541221d224464cc7a5fe7b318fb7 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Mon, 28 Aug 2023 16:36:52 -0500
Subject: [PATCH 3/5] migrate to plain button

---
 .../web/src/components/upload/TrackPreviewNew.tsx    |  5 ++---
 .../pages/upload-page/components/FinishPageNew.tsx   | 12 +++---------
 .../src/pages/upload-page/forms/EditTrackForm.tsx    |  7 +++----
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/web/src/components/upload/TrackPreviewNew.tsx b/packages/web/src/components/upload/TrackPreviewNew.tsx
index 19458564e6..d550c91a81 100644
--- a/packages/web/src/components/upload/TrackPreviewNew.tsx
+++ b/packages/web/src/components/upload/TrackPreviewNew.tsx
@@ -1,4 +1,4 @@
-import { HarmonyButton, HarmonyButtonType, IconTrash } from '@audius/stems'
+import { HarmonyPlainButton, IconTrash } from '@audius/stems'
 import numeral from 'numeral'
 
 import iconFileAiff from 'assets/img/iconFileAiff.svg'
@@ -72,8 +72,7 @@ export const TrackPreviewNew = (props: TrackPreviewProps) => {
       <Text className={styles.fileSizeText} size='small' color='neutralLight2'>
         {numeral(fileSize).format('0.0 b')}
       </Text>
-      <HarmonyButton
-        variant={HarmonyButtonType.PLAIN}
+      <HarmonyPlainButton
         iconRight={IconTrash}
         onClick={onRemove}
         className={styles.removeButton}
diff --git a/packages/web/src/pages/upload-page/components/FinishPageNew.tsx b/packages/web/src/pages/upload-page/components/FinishPageNew.tsx
index f1aaf402bd..92078ffc1d 100644
--- a/packages/web/src/pages/upload-page/components/FinishPageNew.tsx
+++ b/packages/web/src/pages/upload-page/components/FinishPageNew.tsx
@@ -9,9 +9,7 @@ import {
   uploadSelectors
 } from '@audius/common'
 import {
-  HarmonyButton,
-  HarmonyButtonSize,
-  HarmonyButtonType,
+  HarmonyPlainButton,
   IconArrow,
   IconError,
   IconUpload,
@@ -180,17 +178,13 @@ export const FinishPageNew = (props: FinishPageProps) => {
         </div>
         {uploadComplete ? (
           <div className={styles.uploadFooter}>
-            <HarmonyButton
-              size={HarmonyButtonSize.SMALL}
+            <HarmonyPlainButton
               onClick={handleUploadMoreClick}
-              variant={HarmonyButtonType.PLAIN}
               text={messages.uploadMore}
               iconLeft={IconUpload}
             />
-            <HarmonyButton
-              variant={HarmonyButtonType.PLAIN}
+            <HarmonyPlainButton
               onClick={handleVisitProfileClick}
-              size={HarmonyButtonSize.SMALL}
               text={messages.visitProfile}
               iconRight={IconArrow}
             />
diff --git a/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx b/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx
index 390a820862..9abe6da576 100644
--- a/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx
+++ b/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx
@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react'
 import {
   HarmonyButton,
   HarmonyButtonType,
+  HarmonyPlainButton,
   IconArrow,
   IconCaretRight
 } from '@audius/stems'
@@ -180,18 +181,16 @@ const MultiTrackFooter = () => {
   const nextDisabled = index === trackMetadatas.length - 1
   return (
     <div className={cn(styles.multiTrackFooter, layoutStyles.row)}>
-      <HarmonyButton
+      <HarmonyPlainButton
         className={cn({ [styles.disabled]: prevDisabled })}
-        variant={HarmonyButtonType.PLAIN}
         text={messages.prev}
         iconLeft={IconCaretLeft}
         onClick={goPrev}
         disabled={prevDisabled}
         type='button'
       />
-      <HarmonyButton
+      <HarmonyPlainButton
         className={cn({ [styles.disabled]: nextDisabled })}
-        variant={HarmonyButtonType.PLAIN}
         text={messages.next}
         iconRight={IconCaretRight}
         onClick={goNext}

From 4be008001d2f473f241ab99f59a334feae24c2df Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Mon, 28 Aug 2023 16:46:21 -0500
Subject: [PATCH 4/5] deprecate plain button; use the plain button props

---
 packages/stems/src/components/HarmonyButton/types.ts       | 3 +--
 .../src/pages/upload-page/fields/CollectionTrackField.tsx  | 7 ++++---
 .../src/pages/upload-page/forms/EditTrackForm.module.css   | 4 ----
 packages/web/src/pages/upload-page/forms/EditTrackForm.tsx | 2 --
 4 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/stems/src/components/HarmonyButton/types.ts b/packages/stems/src/components/HarmonyButton/types.ts
index 80c5dbcddf..6aed52aee5 100644
--- a/packages/stems/src/components/HarmonyButton/types.ts
+++ b/packages/stems/src/components/HarmonyButton/types.ts
@@ -9,8 +9,7 @@ export enum HarmonyButtonType {
   SECONDARY = 'secondary',
   TERTIARY = 'tertiary',
   DESTRUCTIVE = 'destructive',
-  GHOST = 'ghost',
-  PLAIN = 'plain'
+  GHOST = 'ghost'
 }
 
 export enum HarmonyButtonSize {
diff --git a/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx b/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx
index 52f894ca40..fd4dc1303f 100644
--- a/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx
+++ b/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect } from 'react'
 
 import {
   HarmonyPlainButton,
+  HarmonyPlainButtonType,
   IconDrag,
   IconPlay,
   IconTrash
@@ -87,16 +88,16 @@ export const CollectionTrackField = (props: CollectionTrackFieldProps) => {
         </div>
         <div className={styles.actions}>
           <HarmonyPlainButton
-            className={styles.actionButton}
+            variant={HarmonyPlainButtonType.SUBDUED}
             text={messages.preview}
             iconLeft={IconPlay}
           />
           <HarmonyPlainButton
-            className={styles.actionButton}
-            disabled={disableDelete}
+            variant={HarmonyPlainButtonType.SUBDUED}
             text={messages.delete}
             iconLeft={IconTrash}
             onClick={handleRemove}
+            disabled={disableDelete}
           />
         </div>
       </div>
diff --git a/packages/web/src/pages/upload-page/forms/EditTrackForm.module.css b/packages/web/src/pages/upload-page/forms/EditTrackForm.module.css
index 139fe618e3..02ef057560 100644
--- a/packages/web/src/pages/upload-page/forms/EditTrackForm.module.css
+++ b/packages/web/src/pages/upload-page/forms/EditTrackForm.module.css
@@ -40,7 +40,3 @@
   background: var(--background-surface-1);
   justify-content: space-between;
 }
-
-.multiTrackFooter .disabled {
-  opacity: 0.5;
-}
diff --git a/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx b/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx
index 9abe6da576..17cddc97b9 100644
--- a/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx
+++ b/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx
@@ -182,7 +182,6 @@ const MultiTrackFooter = () => {
   return (
     <div className={cn(styles.multiTrackFooter, layoutStyles.row)}>
       <HarmonyPlainButton
-        className={cn({ [styles.disabled]: prevDisabled })}
         text={messages.prev}
         iconLeft={IconCaretLeft}
         onClick={goPrev}
@@ -190,7 +189,6 @@ const MultiTrackFooter = () => {
         type='button'
       />
       <HarmonyPlainButton
-        className={cn({ [styles.disabled]: nextDisabled })}
         text={messages.next}
         iconRight={IconCaretRight}
         onClick={goNext}

From 8662c67e9f754499e4f8508440068549fb18b9e8 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Mon, 28 Aug 2023 17:10:06 -0500
Subject: [PATCH 5/5] fix harmony build error

---
 packages/stems/src/components/HarmonyButton/HarmonyButton.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/stems/src/components/HarmonyButton/HarmonyButton.tsx b/packages/stems/src/components/HarmonyButton/HarmonyButton.tsx
index 92b79f97b8..cfcdfb371d 100644
--- a/packages/stems/src/components/HarmonyButton/HarmonyButton.tsx
+++ b/packages/stems/src/components/HarmonyButton/HarmonyButton.tsx
@@ -36,8 +36,7 @@ const TYPE_STYLE_MAP: { [k in HarmonyButtonType]: string } = {
   [HarmonyButtonType.SECONDARY]: styles.secondary,
   [HarmonyButtonType.TERTIARY]: styles.tertiary,
   [HarmonyButtonType.DESTRUCTIVE]: styles.destructive,
-  [HarmonyButtonType.GHOST]: styles.ghost,
-  [HarmonyButtonType.PLAIN]: styles.plain
+  [HarmonyButtonType.GHOST]: styles.ghost
 }
 
 /**