diff --git a/packages/mobile/src/store/offline-downloads/sagas/migrateOfflineDataPathSaga.ts b/packages/mobile/src/store/offline-downloads/sagas/migrateOfflineDataPathSaga.ts index 8237876e0bd..a9486f6c02d 100644 --- a/packages/mobile/src/store/offline-downloads/sagas/migrateOfflineDataPathSaga.ts +++ b/packages/mobile/src/store/offline-downloads/sagas/migrateOfflineDataPathSaga.ts @@ -1,8 +1,8 @@ import path from 'path' import { difference } from 'lodash' -import RNFS from 'react-native-fs' import ReactNativeBlobUtil from 'react-native-blob-util' +import RNFS from 'react-native-fs' import { call, put, select } from 'typed-redux-saga' import { make, track } from 'app/services/analytics' diff --git a/packages/mobile/src/store/offline-downloads/sagas/offlineQueueSagas/workers/downloadFile.ts b/packages/mobile/src/store/offline-downloads/sagas/offlineQueueSagas/workers/downloadFile.ts index 5c9e306951b..65dc74823d0 100644 --- a/packages/mobile/src/store/offline-downloads/sagas/offlineQueueSagas/workers/downloadFile.ts +++ b/packages/mobile/src/store/offline-downloads/sagas/offlineQueueSagas/workers/downloadFile.ts @@ -1,5 +1,5 @@ -import { CANCEL } from 'redux-saga' import ReactNativeBlobUtil from 'react-native-blob-util' +import { CANCEL } from 'redux-saga' // Downloads file from uri to destination, with saga cancellation export function downloadFile(uri: string, destination: string) { diff --git a/packages/mobile/src/store/offline-downloads/sagas/watchRemoveOfflineItems.ts b/packages/mobile/src/store/offline-downloads/sagas/watchRemoveOfflineItems.ts index 7227d0ed2dc..a7b19f74091 100644 --- a/packages/mobile/src/store/offline-downloads/sagas/watchRemoveOfflineItems.ts +++ b/packages/mobile/src/store/offline-downloads/sagas/watchRemoveOfflineItems.ts @@ -44,7 +44,10 @@ function* removeItemFromDisk( getLocalCollectionDir, item.id.toString() ) - const exists = yield* call(ReactNativeBlobUtil.fs.exists, collectionDirectory) + const exists = yield* call( + ReactNativeBlobUtil.fs.exists, + collectionDirectory + ) if (exists) { yield* call(ReactNativeBlobUtil.fs.unlink, collectionDirectory) } diff --git a/packages/stems/src/components/HarmonyButton/BaseButton.module.css b/packages/stems/src/components/HarmonyButton/BaseButton.module.css deleted file mode 100644 index facafce723d..00000000000 --- a/packages/stems/src/components/HarmonyButton/BaseButton.module.css +++ /dev/null @@ -1,43 +0,0 @@ -/* ===Base Styles=== */ -.button { - align-items: center; - box-sizing: border-box; - cursor: pointer; - display: inline-flex; - flex-shrink: 0; - justify-content: center; - overflow: hidden; - position: relative; - text-align: center; - user-select: none; - white-space: nowrap; - transition: all var(--hover); -} - -.button:focus { - outline: none !important; -} - -/* Only add hover styles on devices which support it */ -@media (hover: hover) { - .button:not(.disabled):hover { - transform: scale(1.04); - } -} - -.button:not(.disabled):active { - transition: all var(--press); - transform: scale(0.98); -} - -.button.disabled { - pointer-events: none; -} - -.icon path { - fill: currentColor; -} - -.fullWidth { - width: 100%; -} diff --git a/packages/stems/src/components/HarmonyButton/BaseButton.tsx b/packages/stems/src/components/HarmonyButton/BaseButton.tsx deleted file mode 100644 index fa53313c76a..00000000000 --- a/packages/stems/src/components/HarmonyButton/BaseButton.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { forwardRef } from 'react' - -import cn from 'classnames' - -import { useMediaQueryListener } from 'hooks/useMediaQueryListener' - -import baseStyles from './BaseButton.module.css' -import { BaseButtonProps } from './types' - -/** - * Base component for Harmony buttons. Not intended to be used directly. Use - * `HarmonyButton` or `HarmonyPlainButton`. - */ -export const BaseButton = forwardRef( - function BaseButton(props, ref) { - const { - text, - iconLeft: LeftIconComponent, - iconRight: RightIconComponent, - disabled, - widthToHideText, - minWidth, - className, - 'aria-label': ariaLabelProp, - fullWidth, - styles, - style, - ...other - } = props - const { isMatch: textIsHidden } = useMediaQueryListener( - `(max-width: ${widthToHideText}px)` - ) - - const isTextVisible = !!text && !textIsHidden - - 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 - } - - return ( - - ) - } -) diff --git a/packages/stems/src/components/HarmonyButton/HarmonyButton.module.css b/packages/stems/src/components/HarmonyButton/HarmonyButton.module.css deleted file mode 100644 index cb48180a30e..00000000000 --- a/packages/stems/src/components/HarmonyButton/HarmonyButton.module.css +++ /dev/null @@ -1,196 +0,0 @@ -/* ===Base Styles=== */ -.button { - --button-color: var(--primary); - --text-color: var(--static-white); - --overlay-color: transparent; - --overlay-opacity: 0; - border: 1px solid var(--button-color); - border-radius: var(--unit-1); - color: var(--text-color); -} - -/* Overlay used for hover/press styling */ -.button::before { - content: ''; - position: absolute; - display: block; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--overlay-color, transparent); - opacity: var(--overlay-opacity, 0); - pointer-events: none; -} - -.icon, -.text { - z-index: 1; -} - -/* === Sizes === */ - -/* Small */ -.buttonSmall { - gap: var(--unit-1); - height: var(--unit-8); - padding: var(--unit-2) var(--unit-3); -} - -.iconSmall { - width: var(--unit-4); - height: var(--unit-4); -} - -.textSmall { - font-size: var(--font-s); - font-weight: var(--font-bold); - line-height: var(--unit-4); - text-transform: capitalize; -} - -/* Default */ -.buttonDefault { - gap: var(--unit-2); - height: var(--unit-12); - padding: var(--unit-3) var(--unit-6); -} - -.iconDefault { - width: var(--unit-5); - height: var(--unit-5); -} - -.textDefault { - font-size: var(--font-l); - font-weight: var(--font-bold); - line-height: calc(4.5 * var(--unit)); - text-transform: capitalize; -} - -/* Large */ -.buttonLarge { - gap: var(--unit-2); - height: var(--unit-15); - padding: var(--unit-5) var(--unit-6); -} - -.iconLarge { - width: var(--unit-6); - height: var(--unit-6); -} - -.textLarge { - font-size: var(--font-xl); - font-weight: var(--font-bold); - line-height: var(--unit-5); - letter-spacing: 0.25px; - text-transform: uppercase; -} - -/* === Color Variants === */ - -/* Primary */ -.primary { - --text-color: var(--static-white); - --button-color: var(--primary); - background: var(--button-color); - box-shadow: var(--shadow-near); -} - -.primary:hover { - --overlay-color: var(--static-white); - --overlay-opacity: 0.1; - box-shadow: var(--shadow-mid); -} - -.primary:active { - --overlay-color: var(--static-black); - --overlay-opacity: 0.2; - box-shadow: none; -} - -/* Secondary */ -.secondary { - --button-color: var(--neutral-light-5); - --text-color: var(--text-default); - background: transparent; -} - -.secondary:hover { - --button-color: var(--primary); - --text-color: var(--primary); -} -.secondary:active { - --button-color: var(--primary-dark-2); - --text-color: var(--primary-dark-2); -} - -/* Tertiary */ -.tertiary { - --button-color: var(--border-strong); - --text-color: var(--secondary); - background: var(--static-white); -} -.tertiary:hover { - --text-color: var(--secondary-light-1); - box-shadow: var(--shadow-mid); -} -.tertiary:active { - --overlay-color: var(--static-black); - --overlay-opacity: 0.2; -} - -/* Destructive */ -.destructive { - --button-color: var(--accent-red); - --text-color: var(--accent-red); - background: transparent; -} -.destructive:hover { - --text-color: var(--static-white); - background: var(--button-color); -} -.destructive:active { - --button-color: var(--accent-red-dark-1); - --text-color: var(--static-white); - background: var(--button-color); -} - -/* Ghost */ -.ghost { - --button-color: var(--neutral-light-5); - --text-color: var(--text-default); - background: transparent; -} -.ghost:hover { - --button-color: var(--neutral); -} -.ghost:active { - --button-color: var(--neutral-light-5); - background: var(--background-surface-2); -} - -/* Disabled states */ -.primary.disabled { - --button-color: var(--neutral-light-7); - --text-color: var(--background-white); -} - -/* Plain */ -.plain { - --button-color: transparent; - --text-color: var(--neutral); - background: transparent; - border: none; - border-radius: 0; - padding: 0; - height: 100%; -} - -.secondary.disabled, -.tertiary.disabled, -.destructive.disabled, -.ghost.disabled { - opacity: 0.45; -} diff --git a/packages/stems/src/components/HarmonyButton/HarmonyButton.stories.tsx b/packages/stems/src/components/HarmonyButton/HarmonyButton.stories.tsx deleted file mode 100644 index 29bbcba50ad..00000000000 --- a/packages/stems/src/components/HarmonyButton/HarmonyButton.stories.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { Story } from '@storybook/react' - -import * as Icons from 'components/Icons' - -import { HarmonyButton } from './HarmonyButton' -import { - HarmonyButtonProps, - HarmonyButtonSize, - HarmonyButtonType -} from './types' - -export default { - component: HarmonyButton, - title: 'Components/HarmonyButton', - argTypes: { onClick: { action: 'clicked' } } -} - -const baseProps: HarmonyButtonProps = { - iconLeft: Icons.IconCampfire, - iconRight: Icons.IconCampfire, - text: 'Click Me' -} - -const Template: Story = (args) => ( -
-
- - - -
-
- - - -
-
-) - -// Primary -export const Primary = Template.bind({}) - -// Primary w/ color -export const PrimaryWithColor = Template.bind({}) -PrimaryWithColor.args = { color: 'accentBlue' } - -// Secondary -export const Secondary = Template.bind({}) -Secondary.args = { variant: HarmonyButtonType.SECONDARY } - -// Tertiary -export const Tertiary = Template.bind({}) -Tertiary.args = { variant: HarmonyButtonType.TERTIARY } - -// Destructive -export const Destructive = Template.bind({}) -Destructive.args = { variant: HarmonyButtonType.DESTRUCTIVE } - -// Ghost -export const Ghost = Template.bind({}) -Ghost.args = { variant: HarmonyButtonType.GHOST } diff --git a/packages/stems/src/components/HarmonyButton/HarmonyButton.tsx b/packages/stems/src/components/HarmonyButton/HarmonyButton.tsx deleted file mode 100644 index d441f07a2ab..00000000000 --- a/packages/stems/src/components/HarmonyButton/HarmonyButton.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { forwardRef } from 'react' - -import cn from 'classnames' - -import { CSSCustomProperties } from 'styles/types' -import { toCSSVariableName } from 'utils/styles' - -import { BaseButton } from './BaseButton' -import styles from './HarmonyButton.module.css' -import { - HarmonyButtonProps, - HarmonyButtonSize, - HarmonyButtonType -} from './types' - -const SIZE_STYLE_MAP: { [k in HarmonyButtonSize]: [string, string, string] } = { - [HarmonyButtonSize.SMALL]: [ - styles.buttonSmall, - styles.iconSmall, - styles.textSmall - ], - [HarmonyButtonSize.DEFAULT]: [ - styles.buttonDefault, - styles.iconDefault, - styles.textDefault - ], - [HarmonyButtonSize.LARGE]: [ - styles.buttonLarge, - styles.iconLarge, - styles.textLarge - ] -} - -const TYPE_STYLE_MAP: { [k in HarmonyButtonType]: string } = { - [HarmonyButtonType.PRIMARY]: styles.primary, - [HarmonyButtonType.SECONDARY]: styles.secondary, - [HarmonyButtonType.TERTIARY]: styles.tertiary, - [HarmonyButtonType.DESTRUCTIVE]: styles.destructive, - [HarmonyButtonType.GHOST]: styles.ghost -} - -/** - * @deprecated - * Deprecated: (use `Button` from \@audius/harmony) - * - * A common Button component. Includes a few variants and options to - * include and position icons. - */ -export const HarmonyButton = forwardRef( - function HarmonyButton(props, ref) { - const { - color, - variant = HarmonyButtonType.PRIMARY, - size = HarmonyButtonSize.DEFAULT, - disabled, - ...baseProps - } = props - - const style: CSSCustomProperties = { - '--button-color': - !disabled && color ? `var(${toCSSVariableName(color)})` : undefined - } - - const [buttonSizeClass, iconSizeClass, textSizeClass] = SIZE_STYLE_MAP[size] - - return ( - - ) - } -) diff --git a/packages/stems/src/components/HarmonyButton/HarmonyPlainButton.module.css b/packages/stems/src/components/HarmonyButton/HarmonyPlainButton.module.css deleted file mode 100644 index 62dc1554b94..00000000000 --- a/packages/stems/src/components/HarmonyButton/HarmonyPlainButton.module.css +++ /dev/null @@ -1,90 +0,0 @@ -/* ===Base Styles=== */ -.button { - --text-color: var(--text-default); - background: transparent; - border: none; - color: var(--text-color); -} - -/* === Sizes === */ - -/* Default */ -.buttonDefault { - gap: var(--unit-1); - height: var(--unit-4); -} - -.iconDefault { - width: var(--unit-4); - height: var(--unit-4); -} - -.textDefault { - font-size: var(--font-s); - font-weight: var(--font-bold); - line-height: var(--unit-4); -} - -/* Large */ -.buttonLarge { - gap: var(--unit-2); - height: var(--unit-5); -} - -.iconLarge { - width: var(--unit-5); - height: var(--unit-5); -} - -.textLarge { - font-size: var(--font-l); - font-weight: var(--font-bold); - line-height: calc(4.5 * var(--unit-5)); -} - -/* === Color Variants === */ - -/* Default */ -.default { - --text-color: var(--text-default); -} - -.default:hover { - --text-color: var(--secondary); -} - -.default:active { - --text-color: var(--secondary-dark-2) -} - -/* Subdued */ -.subdued { - --text-color: var(--text-subdued); -} - -.subdued:hover { - --text-color: var(--secondary); -} -.subdued:active { - --text-color: var(--secondary-dark-2); -} - -/* Inverted */ -.inverted { - --text-color: var(--static-white); -} -.inverted:hover { - opacity: 0.8; -} -.inverted:active { - opacity: 0.5; -} - -/* Disabled states */ -.disabled { - opacity: 0.2; -} - -.subdued.disabled { - --text-color: var(--text-default); -} \ No newline at end of file diff --git a/packages/stems/src/components/HarmonyButton/HarmonyPlainButton.stories.tsx b/packages/stems/src/components/HarmonyButton/HarmonyPlainButton.stories.tsx deleted file mode 100644 index e97cb22fa87..00000000000 --- a/packages/stems/src/components/HarmonyButton/HarmonyPlainButton.stories.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { Story } from '@storybook/react' - -import * as Icons from 'components/Icons' - -import { HarmonyPlainButton } from './HarmonyPlainButton' -import { - HarmonyPlainButtonProps, - HarmonyPlainButtonSize, - HarmonyPlainButtonType -} from './types' - -export default { - component: HarmonyPlainButton, - title: 'Components/HarmonyPlainButton', - argTypes: { onClick: { action: 'clicked' } } -} - -const baseProps: HarmonyPlainButtonProps = { - iconLeft: Icons.IconCampfire, - iconRight: Icons.IconCampfire, - text: 'Click Me' -} - -type StoryArgs = { - props: Partial - dark?: boolean -} - -const Template: Story = ({ dark = false, props }) => ( -
-
- - -
-
- - -
-
-) - -// Default -export const Default = Template.bind({}) - -// Subdued -export const Subdued = Template.bind({}) -Subdued.args = { props: { variant: HarmonyPlainButtonType.SUBDUED } } - -// Inverted -export const Inverted = Template.bind({}) -Inverted.args = { - dark: true, - props: { variant: HarmonyPlainButtonType.INVERTED } -} diff --git a/packages/stems/src/components/HarmonyButton/HarmonyPlainButton.tsx b/packages/stems/src/components/HarmonyButton/HarmonyPlainButton.tsx deleted file mode 100644 index bc8ccb5a4d0..00000000000 --- a/packages/stems/src/components/HarmonyButton/HarmonyPlainButton.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { forwardRef } from 'react' - -import cn from 'classnames' - -import { BaseButton } from './BaseButton' -import styles from './HarmonyPlainButton.module.css' -import { - HarmonyPlainButtonProps, - HarmonyPlainButtonSize, - HarmonyPlainButtonType -} from './types' - -const SIZE_STYLE_MAP: { - [k in HarmonyPlainButtonSize]: [string, string, string] -} = { - [HarmonyPlainButtonSize.DEFAULT]: [ - styles.buttonDefault, - styles.iconDefault, - styles.textDefault - ], - [HarmonyPlainButtonSize.LARGE]: [ - styles.buttonLarge, - styles.iconLarge, - styles.textLarge - ] -} - -const TYPE_STYLE_MAP: { [k in HarmonyPlainButtonType]: string } = { - [HarmonyPlainButtonType.DEFAULT]: styles.default, - [HarmonyPlainButtonType.SUBDUED]: styles.subdued, - [HarmonyPlainButtonType.INVERTED]: styles.inverted -} - -/** - * A plain Button component (no border/background). Includes a few variants and options to - * include and position icons. - */ -export const HarmonyPlainButton = forwardRef< - HTMLButtonElement, - HarmonyPlainButtonProps ->(function HarmonyPlainButton(props, ref) { - const { - variant = HarmonyPlainButtonType.DEFAULT, - size = HarmonyPlainButtonSize.DEFAULT, - disabled, - ...baseProps - } = props - - const [buttonSizeClass, iconSizeClass, textSizeClass] = SIZE_STYLE_MAP[size] - - return ( - - ) -}) diff --git a/packages/stems/src/components/HarmonyButton/index.ts b/packages/stems/src/components/HarmonyButton/index.ts deleted file mode 100644 index 8fa82d0616d..00000000000 --- a/packages/stems/src/components/HarmonyButton/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { HarmonyButton } from './HarmonyButton' -export { HarmonyPlainButton } from './HarmonyPlainButton' -export { - HarmonyButtonProps, - HarmonyButtonType, - HarmonyButtonSize, - HarmonyPlainButtonProps, - HarmonyPlainButtonSize, - HarmonyPlainButtonType -} from './types' diff --git a/packages/stems/src/components/HarmonyButton/types.ts b/packages/stems/src/components/HarmonyButton/types.ts deleted file mode 100644 index 6aed52aee5e..00000000000 --- a/packages/stems/src/components/HarmonyButton/types.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { ReactNode } from 'react' - -import { IconComponent } from 'components/Icons/types' -import { ColorValue } from 'styles/colors' -import { BaseButtonProps as ButtonProps } from 'utils/types' - -export enum HarmonyButtonType { - PRIMARY = 'primary', - SECONDARY = 'secondary', - TERTIARY = 'tertiary', - DESTRUCTIVE = 'destructive', - GHOST = 'ghost' -} - -export enum HarmonyButtonSize { - SMALL = 'small', - DEFAULT = 'default', - LARGE = 'large' -} - -type BaseButtonStyles = { - button: string - text: string - icon: string -} - -export type BaseButtonProps = { - /** - * The text of the button - */ - text: ReactNode - - /** - * Optional icon element to include on the left side of the button - */ - iconLeft?: IconComponent - - /** - * Optional icon element to include on the right side of the button - */ - iconRight?: IconComponent - - /** - * 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 - - /** - * Internal styling used by derived button components - */ - styles: BaseButtonStyles -} & ButtonProps - -export type HarmonyButtonProps = { - /** - * Override the color of the button, only valid for the `PRIMARY` variant - */ - color?: ColorValue - - /** - * The type of the button - */ - variant?: HarmonyButtonType - - /** - * The button size - */ - size?: HarmonyButtonSize -} & Omit - -export enum HarmonyPlainButtonType { - DEFAULT = 'default', - SUBDUED = 'subdued', - INVERTED = 'inverted' -} - -export enum HarmonyPlainButtonSize { - DEFAULT = 'default', - LARGE = 'large' -} - -export type HarmonyPlainButtonProps = { - /** - * The type of the button - */ - variant?: HarmonyPlainButtonType - - /** - * The button size - */ - size?: HarmonyPlainButtonSize -} & Omit diff --git a/packages/stems/src/index.ts b/packages/stems/src/index.ts index 7877ce05f23..f737afc9c12 100644 --- a/packages/stems/src/index.ts +++ b/packages/stems/src/index.ts @@ -17,7 +17,6 @@ export { Type as ButtonType, Size as ButtonSize } from './components/Button' -export * from './components/HarmonyButton' export { IconButton, IconButtonProps, diff --git a/packages/web/src/components/back-button/BackButton.jsx b/packages/web/src/components/back-button/BackButton.jsx deleted file mode 100644 index 9df56b84e1c..00000000000 --- a/packages/web/src/components/back-button/BackButton.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import { IconCaretLeft as IconArrow } from '@audius/harmony' -import { HarmonyPlainButton, HarmonyPlainButtonType } from '@audius/stems' -import PropTypes from 'prop-types' - -import styles from './BackButton.module.css' - -const BackButton = (props) => { - return ( - - ) -} - -BackButton.propTypes = { - className: PropTypes.string, - light: PropTypes.bool, - onClickBack: PropTypes.func -} - -export default BackButton diff --git a/packages/web/src/components/back-button/BackButton.module.css b/packages/web/src/components/back-button/BackButton.module.css deleted file mode 100644 index ea8384a67dc..00000000000 --- a/packages/web/src/components/back-button/BackButton.module.css +++ /dev/null @@ -1,37 +0,0 @@ -.backButton { - height: 24px; - width: 24px; - padding: 0; - margin-right: var(--unit-4); - display: flex; - align-items: center; - justify-content: center; - transition: 0.12s ease-out !important; -} - -/* TODO: KJ - Remove this once a Harmony icon button is created and does this */ -.backButton:hover { - transform: scale3d(1.11, 1.11, 1.11) !important; -} - -.backButton:active { - transform: scale3d(0.98, 0.98, 0.98) !important; -} - -.backButton svg { - height: 24px; - width: 24px; -} - -.backButton path { - transition: 0.12s ease-out; - fill: var(--neutral-light-4); -} - -.backButton:hover path { - fill: var(--neutral-light-6); -} - -.backButton:active path { - fill: var(--neutral-dark-2); -} diff --git a/packages/web/src/components/back-button/BackButton.tsx b/packages/web/src/components/back-button/BackButton.tsx new file mode 100644 index 00000000000..ebd86e40cdb --- /dev/null +++ b/packages/web/src/components/back-button/BackButton.tsx @@ -0,0 +1,21 @@ +import { IconCaretLeft, IconButton } from '@audius/harmony' + +const messages = { + goBack: 'Go Back' +} + +type BackButtonProps = { + onClick: () => void +} + +export const BackButton = (props: BackButtonProps) => { + return ( + ({ marginRight: theme.spacing.l })} + icon={IconCaretLeft} + aria-label={messages.goBack} + color='subdued' + /> + ) +} diff --git a/packages/web/src/components/header/desktop/Header.jsx b/packages/web/src/components/header/desktop/Header.jsx index cd0797597e1..0b16ff7d805 100644 --- a/packages/web/src/components/header/desktop/Header.jsx +++ b/packages/web/src/components/header/desktop/Header.jsx @@ -1,7 +1,7 @@ import cn from 'classnames' import PropTypes from 'prop-types' -import BackButton from 'components/back-button/BackButton' +import { BackButton } from 'components/back-button/BackButton' import { HeaderGutter } from 'components/header/desktop/HeaderGutter' import styles from './Header.module.css' @@ -57,12 +57,7 @@ const Header = (props) => { style={overrideWidth !== null ? { maxWidth: overrideWidth } : null} >
- {showBackButton ? ( - - ) : null} + {showBackButton ? : null}

