From 14c0b91e560719ae2ec5d90dd29f4fd03e0b14ee Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Wed, 13 Mar 2024 16:58:06 -0700 Subject: [PATCH 01/28] [C-3967] Migrate common buttons to harmony --- .../components/CollectibleDetailsModal.tsx | 78 ++++++++----------- .../components/CollectiblesPage.module.css | 45 +---------- .../components/CollectiblesPage.tsx | 50 ++++++------ .../collection/desktop/OverflowMenuButton.tsx | 15 ++-- .../collection/desktop/OwnerActionButtons.tsx | 2 +- .../AccessAndSaleTriggerLegacy.module.css | 3 - .../data-entry/AccessAndSaleTriggerLegacy.tsx | 18 ++--- .../src/components/data-entry/FormTile.jsx | 27 ++++--- .../components/data-entry/FormTile.module.css | 12 --- .../StemsAndDownloadsTriggerLegacy.module.css | 12 --- .../StemsAndDownloadsTriggerLegacy.tsx | 16 ++-- .../DeleteConfirmationModal.module.css | 55 ------------- .../DeleteConfirmationModal.tsx | 38 ++++----- .../components/ShareDialog.module.css | 33 -------- .../share-modal/components/ShareDialog.tsx | 72 +++++++---------- .../components/SuggestedTracks.tsx | 12 +-- .../src/components/track/EditTrackModal.jsx | 45 ++++------- .../track/EditTrackModal.module.css | 30 ------- .../audio-rewards-page/RewardsTile.module.css | 25 ------ .../TrendingRewardsTile.tsx | 17 ++-- .../components/RemoveWalletBody.module.css | 27 ------- .../components/RemoveWalletBody.tsx | 26 +++---- .../DeleteChatConfirmationModal.module.css | 25 ------ .../DeleteChatConfirmationModal.tsx | 34 ++++---- .../components/desktop/DeletedPage.module.css | 4 - .../components/desktop/DeletedPage.tsx | 13 ++-- .../components/mobile/DeletedPage.module.css | 4 - .../components/mobile/DeletedPage.tsx | 13 ++-- .../DeveloperApps/CreateNewAppPage.module.css | 10 --- .../DeveloperApps/CreateNewAppPage.tsx | 27 +++---- .../DeleteAppConfirmationPage.module.css | 10 --- .../DeleteAppConfirmationPage.tsx | 29 +++---- .../DeveloperAppListItem.module.css | 4 - .../DeveloperApps/DeveloperAppListItem.tsx | 2 +- .../DeveloperApps/YourAppsPage.module.css | 12 --- .../desktop/DeveloperApps/YourAppsPage.tsx | 17 ++-- .../desktop/VerificationModal.module.css | 55 ------------- .../components/desktop/VerificationModal.tsx | 36 +++------ .../mobile/VerificationPage.module.css | 31 -------- .../components/mobile/VerificationPage.tsx | 15 +--- .../sign-up-page/components/MetaMaskModal.jsx | 51 +++++------- .../components/MetaMaskModal.module.css | 41 ---------- .../components/SignUpWithMetaMaskButton.tsx | 43 +--------- 43 files changed, 271 insertions(+), 863 deletions(-) delete mode 100644 packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.module.css delete mode 100644 packages/web/src/components/delete-confirmation/DeleteConfirmationModal.module.css delete mode 100644 packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.module.css diff --git a/packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx b/packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx index b9504efc266..fe829765c62 100644 --- a/packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx +++ b/packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx @@ -17,7 +17,7 @@ import { } from '@audius/common/store' import { formatDateWithTimezoneOffset } from '@audius/common/utils' import { - Button as HarmonyButton, + Button, ModalContent, ModalContentText, ModalFooter, @@ -31,9 +31,9 @@ import { IconLink, IconShare, IconLogoCircleSOL, - IconLogoCircleETH + IconLogoCircleETH, + Flex } from '@audius/harmony' -import { Button, ButtonSize, ButtonType } from '@audius/stems' import cn from 'classnames' import { useDispatch, useSelector } from 'react-redux' @@ -289,7 +289,7 @@ const CollectibleDetailsModal = ({ )} -
+ {isCollectibleOptionEnabled && isUserOnTheirProfile && collectible.mediaType === CollectibleMediaType.IMAGE && ( )} -
+ @@ -360,20 +354,16 @@ const CollectibleDetailsModal = ({ - setIsPicConfirmaModalOpen(false)} fullWidth > {collectibleMessages.setAsProfilePickCancel} - - + + @@ -458,15 +448,13 @@ const CollectibleDetailsModal = ({ )} diff --git a/packages/web/src/components/collectibles/components/CollectiblesPage.module.css b/packages/web/src/components/collectibles/components/CollectiblesPage.module.css index 1b04805fdef..745d9875f2b 100644 --- a/packages/web/src/components/collectibles/components/CollectiblesPage.module.css +++ b/packages/web/src/components/collectibles/components/CollectiblesPage.module.css @@ -19,10 +19,6 @@ padding: 0 24px; } -.header button { - min-width: 82px; -} - .headerText { display: flex; flex-direction: column; @@ -298,33 +294,6 @@ color: var(--neutral-light-2); } -.detailsButtonContainer { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.detailsButton { - padding: 0 var(--unit-4); -} -.detailsButton .detailsButtonText { - color: var(--neutral-light-4); - font-size: var(--font-m); - letter-spacing: 0; - text-transform: uppercase; -} -.detailsButton .detailsButtonIcon { - margin-right: var(--unit-1) !important; -} -.detailsButton .detailsButtonIcon path { - fill: var(--neutral-light-4); -} - -.detailsButton.mobileDetailsButton { - width: 100%; - height: var(--unit-9); -} - .nftModal { display: flex; align-items: flex-start; @@ -668,9 +637,9 @@ margin-bottom: 16px; } -.mobile .header button { +/* .mobile .header button { width: 100%; -} +} */ .mobile .content { padding: 0 12px; @@ -720,16 +689,6 @@ padding: 0 12px; } -.mobileButtonContainer { - display: flex; - gap: 8px; - width: 100%; -} - -.mobileButtonContainer .detailsButton { - flex: 1 1 0; -} - @keyframes fadeInVisible { from { opacity: 0; diff --git a/packages/web/src/components/collectibles/components/CollectiblesPage.tsx b/packages/web/src/components/collectibles/components/CollectiblesPage.tsx index 168b8c84051..1850863434b 100644 --- a/packages/web/src/components/collectibles/components/CollectiblesPage.tsx +++ b/packages/web/src/components/collectibles/components/CollectiblesPage.tsx @@ -22,9 +22,10 @@ import { IconPencil, IconShare, PopupMenu, - PopupMenuItem + PopupMenuItem, + Button, + Flex } from '@audius/harmony' -import { Button, ButtonSize, ButtonType } from '@audius/stems' import cn from 'classnames' import { DragDropContext, @@ -95,7 +96,8 @@ export const collectibleMessages = { setAsProfilePicDescription: 'Are you sure you want to change your profile picture?', setAsProfilePickCancel: 'Nevermind', - setAsProfilePickConfirm: 'Yes' + setAsProfilePickConfirm: 'Yes', + collectibleOptions: 'Collectible Options' } const dedupe = (list: any[]) => { @@ -582,42 +584,40 @@ const CollectiblesPage = (props: CollectiblesPageProps) => { {isMobile ? ( -
+ {isUserOnTheirProfile && ( )}
+ iconLeft={IconShare} + fullWidth + > + Share + + ) : ( ( )} /> ) diff --git a/packages/web/src/components/data-entry/FormTile.jsx b/packages/web/src/components/data-entry/FormTile.jsx index 7d7476b9267..d910293bce8 100644 --- a/packages/web/src/components/data-entry/FormTile.jsx +++ b/packages/web/src/components/data-entry/FormTile.jsx @@ -9,8 +9,7 @@ import { GENRES, convertGenreLabelToValue } from '@audius/common/utils' -import { Switch, IconCloudDownload, IconIndent } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' +import { Button, Switch, IconCloudDownload, IconIndent } from '@audius/harmony' import cn from 'classnames' import PropTypes from 'prop-types' import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd' @@ -302,15 +301,15 @@ const BasicForm = (props) => { return ( shouldRender && ( ) ) } @@ -318,15 +317,15 @@ const BasicForm = (props) => { const renderAdvancedButton = () => { return ( ) } diff --git a/packages/web/src/components/data-entry/FormTile.module.css b/packages/web/src/components/data-entry/FormTile.module.css index dff5c46ddbe..6eff0dccfc7 100644 --- a/packages/web/src/components/data-entry/FormTile.module.css +++ b/packages/web/src/components/data-entry/FormTile.module.css @@ -55,23 +55,11 @@ } .menuButton { - height: 28px !important; padding: 0px 10px; } -.menuButton .menuButtonText { - font-size: var(--font-xs); - font-weight: var(--font-demi-bold); -} -.menuButton .menuButtonIcon { - margin-right: 4px !important; -} .advancedButton { margin-left: 24px; } -.menuButtonIcon svg { - width: 16px; - height: 16px; -} .remixSwitch { display: flex; diff --git a/packages/web/src/components/data-entry/StemsAndDownloadsTriggerLegacy.module.css b/packages/web/src/components/data-entry/StemsAndDownloadsTriggerLegacy.module.css index 256dad6107b..d92a5017cc0 100644 --- a/packages/web/src/components/data-entry/StemsAndDownloadsTriggerLegacy.module.css +++ b/packages/web/src/components/data-entry/StemsAndDownloadsTriggerLegacy.module.css @@ -1,15 +1,3 @@ .menuButton { - height: 28px !important; padding: 0px 10px; } -.menuButton .menuButtonText { - font-size: var(--font-xs); - font-weight: var(--font-demi-bold); -} -.menuButton .menuButtonIcon { - margin-right: 4px !important; -} -.menuButtonIcon svg { - width: 16px; - height: 16px; -} diff --git a/packages/web/src/components/data-entry/StemsAndDownloadsTriggerLegacy.tsx b/packages/web/src/components/data-entry/StemsAndDownloadsTriggerLegacy.tsx index 6909156ff50..247b07a78b0 100644 --- a/packages/web/src/components/data-entry/StemsAndDownloadsTriggerLegacy.tsx +++ b/packages/web/src/components/data-entry/StemsAndDownloadsTriggerLegacy.tsx @@ -14,8 +14,7 @@ import { } from '@audius/common/models' import { FeatureFlags } from '@audius/common/services' import { accountSelectors } from '@audius/common/store' -import { IconCloudDownload, IconReceive } from '@audius/harmony' -import { Button, ButtonSize, ButtonType } from '@audius/stems' +import { Button, IconCloudDownload, IconReceive } from '@audius/harmony' import { FormikErrors } from 'formik' import { get, set } from 'lodash' import { useSelector } from 'react-redux' @@ -287,16 +286,15 @@ export const StemsAndDownloadsTriggerLegacy = ( renderValue={() => null} previewOverride={(toggleMenu) => ( )} /> ) diff --git a/packages/web/src/components/delete-confirmation/DeleteConfirmationModal.module.css b/packages/web/src/components/delete-confirmation/DeleteConfirmationModal.module.css deleted file mode 100644 index 87d2770dc8f..00000000000 --- a/packages/web/src/components/delete-confirmation/DeleteConfirmationModal.module.css +++ /dev/null @@ -1,55 +0,0 @@ -.header { - width: 452px; - color: var(--neutral); - font-family: var(--font-family); - font-size: var(--font-m); - font-weight: var(--font-bold); - text-align: center; - margin: 8px auto; -} - -.description { - color: var(--neutral); - font-family: var(--font-family); - font-size: var(--font-s); - font-weight: var(--font-medium); - text-align: center; - margin-bottom: 24px; -} - -.buttons { - display: inline-flex; - justify-content: center; - width: 100%; -} - -.deleteButton { - cursor: pointer; - margin-right: 31px; - text-transform: uppercase; - border-color: var(--accent-red); -} - -.deleteButton .deleteButtonText { - color: var(--accent-red); -} - -.deleteButton:hover { - border-color: var(--accent-red); - color: var(--white); - background-color: var(--accent-red); -} - -.deleteButton:active .deleteButtonText { - color: var(--white); -} - -.deleteButton:active { - border-color: var(--accent-red-dark-1); - background-color: var(--accent-red-dark-1); -} - -.nevermindButton { - cursor: pointer; - text-transform: uppercase; -} diff --git a/packages/web/src/components/delete-confirmation/DeleteConfirmationModal.tsx b/packages/web/src/components/delete-confirmation/DeleteConfirmationModal.tsx index 16c1e69ee95..c67090f7731 100644 --- a/packages/web/src/components/delete-confirmation/DeleteConfirmationModal.tsx +++ b/packages/web/src/components/delete-confirmation/DeleteConfirmationModal.tsx @@ -4,11 +4,12 @@ import { ModalContent, ModalHeader, ModalTitle, - Button + Button, + ModalFooter, + ModalContentText, + Text } from '@audius/harmony' -import styles from './DeleteConfirmationModal.module.css' - export type DeleteConfirmationModalProps = { title: string customHeader?: Nullable @@ -35,26 +36,21 @@ const DeleteConfirmationModal = (props: DeleteConfirmationModalProps) => { -
-
{header}
-
{description}
-
- -
- - +
+ {header} + {description}
+ + + + ) } diff --git a/packages/web/src/components/share-modal/components/ShareDialog.module.css b/packages/web/src/components/share-modal/components/ShareDialog.module.css index 4c3cc9dabf6..ea61e1f3001 100644 --- a/packages/web/src/components/share-modal/components/ShareDialog.module.css +++ b/packages/web/src/components/share-modal/components/ShareDialog.module.css @@ -1,30 +1,3 @@ -.headerContainer { - border-bottom-color: var(--neutral-light-8); -} - -.modalBody { - display: flex; - overflow: hidden; - max-width: 528px; - width: 100%; - flex-direction: column; -} - -.titleContainer { - display: flex; - align-items: center; -} - -.titleIcon { - height: var(--unit-8); - width: var(--unit-8); - margin-right: var(--unit-2); -} - -.title { - font-size: var(--font-xl); -} - .modalContent { display: flex; flex-direction: column; @@ -36,12 +9,6 @@ font-weight: var(--font-bold); } -.description { - font-weight: var(--font-medium); - font-size: var(--font-l); - line-height: 1.5; -} - .actionList { width: 100%; display: flex; diff --git a/packages/web/src/components/share-modal/components/ShareDialog.tsx b/packages/web/src/components/share-modal/components/ShareDialog.tsx index 824262dfb04..f531a73efb1 100644 --- a/packages/web/src/components/share-modal/components/ShareDialog.tsx +++ b/packages/web/src/components/share-modal/components/ShareDialog.tsx @@ -7,30 +7,27 @@ import { IconLink, IconMessage, IconShare, - IconTwitter as IconTwitterBird + IconTwitter as IconTwitterBird, + ButtonProps, + Button, + ModalContentText } from '@audius/harmony' -import { Button, ButtonProps, ButtonType } from '@audius/stems' -import cn from 'classnames' import { messages } from '../messages' import { ShareProps } from '../types' import styles from './ShareDialog.module.css' -const iconProps = { height: 24, width: 24 } - type ShareActionListItemProps = ButtonProps -const ShareActionListItem = ({ - textClassName, - ...props -}: ShareActionListItemProps) => { +const ShareActionListItem = (props: ShareActionListItemProps) => { return (
    • @@ -51,57 +48,40 @@ export const ShareDialog = ({ isPrivate }: ShareDialogProps) => { return ( - + } + icon={} title={messages.modalTitle(shareType)} />
    -

    + {shareType === 'playlist' && isPrivate ? messages.hiddenPlaylistShareDescription : messages.shareDescription} -

    +
      } - text={messages.directMessage} + iconLeft={IconMessage} onClick={onShareToDirectMessage} - iconClassName={styles.shareIcon} - textClassName={styles.shareActionLabel} - /> + > + {messages.directMessage} + } - text={messages.twitter} + iconLeft={IconTwitterBird} onClick={onShareToTwitter} - iconClassName={styles.shareIcon} - textClassName={styles.shareActionLabel} - /> - } - iconClassName={styles.shareIcon} - text={messages.copyLink} - textClassName={styles.shareActionLabel} - onClick={onCopyLink} - /> + > + {messages.twitter} + + + {messages.copyLink} + {onEmbed ? ( - } - iconClassName={styles.shareIcon} - text={messages.embed} - textClassName={styles.shareActionLabel} - onClick={onEmbed} - /> + + {messages.embed} + ) : null}
    diff --git a/packages/web/src/components/suggested-tracks/components/SuggestedTracks.tsx b/packages/web/src/components/suggested-tracks/components/SuggestedTracks.tsx index 2630bef3ee9..6f1641a63b6 100644 --- a/packages/web/src/components/suggested-tracks/components/SuggestedTracks.tsx +++ b/packages/web/src/components/suggested-tracks/components/SuggestedTracks.tsx @@ -3,8 +3,7 @@ import { useCallback } from 'react' import { SuggestedTrack } from '@audius/common/api' import { SquareSizes, ID, Track } from '@audius/common/models' import { cacheUsersSelectors } from '@audius/common/store' -import { IconCaretDown, IconRefresh, useTheme } from '@audius/harmony' -import { Button, ButtonSize, ButtonType } from '@audius/stems' +import { Button, IconCaretDown, IconRefresh, useTheme } from '@audius/harmony' import { animated, useSpring } from '@react-spring/web' import { useToggle } from 'react-use' @@ -60,12 +59,9 @@ const SuggestedTrackRow = (props: SuggestedTrackProps) => { ) : null}
    - ) } diff --git a/packages/web/src/components/track/EditTrackModal.jsx b/packages/web/src/components/track/EditTrackModal.jsx index f934472578f..d8187707350 100644 --- a/packages/web/src/components/track/EditTrackModal.jsx +++ b/packages/web/src/components/track/EditTrackModal.jsx @@ -2,8 +2,7 @@ import { useState, useEffect, useCallback } from 'react' import { SquareSizes } from '@audius/common/models' import { newTrackMetadata } from '@audius/common/schemas' -import { Modal } from '@audius/harmony' -import { Button, ButtonSize, ButtonType } from '@audius/stems' +import { Button, Modal, Flex } from '@audius/harmony' import { mapValues } from 'lodash' import PropTypes from 'prop-types' @@ -125,35 +124,23 @@ const EditTrackModal = ({ onCloseArtworkPopup={onCloseArtworkPopup} trackLength={metadata ? metadata.duration : null} /> -
    -
    + + {onDelete ? ( - ) : null} -
    -
    -
    -
    + + + + + + ) diff --git a/packages/web/src/components/track/EditTrackModal.module.css b/packages/web/src/components/track/EditTrackModal.module.css index 9647410e8e1..7461e4ad7d8 100644 --- a/packages/web/src/components/track/EditTrackModal.module.css +++ b/packages/web/src/components/track/EditTrackModal.module.css @@ -44,33 +44,3 @@ display: inline-flex; justify-content: flex-end; } - -.deleteButton { - border-color: var(--accent-red); -} - -.deleteButton .deleteButtonText { - color: var(--accent-red); -} - -.deleteButton:hover { - border-color: var(--accent-red); - background-color: var(--accent-red); -} - -.deleteButton:hover .deleteButtonText { - color: var(--white); -} - -.deleteButton:active .deleteButtonText { - color: var(--white); -} - -.deleteButton:active { - border-color: var(--accent-red-dark-1); - background-color: var(--accent-red-dark-1); -} - -.saveChangesButton { - margin-left: 24px; -} diff --git a/packages/web/src/pages/audio-rewards-page/RewardsTile.module.css b/packages/web/src/pages/audio-rewards-page/RewardsTile.module.css index b835729d3c8..28909c8bf37 100644 --- a/packages/web/src/pages/audio-rewards-page/RewardsTile.module.css +++ b/packages/web/src/pages/audio-rewards-page/RewardsTile.module.css @@ -177,31 +177,6 @@ flex: 1 1 0; } -.panelButton { - height: var(--unit-8) !important; - width: 100%; - padding: 8px; - padding-left: 12px; -} -.panelButton.mobile { - height: var(--unit-8); - width: 100%; -} -.panelButton svg { - height: 20px; - width: 20px; -} - -.panelButton .panelButtonText { - font-size: var(--font-s); - font-weight: var(--font-bold); - letter-spacing: 0; -} - -.buttonIcon { - margin: 0 2px 0 0px !important; -} - .loadingRewardsTile.mobile { height: 48px; width: 48px; diff --git a/packages/web/src/pages/audio-rewards-page/TrendingRewardsTile.tsx b/packages/web/src/pages/audio-rewards-page/TrendingRewardsTile.tsx index ae7fac68781..d71b8e46848 100644 --- a/packages/web/src/pages/audio-rewards-page/TrendingRewardsTile.tsx +++ b/packages/web/src/pages/audio-rewards-page/TrendingRewardsTile.tsx @@ -6,8 +6,7 @@ import { } from '@audius/common/models' import { StringKeys } from '@audius/common/services' import { audioRewardsPageActions } from '@audius/common/store' -import { IconArrowRight } from '@audius/harmony' -import { ButtonType, Button } from '@audius/stems' +import { Button, IconArrowRight } from '@audius/harmony' import cn from 'classnames' import { useDispatch } from 'react-redux' @@ -51,14 +50,14 @@ const RewardPanel = ({ {description()} ) } diff --git a/packages/web/src/pages/audio-rewards-page/components/RemoveWalletBody.module.css b/packages/web/src/pages/audio-rewards-page/components/RemoveWalletBody.module.css index adfe075042f..4a23497f6ed 100644 --- a/packages/web/src/pages/audio-rewards-page/components/RemoveWalletBody.module.css +++ b/packages/web/src/pages/audio-rewards-page/components/RemoveWalletBody.module.css @@ -19,30 +19,3 @@ color: var(--neutral); margin-bottom: 32px; } - -.btnContainer { - display: flex; - justify-content: center; -} - -.removeBtn, -.removeBtn:hover, -.removeBtn:active { - background: var(--accent-red) !important; -} - -.removeBtn .removeBtnText { - color: var(--white); -} - -.btn .btnText { - font-weight: var(--font-bold); - font-size: var(--font-l); -} - -.ignoreBtn { -} - -.btn { - margin: 0px 12px; -} diff --git a/packages/web/src/pages/audio-rewards-page/components/RemoveWalletBody.tsx b/packages/web/src/pages/audio-rewards-page/components/RemoveWalletBody.tsx index e01fd416ea0..27dadfa85e8 100644 --- a/packages/web/src/pages/audio-rewards-page/components/RemoveWalletBody.tsx +++ b/packages/web/src/pages/audio-rewards-page/components/RemoveWalletBody.tsx @@ -4,7 +4,7 @@ import { tokenDashboardPageSelectors, tokenDashboardPageActions } from '@audius/common/store' -import { Button, ButtonType } from '@audius/stems' +import { Button, Flex } from '@audius/harmony' import cn from 'classnames' import { useDispatch } from 'react-redux' @@ -39,22 +39,14 @@ const RemoveWalletBody = ({ className }: RemoveWalletBodyProps) => {

    {messages.warning}

    {wallet}

    -
    -
    + + + +
    ) } diff --git a/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.module.css b/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.module.css deleted file mode 100644 index b1e41d73110..00000000000 --- a/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.root { - max-width: 488px; -} - -.button { - flex: 1; -} - -.button > .buttonText { - font-size: var(--font-l); -} - -.content { - line-height: 150%; - font-weight: var(--font-medium); - font-size: var(--font-l); - text-align: center; - white-space: pre-line; -} - -.footer { - display: flex; - gap: var(--unit-4); - padding: 0 var(--unit-6) var(--unit-6) var(--unit-6); -} diff --git a/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.tsx b/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.tsx index 6937d5e2973..9b07dd508c4 100644 --- a/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.tsx +++ b/packages/web/src/pages/chat-page/components/DeleteChatConfirmationModal.tsx @@ -7,13 +7,12 @@ import { ModalHeader, ModalTitle, ModalFooter, - IconTrash + IconTrash, + Button, + ModalContentText } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' import { useDispatch } from 'react-redux' -import styles from './DeleteChatConfirmationModal.module.css' - const { deleteChat } = chatActions const messages = { @@ -44,25 +43,20 @@ export const DeleteChatConfirmationModal = ({ onClose() }, [dispatch, onClose, chatId]) return ( - + } /> - {messages.content} - - + ) diff --git a/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.module.css b/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.module.css index 1c2e4853636..44402782bbb 100644 --- a/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.module.css +++ b/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.module.css @@ -97,10 +97,6 @@ text-decoration: underline; } -.buttonText { - text-transform: uppercase; -} - .lineupWrapper { width: 720px; margin: auto; diff --git a/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.tsx b/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.tsx index 215dc4ca4e2..e15686ddf81 100644 --- a/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.tsx +++ b/packages/web/src/pages/deleted-page/components/desktop/DeletedPage.tsx @@ -7,8 +7,7 @@ import { User } from '@audius/common/models' import { NestedNonNullable } from '@audius/common/utils' -import { IconUser } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' +import { Button, IconUser } from '@audius/harmony' import { ArtistPopover } from 'components/artist/ArtistPopover' import CoverPhoto from 'components/cover-photo/CoverPhoto' @@ -151,12 +150,12 @@ const DeletedPage = g(
    diff --git a/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.module.css b/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.module.css index d6bea2bd8c1..aecccc69131 100644 --- a/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.module.css +++ b/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.module.css @@ -86,10 +86,6 @@ text-decoration: underline; } -.buttonText { - text-transform: uppercase; -} - .lineupWrapper { margin: auto; } diff --git a/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.tsx b/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.tsx index bc775585478..8ca7aae2cde 100644 --- a/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.tsx +++ b/packages/web/src/pages/deleted-page/components/mobile/DeletedPage.tsx @@ -7,8 +7,7 @@ import { User } from '@audius/common/models' import { NestedNonNullable } from '@audius/common/utils' -import { IconUser } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' +import { Button, IconUser } from '@audius/harmony' import { ArtistPopover } from 'components/artist/ArtistPopover' import DynamicImage from 'components/dynamic-image/DynamicImage' @@ -142,12 +141,12 @@ const DeletedPage = g( ) } diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.module.css b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.module.css index e8463603c75..1a3546d1e65 100644 --- a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.module.css +++ b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.module.css @@ -4,16 +4,6 @@ gap: var(--unit-6); } -.creatingSpinner { - height: var(--unit-6); - width: var(--unit-6); - color: var(--white); -} - -.creatingSpinner g path { - stroke: var(--white); -} - .actionsContainer { display: flex; gap: var(--unit-2); diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.tsx b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.tsx index fe4877f2766..c1eeac71cef 100644 --- a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.tsx +++ b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.tsx @@ -8,14 +8,13 @@ import { } from '@audius/common/api' import { Name, Status } from '@audius/common/models' import { accountSelectors } from '@audius/common/store' -import { Button, ButtonType } from '@audius/stems' +import { Button } from '@audius/harmony' import { Form, Formik } from 'formik' import { z } from 'zod' import { toFormikValidationSchema } from 'zod-formik-adapter' import { make, useRecord } from 'common/store/analytics/actions' import { TextAreaField, TextField } from 'components/form-fields' -import LoadingSpinner from 'components/loading-spinner/LoadingSpinner' import { useSelector } from 'utils/reducer' import styles from './CreateNewAppPage.module.css' @@ -112,24 +111,22 @@ export const CreateNewAppPage = (props: CreateNewAppPageProps) => { />
    {submitError == null ? null : (
    diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeleteAppConfirmationPage.module.css b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeleteAppConfirmationPage.module.css index 04e57381beb..fc35d485b0d 100644 --- a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeleteAppConfirmationPage.module.css +++ b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeleteAppConfirmationPage.module.css @@ -19,13 +19,3 @@ gap: var(--unit-2); padding-bottom: 0; } - -.deletingSpinner { - height: var(--unit-6); - width: var(--unit-6); - color: var(--white); -} - -.deletingSpinner g path { - stroke: var(--accent-red); -} diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeleteAppConfirmationPage.tsx b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeleteAppConfirmationPage.tsx index 8c783d85dab..87e6b9eb52b 100644 --- a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeleteAppConfirmationPage.tsx +++ b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeleteAppConfirmationPage.tsx @@ -3,12 +3,10 @@ import { useCallback, useEffect } from 'react' import { useDeleteDeveloperApp } from '@audius/common/api' import { Name, Status } from '@audius/common/models' import { accountSelectors } from '@audius/common/store' -import { ModalFooter } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' +import { Button, ModalFooter } from '@audius/harmony' import { useSelector } from 'common/hooks/useSelector' import { make, useRecord } from 'common/store/analytics/actions' -import LoadingSpinner from 'components/loading-spinner/LoadingSpinner' import styles from './DeleteAppConfirmationPage.module.css' import { CreateAppPageProps, CreateAppsPages } from './types' @@ -79,26 +77,23 @@ export const DeleteAppConfirmationPage = (

    {name}

    {messages.confirmation}

    - +
    ) diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.module.css b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.module.css index 5907c00a367..8e8afe88476 100644 --- a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.module.css +++ b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.module.css @@ -33,7 +33,3 @@ overflow: hidden; text-overflow: ellipsis; } - -.listItemActions { - flex-grow: 0; -} diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.tsx b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.tsx index 94d4b2ae9f6..447b52d7718 100644 --- a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.tsx +++ b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.tsx @@ -67,9 +67,9 @@ export const DeveloperAppListItem = (props: DeveloperAppListItemProps) => { // @ts-ignore ref={ref} {...triggerProps} - className={styles.listItemActions} aria-label={messages.appActionsLabel} color='default' + size='m' icon={IconKebabHorizontal} onClick={() => onClick()} /> diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/YourAppsPage.module.css b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/YourAppsPage.module.css index e561c3fb151..465466361d6 100644 --- a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/YourAppsPage.module.css +++ b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/YourAppsPage.module.css @@ -15,18 +15,6 @@ font-weight: var(--font-bold); } -.newAppButton { - padding: var(--unit-2) var(--unit-3); -} - -.newAppButtonText { - font-size: var(--font-s) !important; -} - -.newAppButtonIcon { - margin-right: var(--unit-2) !important; -} - .noApps { font-size: var(--font-s); font-weight: var(--font-medium); diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/YourAppsPage.tsx b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/YourAppsPage.tsx index 9145f3cc529..7d042ebc092 100644 --- a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/YourAppsPage.tsx +++ b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/YourAppsPage.tsx @@ -1,8 +1,7 @@ import { useGetDeveloperApps } from '@audius/common/api' import { Status } from '@audius/common/models' import { accountSelectors } from '@audius/common/store' -import { ModalContentText, IconPlus } from '@audius/harmony' -import { Button, ButtonSize, ButtonType } from '@audius/stems' +import { ModalContentText, IconPlus, Button } from '@audius/harmony' import { Divider } from 'components/divider' import LoadingSpinner from 'components/loading-spinner/LoadingSpinner' @@ -38,16 +37,14 @@ export const YourAppsPage = (props: YourAppsPageProps) => { let createAppButton = ( ) if (hasMaxAllowedApps) { diff --git a/packages/web/src/pages/settings-page/components/desktop/VerificationModal.module.css b/packages/web/src/pages/settings-page/components/desktop/VerificationModal.module.css index 5e6073cad56..2c07f5a645f 100644 --- a/packages/web/src/pages/settings-page/components/desktop/VerificationModal.module.css +++ b/packages/web/src/pages/settings-page/components/desktop/VerificationModal.module.css @@ -47,31 +47,6 @@ align-items: center; } -.btn { - height: 52px !important; - width: 100%; -} -/** Breakpoint for settings card **/ -@media (max-width: 780px) { - .btn { - margin: 8px auto; - } -} - -/** Verified icon should always be primary/white */ -.disabledBtn .btnIcon path:first-child, -.btn .btnIcon path:first-child { - fill: #cc0fe0 !important; -} -.disabledBtn .btnIcon path:nth-child(2), -.btn .btnIcon path:nth-child(2) { - fill: white !important; -} - -.btn .btnText { - font-size: var(--font-l); -} - .error { color: var(--accent-red); font-weight: var(--font-demi-bold); @@ -134,36 +109,6 @@ margin-left: 4px; } -.container .successBtn { - height: 64px !important; - padding: 0px 56px; -} - -.successBtn .btnText { - font-weight: var(--font-bold); - font-size: var(--font-l); - text-transform: capitalize; - color: var(--neutral); -} - -.disabledBtn { - background-color: var(--white); - border: 1px solid var(--neutral-light-6); - opacity: 0.5; -} - -.disabledBtn:hover, -.disabledBtn:active { - transform: none !important; - background-color: var(--white) !important; - border: 1px solid var(--neutral-light-6) !important; -} - -.disabledBtn .disabledBtnText { - color: var(--neutral); - font-weight: var(--font-demi-bold); -} - .socialButton { width: 100%; margin-bottom: 4px; diff --git a/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx b/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx index 359596e5fca..abfdc8eee0a 100644 --- a/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx +++ b/packages/web/src/pages/settings-page/components/desktop/VerificationModal.tsx @@ -14,8 +14,7 @@ import { TwitterProfile, TikTokProfile } from '@audius/common/store' -import { Modal, IconValidationX, IconNote } from '@audius/harmony' -import { Button, ButtonType, ButtonSize } from '@audius/stems' +import { Modal, IconValidationX, IconNote, Button } from '@audius/harmony' import cn from 'classnames' import { useDispatch } from 'react-redux' @@ -208,15 +207,9 @@ const SuccessBody = ({ />
    {`@${handle}`}
    - ) } @@ -356,22 +349,13 @@ const VerificationModal = (props: VerificationModalProps) => { return ( <> {props.isVerified ? ( - ) : ( - )}
    {`@${handle}`}
    - ) } diff --git a/packages/web/src/pages/sign-up-page/components/MetaMaskModal.jsx b/packages/web/src/pages/sign-up-page/components/MetaMaskModal.jsx index 59ac98154a6..47ae95d190b 100644 --- a/packages/web/src/pages/sign-up-page/components/MetaMaskModal.jsx +++ b/packages/web/src/pages/sign-up-page/components/MetaMaskModal.jsx @@ -1,8 +1,7 @@ import { Component } from 'react' import { BackendUtils as Utils } from '@audius/common/services' -import { Box, Text } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' +import { Button, Flex, Box, Text } from '@audius/harmony' import cn from 'classnames' import PropTypes from 'prop-types' @@ -82,7 +81,6 @@ class MetaMaskModal extends Component { render() { const { open, onClickReadConfig, onClickBack } = this.props - const { configured } = this.state return (
    {messages.body2}
    -
    -
    -
    -
    + +
    + > + {messages.stopOption} + + {this.state.accessError || this.state.configureError ? ( diff --git a/packages/web/src/pages/sign-up-page/components/MetaMaskModal.module.css b/packages/web/src/pages/sign-up-page/components/MetaMaskModal.module.css index 2d4c3d7f0a3..94fd3211db2 100644 --- a/packages/web/src/pages/sign-up-page/components/MetaMaskModal.module.css +++ b/packages/web/src/pages/sign-up-page/components/MetaMaskModal.module.css @@ -72,22 +72,6 @@ margin-top: 33px; } -.guideButton { - height: 48px; - border-radius: 4px; -} - -.guideButton .guideButtonText { - height: 10px; - width: 313px; - color: var(--static-white); - font-size: 14px; - font-weight: bold; - letter-spacing: 0.5px; - line-height: 10px; - text-transform: uppercase; -} - /* Configure MetaMask popup */ .configOverlay { margin-top: -10px; @@ -127,28 +111,3 @@ position: 'relative'; display: inline-flex; } - -.actionButton { - margin: 0px 16px; - padding-left: 22px !important; - padding-right: 22px !important; -} - -.actionButton .actionButtonText { - font-size: var(--font-s); - font-weight: var(--font-bold); - letter-spacing: 0.5px; - text-transform: uppercase; -} - -.continueButton .actionButtonText { - color: var(--neutral); -} - -.continueButton.continueDisabled .actionButtonText { - color: var(--white); -} - -.stopButton .actionButtonText { - color: var(--white); -} diff --git a/packages/web/src/pages/sign-up-page/components/SignUpWithMetaMaskButton.tsx b/packages/web/src/pages/sign-up-page/components/SignUpWithMetaMaskButton.tsx index 37ec8995564..1656aa30220 100644 --- a/packages/web/src/pages/sign-up-page/components/SignUpWithMetaMaskButton.tsx +++ b/packages/web/src/pages/sign-up-page/components/SignUpWithMetaMaskButton.tsx @@ -1,58 +1,23 @@ -import { useContext, useState } from 'react' +import { useState } from 'react' -import { signUpFetch } from '@audius/common/api' -import { AudiusQueryContext } from '@audius/common/audius-query' import { Button, IconMetamask } from '@audius/harmony' -import { useFormikContext } from 'formik' -import { useDispatch } from 'react-redux' -import { setValueField } from 'common/store/pages/signon/actions' import { useNavigateToPage } from 'hooks/useNavigateToPage' import ConnectedMetaMaskModal from 'pages/sign-up-page/components/ConnectedMetaMaskModal' -import { SIGN_IN_PAGE, SIGN_UP_HANDLE_PAGE } from 'utils/route' - -import { SignUpEmailValues } from '../pages/CreateEmailPage' +import { SIGN_UP_HANDLE_PAGE } from 'utils/route' const messages = { signUpMetamask: 'Sign Up With MetaMask', unknownError: 'Unknown error occurred.' } export const SignUpWithMetaMaskButton = () => { - const queryContext = useContext(AudiusQueryContext) - const dispatch = useDispatch() const [isMetaMaskModalOpen, setIsMetaMaskModalOpen] = useState(false) - const { setErrors, validateForm, values } = - useFormikContext() const navigate = useNavigateToPage() const handleSuccess = () => { navigate(SIGN_UP_HANDLE_PAGE) } - const handleClick = async () => { - const errors = await validateForm(values) - if (errors.email) { - return false - } - - const { email } = values - if (queryContext !== null) { - try { - // Check identity API for existing emails - const emailExists = await signUpFetch.isEmailInUse( - { email }, - queryContext - ) - // Set the email in the store - dispatch(setValueField('email', values.email)) - if (emailExists) { - // Redirect to sign in if the email exists already - navigate(SIGN_IN_PAGE) - } else { - setIsMetaMaskModalOpen(true) - } - } catch (e) { - setErrors({ email: messages.unknownError }) - } - } + const handleClick = () => { + setIsMetaMaskModalOpen(true) } return ( From d879e14b6b90f9891764815ccc099d6632d0f35a Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Fri, 15 Mar 2024 15:39:14 -0700 Subject: [PATCH 02/28] Address comments --- .../collectibles/components/CollectiblesPage.module.css | 4 ---- .../src/components/collection/desktop/OwnerActionButtons.tsx | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/web/src/components/collectibles/components/CollectiblesPage.module.css b/packages/web/src/components/collectibles/components/CollectiblesPage.module.css index 745d9875f2b..614e5e67981 100644 --- a/packages/web/src/components/collectibles/components/CollectiblesPage.module.css +++ b/packages/web/src/components/collectibles/components/CollectiblesPage.module.css @@ -637,10 +637,6 @@ margin-bottom: 16px; } -/* .mobile .header button { - width: 100%; -} */ - .mobile .content { padding: 0 12px; } diff --git a/packages/web/src/components/collection/desktop/OwnerActionButtons.tsx b/packages/web/src/components/collection/desktop/OwnerActionButtons.tsx index c908690132d..fa0c93965f3 100644 --- a/packages/web/src/components/collection/desktop/OwnerActionButtons.tsx +++ b/packages/web/src/components/collection/desktop/OwnerActionButtons.tsx @@ -46,7 +46,7 @@ export const OwnerActionButtons = (props: OwnerActionButtonProps) => { /> ) : null} - {is_private ? ( + {!is_private ? ( ) : null} From ba9e012ab40ff9d562a3b8e0c66f26a06c372798 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Thu, 14 Mar 2024 15:33:45 -0700 Subject: [PATCH 03/28] Refactor rest of stems buttons --- packages/common/src/utils/linking.ts | 1 + .../components/AppRedirectPopover.tsx | 16 +- .../components/collection/desktop/Artwork.tsx | 22 +- .../StemFilesModal.module.css | 5 - .../stem-files-modal/StemFilesModal.tsx | 17 +- .../track/AiTrackSection.module.css | 30 --- .../src/components/track/AiTrackSection.tsx | 17 +- .../components/tracks-table/EmptyTable.jsx | 43 --- .../components/tracks-table/EmptyTable.tsx | 34 +++ .../AudioRewardsPage.module.css | 13 - .../audio-rewards-page/AudioRewardsPage.tsx | 22 +- .../pages/audio-rewards-page/Tiers.module.css | 25 -- .../src/pages/audio-rewards-page/Tiers.tsx | 51 ++-- .../pages/audio-rewards-page/Tiles.module.css | 254 ------------------ .../src/pages/audio-rewards-page/Tiles.tsx | 165 ------------ .../components/WalletActionsTile.module.css | 45 ---- .../components/WalletActionsTile.tsx | 69 ----- .../components/WalletManagementTile.tsx | 66 ++--- .../components/mobile/HistoryPage.tsx | 12 +- .../mobile/ProfileHeader.module.css | 15 -- .../components/mobile/ProfileHeader.tsx | 19 +- .../components/desktop/PlaylistsTabPage.tsx | 2 +- .../upload-page/components/ShareBanner.tsx | 34 ++- .../CollectibleGatedDescription.module.css | 16 -- .../CollectibleGatedDescription.tsx | 21 +- 25 files changed, 163 insertions(+), 851 deletions(-) delete mode 100644 packages/web/src/components/tracks-table/EmptyTable.jsx create mode 100644 packages/web/src/components/tracks-table/EmptyTable.tsx delete mode 100644 packages/web/src/pages/audio-rewards-page/Tiles.module.css delete mode 100644 packages/web/src/pages/audio-rewards-page/Tiles.tsx delete mode 100644 packages/web/src/pages/audio-rewards-page/components/WalletActionsTile.module.css delete mode 100644 packages/web/src/pages/audio-rewards-page/components/WalletActionsTile.tsx delete mode 100644 packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.module.css diff --git a/packages/common/src/utils/linking.ts b/packages/common/src/utils/linking.ts index 101a1f8163d..868b9955559 100644 --- a/packages/common/src/utils/linking.ts +++ b/packages/common/src/utils/linking.ts @@ -4,6 +4,7 @@ export const externalLinkAllowList = new Set([ 'tiktok.com', 'twitter.com', 'x.com', + 'blog.audius.co', 'audius.co', 'discord.gg', 'solscan.io' diff --git a/packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.tsx b/packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.tsx index 1483664b5d5..7ca7c60fbe7 100644 --- a/packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.tsx +++ b/packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.tsx @@ -1,6 +1,5 @@ import { Fragment, useState, useEffect } from 'react' -import { Button, ButtonType } from '@audius/stems' import { matchPath } from 'react-router-dom' // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web import { animated, useTransition } from 'react-spring' @@ -12,6 +11,7 @@ import { useIsMobile } from 'hooks/useIsMobile' import { APP_REDIRECT, getPathname, SIGN_UP_PAGE } from 'utils/route' import styles from './AppRedirectPopover.module.css' +import { Button } from '@audius/harmony' const messages = { openInApp: 'Open in Audius App', @@ -128,6 +128,8 @@ export const AppRedirectPopover = (props: AppRedirectPopoverProps) => { ) const drawerTransitions = useTransition(shouldShow, null, springProps.drawer) + console.log({ shouldShow }) + const onClick = () => { onBeforeClickApp() const pathname = getPathname(history.location) @@ -194,11 +196,15 @@ export const AppRedirectPopover = (props: AppRedirectPopoverProps) => { style={props} > )} {newItem && ( diff --git a/packages/web/src/components/collection/desktop/Artwork.tsx b/packages/web/src/components/collection/desktop/Artwork.tsx index 8af8db555f1..88f392f5f97 100644 --- a/packages/web/src/components/collection/desktop/Artwork.tsx +++ b/packages/web/src/components/collection/desktop/Artwork.tsx @@ -6,8 +6,7 @@ import { cacheCollectionsSelectors, useEditPlaylistModal } from '@audius/common/store' -import { IconPencil } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' +import { Button, IconPencil } from '@audius/harmony' import { useSelector } from 'common/hooks/useSelector' import DynamicImage from 'components/dynamic-image/DynamicImage' @@ -89,17 +88,16 @@ export const Artwork = (props: ArtworkProps) => { {isOwner ? ( ) : null} diff --git a/packages/web/src/components/stem-files-modal/StemFilesModal.module.css b/packages/web/src/components/stem-files-modal/StemFilesModal.module.css index b01ded0e6a6..5f5a57d5fae 100644 --- a/packages/web/src/components/stem-files-modal/StemFilesModal.module.css +++ b/packages/web/src/components/stem-files-modal/StemFilesModal.module.css @@ -147,8 +147,3 @@ background: var(--background-surface-1); border-top: none; } - -.doneButton { - align-self: flex-end; - margin: 16px; -} diff --git a/packages/web/src/components/stem-files-modal/StemFilesModal.tsx b/packages/web/src/components/stem-files-modal/StemFilesModal.tsx index 2cfed3df2f0..0064ed998cc 100644 --- a/packages/web/src/components/stem-files-modal/StemFilesModal.tsx +++ b/packages/web/src/components/stem-files-modal/StemFilesModal.tsx @@ -12,9 +12,10 @@ import { Text, Switch, IconRemove, - IconButton + IconButton, + Button, + Box } from '@audius/harmony' -import { Button, ButtonSize, ButtonType } from '@audius/stems' import cn from 'classnames' import { Divider } from 'components/divider' @@ -295,13 +296,11 @@ export const StemFilesModal = ({ onSelectCategory={onSelectCategory} onDeleteStem={onDeleteStem} /> - +     ) } diff --git a/packages/web/src/components/track/AiTrackSection.module.css b/packages/web/src/components/track/AiTrackSection.module.css index a8711c10c36..e856b2f98fa 100644 --- a/packages/web/src/components/track/AiTrackSection.module.css +++ b/packages/web/src/components/track/AiTrackSection.module.css @@ -68,33 +68,3 @@ .badgeIcon { margin-left: 4px; } - -.button { - padding: 0px; -} - -.buttonText { - font-size: var(--font-s); -} - -.iconArrow { - width: 10px !important; - height: 10px !important; - margin-left: 4px; -} - -.iconArrow path { - fill: var(--neutral-light-4) !important; -} - -.button:hover .iconArrow path { - fill: var(--secondary) !important; -} - -.buttonText { - color: var(--neutral-light-4); -} - -.button:hover .buttonText { - color: var(--secondary); -} diff --git a/packages/web/src/components/track/AiTrackSection.tsx b/packages/web/src/components/track/AiTrackSection.tsx index 06da6b960a5..3c1e153bdb1 100644 --- a/packages/web/src/components/track/AiTrackSection.tsx +++ b/packages/web/src/components/track/AiTrackSection.tsx @@ -2,8 +2,11 @@ import { useCallback, useEffect } from 'react' import { ID, User } from '@audius/common/models' import { cacheUsersActions, cacheUsersSelectors } from '@audius/common/store' -import { IconArrowRight as IconArrow, IconRobot } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' +import { + IconArrowRight as IconArrow, + IconRobot, + PlainButton +} from '@audius/harmony' import cn from 'classnames' import { push as pushRoute } from 'connected-react-router' import { useDispatch } from 'react-redux' @@ -85,13 +88,9 @@ export const AiTrackSection = ({ {messages.description} {user ? renderArtist(user) : null} - + + ) : null} + + ) +} + +export default EmptyTable diff --git a/packages/web/src/pages/audio-rewards-page/AudioRewardsPage.module.css b/packages/web/src/pages/audio-rewards-page/AudioRewardsPage.module.css index 2b97342b644..a14f3bcf82d 100644 --- a/packages/web/src/pages/audio-rewards-page/AudioRewardsPage.module.css +++ b/packages/web/src/pages/audio-rewards-page/AudioRewardsPage.module.css @@ -9,19 +9,6 @@ margin: -18px 0px 16px; } -.cryptoContentContainer { - display: flex; - margin: -12px -12px 20px -12px; - width: calc(100% + 24px); - flex-wrap: wrap; - justify-content: stretch; -} - -.cryptoContentContainer.mobile { - flex-wrap: wrap; - margin-top: 22px; -} - .pageContainer .explainerTile { height: auto; } diff --git a/packages/web/src/pages/audio-rewards-page/AudioRewardsPage.tsx b/packages/web/src/pages/audio-rewards-page/AudioRewardsPage.tsx index 0f18f22d244..387122556de 100644 --- a/packages/web/src/pages/audio-rewards-page/AudioRewardsPage.tsx +++ b/packages/web/src/pages/audio-rewards-page/AudioRewardsPage.tsx @@ -21,7 +21,6 @@ import { AUDIO_PAGE, BASE_URL, TRENDING_PAGE } from 'utils/route' import styles from './AudioRewardsPage.module.css' import ChallengeRewardsTile from './ChallengeRewardsTile' import Tiers from './Tiers' -import { BalanceTile, WalletTile } from './Tiles' import TrendingRewardsTile from './TrendingRewardsTile' import WalletModal from './WalletModal' import ExplainerTile from './components/ExplainerTile' @@ -41,16 +40,6 @@ const RewardsContent = () => { FeatureFlags.CHALLENGE_REWARDS_UI ) - const { isEnabled: isCoinbaseEnabled } = useFlag( - FeatureFlags.BUY_AUDIO_COINBASE_ENABLED - ) - - const { isEnabled: isStripeEnabled } = useFlag( - FeatureFlags.BUY_AUDIO_STRIPE_ENABLED - ) - - const isBuyAudioEnabled = isCoinbaseEnabled || isStripeEnabled - const audioFeaturesDegradedText = useRemoteVar( StringKeys.AUDIO_FEATURES_DEGRADED_TEXT ) @@ -67,16 +56,7 @@ const RewardsContent = () => { ) : null} - {isBuyAudioEnabled ? ( - - ) : ( - <> -
    - - -
    - - )} + {isChallengeRewardsEnabled && ( )} diff --git a/packages/web/src/pages/audio-rewards-page/Tiers.module.css b/packages/web/src/pages/audio-rewards-page/Tiers.module.css index 424ed6d9f80..f44343ff481 100644 --- a/packages/web/src/pages/audio-rewards-page/Tiers.module.css +++ b/packages/web/src/pages/audio-rewards-page/Tiers.module.css @@ -170,31 +170,6 @@ margin-right: 8px; } -.discordButton { - background: transparent !important; - border: 1px solid var(--neutral-light-6); -} - -.updateRole { - width: 100%; - margin-bottom: 12px; -} - -.discordButton .iconDiscord { - height: 24px; - width: 24px; -} - -.discordButton .iconDiscord path { - fill: var(--neutral); -} - -.discordButton .discordButtonText { - color: var(--neutral) !important; - font-size: 14px; - font-weight: 700; -} - .currentTier { position: absolute; top: -35px; diff --git a/packages/web/src/pages/audio-rewards-page/Tiers.tsx b/packages/web/src/pages/audio-rewards-page/Tiers.tsx index 15f6d5b4525..1afa5dc5625 100644 --- a/packages/web/src/pages/audio-rewards-page/Tiers.tsx +++ b/packages/web/src/pages/audio-rewards-page/Tiers.tsx @@ -16,9 +16,10 @@ import { IconTokenGold, IconTokenPlatinum, IconTokenSilver, - IconDiscord + IconDiscord, + Button, + Box } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' import cn from 'classnames' import { useDispatch } from 'react-redux' @@ -40,11 +41,11 @@ const messages = { badgeType: (badge: string) => `${badge} Badge`, badgeRole: (badge: string) => `${badge} Discord Role`, moreSoon: 'More Coming Soon!', - updateRole: 'UPDATE ROLE', + updateRole: 'Update Role', tierNumber: (tier: number) => `TIER ${tier}`, currentTier: 'CURRENT TIER', - learnMore: 'LEARN MORE', - launchDiscord: 'LAUNCH THE VIP DISCORD', + learnMore: 'Learn more', + launchDiscord: 'Launch the VIP Discord', tierLevel: (amount: string) => `${Number(amount).toLocaleString()}+ $AUDIO`, matrixMode: 'Matrix Mode', collectibles: 'NFT Collectibles' @@ -190,14 +191,17 @@ export const Tier = ({ )} {isActive && ( - + )} @@ -254,21 +258,16 @@ const Tiers = () => { ))}
    +
    ) diff --git a/packages/web/src/pages/audio-rewards-page/Tiles.module.css b/packages/web/src/pages/audio-rewards-page/Tiles.module.css deleted file mode 100644 index d2fcf301e0e..00000000000 --- a/packages/web/src/pages/audio-rewards-page/Tiles.module.css +++ /dev/null @@ -1,254 +0,0 @@ -.tileContainer { - flex: 1; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - border-radius: 12px; - box-shadow: 0px 16px 20px var(--table-shadow); - min-height: 210px; -} - -/* Wallet Tile */ -.walletTile { - background-color: var(--white); - display: flex; - justify-content: center; - align-items: center; - flex: 1 356px; - padding: 32px; -} - -.balanceLabel { - font-weight: var(--font-bold); - font-size: var(--font-m); - text-transform: uppercase; - color: var(--neutral-light-4); - margin-bottom: 20px; -} - -.buttons { - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: center; -} - -.buttons > *:nth-child(2) { - margin: 16px 0px; -} - -.balanceBtn { - background: transparent !important; - border: 1px solid var(--neutral-light-6); - width: 244px; -} - -.balanceBtn .textClassName { - color: var(--neutral); - font-size: var(--font-s); -} - -.balanceBtn .iconStyle path { - fill: var(--neutral); -} - -.balanceBtn.balanceDisabled { - opacity: 0.5; - background-color: hsla(0, 0%, 100%, 0.1); -} - -/* Balance Tile */ -.balanceTile { - background: var(--page-header-gradient); - display: inline-flex; - flex-direction: column; - transition: flex-grow 0.7s ease-in-out; - align-items: center; - justify-content: center; -} - -.spinner { - width: var(--unit-20); - height: var(--unit-20); - margin: 0 auto; - padding-top: var(--unit-2); - padding-bottom: var(--unit-2); -} - -.spinner g path { - stroke: rgba(255, 255, 255, 0.75); -} - -.balanceAmount { - font-weight: 800; - font-size: 96px; - text-align: center; - color: var(--static-white); - text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); - margin-bottom: 6px; - opacity: 1; - transition: opacity 0.07s ease-in-out; -} - -.mobile .balanceAmount { - font-size: 64px; -} - -.balance { - opacity: 1; - transition: opacity 0.07s ease-in-out; - margin-top: 10px; -} - -.balanceAmount.hidden, -.balance.hidden { - opacity: 0; -} - -.balance, -.multipleWalletsMessage { - font-weight: var(--font-bold); - font-size: var(--font-2xl); - text-align: center; - letter-spacing: 1px; - text-transform: uppercase; - color: rgba(255, 255, 255, 0.5); - text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); -} - -.iconInfo { - height: 16px; - width: 16px; - margin-left: 4px; - margin-bottom: 2px; -} - -.iconInfo:hover { - cursor: pointer; -} - -.iconInfo path { - fill: rgba(255, 255, 255, 0.4); -} - -.multipleWalletsContainer { - margin-top: 12px; -} - -.totalBalance { - font-weight: var(--font-bold); - font-size: var(--font-2xl); - text-transform: uppercase; - color: var(--static-white); -} - -.noClaim { - font-weight: var(--font-bold); - font-size: var(--font-s); - line-height: 17px; - text-align: center; - color: var(--static-white); - max-width: 250px; - display: flex; - flex-direction: column; -} - -.levels { - display: inline-flex; - flex-direction: column; - padding-left: 24px; - position: relative; -} - -.levelContainer { - display: inline-flex; - flex-direction: column; -} - -.levelImg { - position: absolute; - top: 0; - left: 0; - width: 18px; -} - -.level { - margin: 0px 0px 4px 0px; -} - -.levelText { - font-weight: 800; - font-size: var(--font-m); - line-height: 20px; - background: var(--page-header-gradient); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.levelMore { - font-weight: var(--font-bold); - font-size: var(--font-m); - line-height: 20px; - text-transform: uppercase; - color: var(--neutral-light-6); -} - -.vip { - font-weight: 500; - font-size: var(--font-m); - line-height: 24px; - color: var(--neutral); - margin-bottom: 16px; -} - -.explainerTile .vipButton { - background: transparent !important; - border: 1px solid var(--neutral-light-6); - height: 48px; - margin-bottom: 32px; -} - -.explainerTile .vipDiscordDisabled { - background-color: hsla(0, 0%, 100%, 0.1); -} - -.explainerTile .vipTextClassName { - font-weight: var(--font-bold); - font-size: var(--font-s); - letter-spacing: 0.5px; - text-transform: uppercase; - color: var(--neutral); -} - -.explainerTile .iconDiscord { - height: 24px; - width: 24px; -} - -.explainerTile .iconDiscord path { - fill: var(--neutral); -} - -.tba { - font-weight: 500; - font-size: var(--font-m); - line-height: 24px; - - color: var(--neutral); -} - -.disabled { - opacity: 0.5; -} - -.tokenHero { - margin: 66px 64px 66px 102px; -} - -.tokenHero svg, -.tokenHero img { - width: 200px; - height: 200px; -} diff --git a/packages/web/src/pages/audio-rewards-page/Tiles.tsx b/packages/web/src/pages/audio-rewards-page/Tiles.tsx deleted file mode 100644 index 7e6e0b3c763..00000000000 --- a/packages/web/src/pages/audio-rewards-page/Tiles.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import { useCallback, ReactNode } from 'react' - -import { - tokenDashboardPageSelectors, - tokenDashboardPageActions, - walletSelectors -} from '@audius/common/store' -import { isNullOrUndefined, formatWei } from '@audius/common/utils' -import { IconReceive, IconSend, IconInfo } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' -import cn from 'classnames' -import { useDispatch } from 'react-redux' - -import { useModalState } from 'common/hooks/useModalState' -import LoadingSpinner from 'components/loading-spinner/LoadingSpinner' -import MobileConnectWalletsDrawer from 'components/mobile-connect-wallets-drawer/MobileConnectWalletsDrawer' -import { useIsMobile } from 'hooks/useIsMobile' -import { useWithMobileStyle } from 'hooks/useWithMobileStyle' -import { useSelector } from 'utils/reducer' - -import styles from './Tiles.module.css' -import TokenHoverTooltip from './components/TokenHoverTooltip' -const { getAccountBalance, getAccountTotalBalance } = walletSelectors -const { getHasAssociatedWallets } = tokenDashboardPageSelectors -const { pressConnectWallets, pressReceive, pressSend } = - tokenDashboardPageActions - -const messages = { - noClaim1: 'You earn $AUDIO by using Audius.', - noClaim2: 'The more you use Audius, the more $AUDIO you earn.', - balance: '$AUDIO BALANCE', - receiveLabel: 'RECEIVE $AUDIO', - sendLabel: 'SEND $AUDIO', - audio: '$AUDIO', - manageWallets: 'Manage Wallets', - totalAudio: 'Total $AUDIO' -} - -export const LEARN_MORE_URL = 'http://blog.audius.co/posts/community-meet-audio' - -type TileProps = { - className?: string - children: ReactNode -} - -export const Tile = ({ className, children }: TileProps) => { - return ( -
    {children}
    - ) -} - -export const BalanceTile = ({ className }: { className?: string }) => { - const totalBalance = useSelector(getAccountTotalBalance) - const hasMultipleWallets = useSelector(getHasAssociatedWallets) - - const [, setOpen] = useModalState('AudioBreakdown') - const onClickOpen = useCallback(() => { - setOpen(true) - }, [setOpen]) - - const wm = useWithMobileStyle(styles.mobile) - - return ( - - <> - {isNullOrUndefined(totalBalance) ? ( - - ) : ( - -
    - {formatWei(totalBalance, true, 0)} -
    -     - )} -
    - {hasMultipleWallets ? ( -
    - {messages.totalAudio} - -
    - ) : ( - messages.audio - )} -
    - -     - ) -} - -export const WalletTile = ({ className }: { className?: string }) => { - const balance = useSelector(getAccountBalance) - const hasBalance = !isNullOrUndefined(balance) && !balance.isZero() - const dispatch = useDispatch() - const [, openTransferDrawer] = useModalState('TransferAudioMobileWarning') - - const isMobile = useIsMobile() - const onClickReceive = useCallback(() => { - if (isMobile) { - openTransferDrawer(true) - } else { - dispatch(pressReceive()) - } - }, [dispatch, isMobile, openTransferDrawer]) - - const onClickSend = useCallback(() => { - if (isMobile) { - openTransferDrawer(true) - } else { - dispatch(pressSend()) - } - }, [isMobile, dispatch, openTransferDrawer]) - const [, setOpen] = useModalState('MobileConnectWalletsDrawer') - - const onClickConnectWallets = useCallback(() => { - if (isMobile) { - setOpen(true) - } else { - dispatch(pressConnectWallets()) - } - }, [isMobile, setOpen, dispatch]) - - const onCloseConnectWalletsDrawer = useCallback(() => { - setOpen(false) - }, [setOpen]) - - return ( - - <> -
    -
    - -     - ) -} diff --git a/packages/web/src/pages/audio-rewards-page/components/WalletActionsTile.module.css b/packages/web/src/pages/audio-rewards-page/components/WalletActionsTile.module.css deleted file mode 100644 index a50d85dc671..00000000000 --- a/packages/web/src/pages/audio-rewards-page/components/WalletActionsTile.module.css +++ /dev/null @@ -1,45 +0,0 @@ -.container { - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - border-radius: 6px; - box-shadow: 0px 16px 20px var(--table-shadow); - height: 100%; - background-color: var(--white); - padding: 33px 56px; -} - -.container .btn { - background: transparent !important; - border: 1px solid var(--neutral-light-6); - width: 100%; - padding: 20px; -} - -.btn .textClassName { - color: var(--neutral); - font-size: var(--font-s); -} - -.btn .iconStyle path { - fill: var(--neutral); -} - -.btn.balanceDisabled { - opacity: 0.5; - background-color: hsla(0, 0%, 100%, 0.1); -} - -.disabled { - opacity: 0.5; -} - -.receiveBtn { - margin: 16px 0px; -} - -.connectWalletsBtn { - width: 230px; -} diff --git a/packages/web/src/pages/audio-rewards-page/components/WalletActionsTile.tsx b/packages/web/src/pages/audio-rewards-page/components/WalletActionsTile.tsx deleted file mode 100644 index 201932c7274..00000000000 --- a/packages/web/src/pages/audio-rewards-page/components/WalletActionsTile.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { BNWei } from '@audius/common/models' -import { - tokenDashboardPageActions, - walletSelectors -} from '@audius/common/store' -import { isNullOrUndefined } from '@audius/common/utils' -import { IconReceive, IconSend } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' -import BN from 'bn.js' -import cn from 'classnames' -import { useDispatch } from 'react-redux' - -import { useSelector } from 'utils/reducer' - -import styles from './WalletActionsTile.module.css' -const { getAccountBalance } = walletSelectors -const { pressReceive, pressSend, pressConnectWallets } = - tokenDashboardPageActions - -const messages = { - receiveLabel: 'RECEIVE $AUDIO', - sendLabel: 'SEND $AUDIO', - manageWallets: 'Manage Wallets' -} - -export const WalletActions = ({ className }: { className?: string }) => { - const balance = useSelector(getAccountBalance) ?? (new BN(0) as BNWei) - const hasBalance = !isNullOrUndefined(balance) && !balance.isZero() - const dispatch = useDispatch() - - const onClickReceive = () => dispatch(pressReceive()) - const onClickSend = () => dispatch(pressSend()) - const onClickConnectWallets = () => dispatch(pressConnectWallets()) - - return ( -
    -
    - ) -} - -export default WalletActions diff --git a/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx b/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx index e804ce09a3b..75426ec1b3e 100644 --- a/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx +++ b/packages/web/src/pages/audio-rewards-page/components/WalletManagementTile.tsx @@ -16,11 +16,11 @@ import { IconSettings, IconTokenGold, IconTransaction, - IconInfo + IconInfo, + Button, + Flex } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' import BN from 'bn.js' -import cn from 'classnames' import { push as pushRoute } from 'connected-react-router' import { useDispatch, useSelector } from 'react-redux' import { useAsync } from 'react-use' @@ -127,54 +127,44 @@ const AdvancedWalletActions = () => { return (
    {messages.advancedOptions}
    -
    + {!isMobile && isTransactionsEnabled && ( )} {isMobile && ( )} -
    +
    ) } diff --git a/packages/web/src/pages/history-page/components/mobile/HistoryPage.tsx b/packages/web/src/pages/history-page/components/mobile/HistoryPage.tsx index 358fafc5e36..65c81b982b7 100644 --- a/packages/web/src/pages/history-page/components/mobile/HistoryPage.tsx +++ b/packages/web/src/pages/history-page/components/mobile/HistoryPage.tsx @@ -2,7 +2,7 @@ import { memo, useEffect, useCallback, useContext } from 'react' import { useGatedContentAccessMap } from '@audius/common/hooks' import { ID, UID, LineupTrack } from '@audius/common/models' -import { Button, ButtonType } from '@audius/stems' +import { Button } from '@audius/harmony' import LoadingSpinner from 'components/loading-spinner/LoadingSpinner' import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer' @@ -94,13 +94,9 @@ const HistoryPage = ({
    {messages.empty.secondary}
    - ) : (
    diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css index a722765b0c0..ad59395bfcb 100644 --- a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css +++ b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.module.css @@ -80,17 +80,6 @@ margin-right: 6px; } -.titleContainer .right button { - width: 110px; -} - -.titleContainer .right svg { - width: 20px !important; - height: 20px !important; - position: relative; - top: -1px; -} - .artistName { color: var(--neutral); font-family: var(--font-family); @@ -256,10 +245,6 @@ width: 80px; } -.editButton .editButtonText { - font-size: var(--font-xs) !important; -} - .sites { display: flex; flex-direction: column; diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx index 8b9ea2d7bc4..da4e334ae51 100644 --- a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx +++ b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx @@ -20,9 +20,10 @@ import { IconLink, IconTikTok, IconTwitter as IconTwitterBird, - Flex + Flex, + Button, + IconPencil } from '@audius/harmony' -import { Button, ButtonType, ButtonSize } from '@audius/stems' import cn from 'classnames' import { make, useRecord } from 'common/store/analytics/actions' @@ -52,7 +53,7 @@ const messages = { playlists: 'Playlists', showMore: 'Show More', showLess: 'Show Less', - editProfile: 'EDIT PROFILE' + editProfile: 'Edit Profile' } const LoadingProfileHeader = () => { @@ -347,13 +348,13 @@ const ProfileHeader = ({ )} {mode === 'owner' ? ( ) : ( { primaryText={emptyPlaylistsHeader} secondaryText={messages.emptyPlaylistsBody} buttonLabel={messages.createPlaylist} - buttonIcon={} + buttonIcon={IconPlus} onClick={handleCreatePlaylist} /> ) diff --git a/packages/web/src/pages/upload-page/components/ShareBanner.tsx b/packages/web/src/pages/upload-page/components/ShareBanner.tsx index 8534f1c0d13..756300f4f80 100644 --- a/packages/web/src/pages/upload-page/components/ShareBanner.tsx +++ b/packages/web/src/pages/upload-page/components/ShareBanner.tsx @@ -14,8 +14,12 @@ import { UploadType, ShareContent } from '@audius/common/store' -import { IconLink, IconTwitter as IconTwitterBird, Text } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' +import { + Button, + IconLink, + IconTwitter as IconTwitterBird, + Text +} from '@audius/harmony' import { useDispatch } from 'react-redux' import backgroundPlaceholder from 'assets/img/1-Concert-3-1.jpg' @@ -191,27 +195,21 @@ export const ShareBanner = (props: ShareBannerProps) => {
    ) : null} diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.module.css b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.module.css deleted file mode 100644 index 708e14ca429..00000000000 --- a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.module.css +++ /dev/null @@ -1,16 +0,0 @@ -.learnMoreButton { - align-self: flex-start; - padding: 0; - color: var(--neutral-light-2); -} - -.learnMoreArrow { - width: var(--unit-4); - height: var(--unit-4); -} - -.innerDescription { - display: flex; - flex-direction: column; - gap: var(--unit-4); -} diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx index 42a3b2aaf50..8f25981f12c 100644 --- a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx +++ b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx @@ -1,5 +1,5 @@ import { collectiblesSelectors } from '@audius/common/store' -import { IconExternalLink, Text } from '@audius/harmony' +import { Flex, IconExternalLink, Text } from '@audius/harmony' import { Button, ButtonType } from '@audius/stems' import { useSelector } from 'react-redux' @@ -7,8 +7,6 @@ import { HelpCallout } from 'components/help-callout/HelpCallout' import { ExternalLink } from 'components/link' import { AUDIUS_GATED_CONTENT_BLOG_LINK } from 'utils/route' -import styles from './CollectibleGatedDescription.module.css' - const { getHasUnsupportedCollection } = collectiblesSelectors const messages = { collectibleGatedSubtitle: @@ -42,21 +40,14 @@ export const CollectibleGatedDescription = ( ) return ( -
    + {messages.collectibleGatedSubtitle} {!hasCollectibles && isUpload ? ( ) : null} -
    + + {messages.learnMore} + + ) } From 9aa3fcacf07350a59007b05382f19a541083ffd8 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Thu, 14 Mar 2024 17:37:34 -0700 Subject: [PATCH 04/28] Refactor follow button --- .../button/FollowButton/FollowButton.tsx | 289 +++++++++--------- .../components/button/FollowButton/types.ts | 7 + .../ArtistRecommendations.module.css | 15 - .../ArtistRecommendations.tsx | 25 +- .../components/artist/ArtistCard.module.css | 4 - .../web/src/components/artist/ArtistCard.tsx | 7 +- .../follow-button/FollowButton.module.css | 29 -- .../components/follow-button/FollowButton.tsx | 139 --------- .../ProfilePictureListTile.module.css | 19 +- .../ProfilePictureListTile.tsx | 19 +- .../src/components/stat-banner/StatBanner.tsx | 9 +- .../tipping/support/SupportingList.tsx | 2 +- .../components/track/GatedTrackSection.tsx | 24 +- .../user-list/components/UserList.tsx | 7 +- .../components/mobile/ProfileHeader.tsx | 8 +- .../CollectibleGatedDescription.tsx | 1 - 16 files changed, 204 insertions(+), 400 deletions(-) delete mode 100644 packages/web/src/components/follow-button/FollowButton.module.css delete mode 100644 packages/web/src/components/follow-button/FollowButton.tsx diff --git a/packages/harmony/src/components/button/FollowButton/FollowButton.tsx b/packages/harmony/src/components/button/FollowButton/FollowButton.tsx index 8b1a86adbaf..07afeac0e38 100644 --- a/packages/harmony/src/components/button/FollowButton/FollowButton.tsx +++ b/packages/harmony/src/components/button/FollowButton/FollowButton.tsx @@ -1,4 +1,4 @@ -import { useState, useCallback, useEffect } from 'react' +import { useState, useCallback, useEffect, forwardRef, Ref } from 'react' import { useTheme, type CSSObject } from '@emotion/react' import styled from '@emotion/styled' @@ -11,7 +11,7 @@ import { IconUserFollowing, IconUserFollow, IconUserUnfollow } from 'icons' import type { FollowButtonProps } from './types' -const messages = { +const defaultMessages = { follow: 'Follow', following: 'Following', unfollow: 'Unfollow' @@ -33,149 +33,156 @@ const InputRoot = styled.input({ /** * Special button for following or unfollowing a user. */ -export const FollowButton = (props: FollowButtonProps) => { - const { - variant = 'default', - isFollowing = false, - onUnfollow, - onFollow, - size = 'default', - ...other - } = props - const { type } = other - const [value, setValueState] = useControlled({ - componentName: 'FollowButton', - controlledProp: isFollowing, - defaultValue: undefined, - stateName: 'following' - }) - - // Track hover manually to swap text and icon - const [isHovering, setIsHovering] = useState(false) - const [isPressing, setIsPressing] = useState(false) - - const handleMouseEnter = useCallback(() => { - setIsHovering(true) - }, []) - - const handleMouseDown = useCallback(() => { - setIsPressing(true) - }, []) - - const handleMouseLeave = useCallback(() => { - setIsHovering(false) - }, []) - - const handleMouseUp = useCallback(() => { - setIsPressing(false) - }, []) - - const handlePressIn = useCallback(() => { - setIsHovering(true) - setIsPressing(true) - }, []) - - const handlePressOut = useCallback(() => { - setIsHovering(false) - setIsPressing(false) - }, []) - - useEffect(() => {}, [value]) - - const handleClick = useCallback(() => { - if (value) { - onUnfollow?.() - } else { - onFollow?.() +export const FollowButton = forwardRef( + (props: FollowButtonProps, ref: Ref) => { + const { + variant = 'default', + isFollowing = false, + onUnfollow, + onFollow, + size = 'default', + fullWidth = true, + messages: messagesProp, + ...other + } = props + const messages = { ...defaultMessages, ...messagesProp } + const { type } = other + const [value, setValueState] = useControlled({ + componentName: 'FollowButton', + controlledProp: isFollowing, + defaultValue: undefined, + stateName: 'following' + }) + + // Track hover manually to swap text and icon + const [isHovering, setIsHovering] = useState(false) + const [isPressing, setIsPressing] = useState(false) + + const handleMouseEnter = useCallback(() => { + setIsHovering(true) + }, []) + + const handleMouseDown = useCallback(() => { + setIsPressing(true) + }, []) + + const handleMouseLeave = useCallback(() => { + setIsHovering(false) + }, []) + + const handleMouseUp = useCallback(() => { + setIsPressing(false) + }, []) + + const handlePressIn = useCallback(() => { + setIsHovering(true) + setIsPressing(true) + }, []) + + const handlePressOut = useCallback(() => { + setIsHovering(false) + setIsPressing(false) + }, []) + + useEffect(() => {}, [value]) + + const handleClick = useCallback(() => { + if (value) { + onUnfollow?.() + } else { + onFollow?.() + } + setValueState(!value) + }, [value, setValueState, onUnfollow, onFollow]) + + const checkedValue = value + let Icon: IconComponent | null = IconUserFollow + let text = messages.follow + if (checkedValue && !isHovering) { + Icon = IconUserFollowing + text = messages.following + } else if (checkedValue && isHovering && !isPressing) { + Icon = IconUserUnfollow + text = messages.unfollow } - setValueState(!value) - }, [value, setValueState, onUnfollow, onFollow]) - - const checkedValue = value - let Icon: IconComponent | null = IconUserFollow - let text = messages.follow - if (checkedValue && !isHovering) { - Icon = IconUserFollowing - text = messages.following - } else if (checkedValue && isHovering && !isPressing) { - Icon = IconUserUnfollow - text = messages.unfollow - } - const { color, cornerRadius } = useTheme() - - const textColor = - checkedValue || isHovering || isPressing - ? color.static.white - : color.primary.primary - - const rootCss: CSSObject = { - cursor: 'pointer', - minWidth: size === 'small' ? 128 : 152, - width: '100%', - userSelect: 'none', - borderRadius: variant === 'pill' ? cornerRadius['2xl'] : cornerRadius.s, - background: isPressing - ? color.primary.p500 - : checkedValue || isHovering - ? color.primary.primary - : color.static.white, - border: `1px solid ${ - isPressing ? color.primary.p500 : color.primary.primary - }` - } + const { color, cornerRadius } = useTheme() + + const textColor = + checkedValue || isHovering || isPressing + ? color.static.white + : color.primary.primary + + const rootCss: CSSObject = { + cursor: 'pointer', + minWidth: size === 'small' ? 128 : 152, + width: fullWidth ? '100%' : undefined, + userSelect: 'none', + borderRadius: variant === 'pill' ? cornerRadius['2xl'] : cornerRadius.s, + background: isPressing + ? color.primary.p500 + : checkedValue || isHovering + ? color.primary.primary + : color.static.white, + border: `1px solid ${ + isPressing ? color.primary.p500 : color.primary.primary + }` + } - // Handles case where user mouses down, moves cursor, and mouses up - useEffect(() => { - if (isPressing) { - document.addEventListener('mouseup', handleMouseUp) - return () => { - document.removeEventListener('mouseup', handleMouseUp) + // Handles case where user mouses down, moves cursor, and mouses up + useEffect(() => { + if (isPressing) { + document.addEventListener('mouseup', handleMouseUp) + return () => { + document.removeEventListener('mouseup', handleMouseUp) + } } + return undefined + }, [isPressing, handleMouseUp]) + + const rootProps = { + onMouseEnter: handleMouseEnter, + onMouseLeave: handleMouseLeave, + onMouseDown: handleMouseDown, + onMouseUp: handleMouseUp, + onTouchStart: handlePressIn, + onTouchEnd: handlePressOut } - return undefined - }, [isPressing, handleMouseUp]) - - const rootProps = { - onMouseEnter: handleMouseEnter, - onMouseLeave: handleMouseLeave, - onMouseDown: handleMouseDown, - onMouseUp: handleMouseUp, - onTouchStart: handlePressIn, - onTouchEnd: handlePressOut - } - const buttonProps = type === 'checkbox' ? undefined : other - const inputProps = type === 'checkbox' ? other : undefined - - return ( - - {/* TODO: use theme icon colors (confirm w/design) */} - - - {text} - - {type === 'checkbox' ? ( - - ) : null} - - ) -} + {/* TODO: use theme icon colors (confirm w/design) */} + + + {text} + + {type === 'checkbox' ? ( + + ) : null} + + ) + } +) diff --git a/packages/harmony/src/components/button/FollowButton/types.ts b/packages/harmony/src/components/button/FollowButton/types.ts index 8e3640abf31..2c2de541e1a 100644 --- a/packages/harmony/src/components/button/FollowButton/types.ts +++ b/packages/harmony/src/components/button/FollowButton/types.ts @@ -35,4 +35,11 @@ export type FollowButtonProps = { * Callback for when an unfollow is triggered. */ onUnfollow?: () => void + + fullWidth?: boolean + messages?: { + follow?: string + following?: string + unfollow?: string + } } & InputProps diff --git a/packages/web/src/components/artist-recommendations/ArtistRecommendations.module.css b/packages/web/src/components/artist-recommendations/ArtistRecommendations.module.css index c9827c8fae4..f650401a1da 100644 --- a/packages/web/src/components/artist-recommendations/ArtistRecommendations.module.css +++ b/packages/web/src/components/artist-recommendations/ArtistRecommendations.module.css @@ -4,21 +4,6 @@ margin-top: 0; text-align: start; } -.icon { - padding: 2px; - margin: -6px; - box-sizing: content-box; - position: relative; - transition: all 0.17s ease-in-out !important; -} - -.closeButton { - width: 16px; - margin-right: 16px; -} -.closeButton:hover { - cursor: pointer; -} .content { text-align: center; diff --git a/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx b/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx index bea5440cd52..d5471d8e90d 100644 --- a/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx +++ b/packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx @@ -15,7 +15,7 @@ import { relatedArtistsUIActions, CommonState } from '@audius/common/store' -import { IconClose } from '@audius/harmony' +import { FollowButton, IconButton, IconClose } from '@audius/harmony' import cn from 'classnames' import { push } from 'connected-react-router' import { isEmpty } from 'lodash' @@ -24,7 +24,6 @@ import { useDispatch, useSelector } from 'react-redux' import { make, useRecord } from 'common/store/analytics/actions' import { ArtistPopover } from 'components/artist/ArtistPopover' import DynamicImage from 'components/dynamic-image/DynamicImage' -import { FollowButton } from 'components/follow-button/FollowButton' import LoadingSpinner from 'components/loading-spinner/LoadingSpinner' import { MountPlacement } from 'components/types' import UserBadges from 'components/user-badges/UserBadges' @@ -256,27 +255,21 @@ export const ArtistRecommendations = forwardRef< return (
    -
    - -
    + aria-label='Dismiss' + color='subdued' + size='m' + /> {renderHeader()}
    {renderSubheader && renderSubheader()} {renderMainContent()}
    {
    {bio}
    diff --git a/packages/web/src/components/follow-button/FollowButton.module.css b/packages/web/src/components/follow-button/FollowButton.module.css deleted file mode 100644 index 19a2e5d75fc..00000000000 --- a/packages/web/src/components/follow-button/FollowButton.module.css +++ /dev/null @@ -1,29 +0,0 @@ -.followButton { - display: flex; - justify-content: center; - flex: 0 0 132px; - padding: 0 16px; -} - -.followButton.full { - width: 100%; - height: 36px; -} - -.followButton.medium { - max-width: 144px; -} - -.followButton.small { - width: 132px; -} - -.followButton.small .followButtonText { - font-size: var(--font-m); - font-weight: var(--font-bold); - letter-spacing: 0.3px; -} - -.followButton .followButtonIcon { - margin-right: 4px !important; -} diff --git a/packages/web/src/components/follow-button/FollowButton.tsx b/packages/web/src/components/follow-button/FollowButton.tsx deleted file mode 100644 index 49ed5847a29..00000000000 --- a/packages/web/src/components/follow-button/FollowButton.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import { useState, useCallback, useEffect, forwardRef, MouseEvent } from 'react' - -import { - IconUserFollow as IconFollow, - IconUserFollowing as IconFollowing, - IconUserUnfollow as IconUnfollow -} from '@audius/harmony' -import { Button, ButtonProps, ButtonSize, ButtonType } from '@audius/stems' -import cn from 'classnames' - -import styles from './FollowButton.module.css' - -type FollowButtonSize = 'small' | 'medium' | 'full' - -type FollowMessages = { - follow: string - following: string - unfollow: string -} - -export type FollowButtonProps = Omit & { - following?: boolean - messages?: FollowMessages - onUnfollow?: () => void - onFollow?: () => void - stopPropagation?: boolean - showIcon?: boolean - size?: FollowButtonSize - invertedColor?: boolean -} - -const defaultMessages: FollowMessages = { - follow: 'Follow', - following: 'Following', - unfollow: 'Unfollow' -} - -export const FollowButton = forwardRef( - function FollowButton(props, ref) { - const { - color, - className, - following = false, - onUnfollow, - onFollow, - isDisabled, - messages = defaultMessages, - stopPropagation, - showIcon = true, - size = 'medium', - invertedColor = false, - ...buttonProps - } = props - const [isHovering, setIsHovering] = useState(false) - const [isHoveringClicked, setIsHoveringClicked] = useState(false) - - const handleMouseEnter = useCallback(() => { - setIsHovering(true) - }, [setIsHovering]) - - const handleMouseLeave = useCallback(() => { - setIsHovering(false) - }, [setIsHovering]) - - const style = { - [styles.noIcon]: !showIcon, - [styles.full]: size === 'full', - [styles.medium]: size === 'medium', - [styles.small]: size === 'small' - } - - const handleClick = useCallback( - (e: MouseEvent) => { - if (following) { - onUnfollow?.() - } else { - onFollow?.() - } - setIsHoveringClicked(true) - if (stopPropagation) { - e.stopPropagation() - e.nativeEvent.stopImmediatePropagation() - } - }, - [following, onUnfollow, onFollow, setIsHoveringClicked, stopPropagation] - ) - - useEffect(() => { - if (!isHovering && isHoveringClicked) setIsHoveringClicked(false) - }, [isHovering, isHoveringClicked, setIsHoveringClicked]) - - const isFollowing = following || (!following && isHoveringClicked) - - let buttonType - if (color) { - buttonType = ButtonType.PRIMARY - } else { - buttonType = - !isFollowing && !invertedColor - ? ButtonType.SECONDARY - : ButtonType.PRIMARY_ALT - } - - let icon - let text - - if (!following && !isHoveringClicked) { - icon = - text = messages.follow - } else if (isFollowing && !isHovering) { - icon = - text = messages.following - } else if (isFollowing && isHovering) { - icon = - text = messages.unfollow - } - - if (!showIcon) icon = null - - return ( -
    diff --git a/packages/web/src/components/track/GatedTrackSection.tsx b/packages/web/src/components/track/GatedTrackSection.tsx index a8f831ac634..51c38694902 100644 --- a/packages/web/src/components/track/GatedTrackSection.tsx +++ b/packages/web/src/components/track/GatedTrackSection.tsx @@ -30,7 +30,8 @@ import { IconLogoCircleETH, IconLogoCircleSOL, useTheme, - Button + Button, + IconUserFollow } from '@audius/harmony' import cn from 'classnames' import { push as pushRoute } from 'connected-react-router' @@ -38,7 +39,6 @@ import { useDispatch, useSelector } from 'react-redux' import { useModalState } from 'common/hooks/useModalState' import { ArtistPopover } from 'components/artist/ArtistPopover' -import { FollowButton } from 'components/follow-button/FollowButton' import { UserLink } from 'components/link' import LoadingSpinner from 'components/loading-spinner/LoadingSpinner' import { IconTip } from 'components/notification/Notification/components/icons' @@ -266,17 +266,15 @@ const LockedGatedTrackSection = ({ if (isContentFollowGated(streamConditions)) { return ( - + ) } diff --git a/packages/web/src/components/user-list/components/UserList.tsx b/packages/web/src/components/user-list/components/UserList.tsx index e393ddbf1cf..16c0ecdad9c 100644 --- a/packages/web/src/components/user-list/components/UserList.tsx +++ b/packages/web/src/components/user-list/components/UserList.tsx @@ -3,13 +3,13 @@ import { TOP_SUPPORTERS_USER_LIST_TAG, SUPPORTING_USER_LIST_TAG } from '@audius/common/store' +import { FollowButton } from '@audius/harmony' import cn from 'classnames' import InfiniteScroll from 'react-infinite-scroller' import Lottie from 'react-lottie' import loadingSpinner from 'assets/animations/loadingSpinner.json' import ArtistChip from 'components/artist/ArtistChip' -import { FollowButton } from 'components/follow-button/FollowButton' import { MountPlacement } from 'components/types' import styles from './UserList.module.css' @@ -73,11 +73,10 @@ const UserList = (props: UserListProps) => { {user.user_id !== props.userId ? ( props.onFollow(user.user_id)} onUnfollow={() => props.onUnfollow(user.user_id)} - showIcon - stopPropagation + fullWidth={false} /> ) : null} diff --git a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx index da4e334ae51..ad6cb94c47b 100644 --- a/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx +++ b/packages/web/src/pages/profile-page/components/mobile/ProfileHeader.tsx @@ -22,14 +22,14 @@ import { IconTwitter as IconTwitterBird, Flex, Button, - IconPencil + IconPencil, + FollowButton } from '@audius/harmony' import cn from 'classnames' import { make, useRecord } from 'common/store/analytics/actions' import { ArtistRecommendationsDropdown } from 'components/artist-recommendations/ArtistRecommendationsDropdown' import DynamicImage from 'components/dynamic-image/DynamicImage' -import { FollowButton } from 'components/follow-button/FollowButton' import Skeleton from 'components/skeleton/Skeleton' import SubscribeButton from 'components/subscribe-button/SubscribeButton' import FollowsYouBadge from 'components/user-badges/FollowsYouBadge' @@ -357,10 +357,10 @@ const ProfileHeader = ({ ) : ( onFollow(userId)} onUnfollow={() => onUnfollow(userId)} + fullWidth={false} /> )} diff --git a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx index 8f25981f12c..95efe9fbb63 100644 --- a/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx +++ b/packages/web/src/pages/upload-page/fields/stream-availability/collectible-gated/CollectibleGatedDescription.tsx @@ -1,6 +1,5 @@ import { collectiblesSelectors } from '@audius/common/store' import { Flex, IconExternalLink, Text } from '@audius/harmony' -import { Button, ButtonType } from '@audius/stems' import { useSelector } from 'react-redux' import { HelpCallout } from 'components/help-callout/HelpCallout' From d215d310034aa8749db81981e110995400a1c655 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Thu, 14 Mar 2024 18:12:25 -0700 Subject: [PATCH 05/28] Refactor social button --- .../button/SocialButton/SocialButton.tsx | 11 ++------ .../harmony/src/components/button/index.ts | 2 +- .../first-upload-modal/FirstUploadModal.tsx | 8 ++---- .../social-button/SocialButton.module.css | 20 ------------- .../components/social-button/SocialButton.tsx | 19 ------------- .../web/src/components/social-button/index.ts | 1 - .../instagram-button/InstagramButton.tsx | 8 ++---- .../tiktok-button/TikTokButton.module.css | 11 -------- .../tiktok-button/TikTokButton.tsx | 17 ++--------- .../twitter-button/TwitterButton.module.css | 11 -------- .../twitter-button/TwitterButton.tsx | 17 ++--------- .../components/social-proof/SocialProof.tsx | 10 ++++--- .../ChallengeRewardsModal/styles.module.css | 2 +- .../modals/VerifiedUpload.module.css | 17 ----------- .../components/modals/VerifiedUpload.tsx | 13 ++++----- .../components/desktop/VerificationModal.tsx | 28 +++++++++---------- .../components/mobile/VerificationPage.tsx | 22 +++++++-------- 17 files changed, 54 insertions(+), 163 deletions(-) delete mode 100644 packages/web/src/components/social-button/SocialButton.module.css delete mode 100644 packages/web/src/components/social-button/SocialButton.tsx delete mode 100644 packages/web/src/components/social-button/tiktok-button/TikTokButton.module.css delete mode 100644 packages/web/src/components/social-button/twitter-button/TwitterButton.module.css diff --git a/packages/harmony/src/components/button/SocialButton/SocialButton.tsx b/packages/harmony/src/components/button/SocialButton/SocialButton.tsx index ff60cbfabba..5d580336d3a 100644 --- a/packages/harmony/src/components/button/SocialButton/SocialButton.tsx +++ b/packages/harmony/src/components/button/SocialButton/SocialButton.tsx @@ -8,15 +8,11 @@ import type { ButtonProps } from '../Button/types' type SocialMedia = 'tiktok' | 'instagram' | 'twitter' // Omitting aria-label from original type purely for showing in Storybook -export type SocialButtonProps = Omit & { +export type SocialButtonProps = ButtonProps & { /** * Which social media. */ socialType: SocialMedia - /** - * Aria label text. Required since these buttons just have icons - */ - 'aria-label': string } const socialLogos = { @@ -55,8 +51,7 @@ export const SocialButton = (props: SocialButtonProps) => { border: 'transparent', ...(socialType === 'instagram' && instagramBackgroundCss) }} - > - - + iconLeft={SocialLogo} + /> ) } diff --git a/packages/harmony/src/components/button/index.ts b/packages/harmony/src/components/button/index.ts index c9c30e1aff2..50008336ad3 100644 --- a/packages/harmony/src/components/button/index.ts +++ b/packages/harmony/src/components/button/index.ts @@ -2,7 +2,7 @@ export { Button } from './Button/Button' export * from './Button/types' export { PlainButton } from './PlainButton/PlainButton' export * from './PlainButton/types' -export { SocialButton } from './SocialButton/SocialButton' +export { SocialButton, SocialButtonProps } from './SocialButton/SocialButton' export { FollowButton } from './FollowButton/FollowButton' export * from './FollowButton/types' export { FilterButton } from './FilterButton/FilterButton' diff --git a/packages/web/src/components/first-upload-modal/FirstUploadModal.tsx b/packages/web/src/components/first-upload-modal/FirstUploadModal.tsx index 6c646313e76..2da2d04c154 100644 --- a/packages/web/src/components/first-upload-modal/FirstUploadModal.tsx +++ b/packages/web/src/components/first-upload-modal/FirstUploadModal.tsx @@ -106,11 +106,9 @@ const FirstUploadModal = g(({ account, isOpen, close }) => {
    {messages.first}
    {messages.deal}
    {messages.share}
    - + + {messages.shareButton} +     diff --git a/packages/web/src/components/social-button/SocialButton.module.css b/packages/web/src/components/social-button/SocialButton.module.css deleted file mode 100644 index 539cb01bd06..00000000000 --- a/packages/web/src/components/social-button/SocialButton.module.css +++ /dev/null @@ -1,20 +0,0 @@ -.socialButton { - width: 100%; - margin-bottom: 8px; - height: 64px !important; -} - -.socialButton svg { - height: 20px !important; - width: 20px !important; -} - -.socialButton .icon path { - fill: var(--static-white); -} - -.text { - font-size: var(--font-xl) !important; - font-weight: var(--font-bold) !important; - letter-spacing: 0.15px !important; -} diff --git a/packages/web/src/components/social-button/SocialButton.tsx b/packages/web/src/components/social-button/SocialButton.tsx deleted file mode 100644 index e29e2f7eb39..00000000000 --- a/packages/web/src/components/social-button/SocialButton.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Button, ButtonType, ButtonSize, ButtonProps } from '@audius/stems' -import cn from 'classnames' - -import socialButtonStyles from './SocialButton.module.css' - -export type SocialButtonProps = ButtonProps - -export const SocialButton = (props: SocialButtonProps) => { - return ( - {permissionStatus === Status.ERROR ? ( {messages.error} ) : null} diff --git a/packages/web/src/components/labeled-button/LabeledButton.module.css b/packages/web/src/components/labeled-button/LabeledButton.module.css deleted file mode 100644 index 563ec192222..00000000000 --- a/packages/web/src/components/labeled-button/LabeledButton.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.wrapper { - display: flex; - flex-direction: column; - font-size: 12px; - line-height: 14px; -} - -.label { - font-weight: 500; - line-height: 14px; - white-space: nowrap; - margin-bottom: 5px; -} diff --git a/packages/web/src/components/labeled-button/LabeledButton.tsx b/packages/web/src/components/labeled-button/LabeledButton.tsx deleted file mode 100644 index 3547dcac309..00000000000 --- a/packages/web/src/components/labeled-button/LabeledButton.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Button, ButtonProps } from '@audius/stems' - -import styles from './LabeledButton.module.css' - -type LabeledButtonProps = { - label: string -} & ButtonProps - -const LabeledButton = ({ label, ...restProps }: LabeledButtonProps) => { - return ( -
    -
    {label}
    -
    - ) -} - -export default LabeledButton diff --git a/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx b/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx index e6bc7467fcd..14f279b77ee 100644 --- a/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx +++ b/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx @@ -304,15 +304,14 @@ export const OAuthLoginPage = () => { + > + {userAlreadyWriteAuthorized + ? messages.continueButton + : messages.authorizeButton} + ) : (
    @@ -363,12 +362,9 @@ export const OAuthLoginPage = () => { className={cn(styles.otpInput)} /> ) : null} - + + {messages.signInButton} +
    { +export const CTAButton = (props: ButtonProps) => { return ( ) } diff --git a/packages/web/src/components/tipping/support/SupportingList.tsx b/packages/web/src/components/tipping/support/SupportingList.tsx index 141c2321d83..fe8c6660b34 100644 --- a/packages/web/src/components/tipping/support/SupportingList.tsx +++ b/packages/web/src/components/tipping/support/SupportingList.tsx @@ -67,7 +67,7 @@ const SupportingListForProfile = ({ profile }: { profile: User }) => { {profile.supporting_count > MAX_PROFILE_SUPPORTING_TILES && (
    {formatViewAllMessage(profile.supporting_count)} - +
    )}
    diff --git a/packages/web/src/components/token-value-slider/TokenValueSlider.module.css b/packages/web/src/components/token-value-slider/TokenValueSlider.module.css new file mode 100644 index 00000000000..0a9c4bda767 --- /dev/null +++ b/packages/web/src/components/token-value-slider/TokenValueSlider.module.css @@ -0,0 +1,90 @@ +:root, +root { + --token-value-slider-background: linear-gradient( + 315deg, + #7652cc 2.04%, + #b05ce6 100% + ); + --token-value-slider-background-error: linear-gradient( + 180deg, + #f15064 0%, + #c03a4b 100% + ); +} + +.container { + display: inline-flex; + flex-direction: column; + min-width: 576px; + width: 576px; + + /* Text styles */ + font-family: var(--harmony-font-family); + font-weight: var(--harmony-font-bold); + font-size: var(--harmony-font-s); + line-height: 17px; + letter-spacing: 1px; + text-transform: uppercase; + color: #bec5e0; +} + +.slider { + position: relative; + background: #242438; + box-shadow: 1px -3px 5px rgba(53, 54, 79, 0.25); + border-radius: 22px; + height: 24px; + overflow: hidden; + margin-bottom: 8px; +} + +.newValueSlider { + position: absolute; + background: var(--token-value-slider-background); + height: 100%; + transition: width 0.2s ease-in-out; +} + +.initialValueSlider { + position: absolute; + background: var(--token-value-slider-background); + height: 100%; + transition: width 0.2s ease-in-out; +} + +.invalid { + background: var(--token-value-slider-background-error); + z-index: 1; +} + +.lighter { + opacity: 0.8; +} + +.minMax { + width: 100%; + position: relative; + display: inline-flex; + justify-content: space-between; + margin-bottom: 8px; + color: var(--harmony-neutral); +} + +.minLabel { + color: var(--harmony-text-subdued); + padding-right: 4px; +} + +.maxLabel { + color: var(--harmony-text-subdued); + padding-left: 4px; +} + +.textLabel { + position: absolute; +} + +.minValue, +.maxValues { + display: inline-flex; +} diff --git a/packages/web/src/components/token-value-slider/TokenValueSlider.tsx b/packages/web/src/components/token-value-slider/TokenValueSlider.tsx new file mode 100644 index 00000000000..61f35b1a567 --- /dev/null +++ b/packages/web/src/components/token-value-slider/TokenValueSlider.tsx @@ -0,0 +1,141 @@ +import { useState, useRef, useEffect } from 'react' +import * as React from 'react' + +import BN from 'bn.js' +import cn from 'classnames' + +import styles from './TokenValueSlider.module.css' +import { TokenValueSliderProps } from './types' + +const messages = { + min: 'MIN', + max: 'MAX', + current: 'CURRENT' +} + +export function getBNPercentage(n1: BN, n2: BN): number { + if (n2.isZero()) return 0 + const thousand = new BN('1000') + const num = n1.mul(thousand).div(n2) + if (num.gte(thousand)) return 1 + return num.toNumber() / 1000 +} + +export const TokenValueSlider: React.FC = ({ + className, + sliderClassName, + sliderBarClassName, + min, + max, + minSliderWidth, + value, + initialValue, + isIncrease, + minWrapper: MinWrapper, + maxWrapper: MaxWrapper +}: TokenValueSliderProps) => { + const containerRef = useRef(null) + const maxValueRef = useRef(null) + const minValueRef = useRef(null) + + const [initialSliderWidth, setInitialSliderWidth] = useState(0) + const [sliderWidth, setSliderWidth] = useState(0) + useEffect(() => { + if (containerRef.current) { + const percentage = getBNPercentage(value.sub(min), max.sub(min)) + const totalWidth = containerRef.current.offsetWidth + if (value.sub(min).isZero()) { + setSliderWidth(0) + } else { + const newSliderWidth = Math.max(totalWidth * percentage, minSliderWidth) + setSliderWidth(newSliderWidth) + } + } + }, [value, containerRef, max, min, setSliderWidth, minSliderWidth]) + + useEffect(() => { + if (initialValue && !initialSliderWidth && containerRef.current) { + const percentage = getBNPercentage(initialValue.sub(min), max.sub(min)) + const totalWidth = containerRef.current.offsetWidth + const newSliderWidth = Math.max(totalWidth * percentage, minSliderWidth) + setInitialSliderWidth(newSliderWidth) + } + }, [ + initialValue, + containerRef, + minSliderWidth, + max, + min, + initialSliderWidth, + setInitialSliderWidth + ]) + + return ( +
    +
    +
    +
    +
    +
    + {min && ( +
    + {MinWrapper ? ( + + ) : ( + <> + + {isIncrease !== undefined + ? isIncrease + ? messages.current + : messages.min + : messages.min} + + {min.toString()} + + )} +
    + )} + {max && ( +
    + {MaxWrapper ? ( + + ) : ( + <> + {max.toString()} + + {isIncrease !== undefined + ? isIncrease + ? messages.max + : messages.current + : messages.max} + + + )} +
    + )} +
    +
    + ) +} diff --git a/packages/web/src/components/token-value-slider/index.ts b/packages/web/src/components/token-value-slider/index.ts new file mode 100644 index 00000000000..60cbca9bac3 --- /dev/null +++ b/packages/web/src/components/token-value-slider/index.ts @@ -0,0 +1 @@ +export { TokenValueSlider } from './TokenValueSlider' diff --git a/packages/web/src/components/token-value-slider/types.ts b/packages/web/src/components/token-value-slider/types.ts new file mode 100644 index 00000000000..06735be8dd0 --- /dev/null +++ b/packages/web/src/components/token-value-slider/types.ts @@ -0,0 +1,15 @@ +import BN from 'bn.js' + +export type TokenValueSliderProps = { + className?: string + sliderClassName?: string + sliderBarClassName?: string + min: BN + max: BN + value: BN + minSliderWidth: number + initialValue?: BN + isIncrease?: boolean + minWrapper?: React.ComponentType<{ value: BN }> + maxWrapper?: React.ComponentType<{ value: BN }> +} diff --git a/packages/web/src/components/track/GiantTrackTileProgressInfo.tsx b/packages/web/src/components/track/GiantTrackTileProgressInfo.tsx index ac403725d05..5ff12db1451 100644 --- a/packages/web/src/components/track/GiantTrackTileProgressInfo.tsx +++ b/packages/web/src/components/track/GiantTrackTileProgressInfo.tsx @@ -5,8 +5,7 @@ import { CommonState } from '@audius/common/store' import { formatLineupTileDuration } from '@audius/common/utils' -import { IconCheck } from '@audius/harmony' -import { ProgressBar } from '@audius/stems' +import { IconCheck, ProgressBar } from '@audius/harmony' import { useSelector } from 'react-redux' import styles from './GiantTrackTile.module.css' diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx index 4bd462f22fe..2e213976948 100644 --- a/packages/web/src/components/track/desktop/TrackTile.tsx +++ b/packages/web/src/components/track/desktop/TrackTile.tsx @@ -22,9 +22,9 @@ import { IconVisibilityHidden, Text, Flex, - spacing + spacing, + ProgressBar } from '@audius/harmony' -import { ProgressBar } from '@audius/stems' import cn from 'classnames' import moment from 'moment' import { useSelector } from 'react-redux' diff --git a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx b/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx index a4698f615a2..3b3ad92228f 100644 --- a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx +++ b/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx @@ -24,9 +24,9 @@ import { Button, IconArrowRight as IconArrow, IconCheck, + ProgressBar, Text } from '@audius/harmony' -import { ProgressBar } from '@audius/stems' import cn from 'classnames' import { useDispatch, useSelector } from 'react-redux' diff --git a/packages/web/src/pages/audio-rewards-page/components/DashboardTokenValueSlider.tsx b/packages/web/src/pages/audio-rewards-page/components/DashboardTokenValueSlider.tsx index 31e599e4d3e..f069bead531 100644 --- a/packages/web/src/pages/audio-rewards-page/components/DashboardTokenValueSlider.tsx +++ b/packages/web/src/pages/audio-rewards-page/components/DashboardTokenValueSlider.tsx @@ -1,8 +1,9 @@ import { BNAudio } from '@audius/common/models' import { formatNumberCommas } from '@audius/common/utils' -import { TokenValueSlider } from '@audius/stems' import BN from 'bn.js' +import { TokenValueSlider } from 'components/token-value-slider' + import styles from './DashboardTokenValueSlider.module.css' type DashboardTokenValueSliderProps = { @@ -19,11 +20,8 @@ const MinMaxWrapper = ({ value }: { value: BN }) => { ) } -const DashboardTokenValueSlider = ({ - min, - max, - value -}: DashboardTokenValueSliderProps) => { +const DashboardTokenValueSlider = (props: DashboardTokenValueSliderProps) => { + const { min, max, value } = props return ( Date: Fri, 15 Mar 2024 15:37:11 -0700 Subject: [PATCH 11/28] Remove all the components --- .../src/components/Button/Button.module.css | 544 ------------------ .../src/components/Button/Button.stories.tsx | 74 --- .../stems/src/components/Button/Button.tsx | 140 ----- packages/stems/src/components/Button/index.ts | 2 - packages/stems/src/components/Button/test.ts | 7 - packages/stems/src/components/Button/types.ts | 100 ---- .../components/Scrollbar/Scrollbar.module.css | 41 -- .../Scrollbar/Scrollbar.stories.tsx | 62 -- .../src/components/Scrollbar/Scrollbar.tsx | 82 --- .../stems/src/components/Scrollbar/index.ts | 2 - .../stems/src/components/Scrollbar/types.ts | 11 - .../src/components/Switch/Switch.module.css | 63 -- .../stems/src/components/Switch/Switch.tsx | 22 - packages/stems/src/components/Switch/index.ts | 1 - .../stems/src/components/Tag/Tag.module.css | 37 -- .../stems/src/components/Tag/Tag.stories.tsx | 18 - packages/stems/src/components/Tag/Tag.tsx | 35 -- packages/stems/src/components/Tag/index.ts | 1 - .../TokenValueSlider.module.css | 81 --- .../TokenValueSlider/TokenValueSlider.tsx | 134 ----- .../src/components/TokenValueSlider/index.ts | 2 - .../src/components/TokenValueSlider/types.ts | 15 - packages/stems/src/hooks/useControlled.ts | 124 ---- .../stems/src/hooks/useMediaQueryListener.ts | 26 - packages/stems/src/index.ts | 10 - packages/stems/src/styles/colors.ts | 43 -- packages/stems/src/styles/types.ts | 20 - packages/stems/src/types.ts | 7 - packages/stems/src/typings.d.ts | 17 - packages/stems/src/utils/bnHelpers.ts | 13 - packages/stems/src/utils/findAncestor.ts | 17 - packages/stems/src/utils/hotkeyUtil.ts | 124 ---- packages/stems/src/utils/scrollParent.ts | 41 -- packages/stems/src/utils/styles.ts | 10 - packages/stems/src/utils/transitions.ts | 25 - packages/stems/src/utils/types.ts | 6 - 36 files changed, 1957 deletions(-) delete mode 100644 packages/stems/src/components/Button/Button.module.css delete mode 100644 packages/stems/src/components/Button/Button.stories.tsx delete mode 100644 packages/stems/src/components/Button/Button.tsx delete mode 100644 packages/stems/src/components/Button/index.ts delete mode 100644 packages/stems/src/components/Button/test.ts delete mode 100644 packages/stems/src/components/Button/types.ts delete mode 100644 packages/stems/src/components/Scrollbar/Scrollbar.module.css delete mode 100644 packages/stems/src/components/Scrollbar/Scrollbar.stories.tsx delete mode 100644 packages/stems/src/components/Scrollbar/Scrollbar.tsx delete mode 100644 packages/stems/src/components/Scrollbar/index.ts delete mode 100644 packages/stems/src/components/Scrollbar/types.ts delete mode 100644 packages/stems/src/components/Switch/Switch.module.css delete mode 100644 packages/stems/src/components/Switch/Switch.tsx delete mode 100644 packages/stems/src/components/Switch/index.ts delete mode 100644 packages/stems/src/components/Tag/Tag.module.css delete mode 100644 packages/stems/src/components/Tag/Tag.stories.tsx delete mode 100644 packages/stems/src/components/Tag/Tag.tsx delete mode 100644 packages/stems/src/components/Tag/index.ts delete mode 100644 packages/stems/src/components/TokenValueSlider/TokenValueSlider.module.css delete mode 100644 packages/stems/src/components/TokenValueSlider/TokenValueSlider.tsx delete mode 100644 packages/stems/src/components/TokenValueSlider/index.ts delete mode 100644 packages/stems/src/components/TokenValueSlider/types.ts delete mode 100644 packages/stems/src/hooks/useControlled.ts delete mode 100644 packages/stems/src/hooks/useMediaQueryListener.ts delete mode 100644 packages/stems/src/styles/colors.ts delete mode 100644 packages/stems/src/styles/types.ts delete mode 100644 packages/stems/src/types.ts delete mode 100644 packages/stems/src/typings.d.ts delete mode 100644 packages/stems/src/utils/bnHelpers.ts delete mode 100644 packages/stems/src/utils/findAncestor.ts delete mode 100644 packages/stems/src/utils/hotkeyUtil.ts delete mode 100644 packages/stems/src/utils/scrollParent.ts delete mode 100644 packages/stems/src/utils/styles.ts delete mode 100644 packages/stems/src/utils/transitions.ts delete mode 100644 packages/stems/src/utils/types.ts diff --git a/packages/stems/src/components/Button/Button.module.css b/packages/stems/src/components/Button/Button.module.css deleted file mode 100644 index fe7d9d9dfb7..00000000000 --- a/packages/stems/src/components/Button/Button.module.css +++ /dev/null @@ -1,544 +0,0 @@ -.button { - box-sizing: border-box; - cursor: pointer; - user-select: none; - text-align: center; - white-space: nowrap; - overflow: hidden; - transition: all var(--quick); - position: relative; - - display: inline-flex; - align-items: center; - justify-content: center; - padding-left: var(--unit-6); - padding-right: var(--unit-6); -} - -.button:focus { - outline: none !important; -} - -.button.noIcon { - padding-left: var(--unit-8); - padding-right: var(--unit-8); -} - -.button.medium { - height: var(--unit-12); -} - -.button.small { - height: var(--unit-8); -} - -.button.large { - padding: var(--unit-5) var(--unit-6); - height: var(--unit-15); - gap: var(--unit-2); -} - -.button.large .textLabel { - font-size: var(--font-xl); - font-weight: var(--font-bold); - letter-spacing: 0.25px; - line-height: var(--unit-5); - text-transform: uppercase; -} - -.button.large .icon, -.button.large .icon.left { - margin-right: 0; -} - -.button.tiny { - height: var(--unit-7); - padding-left: var(--unit-4); - padding-right: var(--unit-4); -} - -.button.medium .icon svg { - width: var(--unit-6); -} - -.button.small .icon svg { - width: var(--unit-4); -} - -.button.tiny .icon svg { - width: var(--unit-4); -} - -.button .icon path { - fill: var(--neutral); - transition: all var(--quick); -} - -.button .icon.left { - margin-right: var(--unit-3); -} - -.button.small .icon.left { - margin-right: var(--unit-2); -} - -.button .icon.left.noText { - margin: 0 !important; -} - -.button .icon.right { - margin-left: var(--unit-3); -} - -.button .icon.right.noText { - margin: 0 !important; -} - -.button .icon { - display: inline-flex; - align-items: center; - vertical-align: middle; -} - -.textLabel { - vertical-align: middle; - transition: all var(--quick); -} - -.button .overlay { - background-color: var(--overlay-color, transparent); - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: var(--overlay-opacity, 0); -} - -/* Primary Button */ - -.primary { - --button-color: var(--primary); - box-shadow: var(--shadow-near); - border: none; - border-radius: 4px; - background: var(--button-color); -} - -.primary .textLabel { - color: var(--primary-secondary-text); - font-size: var(--font-l); - font-weight: var(--font-bold); -} - -.primary .icon path, -.primary .icon use { - fill: var(--primary-secondary-text); -} - -.primary.includeHoverAnimations:hover.enabled { - --overlay-color: var(--static-white); - --overlay-opacity: 0.1; - box-shadow: var(--shadow-mid); - transform: var(--grow); - background: var(--button-color); -} - -.primary.includeHoverAnimations:active.enabled { - --overlay-color: var(--static-blck); - --overlay-opacity: 0.2; - box-shadow: none; - transform: perspective(1px) scale3d(0.99, 0.99, 0.99); - background: var(--button-color); -} - -/* PrimaryAlt Button */ - -.primaryAlt { - height: 46px; - border: none; - border-radius: 4px; - background: var(--primary); -} - -.primaryAlt .textLabel { - color: var(--primary-secondary-text); - font-size: var(--font-s); - font-weight: var(--font-bold); - letter-spacing: 0.5px; -} - -.primaryAlt .icon path, -.primaryAlt .icon use { - fill: var(--primary-secondary-text); -} - -.primaryAlt.includeHoverAnimations:hover.enabled { - transform: var(--grow); - background: var(--primary-light-1); -} - -.primaryAlt.includeHoverAnimations:active.enabled { - transform: perspective(1px) scale3d(0.99, 0.99, 0.99); - background: var(--primary-dark-1); -} - -/* Secondary Button */ - -.secondary { - border: 1px solid var(--primary-dark-1); - border-radius: 4px; - background: var(--white); -} - -.secondary .textLabel { - color: var(--primary); - font-size: var(--font-l); - font-weight: var(--font-bold); -} - -.secondary.small .textLabel { - font-size: var(--font-s); - letter-spacing: 0.5px; -} - -.secondary.tiny .textLabel { - font-size: 11px; - letter-spacing: 0.3px; -} - -.secondary .icon path, -.secondary .icon use { - fill: var(--primary); -} - -.secondary.includeHoverAnimations:hover.enabled { - transform: var(--grow); - border: 1px solid var(--primary-dark-2); - background: var(--primary); -} - -.secondary.includeHoverAnimations:hover.enabled .textLabel { - color: var(--primary-secondary-text); -} - -.secondary.includeHoverAnimations:hover.enabled .icon path, -.secondary.includeHoverAnimations:hover.enabled .icon use { - fill: var(--primary-secondary-text); -} - -.secondary.includeHoverAnimations:active.enabled { - transform: perspective(1px) scale3d(0.99, 0.99, 0.99); - border: 1px solid var(--primary-dark-2); - background: var(--primary-dark-2); -} - -/* Tertiary Button */ - -.tertiary { - background: var(--white); - border: 1px solid var(--neutral-light-7); - border-radius: 4px; -} - -.tertiary .textLabel { - color: var(--secondary); - font-family: var(--font-family); - font-size: var(--font-l); - font-weight: var(--font-bold); -} - -.tertiary .icon path, -.tertiary .icon use { - fill: var(--secondary); -} - -.tertiary.includeHoverAnimations:hover.enabled { - transform: var(--grow); - background-color: var(--static-white); -} - -.tertiary.includeHoverAnimations:active.enabled { - transform: perspective(1px) scale3d(0.99, 0.99, 0.99); -} - -/* Common Button */ - -.common { - border: 1px solid var(--neutral-light-6); - border-radius: 4px; - background: var(--white); -} - -.common.small { - padding: 0 var(--unit-4); -} - -.common .textLabel { - color: var(--neutral); - font-size: var(--font-s); - font-weight: var(--font-bold); - letter-spacing: 0.5px; -} - -.common.tiny .textLabel { - font-size: 11px; - letter-spacing: 0.3px; -} - -.common .icon path, -.common .icon use { - fill: var(--neutral); -} - -.common.includeHoverAnimations:hover.enabled { - transform: var(--grow); - border: 1px solid var(--primary-dark-2); - background: var(--primary); -} - -.common.includeHoverAnimations:hover.enabled .textLabel { - color: var(--primary-secondary-text); -} - -.common.includeHoverAnimations:hover.enabled .icon path, -.common.includeHoverAnimations:hover.enabled .icon use { - fill: var(--primary-secondary-text); -} - -.common.includeHoverAnimations:active.enabled { - transform: perspective(1px) scale3d(0.99, 0.99, 0.99); - border: 1px solid var(--primary-dark-2); - background: var(--primary-dark-2); -} - -.common.includeHoverAnimations:active.enabled .textLabel { - color: var(--primary-secondary-text); -} - -.common.includeHoverAnimations:active.enabled .icon path { - fill: var(--primary-secondary-text); -} - -/* Common Alt Button */ - -.commonAlt { - border: 1px solid var(--neutral-light-6); - border-radius: 4px; - background: var(--white); -} - -.commonAlt .textLabel { - color: var(--neutral); - font-size: var(--font-s); - font-weight: var(--font-bold); - letter-spacing: 0.5px; -} - -.commonAlt.small .textLabel { - font-size: var(--font-xs); -} - -.commonAlt .icon path, -.commonAlt .icon use { - fill: var(--neutral); -} - -.commonAlt:hover.enabled { - transform: var(--grow); - border: 1px solid var(--neutral-light-6); - background: var(--neutral-light-10); -} - -.commonAlt.includeHoverAnimations:active.enabled { - transform: perspective(1px) scale3d(0.99, 0.99, 0.99); - border: 1px solid var(--neutral-light-6); - background: var(--neutral-light-8); -} - -/* Glass Button */ - -.glass { - border: 1px solid var(--white); - border-radius: 4px; - background-color: rgba(255, 255, 255, 0.1); -} - -.glass .textLabel { - text-transform: uppercase; - color: var(--white); - font-size: var(--font-l); - font-weight: var(--font-bold); -} - -.glass .icon path, -.glass .icon use { - fill: var(--white); -} - -.glass.includeHoverAnimations:hover.enabled { - transform: var(--grow); - background-color: rgba(255, 255, 255, 0.2); -} - -.glass.includeHoverAnimations:active.enabled { - transform: perspective(1px) scale3d(1, 1, 1); - background-color: rgba(255, 255, 255, 0.05); -} - -/* Disabled Button */ - -.disabled { - box-shadow: none; - border-radius: 4px; - background-color: var(--neutral-light-7); - cursor: default; - transform: none; - border: none; - pointer-events: none; -} - -.disabled .textLabel { - font-size: var(--font-l); - font-weight: var(--font-bold); - color: var(--white); -} - -.disabled .icon path, -.disabled .icon use { - fill: var(--white); -} - -/* White Button */ - -.white { - border: none; - border-radius: 4px; - background-color: var(--static-neutral-light-10); - box-shadow: 0 1px 0 0 var(--neutral-light-4), - 0 4px 12px -4px rgba(0, 0, 0, 0.3); -} - -.white .textLabel { - color: var(--secondary); - font-family: var(--font-family); - font-size: var(--font-l); - font-weight: var(--font-demi-bold); -} - -.white .icon path, -.white .icon use { - fill: var(--secondary); -} - -.white.includeHoverAnimations:hover.enabled { - transform: var(--grow); - background-color: var(--static-white); - box-shadow: 0 1px 0 0 var(--neutral-light-5), - 0 5px 20px -3px rgba(0, 0, 0, 0.3); -} - -.white.includeHoverAnimations:active.enabled { - background-color: #eeeeee; - box-shadow: 0 1px 0 0 var(--neutral-light-4), - 0 4px 12px -4px rgba(0, 0, 0, 0.3); - transform: perspective(1px) scale3d(0.99, 0.99, 0.99); -} - -/* Text Button */ -.textButton { - background: none; - border: none; - outline: none; - padding: 8px 24px; - font-weight: var(--font-bold); -} - -.textButton.button.medium, -.textButton.button.small, -.textButton.button.tiny { - height: unset; -} - -.textButton.medium, -.textButton.medium .textLabel { - font-size: var(--font-m); -} -.textButton.small, -.textButton.small .textLabel { - font-size: var(--font-s); -} -.textButton.tiny, -.textButton.tiny .textLabel { - font-size: var(--font-xs); -} - -.textButton.button .icon svg { - width: calc(1em - 2px); - height: calc(1em - 2px); -} - -.textButton:hover .textLabel { - color: var(--secondary); -} - -.textButton .icon.left { - margin-right: var(--unit-1); -} - -.textButton .icon.right { - margin-left: var(--unit-1); -} - -.textButton .icon path { - transition: all var(--quick); -} - -.textButton:hover .icon path { - fill: var(--secondary); -} - -/** Destructive buttons **/ -.destructive { - background: transparent; - border: 1px solid var(--accent-red); - border-radius: var(--unit-1); -} - -.destructive .textLabel { - font-size: var(--font-l); - font-weight: var(--font-bold); - color: var(--accent-red); -} - -.destructive .icon path { - fill: var(--accent-red); -} - -/** destructive hover **/ -.destructive.includeHoverAnimations:hover.enabled { - transform: var(--grow); - background-color: var(--accent-red); -} - -.destructive.includeHoverAnimations:active.enabled { - transform: perspective(1px) scale3d(0.99, 0.99, 0.99); - background-color: var(--accent-red-dark-1); -} - -.destructive.includeHoverAnimations:hover.enabled .textLabel { - color: white; -} - -.destructive.includeHoverAnimations:hover.enabled .icon path { - fill: var(--static-white); -} - -/** destructive disabled **/ -.destructive:disabled { - opacity: 0.45; -} - -.fullWidth { - width: 100%; -} diff --git a/packages/stems/src/components/Button/Button.stories.tsx b/packages/stems/src/components/Button/Button.stories.tsx deleted file mode 100644 index dba601ead1a..00000000000 --- a/packages/stems/src/components/Button/Button.stories.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { Story } from '@storybook/react' - -import { Button } from './Button' -import { ButtonProps, Type } from './types' - -import { Size } from './index' - -export default { - component: Button, - title: 'Components/Button', - argTypes: { onClick: { action: 'clicked' } } -} - -const baseProps: ButtonProps = { - text: 'Click Me' -} - -const Template: Story = (args) => ( -
    -
    -) - -const BackgroundTemplate: Story = (args) => ( -
    -
    -) - -// Primary -export const Primary = Template.bind({}) - -// Disabled -export const Disabled = Template.bind({}) -Disabled.args = { disabled: true } - -// Primary Alt -export const PrimaryAlt = Template.bind({}) -PrimaryAlt.args = { type: Type.PRIMARY_ALT } - -// Primary w/ color -export const PrimaryWithColor = Template.bind({}) -PrimaryWithColor.args = { color: 'accentBlue' } - -// Secondary -export const Secondary = Template.bind({}) -Secondary.args = { type: Type.SECONDARY } - -// Common -export const Common = Template.bind({}) -Common.args = { type: Type.COMMON } - -// Common Alt -export const CommonAlt = Template.bind({}) -CommonAlt.args = { type: Type.COMMON_ALT } - -// Glass -export const Glass = BackgroundTemplate.bind({}) -Glass.args = { type: Type.GLASS } - -// White -export const White = Template.bind({}) -White.args = { type: Type.WHITE } - -// Text -export const Text = Template.bind({}) -Text.args = { type: Type.TEXT } - -// Destructive -export const Destructive = Template.bind({}) -Destructive.args = { type: Type.DESTRUCTIVE } diff --git a/packages/stems/src/components/Button/Button.tsx b/packages/stems/src/components/Button/Button.tsx deleted file mode 100644 index 9faa5ddad42..00000000000 --- a/packages/stems/src/components/Button/Button.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import { forwardRef, CSSProperties, ElementType, ForwardedRef } from 'react' - -import cn from 'classnames' - -import { useMediaQueryListener } from 'hooks/useMediaQueryListener' -import { CSSCustomProperties } from 'styles/types' -import { toCSSVariableName } from 'utils/styles' - -import styles from './Button.module.css' -import { ButtonProps, Type, Size } from './types' - -const SIZE_STYLE_MAP = { - [Size.TINY]: styles.tiny, - [Size.SMALL]: styles.small, - [Size.MEDIUM]: styles.medium, - [Size.LARGE]: styles.large -} - -const TYPE_STYLE_MAP = { - [Type.PRIMARY]: styles.primary, - [Type.PRIMARY_ALT]: styles.primaryAlt, - [Type.SECONDARY]: styles.secondary, - [Type.TERTIARY]: styles.tertiary, - [Type.COMMON]: styles.common, - [Type.COMMON_ALT]: styles.commonAlt, - [Type.DISABLED]: styles.disabled, - [Type.GLASS]: styles.glass, - [Type.WHITE]: styles.white, - [Type.TEXT]: styles.textButton, - [Type.DESTRUCTIVE]: styles.destructive -} - -/** - * @deprecated - * Deprecated: (use `Button` from \@audius/harmony) - * - * A common Button component. Includes a few variants and options to - * include and position icons. - */ -export const Button = forwardRef(function Button< - Component extends ElementType = 'button' ->(props: ButtonProps, ref: ForwardedRef) { - const { - color, - text, - type = Type.PRIMARY, - buttonType, - size = Size.MEDIUM, - leftIcon, - rightIcon, - isDisabled, - disabled: disabledProp, - includeHoverAnimations = true, - widthToHideText, - minWidth, - className, - iconClassName, - textClassName, - 'aria-label': ariaLabelProp, - fullWidth, - as, - ...other - } = props - const { isMatch: textIsHidden } = useMediaQueryListener( - `(max-width: ${widthToHideText}px)` - ) - const disabled = disabledProp ?? isDisabled - const isTextVisible = !!text && !textIsHidden - - const renderLeftIcon = () => - leftIcon && ( - - {leftIcon} - - ) - - const renderRightIcon = () => - rightIcon && ( - - {rightIcon} - - ) - - const getAriaLabel = () => { - if (ariaLabelProp) return ariaLabelProp - // Use the text prop as the aria-label if the text becomes hidden - // and no aria-label was provided to keep the button accessible. - else if (textIsHidden && typeof text === 'string') return text - return undefined - } - - const renderText = () => - isTextVisible && ( - {text} - ) - - const style: CSSCustomProperties = { - minWidth: minWidth && isTextVisible ? `${minWidth}px` : 'unset', - '--button-color': color ? `var(${toCSSVariableName(color)})` : undefined - } - - const RootComponent: ElementType = as ?? 'button' - - return ( - - {color ? : null} - {renderLeftIcon()} - {renderText()} - {renderRightIcon()} - - ) -}) diff --git a/packages/stems/src/components/Button/index.ts b/packages/stems/src/components/Button/index.ts deleted file mode 100644 index 1148be17d1d..00000000000 --- a/packages/stems/src/components/Button/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Button } from './Button' -export { ButtonProps, Type, Size } from './types' diff --git a/packages/stems/src/components/Button/test.ts b/packages/stems/src/components/Button/test.ts deleted file mode 100644 index f2d299fc54d..00000000000 --- a/packages/stems/src/components/Button/test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Button } from '.' - -describe('Button', () => { - it('is truthy', () => { - expect(Button).toBeTruthy() - }) -}) diff --git a/packages/stems/src/components/Button/types.ts b/packages/stems/src/components/Button/types.ts deleted file mode 100644 index 4a35e6a6e61..00000000000 --- a/packages/stems/src/components/Button/types.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react' - -import { ColorValue } from 'styles/colors' - -export enum Type { - PRIMARY = 'primary', - PRIMARY_ALT = 'primaryAlt', - SECONDARY = 'secondary', - TERTIARY = 'tertiary', - COMMON = 'common', - COMMON_ALT = 'commonAlt', - DISABLED = 'disabled', - GLASS = 'glass', - WHITE = 'white', - TEXT = 'text', - DESTRUCTIVE = 'destructive' -} - -export enum Size { - TINY = 'tiny', - SMALL = 'small', - MEDIUM = 'medium', - LARGE = 'large' -} - -type ButtonOwnProps = { - as?: Component - color?: ColorValue - /** - * The text of the button - */ - text: ReactNode - - /** - * The type of the button - */ - type?: Type - - /** - * The default behavior of the button. - */ - buttonType?: 'submit' | 'button' | 'reset' - - /** - * The button size - */ - size?: Size - - /** - * Optional icon element to include on the left side of the button - */ - leftIcon?: ReactNode | JSX.Element - - /** - * Optional icon element to include on the right side of the button - */ - rightIcon?: ReactNode | JSX.Element - - /** - * Whether or not the button is clickable - */ - isDisabled?: boolean - - /** - * Whether or not to include animations on hover - * Consider turning off animations in mobile-first experiences - */ - includeHoverAnimations?: boolean - - /** - * The max width at which text will still be shown - */ - widthToHideText?: number - - /** - * Optional min width - * Min width can be useful if the button is switching states and you want - * to keep a certain width while text length changes - */ - minWidth?: number - - /** - * If provided, allow button to take up full width of container - */ - fullWidth?: boolean - - /** - * Class name to apply to the icon - */ - iconClassName?: string - - /** - * Class name to apply to the text label - */ - textClassName?: string -} - -export type ButtonProps = - ButtonOwnProps & - Omit, keyof ButtonOwnProps> diff --git a/packages/stems/src/components/Scrollbar/Scrollbar.module.css b/packages/stems/src/components/Scrollbar/Scrollbar.module.css deleted file mode 100644 index 10c6227a04c..00000000000 --- a/packages/stems/src/components/Scrollbar/Scrollbar.module.css +++ /dev/null @@ -1,41 +0,0 @@ -.scrollbar { - height: 100%; - min-height: 0; -} - -.scrollbar :global(.ps__thumb-y) { - opacity: 0.5; - background-color: var(--neutral-dark-3); -} - -.scrollbar :global(.ps__rail-y) { - margin-top: var(--unit); - margin-bottom: var(--unit); - transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out; -} - -/* Cancel the default of perfect scroll, which always shows the scrollbar when hovering over container. Our desired behavior is to -only show the scrollbar for ~1s, then fade away if not scrolling. */ -:global(.ps:hover).scrollbar > :global(.ps__rail-y), -:global(.ps:hover).scrollbar > :global(.ps__rail-x) { - opacity: 0; -} - -:global(.scrollbar--hovered-visible).scrollbar:not(:global(.ps--scrolling-y)) - > :global(.ps__rail-y), -:global(.scrollbar--hovered-visible).scrollbar:not(:global(.ps--scrolling-x)) - > :global(.ps__rail-x) { - opacity: 0.6; -} - -:global(.ps--focus).scrollbar > :global(.ps__rail-x), -:global(.ps--focus).scrollbar > :global(.ps__rail-y), -:global(.ps--scrolling-x).scrollbar > :global(.ps__rail-x), -:global(.ps--scrolling-y).scrollbar > :global(.ps__rail-y) { - opacity: 0.6 !important; -} - -.scrollbar > :global(.ps__rail-y):hover, -.scrollbar > :global(.ps__rail-x):hover { - opacity: 0.9 !important; -} diff --git a/packages/stems/src/components/Scrollbar/Scrollbar.stories.tsx b/packages/stems/src/components/Scrollbar/Scrollbar.stories.tsx deleted file mode 100644 index 340dbc7f80e..00000000000 --- a/packages/stems/src/components/Scrollbar/Scrollbar.stories.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Story } from '@storybook/react' - -import { Scrollbar, ScrollbarProps } from '.' - -export default { - component: Scrollbar, - title: 'Components/Scrollbar' -} - -const Template: Story = ({ - children = ( - <> -

    - This is some content in a scrollable container. The surrounding - `Scrollbar` component gives this a custom scrollbar. -

    -

    - `Scrollbar` is meant to be used for small scrolling areas within a - page/view (e.g. a scrolling navigation bar), not the entire page itself. -

    -

    - `Scrollbar` uses{' '} - - react-perfect-scrollbar - {' '} - under the hood. For advanced use cases, refer to the documentation. -

    -

    - This is some content in a scrollable container. The surrounding - `Scrollbar` component gives this a custom scrollbar. -

    -

    - `Scrollbar` is meant to be used for small scrolling areas within a - page/view (e.g. a scrolling navigation bar), not the entire page itself. -

    -

    - `Scrollbar` uses{' '} - - react-perfect-scrollbar - {' '} - under the hood. For advanced use cases, refer to the documentation. -

    - - ), - ...args -}) => { - return ( -
    - {children} -
    - ) -} - -export const Base = Template.bind({}) diff --git a/packages/stems/src/components/Scrollbar/Scrollbar.tsx b/packages/stems/src/components/Scrollbar/Scrollbar.tsx deleted file mode 100644 index f6c43f074cd..00000000000 --- a/packages/stems/src/components/Scrollbar/Scrollbar.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { useEffect, useRef, forwardRef, Ref, useCallback, useId } from 'react' - -import { ResizeObserver } from '@juggle/resize-observer' -import cn from 'classnames' -import PerfectScrollbar from 'react-perfect-scrollbar' -import useMeasure from 'react-use-measure' - -import styles from './Scrollbar.module.css' -import { ScrollbarProps } from './types' - -/** - * @deprecated use `@audius/harmony` Scrollbar instead - */ -export const Scrollbar = forwardRef( - ( - { children, className, id, forward, isHidden, ...props }: ScrollbarProps, - forwardedRef: Ref - ) => { - // Do not remove: - // useMeasure ref is required for infinite scrolling to work - const [ref] = useMeasure({ polyfill: ResizeObserver }) - const timerRef = useRef(null) - const reactId = useId() - const elementId = id || reactId - - useEffect(() => { - return () => { - if (timerRef.current !== null) { - clearTimeout(timerRef.current) - } - } - }, []) - - const hideScrollbar = useCallback(() => { - const element = document.getElementById(elementId) - if (element) { - element.classList.remove('scrollbar--hovered-visible') - } - if (timerRef.current !== null) { - clearTimeout(timerRef.current) - } - }, [elementId, timerRef]) - - const showScrollbar = useCallback(() => { - if (isHidden) return - const element = document.getElementById(elementId) - if (element) { - element.classList.add('scrollbar--hovered-visible') - } - if (timerRef.current !== null) { - clearTimeout(timerRef.current) - } - timerRef.current = setTimeout(() => { - const element = document.getElementById(elementId) - if (element) { - element.classList.remove('scrollbar--hovered-visible') - } - }, 1400) - }, [elementId, timerRef, isHidden]) - - useEffect(() => { - if (isHidden) { - hideScrollbar() - } - }, [isHidden, hideScrollbar]) - - const content = forward ? children :
    {children}
    - - return ( - - {content} - - ) - } -) diff --git a/packages/stems/src/components/Scrollbar/index.ts b/packages/stems/src/components/Scrollbar/index.ts deleted file mode 100644 index 349ec05275e..00000000000 --- a/packages/stems/src/components/Scrollbar/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Scrollbar } from './Scrollbar' -export { ScrollbarProps } from './types' diff --git a/packages/stems/src/components/Scrollbar/types.ts b/packages/stems/src/components/Scrollbar/types.ts deleted file mode 100644 index 7f8a30223df..00000000000 --- a/packages/stems/src/components/Scrollbar/types.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { ScrollBarProps as PerfectScrollbarProps } from 'react-perfect-scrollbar' - -export type ScrollbarProps = PerfectScrollbarProps & { - forward?: boolean - /** - * Whether or not to hide the scrollbars. Useful if you are rendering - * a scroll bar inside something that is changing sizes and you need - * to wait for the size to be stable before showing scrollbars. - */ - isHidden?: boolean -} diff --git a/packages/stems/src/components/Switch/Switch.module.css b/packages/stems/src/components/Switch/Switch.module.css deleted file mode 100644 index 4a4acaf63c1..00000000000 --- a/packages/stems/src/components/Switch/Switch.module.css +++ /dev/null @@ -1,63 +0,0 @@ -.root { - opacity: 1; - position: relative; - cursor: pointer; -} - -.input { - cursor: inherit; - position: absolute; - opacity: 0; - height: 100%; - width: 100%; - top: 0; - left: 0; - margin: 0; - padding: 0; - z-index: 1; -} - -.switchTrack { - display: inline-flex; - align-items: center; - justify-content: space-between; - width: 48px; - height: 26px; - border-radius: 99px; - position: relative; - transition: background-color 0.2s; - background-color: var(--neutral-light-6); - box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1); -} - -.switchThumb { - content: ''; - position: absolute; - top: 2px; - left: 2px; - height: 22px; - width: 22px; - border-radius: 50%; - transition: 0.2s; - background: var(--neutral-light-9); - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25); -} - -.input:checked + .switchTrack { - background-color: var(--secondary); -} - -.input:checked + .switchTrack .switchThumb { - left: calc(100% - 2px); - transform: translateX(-100%); -} - -.switchTrack:active .switchThumb { - width: 20px; -} - -.disabled { - opacity: 0.5; - cursor: auto; - pointer-events: none; -} diff --git a/packages/stems/src/components/Switch/Switch.tsx b/packages/stems/src/components/Switch/Switch.tsx deleted file mode 100644 index 4b1579ee3b2..00000000000 --- a/packages/stems/src/components/Switch/Switch.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentProps } from 'react' - -import cn from 'classnames' - -import styles from './Switch.module.css' - -export type SwitchProps = ComponentProps<'input'> - -/** - * @deprecated use @audius/harmony Switch instead - */ -export const Switch = (props: SwitchProps) => { - const { disabled } = props - return ( - - - - - - - ) -} diff --git a/packages/stems/src/components/Switch/index.ts b/packages/stems/src/components/Switch/index.ts deleted file mode 100644 index 865ddbb0581..00000000000 --- a/packages/stems/src/components/Switch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Switch' diff --git a/packages/stems/src/components/Tag/Tag.module.css b/packages/stems/src/components/Tag/Tag.module.css deleted file mode 100644 index 6698ffaf11d..00000000000 --- a/packages/stems/src/components/Tag/Tag.module.css +++ /dev/null @@ -1,37 +0,0 @@ -.tag { - padding: 5px 8px; - height: 17px; - border-radius: 2px; - line-height: normal; - background-color: var(--neutral-light-4); - user-select: none; - text-align: center; - white-space: nowrap; - overflow: hidden; -} -.tag.clickable { - cursor: pointer; - transition: all ease-in-out 0.04s; -} -.tag.clickable:hover { - background-color: var(--secondary); - color: var(--white); -} -.tag.clickable:active { - transform: scale(0.96); -} - -.textLabel { - color: var(--white); - font-size: var(--font-2xs); - font-weight: var(--font-bold); - letter-spacing: 0.75px; - line-height: 8px; - - vertical-align: top; - text-transform: uppercase; - white-space: nowrap; - word-break: keep-all; - text-decoration: none; - /*text-shadow: 0 1px 2px rgba(39,31,71,0.25);*/ -} diff --git a/packages/stems/src/components/Tag/Tag.stories.tsx b/packages/stems/src/components/Tag/Tag.stories.tsx deleted file mode 100644 index 235ef6e67e6..00000000000 --- a/packages/stems/src/components/Tag/Tag.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Story } from '@storybook/react' - -import { Tag, type TagProps } from './Tag' - -export default { - component: Tag, - title: 'Components/Tag' -} - -const Template: Story> = (args) => { - return -} - -export const Base = Template.bind({}) - -Base.args = { - tag: 'example tag' -} diff --git a/packages/stems/src/components/Tag/Tag.tsx b/packages/stems/src/components/Tag/Tag.tsx deleted file mode 100644 index d9ecae75c0f..00000000000 --- a/packages/stems/src/components/Tag/Tag.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { ComponentProps, ElementType } from 'react' - -import cn from 'classnames' - -import styles from './Tag.module.css' - -const defaultElement = 'span' - -type TagOwnProps = { - tag: string - as?: TagElementType -} - -export type TagProps = - TagOwnProps & - Omit, keyof TagOwnProps> - -/** - * @deprecated use `@audius/harmony` tag instead - */ -export const Tag = ( - props: TagProps -) => { - const { tag, as: Component = defaultElement, className, ...other } = props - - const style = { - [styles.clickable]: !!other.onClick - } - - return ( - - {tag} - - ) -} diff --git a/packages/stems/src/components/Tag/index.ts b/packages/stems/src/components/Tag/index.ts deleted file mode 100644 index fd1a1e7ebd9..00000000000 --- a/packages/stems/src/components/Tag/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Tag' diff --git a/packages/stems/src/components/TokenValueSlider/TokenValueSlider.module.css b/packages/stems/src/components/TokenValueSlider/TokenValueSlider.module.css deleted file mode 100644 index e4139f4a6d8..00000000000 --- a/packages/stems/src/components/TokenValueSlider/TokenValueSlider.module.css +++ /dev/null @@ -1,81 +0,0 @@ -:root, root { - --stems-token-value-slider-background: linear-gradient(315deg, #7652CC 2.04%, #B05CE6 100%); - --stems-token-value-slider-background-error: linear-gradient(180deg, #F15064 0%, #C03A4B 100%); -} - -.container { - display: inline-flex; - flex-direction: column; - min-width: 576px; - width: 576px; - - /* Text styles */ - font-family: var(--font-family); - font-weight: var(--font-bold); - font-size: var(--font-s); - line-height: 17px; - letter-spacing: 1px; - text-transform: uppercase; - color: #BEC5E0; -} - -.slider { - position: relative; - background: #242438; - box-shadow: 1px -3px 5px rgba(53, 54, 79, 0.25); - border-radius: 22px; - height: 24px; - overflow: hidden; - margin-bottom: 8px; -} - -.newValueSlider { - position: absolute; - background: var(--stems-token-value-slider-background); - height: 100%; - transition: width 0.2s ease-in-out; -} - -.initialValueSlider { - position: absolute; - background: var(--stems-token-value-slider-background); - height: 100%; - transition: width 0.2s ease-in-out; -} - -.invalid { - background: var(--stems-token-value-slider-background-error); - z-index: 1; -} - -.lighter { - opacity: 0.8; -} - -.minMax { - width: 100%; - position: relative; - display: inline-flex; - justify-content: space-between; - margin-bottom: 8px; - color: var(--neutral); -} - -.minLabel { - color: var(--neutral-light-4); - padding-right: 4px; -} - -.maxLabel { - color: var(--neutral-light-4); - padding-left: 4px; -} - -.textLabel { - position: absolute; -} - -.minValue, -.maxValues { - display: inline-flex; -} diff --git a/packages/stems/src/components/TokenValueSlider/TokenValueSlider.tsx b/packages/stems/src/components/TokenValueSlider/TokenValueSlider.tsx deleted file mode 100644 index e8717cfec0e..00000000000 --- a/packages/stems/src/components/TokenValueSlider/TokenValueSlider.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { useState, useRef, useEffect } from 'react' -import * as React from 'react' - -import cn from 'classnames' - -import { getBNPercentage } from 'utils/bnHelpers' - -import styles from './TokenValueSlider.module.css' -import { TokenValueSliderProps } from './types' - -const messages = { - min: 'MIN', - max: 'MAX', - current: 'CURRENT' -} - -export const TokenValueSlider: React.FC = ({ - className, - sliderClassName, - sliderBarClassName, - min, - max, - minSliderWidth, - value, - initialValue, - isIncrease, - minWrapper: MinWrapper, - maxWrapper: MaxWrapper -}: TokenValueSliderProps) => { - const containerRef = useRef(null) - const maxValueRef = useRef(null) - const minValueRef = useRef(null) - - const [initialSliderWidth, setInitialSliderWidth] = useState(0) - const [sliderWidth, setSliderWidth] = useState(0) - useEffect(() => { - if (containerRef.current) { - const percentage = getBNPercentage(value.sub(min), max.sub(min)) - const totalWidth = containerRef.current.offsetWidth - if (value.sub(min).isZero()) { - setSliderWidth(0) - } else { - const newSliderWidth = Math.max(totalWidth * percentage, minSliderWidth) - setSliderWidth(newSliderWidth) - } - } - }, [value, containerRef, max, min, setSliderWidth, minSliderWidth]) - - useEffect(() => { - if (initialValue && !initialSliderWidth && containerRef.current) { - const percentage = getBNPercentage(initialValue.sub(min), max.sub(min)) - const totalWidth = containerRef.current.offsetWidth - const newSliderWidth = Math.max(totalWidth * percentage, minSliderWidth) - setInitialSliderWidth(newSliderWidth) - } - }, [ - initialValue, - containerRef, - minSliderWidth, - max, - min, - initialSliderWidth, - setInitialSliderWidth - ]) - - return ( -
    -
    -
    -
    -
    -
    - {min && ( -
    - {MinWrapper ? ( - - ) : ( - <> - - {isIncrease !== undefined - ? isIncrease - ? messages.current - : messages.min - : messages.min} - - {min.toString()} - - )} -
    - )} - {max && ( -
    - {MaxWrapper ? ( - - ) : ( - <> - {max.toString()} - - {isIncrease !== undefined - ? isIncrease - ? messages.max - : messages.current - : messages.max} - - - )} -
    - )} -
    -
    - ) -} diff --git a/packages/stems/src/components/TokenValueSlider/index.ts b/packages/stems/src/components/TokenValueSlider/index.ts deleted file mode 100644 index a9d7f3ebd3a..00000000000 --- a/packages/stems/src/components/TokenValueSlider/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { TokenValueSlider } from './TokenValueSlider' -export { TokenValueSliderProps } from './types' diff --git a/packages/stems/src/components/TokenValueSlider/types.ts b/packages/stems/src/components/TokenValueSlider/types.ts deleted file mode 100644 index 06735be8dd0..00000000000 --- a/packages/stems/src/components/TokenValueSlider/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import BN from 'bn.js' - -export type TokenValueSliderProps = { - className?: string - sliderClassName?: string - sliderBarClassName?: string - min: BN - max: BN - value: BN - minSliderWidth: number - initialValue?: BN - isIncrease?: boolean - minWrapper?: React.ComponentType<{ value: BN }> - maxWrapper?: React.ComponentType<{ value: BN }> -} diff --git a/packages/stems/src/hooks/useControlled.ts b/packages/stems/src/hooks/useControlled.ts deleted file mode 100644 index 377afc3413b..00000000000 --- a/packages/stems/src/hooks/useControlled.ts +++ /dev/null @@ -1,124 +0,0 @@ -/** -The MIT License (MIT) - -Copyright (c) 2014 Call-Em-All - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. - */ - -// Adapted from Material UI: https://github.com/mui/material-ui/blob/a31d9166a46b41b63b1932252e8eb32a3f4dfb2b/packages/mui-utils/src/useControlled.js - -import { useRef, useState, useCallback, useEffect } from 'react' - -const switchControlledError = ({ - isControlled, - stateName, - componentName -}: { - isControlled: boolean - stateName: string - componentName: string -}) => { - return [ - `Audius Stems: A component is changing an ${ - isControlled ? '' : 'un' - }controlled ${stateName} state of ${componentName} to be ${ - isControlled ? 'un' : '' - }controlled.`, - 'This is likely caused by the value changing from undefined to a defined value, which should not happen.', - 'Decide between using a controlled or uncontrolled input element for the lifetime of the component.', - "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", - 'More info: https://fb.me/react-controlled-components' - ].join('\n') -} - -const defaultChangedError = ({ - stateName, - componentName -}: { - stateName: string - componentName: string -}) => { - return ( - `Audius Stems: A component is changing the default ${stateName} state of an uncontrolled ${componentName} after being initialized. ` + - `To suppress this warning opt to use a controlled ${componentName}.` - ) -} - -export const useControlled = ({ - controlledProp, - defaultValue, - stateName = 'value', - componentName -}: { - controlledProp: T - defaultValue: T - stateName?: string - componentName: string -}): [T, (newValue: T) => void] => { - // Save a ref of the initial isControlled state - const { current: isControlled } = useRef(controlledProp !== undefined) - - // Local state for use with uncontrolled components - const [valueState, setValueState] = useState(defaultValue) - - // If the component is controlled, use the controlled prop rather than the local state - const value = isControlled ? controlledProp : valueState - - // If the component is uncontrolled, this callback can be used to set the value - const setValueIfUncontrolled = useCallback( - (newValue: T) => { - if (!isControlled) { - setValueState(newValue) - } - }, - [isControlled] - ) - - // Note each hook in this block has disabled react-hooks/rules-of-hooks - // The code won't fork here at runtime, you'll either be in production or you won't. - /* eslint-disable react-hooks/rules-of-hooks */ - if (process.env.NODE_ENV !== 'production') { - // Check if the component is switching from controlled to uncontrolled or vice-versa - useEffect(() => { - if (isControlled !== (controlledProp !== undefined)) { - console.error( - switchControlledError({ isControlled, stateName, componentName }) - ) - } - }, [componentName, controlledProp, isControlled, stateName]) - - // Check if the default value of an uncontrolled prop is being changed after initialization - const { current: initialDefaultValue } = useRef(defaultValue) - useEffect(() => { - if (!isControlled && defaultValue !== initialDefaultValue) { - console.error(defaultChangedError({ stateName, componentName })) - } - }, [ - componentName, - defaultValue, - initialDefaultValue, - isControlled, - stateName - ]) - } - /* eslint-enable react-hooks/rules-of-hooks */ - - return [value, setValueIfUncontrolled] -} diff --git a/packages/stems/src/hooks/useMediaQueryListener.ts b/packages/stems/src/hooks/useMediaQueryListener.ts deleted file mode 100644 index 5dc3cefa589..00000000000 --- a/packages/stems/src/hooks/useMediaQueryListener.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { useEffect, useState, useCallback } from 'react' - -export const useMediaQueryListener = (mediaQuery: string) => { - // Stores whether there is a match - const [isMatch, setIsMatch] = useState(false) - - // Updates whether there is a match or not - // when the media query status changes - const listener = useCallback( - (matcher: any) => setIsMatch(matcher.matches), - [setIsMatch] - ) - - // If mediaQuery is set, set up a media query listener - useEffect(() => { - if (mediaQuery) { - const matcher = window.matchMedia(mediaQuery) - listener(matcher) - matcher.addListener(listener) - return () => matcher.removeListener(listener) - } - return () => {} - }, [mediaQuery, listener]) - - return { isMatch } -} diff --git a/packages/stems/src/index.ts b/packages/stems/src/index.ts index d2d032fb9f8..644ed7d4509 100644 --- a/packages/stems/src/index.ts +++ b/packages/stems/src/index.ts @@ -5,13 +5,3 @@ import './assets/styles/animations.css' import './assets/styles/shadows.css' import './assets/styles/transforms.css' import './assets/styles/layers.css' - -export * from './styles/colors' -export * from './utils/styles' - -export { Scrubber } from '../../harmony/src/components/scrubber' - -export { - TokenValueSlider, - TokenValueSliderProps -} from './components/TokenValueSlider' diff --git a/packages/stems/src/styles/colors.ts b/packages/stems/src/styles/colors.ts deleted file mode 100644 index 1bf7bcc8769..00000000000 --- a/packages/stems/src/styles/colors.ts +++ /dev/null @@ -1,43 +0,0 @@ -export type ColorValue = - | 'background' - | 'primary' - | 'primaryDark1' - | 'primaryDark2' - | 'primaryLight1' - | 'primaryLight2' - | 'secondary' - | 'secondaryDark1' - | 'secondaryDark2' - | 'secondaryLight1' - | 'secondaryLight2' - | 'primarySecondaryText' - | 'neutral' - | 'neutralDark1' - | 'neutralDark2' - | 'neutralDark3' - | 'neutralLight1' - | 'neutralLight2' - | 'neutralLight3' - | 'neutralLight4' - | 'neutralLight5' - | 'neutralLight6' - | 'neutralLight7' - | 'neutralLight8' - | 'neutralLight9' - | 'neutralLight10' - | 'white' - | 'accentRed' - | 'accentRedDark1' - | 'accentRedLight1' - | 'accentGreen' - | 'accentGreenDark1' - | 'accentGreenLight1' - | 'accentOrange' - | 'accentOrangeDark1' - | 'accentOrangeLight1' - | 'accentPurple' - | 'accentBlue' - | 'specialLightGreen' - | 'darkmodeStaticWhite' - | 'staticWhite' - | 'staticNeutral' diff --git a/packages/stems/src/styles/types.ts b/packages/stems/src/styles/types.ts deleted file mode 100644 index a22e9b6b299..00000000000 --- a/packages/stems/src/styles/types.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { CSSProperties } from 'react' - -/** Type override to allow usage of custom properties in the - * `style' prop. We're using this instead of augmenting the csstype module - * because that currently breaks types for some third-party modules. Note that - * you will have to cast it back to CSSProperties in most cases. - * Usage: - * ``` - * const style: CSSCustomProperties = { - * width: '10px', - * '--custom-prop': 'var(--custom-var-value) - * } - * - * return