From 48bc7cfc13e8b1b1106f250602ebec0319ec4b56 Mon Sep 17 00:00:00 2001
From: Randy Schott <1815175+schottra@users.noreply.github.com>
Date: Tue, 25 Jul 2023 11:56:25 -0400
Subject: [PATCH 1/3] Update play/preview buttons on track details to use
 HarmonyButton

---
 .../src/components/track/PlayPauseButton.tsx  | 16 ++++++++------
 .../components/mobile/TrackHeader.tsx         | 22 +++++++++----------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/web/src/components/track/PlayPauseButton.tsx b/packages/web/src/components/track/PlayPauseButton.tsx
index a7478230fe..26d62e3a26 100644
--- a/packages/web/src/components/track/PlayPauseButton.tsx
+++ b/packages/web/src/components/track/PlayPauseButton.tsx
@@ -7,9 +7,9 @@ import {
   CommonState
 } from '@audius/common'
 import {
-  Button,
-  ButtonSize,
-  ButtonType,
+  HarmonyButton,
+  HarmonyButtonSize,
+  HarmonyButtonType,
   IconPause,
   IconPlay
 } from '@audius/stems'
@@ -78,12 +78,14 @@ export const PlayPauseButton = ({
   }
 
   return (
-    <Button
+    <HarmonyButton
       name={isPreview ? 'preview' : 'play'}
-      size={ButtonSize.LARGE}
-      type={isPreview ? ButtonType.SECONDARY : ButtonType.PRIMARY_ALT}
+      size={HarmonyButtonSize.LARGE}
+      variant={
+        isPreview ? HarmonyButtonType.SECONDARY : HarmonyButtonType.PRIMARY
+      }
       text={playing ? messages.pause : playText}
-      leftIcon={playing ? <IconPause /> : <PlayIconComponent />}
+      leftIcon={playing ? IconPause : PlayIconComponent}
       onClick={onPlay}
       minWidth={180}
       disabled={disabled}
diff --git a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
index 82e1c2dca7..ebe6610094 100644
--- a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
+++ b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
@@ -20,9 +20,9 @@ import {
   isPremiumContentUSDCPurchaseGated
 } from '@audius/common'
 import {
-  Button,
-  ButtonSize,
-  ButtonType,
+  HarmonyButton,
+  HarmonyButtonSize,
+  HarmonyButtonType,
   IconCart,
   IconCollectible,
   IconPause,
@@ -76,13 +76,13 @@ type PlayButtonProps = {
 
 const PlayButton = ({ disabled, playing, onPlay }: PlayButtonProps) => {
   return (
-    <Button
+    <HarmonyButton
       disabled={disabled}
-      type={ButtonType.PRIMARY_ALT}
+      variant={HarmonyButtonType.PRIMARY}
       text={playing ? messages.pause : messages.play}
-      leftIcon={playing ? <IconPause /> : <IconPlay />}
+      leftIcon={playing ? IconPause : IconPlay}
       onClick={onPlay}
-      size={ButtonSize.LARGE}
+      size={HarmonyButtonSize.LARGE}
       fullWidth
     />
   )
@@ -90,10 +90,10 @@ const PlayButton = ({ disabled, playing, onPlay }: PlayButtonProps) => {
 
 const PreviewButton = ({ playing, onPlay }: PlayButtonProps) => {
   return (
-    <Button
-      type={ButtonType.SECONDARY}
+    <HarmonyButton
+      variant={HarmonyButtonType.SECONDARY}
       text={playing ? messages.pause : messages.preview}
-      leftIcon={playing ? <IconPause /> : <IconPlay />}
+      leftIcon={playing ? IconPause : IconPlay}
       onClick={onPlay}
       fullWidth
     />
@@ -191,7 +191,7 @@ const TrackHeader = ({
     isPremiumContentUSDCPurchaseGated(premiumConditions)
   // Preview button is shown for USDC-gated tracks if user does not have access
   // or is the owner
-  const showPreview = isUSDCPurchaseGated && (isOwner || !doesUserHaveAccess)
+  const showPreview = !isUSDCPurchaseGated && (isOwner || !doesUserHaveAccess)
   // Play button is conditionally hidden for USDC-gated tracks when the user does not have access
   const showPlay = isUSDCPurchaseGated ? doesUserHaveAccess : true
   const showListenCount =

From 9c74d2272915b6d538f37573b7f44977641a1caf Mon Sep 17 00:00:00 2001
From: Randy Schott <1815175+schottra@users.noreply.github.com>
Date: Tue, 25 Jul 2023 15:49:08 -0400
Subject: [PATCH 2/3] undo test change

---
 .../components/mobile/TrackHeader.tsx         | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
index ebe6610094..82e1c2dca7 100644
--- a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
+++ b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
@@ -20,9 +20,9 @@ import {
   isPremiumContentUSDCPurchaseGated
 } from '@audius/common'
 import {
-  HarmonyButton,
-  HarmonyButtonSize,
-  HarmonyButtonType,
+  Button,
+  ButtonSize,
+  ButtonType,
   IconCart,
   IconCollectible,
   IconPause,
@@ -76,13 +76,13 @@ type PlayButtonProps = {
 
 const PlayButton = ({ disabled, playing, onPlay }: PlayButtonProps) => {
   return (
-    <HarmonyButton
+    <Button
       disabled={disabled}
-      variant={HarmonyButtonType.PRIMARY}
+      type={ButtonType.PRIMARY_ALT}
       text={playing ? messages.pause : messages.play}
-      leftIcon={playing ? IconPause : IconPlay}
+      leftIcon={playing ? <IconPause /> : <IconPlay />}
       onClick={onPlay}
-      size={HarmonyButtonSize.LARGE}
+      size={ButtonSize.LARGE}
       fullWidth
     />
   )
@@ -90,10 +90,10 @@ const PlayButton = ({ disabled, playing, onPlay }: PlayButtonProps) => {
 
 const PreviewButton = ({ playing, onPlay }: PlayButtonProps) => {
   return (
-    <HarmonyButton
-      variant={HarmonyButtonType.SECONDARY}
+    <Button
+      type={ButtonType.SECONDARY}
       text={playing ? messages.pause : messages.preview}
-      leftIcon={playing ? IconPause : IconPlay}
+      leftIcon={playing ? <IconPause /> : <IconPlay />}
       onClick={onPlay}
       fullWidth
     />
@@ -191,7 +191,7 @@ const TrackHeader = ({
     isPremiumContentUSDCPurchaseGated(premiumConditions)
   // Preview button is shown for USDC-gated tracks if user does not have access
   // or is the owner
-  const showPreview = !isUSDCPurchaseGated && (isOwner || !doesUserHaveAccess)
+  const showPreview = isUSDCPurchaseGated && (isOwner || !doesUserHaveAccess)
   // Play button is conditionally hidden for USDC-gated tracks when the user does not have access
   const showPlay = isUSDCPurchaseGated ? doesUserHaveAccess : true
   const showListenCount =

From 9353b68344aab64730dddb622dd5511e1c61ef1c Mon Sep 17 00:00:00 2001
From: Randy Schott <1815175+schottra@users.noreply.github.com>
Date: Tue, 25 Jul 2023 16:00:23 -0400
Subject: [PATCH 3/3] use correct prop name :-)

---
 packages/web/src/components/track/PlayPauseButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/src/components/track/PlayPauseButton.tsx b/packages/web/src/components/track/PlayPauseButton.tsx
index 26d62e3a26..93001fefd5 100644
--- a/packages/web/src/components/track/PlayPauseButton.tsx
+++ b/packages/web/src/components/track/PlayPauseButton.tsx
@@ -85,7 +85,7 @@ export const PlayPauseButton = ({
         isPreview ? HarmonyButtonType.SECONDARY : HarmonyButtonType.PRIMARY
       }
       text={playing ? messages.pause : playText}
-      leftIcon={playing ? IconPause : PlayIconComponent}
+      iconLeft={playing ? IconPause : PlayIconComponent}
       onClick={onPlay}
       minWidth={180}
       disabled={disabled}