{primary}

{secondary}

diff --git a/packages/web/src/components/header/desktop/Header.module.css b/packages/web/src/components/header/desktop/Header.module.css index 1c705bb3a15..bcff534bbde 100644 --- a/packages/web/src/components/header/desktop/Header.module.css +++ b/packages/web/src/components/header/desktop/Header.module.css @@ -86,10 +86,6 @@ background-image: var(--page-header-gradient); } -.backButton { - margin: auto 24px auto 0; -} - .middleRow { display: flex; width: 100%; diff --git a/packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFooter.tsx b/packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFooter.tsx index 6071ab89937..c0f538f2118 100644 --- a/packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFooter.tsx +++ b/packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFooter.tsx @@ -10,12 +10,7 @@ import { PurchaseContentError } from '@audius/common/store' import { formatPrice } from '@audius/common/utils' -import { Button, IconCaretRight, IconError } from '@audius/harmony' -import { - HarmonyPlainButton, - HarmonyPlainButtonSize, - HarmonyPlainButtonType -} from '@audius/stems' +import { Button, IconCaretRight, IconError, PlainButton } from '@audius/harmony' import { make } from 'common/store/analytics/actions' import { Icon } from 'components/Icon' @@ -102,13 +97,14 @@ export const PurchaseContentFormFooter = ({ shareData={handleTwitterShare} handle={handle} /> - + variant='subdued' + size='large' + > + {messages.viewTrack} + ) } diff --git a/packages/web/src/components/stem-files-modal/StemFilesModal.tsx b/packages/web/src/components/stem-files-modal/StemFilesModal.tsx index 91f188c7f01..bceff00dfb4 100644 --- a/packages/web/src/components/stem-files-modal/StemFilesModal.tsx +++ b/packages/web/src/components/stem-files-modal/StemFilesModal.tsx @@ -6,13 +6,7 @@ import { StemUpload, Download } from '@audius/common/models' -import { - Modal, - Flex, - Text as HarmonyText, - Switch, - IconRemove -} from '@audius/harmony' +import { Modal, Flex, Text, Switch, IconRemove } from '@audius/harmony' import { Button, ButtonSize, ButtonType, IconButton } from '@audius/stems' import cn from 'classnames' @@ -228,24 +222,22 @@ const DownloadSection = ({ - + {messages.allowDownloads} - + - - {messages.allowDownloadsDescription} - + {messages.allowDownloadsDescription}
<> - + {messages.requireFollowToDownload} - + { @@ -67,7 +69,7 @@ type TrackPreviewProps = { className?: string } -export const TrackPreviewNew = (props: TrackPreviewProps) => { +export const TrackPreview = (props: TrackPreviewProps) => { const { isEnabled: isLosslessDownloadsEnabled } = useFeatureFlag( FeatureFlags.LOSSLESS_DOWNLOADS_ENABLED ) @@ -156,14 +158,16 @@ export const TrackPreviewNew = (props: TrackPreviewProps) => { {isLosslessDownloadsEnabled ? ( {isTitleEditable ? ( - setIsEditingTitle(true)} className={styles.editTitleButton} /> ) : null} - { ) : null} {!isLosslessDownloadsEnabled ? ( - diff --git a/packages/web/src/components/withdraw-usdc-modal/components/TransferSuccessful.tsx b/packages/web/src/components/withdraw-usdc-modal/components/TransferSuccessful.tsx index 34bd3f012ee..f4561a4a28f 100644 --- a/packages/web/src/components/withdraw-usdc-modal/components/TransferSuccessful.tsx +++ b/packages/web/src/components/withdraw-usdc-modal/components/TransferSuccessful.tsx @@ -8,12 +8,13 @@ import { formatUSDCWeiToFloorCentsNumber, makeSolanaTransactionLink } from '@audius/common/utils' -import { Button, Flex, IconExternalLink, IconCheck } from '@audius/harmony' import { - HarmonyPlainButton, - HarmonyPlainButtonSize, - HarmonyPlainButtonType -} from '@audius/stems' + Button, + Flex, + IconExternalLink, + IconCheck, + PlainButton +} from '@audius/harmony' import BN from 'bn.js' import { useField } from 'formik' import { useSelector } from 'react-redux' @@ -107,14 +108,15 @@ export const TransferSuccessful = ({ {addressValue} - + variant='subdued' + size='default' + > + {messages.viewOn} +
) : null} diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx index 7e9335c4796..b57d9b4cf75 100644 --- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx +++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx @@ -7,12 +7,13 @@ import { formatNumberCommas, challengeRewardsConfig } from '@audius/common/utils' -import { IconArrowRight, IconCloudUpload, Text } from '@audius/harmony' import { - HarmonyButton, - HarmonyButtonProps, - HarmonyButtonType -} from '@audius/stems' + Button, + ButtonProps, + IconArrowRight, + IconCloudUpload, + Text +} from '@audius/harmony' import cn from 'classnames' import { useSelector } from 'react-redux' @@ -62,15 +63,15 @@ type AudioMatchingRewardsModalContentProps = { } const ctaButtonProps: { - [k in AudioMatchingChallengeName]: Partial + [k in AudioMatchingChallengeName]: Partial } = { [ChallengeName.AudioMatchingBuy]: { iconRight: IconArrowRight, - text: messages.viewPremiumTracks + children: messages.viewPremiumTracks }, [ChallengeName.AudioMatchingSell]: { iconLeft: IconCloudUpload, - text: messages.uploadTrack + children: messages.uploadTrack } } @@ -171,16 +172,17 @@ export const AudioMatchingRewardsModalContent = ({ )} {challenge?.claimableAmount && challenge.claimableAmount > 0 ? ( - + > + {messages.claimAudio(formatNumberCommas(claimableAmount))} + ) : ( - { }, [track.preview, canPlay]) return canPlayPreview ? ( - { togglePreview(track.preview, index) }} - /> + > + {messages.preview} + ) : null } diff --git a/packages/web/src/pages/upload-page/components/TracksPreview.tsx b/packages/web/src/pages/upload-page/components/TracksPreview.tsx index f4957c517a0..782bd840672 100644 --- a/packages/web/src/pages/upload-page/components/TracksPreview.tsx +++ b/packages/web/src/pages/upload-page/components/TracksPreview.tsx @@ -10,7 +10,7 @@ import { import cn from 'classnames' import { Text } from 'components/typography' -import { TrackPreviewNew } from 'components/upload/TrackPreviewNew' +import { TrackPreview } from 'components/upload/TrackPreview' import { TrackForUpload } from '../types' @@ -78,7 +78,7 @@ export const TracksPreview = (props: TracksPreviewProps) => { })} > {tracks.map((track, i) => ( - 1} key={`track-preview-${i}`} diff --git a/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx b/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx index 71e1a217928..dfe035427ed 100644 --- a/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx +++ b/packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx @@ -1,7 +1,6 @@ import { useCallback, useContext, useEffect } from 'react' -import { IconDrag, IconTrash } from '@audius/harmony' -import { HarmonyPlainButton, HarmonyPlainButtonType } from '@audius/stems' +import { IconDrag, IconTrash, PlainButton } from '@audius/harmony' import { useField } from 'formik' import { Icon } from 'components/Icon' @@ -85,14 +84,15 @@ export const CollectionTrackField = (props: CollectionTrackFieldProps) => {
- + > + {messages.delete} +
diff --git a/packages/web/src/pages/upload-page/fields/StemFilesView.tsx b/packages/web/src/pages/upload-page/fields/StemFilesView.tsx index 036cbc7cefa..dba9f296486 100644 --- a/packages/web/src/pages/upload-page/fields/StemFilesView.tsx +++ b/packages/web/src/pages/upload-page/fields/StemFilesView.tsx @@ -17,7 +17,7 @@ import LoadingSpinner from 'components/loading-spinner/LoadingSpinner' import Dropdown from 'components/navigation/Dropdown' import { Text } from 'components/typography' import { Dropzone } from 'components/upload/Dropzone' -import { TrackPreviewNew } from 'components/upload/TrackPreviewNew' +import { TrackPreview } from 'components/upload/TrackPreview' import { audiusSdk } from 'services/audius-sdk' import { stemDropdownRows } from 'utils/stems' @@ -130,7 +130,7 @@ export const StemFilesView = ({ css={{ overflow: 'hidden' }} > {stems.map((stem, i) => ( - 1} diff --git a/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx b/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx index 957b621d5d1..34843c5c115 100644 --- a/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx +++ b/packages/web/src/pages/upload-page/forms/EditTrackForm.tsx @@ -2,8 +2,7 @@ import { useCallback, useContext, useMemo, useState } from 'react' import { isContentFollowGated } from '@audius/common/models' import { FeatureFlags } from '@audius/common/services' -import { IconCaretLeft, IconCaretRight } from '@audius/harmony' -import { HarmonyPlainButton } from '@audius/stems' +import { IconCaretLeft, IconCaretRight, PlainButton } from '@audius/harmony' import cn from 'classnames' import { Form, Formik, FormikProps, useField } from 'formik' import moment from 'moment' @@ -230,20 +229,22 @@ const MultiTrackFooter = () => { const nextDisabled = index === trackMetadatas.length - 1 return (
- - + {messages.prev} + + + > + {messages.next} +
) } diff --git a/packages/web/src/pages/upload-page/pages/FinishPage.tsx b/packages/web/src/pages/upload-page/pages/FinishPage.tsx index de38129b68d..6b58b5a8717 100644 --- a/packages/web/src/pages/upload-page/pages/FinishPage.tsx +++ b/packages/web/src/pages/upload-page/pages/FinishPage.tsx @@ -14,9 +14,10 @@ import { IconArrowRight as IconArrow, IconError, IconCloudUpload as IconUpload, - IconValidationCheck + IconValidationCheck, + PlainButton } from '@audius/harmony' -import { HarmonyPlainButton, ProgressBar } from '@audius/stems' +import { ProgressBar } from '@audius/stems' import { useDispatch, useSelector } from 'react-redux' import { make } from 'common/store/analytics/actions' @@ -261,20 +262,15 @@ export const FinishPage = (props: FinishPageProps) => { {uploadComplete && visitButtonPath ? (
- + + {messages.uploadMore} + - + {visitButtonText}
) : null}