Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

[C-3018][C-2965] fix upload album/playlist description field styling #3959

Merged
merged 5 commits into from
Aug 28, 2023
Merged

[C-3018][C-2965] fix upload album/playlist description field styling #3959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d63a091
fix description field styling
amendelsohn Aug 28, 2023
1f36db1
fix track action button styling
amendelsohn Aug 28, 2023
a1f83ea
migrate to plain button
amendelsohn Aug 28, 2023
4be0080
deprecate plain button; use the plain button props
amendelsohn Aug 28, 2023
8662c67
fix harmony build error
amendelsohn Aug 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/stems/src/components/HarmonyButton/HarmonyButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,7 @@ const TYPE_STYLE_MAP: { [k in HarmonyButtonType]: string } = {
[HarmonyButtonType.SECONDARY]: styles.secondary,
[HarmonyButtonType.TERTIARY]: styles.tertiary,
[HarmonyButtonType.DESTRUCTIVE]: styles.destructive,
[HarmonyButtonType.GHOST]: styles.ghost,
[HarmonyButtonType.PLAIN]: styles.plain
[HarmonyButtonType.GHOST]: styles.ghost
}

/**
Expand Down
3 changes: 1 addition & 2 deletions packages/stems/src/components/HarmonyButton/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ export enum HarmonyButtonType {
SECONDARY = 'secondary',
TERTIARY = 'tertiary',
DESTRUCTIVE = 'destructive',
GHOST = 'ghost',
PLAIN = 'plain'
GHOST = 'ghost'
}

export enum HarmonyButtonSize {
Expand Down
1 change: 1 addition & 0 deletions packages/web/src/components/data-entry/TextAreaV2.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
.scrollArea {
display: flex;
flex-direction: row;
flex-grow: 1;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
Expand Down
5 changes: 2 additions & 3 deletions packages/web/src/components/upload/TrackPreviewNew.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { HarmonyButton, HarmonyButtonType, IconTrash } from '@audius/stems'
import { HarmonyPlainButton, IconTrash } from '@audius/stems'
import numeral from 'numeral'

import iconFileAiff from 'assets/img/iconFileAiff.svg'
Expand Down Expand Up @@ -72,8 +72,7 @@ export const TrackPreviewNew = (props: TrackPreviewProps) => {
<Text className={styles.fileSizeText} size='small' color='neutralLight2'>
{numeral(fileSize).format('0.0 b')}
</Text>
<HarmonyButton
variant={HarmonyButtonType.PLAIN}
<HarmonyPlainButton
iconRight={IconTrash}
onClick={onRemove}
className={styles.removeButton}
Expand Down
12 changes: 3 additions & 9 deletions packages/web/src/pages/upload-page/components/FinishPageNew.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ import {
uploadSelectors
} from '@audius/common'
import {
HarmonyButton,
HarmonyButtonSize,
HarmonyButtonType,
HarmonyPlainButton,
IconArrow,
IconError,
IconUpload,
Expand Down Expand Up @@ -180,17 +178,13 @@ export const FinishPageNew = (props: FinishPageProps) => {
</div>
{uploadComplete ? (
<div className={styles.uploadFooter}>
<HarmonyButton
size={HarmonyButtonSize.SMALL}
<HarmonyPlainButton
onClick={handleUploadMoreClick}
variant={HarmonyButtonType.PLAIN}
text={messages.uploadMore}
iconLeft={IconUpload}
/>
<HarmonyButton
variant={HarmonyButtonType.PLAIN}
<HarmonyPlainButton
onClick={handleVisitProfileClick}
size={HarmonyButtonSize.SMALL}
text={messages.visitProfile}
iconRight={IconArrow}
/>
Expand Down
4 changes: 4 additions & 0 deletions packages/web/src/pages/upload-page/fields/CollectionTrackField.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@
gap: var(--unit-12);
}

.actionButton {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can this be built into the plain button? if we are going to supported subdued text on plain button i feel like should be a prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thoughts on subdued vs a color prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wait we totally have a subdued variant. nvm

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hell yeah

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

man having these standard components is going to be so amazing

color: var(--text-subdued);
}

.trackInformation {
display: flex;
padding-left: 72px;
Expand Down
19 changes: 8 additions & 11 deletions packages/web/src/pages/upload-page/fields/CollectionTrackField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { useCallback, useEffect } from 'react'

import {
HarmonyButton,
HarmonyButtonSize,
HarmonyButtonType,
HarmonyPlainButton,
HarmonyPlainButtonType,
IconDrag,
IconPlay,
IconTrash
Expand Down Expand Up @@ -69,7 +68,7 @@ export const CollectionTrackField = (props: CollectionTrackFieldProps) => {
<Icon icon={IconDrag} size='large' />
</span>
<Text size='small' className={styles.trackindex}>
{index}
{index + 1}
</Text>
<TrackNameField name={`tracks.${index}.metadata.title`} />
</div>
Expand All @@ -88,19 +87,17 @@ export const CollectionTrackField = (props: CollectionTrackFieldProps) => {
<Text>{messages.overrideLabel}</Text>
</div>
<div className={styles.actions}>
<HarmonyButton
variant={HarmonyButtonType.GHOST}
size={HarmonyButtonSize.SMALL}
<HarmonyPlainButton
variant={HarmonyPlainButtonType.SUBDUED}
text={messages.preview}
iconLeft={IconPlay}
/>
<HarmonyButton
disabled={disableDelete}
variant={HarmonyButtonType.GHOST}
size={HarmonyButtonSize.SMALL}
<HarmonyPlainButton
variant={HarmonyPlainButtonType.SUBDUED}
text={messages.delete}
iconLeft={IconTrash}
onClick={handleRemove}
disabled={disableDelete}
/>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions packages/web/src/pages/upload-page/fields/TrackMetadataFields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export const TrackMetadataFields = () => {
placeholder={messages.description}
maxLength={1000}
showMaxLength
grows
/>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions packages/web/src/pages/upload-page/forms/EditCollectionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ export const EditCollectionForm = (props: EditCollectionFormProps) => {
maxLength={1000}
showMaxLength
className={styles.description}
grows
/>
</div>
</div>
Expand Down
4 changes: 0 additions & 4 deletions packages/web/src/pages/upload-page/forms/EditTrackForm.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,3 @@
background: var(--background-surface-1);
justify-content: space-between;
}

.multiTrackFooter .disabled {
opacity: 0.5;
}
9 changes: 3 additions & 6 deletions packages/web/src/pages/upload-page/forms/EditTrackForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react'
import {
HarmonyButton,
HarmonyButtonType,
HarmonyPlainButton,
IconArrow,
IconCaretRight
} from '@audius/stems'
Expand Down Expand Up @@ -180,18 +181,14 @@ const MultiTrackFooter = () => {
const nextDisabled = index === trackMetadatas.length - 1
return (
<div className={cn(styles.multiTrackFooter, layoutStyles.row)}>
<HarmonyButton
className={cn({ [styles.disabled]: prevDisabled })}
variant={HarmonyButtonType.PLAIN}
<HarmonyPlainButton
text={messages.prev}
iconLeft={IconCaretLeft}
onClick={goPrev}
disabled={prevDisabled}
type='button'
/>
<HarmonyButton
className={cn({ [styles.disabled]: nextDisabled })}
variant={HarmonyButtonType.PLAIN}
<HarmonyPlainButton
text={messages.next}
iconRight={IconCaretRight}
onClick={goNext}
Expand Down