diff --git a/packages/web/src/components/collection/desktop/CollectionActionButton.tsx b/packages/web/src/components/collection/desktop/CollectionActionButton.tsx deleted file mode 100644 index 2adc3abc63..0000000000 --- a/packages/web/src/components/collection/desktop/CollectionActionButton.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Button, ButtonProps } from '@audius/stems' - -import styles from './CollectionHeader.module.css' - -type CollectionActionButtonProps = ButtonProps - -export const CollectionActionButton = (props: CollectionActionButtonProps) => { - return ( - - ) -} diff --git a/packages/web/src/components/collection/desktop/CollectionActionButtons.tsx b/packages/web/src/components/collection/desktop/CollectionActionButtons.tsx index 867d65215d..63a011035d 100644 --- 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 : ( diff --git a/packages/web/src/components/collection/desktop/EditButton.tsx b/packages/web/src/components/collection/desktop/EditButton.tsx index d959fd9203..3c2cc958f7 100644 --- 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 ( - } diff --git a/packages/web/src/components/collection/desktop/FavoriteButton.tsx b/packages/web/src/components/collection/desktop/FavoriteButton.tsx index 19112206c3..b4b9ec1053 100644 --- 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} > - } diff --git a/packages/web/src/components/collection/desktop/PlayButton.tsx b/packages/web/src/components/collection/desktop/PlayButton.tsx index fa00964771..5b13a5aa3f 100644 --- 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 ( - : } diff --git a/packages/web/src/components/collection/desktop/PublishButton.tsx b/packages/web/src/components/collection/desktop/PublishButton.tsx index ed12d564c9..8c62ca707a 100644 --- 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 = ( - { - { }, [dispatch, collectionId, userId]) const shareButtonElement = ( - } diff --git a/packages/web/src/components/entity-page/EntityActionButton.module.css b/packages/web/src/components/entity-page/EntityActionButton.module.css new file mode 100644 index 0000000000..7925d971c7 --- /dev/null +++ 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 new file mode 100644 index 0000000000..6440006c43 --- /dev/null +++ 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 ( + + ) +} diff --git a/packages/web/src/components/track/GiantTrackTile.js b/packages/web/src/components/track/GiantTrackTile.js index b080ec6381..8ea4097d98 100644 --- 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 && ( - } widthToHideText={BUTTON_COLLAPSE_WIDTHS.first} onClick={onShare} @@ -114,9 +114,7 @@ class GiantTrackTile extends PureComponent { return ( (isUnlisted || isPublishing) && isOwner && ( - {} : () => makePublic(trackId)} + onClick={isPublishing ? undefined : () => makePublic(trackId)} /> ) ) @@ -158,10 +156,8 @@ class GiantTrackTile extends PureComponent { text={isReposted ? 'Unrepost' : 'Repost'} > - - } - onClick={isOwner ? () => {} : onSave} + onClick={isOwner ? undefined : onSave} /> @@ -512,9 +506,9 @@ class GiantTrackTile extends PureComponent { {this.renderShareButton()} {this.renderMakePublicButton()} diff --git a/packages/web/src/components/track/GiantTrackTile.module.css b/packages/web/src/components/track/GiantTrackTile.module.css index bf48ee54a7..a22c74ca30 100644 --- 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;