[C-2784] Refactor track page to use entity button (#3624)

AudiusProject · Jun 22, 2023 · 14150ec · 14150ec
1 parent 5a3e74e
commit 14150ec
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 56 deletions.
diff --git a/packages/web/src/components/collection/desktop/CollectionActionButton.tsx b/packages/web/src/components/collection/desktop/CollectionActionButton.tsx
diff --git a/packages/web/src/components/collection/desktop/CollectionActionButtons.tsx b/packages/web/src/components/collection/desktop/CollectionActionButtons.tsx
@@ -7,6 +7,10 @@ import { PlayButton } from './PlayButton'
 import { SmartCollectionActionButtons } from './SmartCollectionActionButtons'
 import { ViewerActionButtons } from './ViewerActionButtons'
 
+const messages = {
+  actionGroupLabel: 'collection actions'
+}
+
 type CollectionActionButtonProps = {
   collectionId: ID | SmartCollectionVariant
   variant?: Variant
@@ -53,6 +57,8 @@ export const CollectionActionButtons = (props: CollectionActionButtonProps) => {
         [styles.show]: !tracksLoading,
         [styles.hide]: tracksLoading
       })}
+      role='group'
+      aria-label={messages.actionGroupLabel}
     >
       {isEmptyPlaylist ? null : (
         <PlayButton onPlay={onPlay} playing={playing} />

diff --git a/packages/web/src/components/collection/desktop/EditButton.tsx b/packages/web/src/components/collection/desktop/EditButton.tsx
@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux'
 
 import { open as openEditCollectionModal } from 'store/application/ui/editPlaylistModal/slice'
 
-import { CollectionActionButton } from './CollectionActionButton'
+import { EntityActionButton } from '../../entity-page/EntityActionButton'
 
 const messages = {
   edit: 'Edit'
@@ -25,7 +25,7 @@ export const EditButton = (props: EditButtonProps) => {
   )
 
   return (
-    <CollectionActionButton
+    <EntityActionButton
       type={ButtonType.COMMON}
       text={messages.edit}
       leftIcon={<IconPencil />}

diff --git a/packages/web/src/components/collection/desktop/FavoriteButton.tsx b/packages/web/src/components/collection/desktop/FavoriteButton.tsx
@@ -15,7 +15,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { Tooltip } from 'components/tooltip'
 
-import { CollectionActionButton } from './CollectionActionButton'
+import { EntityActionButton } from '../../entity-page/EntityActionButton'
 import { BUTTON_COLLAPSE_WIDTHS } from './utils'
 
 const { getCollection } = collectionPageSelectors
@@ -81,7 +81,7 @@ export const FavoriteButton = (props: FavoriteButtonProps) => {
       disabled={isOwner || saveCount === 0}
       text={isSaved ? messages.unfavorite : messages.favorite}
     >
-      <CollectionActionButton
+      <EntityActionButton
         type={type ?? (isSaved ? ButtonType.SECONDARY : ButtonType.COMMON)}
         text={isSaved ? messages.favorited : messages.favorite}
         leftIcon={<IconHeart />}

diff --git a/packages/web/src/components/collection/desktop/PlayButton.tsx b/packages/web/src/components/collection/desktop/PlayButton.tsx
@@ -2,7 +2,8 @@ import { MouseEventHandler } from 'react'
 
 import { ButtonType, IconPause, IconPlay } from '@audius/stems'
 
-import { CollectionActionButton } from './CollectionActionButton'
+import { EntityActionButton } from '../../entity-page/EntityActionButton'
+
 import { BUTTON_COLLAPSE_WIDTHS } from './utils'
 
 const messages = {
@@ -19,7 +20,7 @@ export const PlayButton = (props: PlayButtonProps) => {
   const { onPlay, playing: isPlaying } = props
 
   return (
-    <CollectionActionButton
+    <EntityActionButton
       type={ButtonType.PRIMARY_ALT}
       text={isPlaying ? messages.pause : messages.play}
       leftIcon={isPlaying ? <IconPause /> : <IconPlay />}

diff --git a/packages/web/src/components/collection/desktop/PublishButton.tsx b/packages/web/src/components/collection/desktop/PublishButton.tsx
@@ -11,7 +11,8 @@ import { useToggle } from 'react-use'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { Tooltip } from 'components/tooltip'
 
-import { CollectionActionButton } from './CollectionActionButton'
+import { EntityActionButton } from '../../entity-page/EntityActionButton'
+
 import styles from './CollectionHeader.module.css'
 import { PublishConfirmationModal } from './PublishConfirmationModal'
 import { BUTTON_COLLAPSE_WIDTHS } from './utils'
@@ -45,7 +46,7 @@ export const PublishButton = (props: PublishButtonProps) => {
   const isDisabled = track_count === 0 || hasHiddenTracks
 
   const publishButtonElement = (
-    <CollectionActionButton
+    <EntityActionButton
       type={_is_publishing ? ButtonType.DISABLED : ButtonType.COMMON}
       text={
         _is_publishing ? (

diff --git a/packages/web/src/components/collection/desktop/RepostButton.tsx b/packages/web/src/components/collection/desktop/RepostButton.tsx
@@ -13,7 +13,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { Tooltip } from 'components/tooltip'
 
-import { CollectionActionButton } from './CollectionActionButton'
+import { EntityActionButton } from '../../entity-page/EntityActionButton'
 import { BUTTON_COLLAPSE_WIDTHS } from './utils'
 
 const { getCollection } = collectionPageSelectors
@@ -50,7 +50,7 @@ export const RepostButton = (props: RepostButtonProps) => {
     <Tooltip
       text={has_current_user_reposted ? messages.unrepost : messages.repost}
     >
-      <CollectionActionButton
+      <EntityActionButton
         type={
           type ??
           (has_current_user_reposted ? ButtonType.SECONDARY : ButtonType.COMMON)

diff --git a/packages/web/src/components/collection/desktop/ShareButton.tsx b/packages/web/src/components/collection/desktop/ShareButton.tsx
@@ -11,7 +11,8 @@ import { useDispatch } from 'react-redux'
 
 import { Tooltip } from 'components/tooltip'
 
-import { CollectionActionButton } from './CollectionActionButton'
+import { EntityActionButton } from '../../entity-page/EntityActionButton'
+
 import { BUTTON_COLLAPSE_WIDTHS } from './utils'
 
 const { requestOpen: requestOpenShareModal } = shareModalUIActions
@@ -56,7 +57,7 @@ export const ShareButton = (props: ShareButtonProps) => {
   }, [dispatch, collectionId, userId])
 
   const shareButtonElement = (
-    <CollectionActionButton
+    <EntityActionButton
       type={type ?? ButtonType.COMMON}
       text={messages.share}
       leftIcon={<IconShare />}

diff --git a/packages/web/src/components/entity-page/EntityActionButton.module.css b/packages/web/src/components/entity-page/EntityActionButton.module.css
@@ -0,0 +1,8 @@
+.text {
+  font-size: var(--font-l) !important;
+  text-transform: uppercase;
+}
+
+.icon {
+  margin-right: var(--unit-2) !important;
+}
diff --git a/packages/web/src/components/entity-page/EntityActionButton.tsx b/packages/web/src/components/entity-page/EntityActionButton.tsx
@@ -0,0 +1,15 @@
+import { Button, ButtonProps } from '@audius/stems'
+
+import styles from './EntityActionButton.module.css'
+
+type CollectionActionButtonProps = ButtonProps
+
+export const EntityActionButton = (props: CollectionActionButtonProps) => {
+  return (
+    <Button
+      textClassName={styles.text}
+      iconClassName={styles.icon}
+      {...props}
+    />
+  )
+}
diff --git a/packages/web/src/components/track/GiantTrackTile.js b/packages/web/src/components/track/GiantTrackTile.js
@@ -26,6 +26,7 @@ import PropTypes from 'prop-types'
 import { ReactComponent as IconRobot } from 'assets/img/robot.svg'
 import { ArtistPopover } from 'components/artist/ArtistPopover'
 import DownloadButtons from 'components/download-buttons/DownloadButtons'
+import { EntityActionButton } from 'components/entity-page/EntityActionButton'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Menu from 'components/menu/Menu'
 import RepostFavoritesStats from 'components/repost-favorites-stats/RepostFavoritesStats'
@@ -67,7 +68,8 @@ const messages = {
   unplayed: 'Unplayed',
   timeLeft: 'left',
   played: 'Played',
-  generatedWithAi: 'Generated With AI'
+  generatedWithAi: 'Generated With AI',
+  actionGroupLabel: 'collection actions'
 }
 
 class GiantTrackTile extends PureComponent {
@@ -95,11 +97,9 @@ class GiantTrackTile extends PureComponent {
     const shouldShow = (!isUnlisted && !isPublishing) || fieldVisibility.share
     return (
       shouldShow && (
-        <Button
-          className={styles.buttonFormatting}
-          textClassName={styles.buttonTextFormatting}
+        <EntityActionButton
           type={ButtonType.COMMON}
-          text='SHARE'
+          text='share'
           leftIcon={<IconShare />}
           widthToHideText={BUTTON_COLLAPSE_WIDTHS.first}
           onClick={onShare}
@@ -114,9 +114,7 @@ class GiantTrackTile extends PureComponent {
     return (
       (isUnlisted || isPublishing) &&
       isOwner && (
-        <Button
-          className={cn(styles.buttonFormatting, styles.makePublicButton)}
-          textClassName={styles.buttonTextFormatting}
+        <EntityActionButton
           type={isPublishing ? ButtonType.DISABLED : ButtonType.COMMON}
           text={isPublishing ? messages.isPublishing : messages.makePublic}
           leftIcon={
@@ -127,7 +125,7 @@ class GiantTrackTile extends PureComponent {
             )
           }
           widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
-          onClick={isPublishing ? () => {} : () => makePublic(trackId)}
+          onClick={isPublishing ? undefined : () => makePublic(trackId)}
         />
       )
     )
@@ -158,10 +156,8 @@ class GiantTrackTile extends PureComponent {
             text={isReposted ? 'Unrepost' : 'Repost'}
           >
             <div>
-              <Button
+              <EntityActionButton
                 name='repost'
-                className={styles.buttonFormatting}
-                textClassName={styles.buttonTextFormatting}
                 type={
                   isOwner
                     ? ButtonType.DISABLED
@@ -202,10 +198,8 @@ class GiantTrackTile extends PureComponent {
             text={isSaved ? 'Unfavorite' : 'Favorite'}
           >
             <div>
-              <Button
+              <EntityActionButton
                 name='favorite'
-                className={styles.buttonFormatting}
-                textClassName={styles.buttonTextFormatting}
                 type={
                   isOwner
                     ? ButtonType.DISABLED
@@ -216,7 +210,7 @@ class GiantTrackTile extends PureComponent {
                 text={isSaved ? 'FAVORITED' : 'FAVORITE'}
                 widthToHideText={BUTTON_COLLAPSE_WIDTHS.third}
                 leftIcon={<IconHeart />}
-                onClick={isOwner ? () => {} : onSave}
+                onClick={isOwner ? undefined : onSave}
               />
             </div>
           </Tooltip>
@@ -512,9 +506,9 @@ class GiantTrackTile extends PureComponent {
             </div>
 
             <div
-              className={cn(styles.commonButtonSection, fadeIn)}
+              className={cn(styles.actionButtons, fadeIn)}
               role='group'
-              aria-label='track actions'
+              aria-label={messages.actionGroupLabel}
             >
               {this.renderShareButton()}
               {this.renderMakePublicButton()}

diff --git a/packages/web/src/components/track/GiantTrackTile.module.css b/packages/web/src/components/track/GiantTrackTile.module.css
@@ -194,6 +194,13 @@
   fill: var(--neutral-light-4);
 }
 
+.actionButtons {
+  display: flex;
+  align-items: center;
+  column-gap: var(--unit-2);
+  margin-top: var(--unit-4);
+}
+
 .commonButtonSection {
   display: flex;
   flex-direction: row;
@@ -205,17 +212,6 @@
   margin-right: 16px;
 }
 
-.buttonFormatting {
-  padding: 0 16px;
-  text-transform: uppercase;
-}
-
-.buttonFormatting .buttonTextFormatting {
-  font-size: var(--font-s);
-  font-weight: var(--font-bold);
-  letter-spacing: 0.5px;
-}
-
 .menuKebabContainer {
   display: flex;
   align-items: center;