From 338e31318154e73344b64b9114bab0a0db921ac5 Mon Sep 17 00:00:00 2001 From: Andrew Mendelsohn Date: Mon, 24 Jul 2023 13:44:21 -0500 Subject: [PATCH] [C-2680] Attribution Modal (#3778) --- .../common/src/hooks/usePremiumContent.ts | 6 +- .../common/src/store/notifications/types.ts | 19 +- .../fields/LicenseTypeField.tsx | 2 +- .../SegmentedControl.module.css | 7 +- .../SegmentedControl/SegmentedControl.tsx | 4 +- .../src/components/SegmentedControl/types.ts | 2 + .../web/src/assets/img/creativeCommons/by.svg | 3 + .../web/src/assets/img/creativeCommons/cc.svg | 3 + .../web/src/assets/img/creativeCommons/nc.svg | 3 + .../web/src/assets/img/creativeCommons/nd.svg | 3 + .../web/src/assets/img/creativeCommons/sa.svg | 3 + .../src/assets/img/iconCreativeCommons.svg | 3 + .../src/components/layout/layout.module.css | 26 ++ .../components/TrackModalArray.tsx | 2 + .../upload-page/fields/ModalField.module.css | 10 + .../pages/upload-page/fields/ModalField.tsx | 46 ++- .../forms/AttributionModalForm.module.css | 33 ++ .../forms/AttributionModalForm.tsx | 327 ++++++++++++++++++ .../forms/RemixModalForm.module.css | 1 - .../forms/SourceFilesModalForm.module.css | 1 - .../TrackAvailabilityModalForm.module.css | 1 - .../upload-page/utils/computeLicenseIcons.ts | 26 ++ 22 files changed, 485 insertions(+), 46 deletions(-) create mode 100644 packages/web/src/assets/img/creativeCommons/by.svg create mode 100644 packages/web/src/assets/img/creativeCommons/cc.svg create mode 100644 packages/web/src/assets/img/creativeCommons/nc.svg create mode 100644 packages/web/src/assets/img/creativeCommons/nd.svg create mode 100644 packages/web/src/assets/img/creativeCommons/sa.svg create mode 100644 packages/web/src/assets/img/iconCreativeCommons.svg create mode 100644 packages/web/src/components/layout/layout.module.css create mode 100644 packages/web/src/pages/upload-page/forms/AttributionModalForm.module.css create mode 100644 packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx create mode 100644 packages/web/src/pages/upload-page/utils/computeLicenseIcons.ts diff --git a/packages/common/src/hooks/usePremiumContent.ts b/packages/common/src/hooks/usePremiumContent.ts index 74c1158f7d..7b8f32b615 100644 --- a/packages/common/src/hooks/usePremiumContent.ts +++ b/packages/common/src/hooks/usePremiumContent.ts @@ -2,15 +2,15 @@ import { useMemo } from 'react' import { useSelector } from 'react-redux' +import { Chain } from 'models/Chain' +import { ID } from 'models/Identifiers' import { - Chain, - ID, PremiumConditions, Track, isPremiumContentCollectibleGated, isPremiumContentFollowGated, isPremiumContentTipGated -} from 'models' +} from 'models/Track' import { getAccountUser } from 'store/account/selectors' import { cacheTracksSelectors, cacheUsersSelectors } from 'store/cache' import { premiumContentSelectors } from 'store/premium-content' diff --git a/packages/common/src/store/notifications/types.ts b/packages/common/src/store/notifications/types.ts index 9bdb2ddaf6..9da7bb08ea 100644 --- a/packages/common/src/store/notifications/types.ts +++ b/packages/common/src/store/notifications/types.ts @@ -1,18 +1,15 @@ import { EntityState, PayloadAction } from '@reduxjs/toolkit' +import { ChallengeRewardID } from 'models/AudioRewards' +import { BadgeTier } from 'models/BadgeTier' +import { Collection } from 'models/Collection' +import { ID } from 'models/Identifiers' +import { Status } from 'models/Status' +import { Track } from 'models/Track' +import { User } from 'models/User' +import { StringWei } from 'models/Wallet' import { Nullable } from 'utils' -import { - ID, - ChallengeRewardID, - BadgeTier, - Collection, - Status, - Track, - User, - StringWei -} from '../../models' - export enum NotificationType { Announcement = 'Announcement', UserSubscription = 'UserSubscription', diff --git a/packages/mobile/src/screens/edit-track-screen/fields/LicenseTypeField.tsx b/packages/mobile/src/screens/edit-track-screen/fields/LicenseTypeField.tsx index ab3c2ab43f..37339ca629 100644 --- a/packages/mobile/src/screens/edit-track-screen/fields/LicenseTypeField.tsx +++ b/packages/mobile/src/screens/edit-track-screen/fields/LicenseTypeField.tsx @@ -14,7 +14,7 @@ import { computeLicenseIcons } from '../utils/computeLicenseIcons' const messages = { licenseType: 'License Type', - noLicense: 'All rights reserved' + noLicense: 'All Rights Reserved' } const useStyles = makeStyles(({ spacing }) => ({ diff --git a/packages/stems/src/components/SegmentedControl/SegmentedControl.module.css b/packages/stems/src/components/SegmentedControl/SegmentedControl.module.css index 2d5c111410..2d9c7ced6b 100644 --- a/packages/stems/src/components/SegmentedControl/SegmentedControl.module.css +++ b/packages/stems/src/components/SegmentedControl/SegmentedControl.module.css @@ -12,7 +12,7 @@ .tab { z-index: 3; flex: 1 1 auto; - padding: var(--unit-2) var(--unit-3); + padding: var(--unit-2); border-radius: 4px; cursor: pointer; user-select: none; @@ -21,6 +21,7 @@ font-size: 15px; font-weight: var(--font-demi-bold); position: relative; + text-align: center; } .tab.isMobile { @@ -68,3 +69,7 @@ flex: 1; text-align: center; } + +.disabled { + opacity: 0.5; +} diff --git a/packages/stems/src/components/SegmentedControl/SegmentedControl.tsx b/packages/stems/src/components/SegmentedControl/SegmentedControl.tsx index 9f2bc13aa6..1a67bbdb24 100644 --- a/packages/stems/src/components/SegmentedControl/SegmentedControl.tsx +++ b/packages/stems/src/components/SegmentedControl/SegmentedControl.tsx @@ -65,7 +65,8 @@ export const SegmentedControl = (
( onChange={() => { onSetSelected(option.key) }} + disabled={props.disabled} /> {option.text} diff --git a/packages/stems/src/components/SegmentedControl/types.ts b/packages/stems/src/components/SegmentedControl/types.ts index b2f055d262..fe7db369b5 100644 --- a/packages/stems/src/components/SegmentedControl/types.ts +++ b/packages/stems/src/components/SegmentedControl/types.ts @@ -15,6 +15,8 @@ export type SegmentedControlProps = { fullWidth?: boolean + disabled?: boolean + isMobile?: boolean /** diff --git a/packages/web/src/assets/img/creativeCommons/by.svg b/packages/web/src/assets/img/creativeCommons/by.svg new file mode 100644 index 0000000000..b14cf43517 --- /dev/null +++ b/packages/web/src/assets/img/creativeCommons/by.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web/src/assets/img/creativeCommons/cc.svg b/packages/web/src/assets/img/creativeCommons/cc.svg new file mode 100644 index 0000000000..e75c007901 --- /dev/null +++ b/packages/web/src/assets/img/creativeCommons/cc.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web/src/assets/img/creativeCommons/nc.svg b/packages/web/src/assets/img/creativeCommons/nc.svg new file mode 100644 index 0000000000..bf3d1fbf6c --- /dev/null +++ b/packages/web/src/assets/img/creativeCommons/nc.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web/src/assets/img/creativeCommons/nd.svg b/packages/web/src/assets/img/creativeCommons/nd.svg new file mode 100644 index 0000000000..5ad600b1b5 --- /dev/null +++ b/packages/web/src/assets/img/creativeCommons/nd.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web/src/assets/img/creativeCommons/sa.svg b/packages/web/src/assets/img/creativeCommons/sa.svg new file mode 100644 index 0000000000..9cb6a81284 --- /dev/null +++ b/packages/web/src/assets/img/creativeCommons/sa.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web/src/assets/img/iconCreativeCommons.svg b/packages/web/src/assets/img/iconCreativeCommons.svg new file mode 100644 index 0000000000..acb816e09d --- /dev/null +++ b/packages/web/src/assets/img/iconCreativeCommons.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web/src/components/layout/layout.module.css b/packages/web/src/components/layout/layout.module.css new file mode 100644 index 0000000000..02fce2cc8d --- /dev/null +++ b/packages/web/src/components/layout/layout.module.css @@ -0,0 +1,26 @@ +.row { + display: flex; + flex-direction: row; + align-items: center; +} + +.col { + display: flex; + flex-direction: column; +} + +.gap1 { + gap: var(--unit-1); +} + +.gap2 { + gap: var(--unit-2); +} + +.gap4 { + gap: var(--unit-4); +} + +.gap6 { + gap: var(--unit-6); +} diff --git a/packages/web/src/pages/upload-page/components/TrackModalArray.tsx b/packages/web/src/pages/upload-page/components/TrackModalArray.tsx index 480c9dbf68..2e46394eb2 100644 --- a/packages/web/src/pages/upload-page/components/TrackModalArray.tsx +++ b/packages/web/src/pages/upload-page/components/TrackModalArray.tsx @@ -1,3 +1,4 @@ +import { AttributionModalForm } from '../forms/AttributionModalForm' import { ReleaseDateModalForm } from '../forms/ReleaseDateModalForm' import { RemixModalForm } from '../forms/RemixModalForm' import { SourceFilesModalForm } from '../forms/SourceFilesModalForm' @@ -12,6 +13,7 @@ export const TrackModalArray = () => { +
) } diff --git a/packages/web/src/pages/upload-page/fields/ModalField.module.css b/packages/web/src/pages/upload-page/fields/ModalField.module.css index eb275c88df..050afd9fb3 100644 --- a/packages/web/src/pages/upload-page/fields/ModalField.module.css +++ b/packages/web/src/pages/upload-page/fields/ModalField.module.css @@ -12,6 +12,10 @@ } /* Modal styles */ +.root { + width: 720px; +} + .modalHeader { display: flex; flex-direction: row; @@ -21,6 +25,9 @@ } .modalTitle { + display: flex; + flex-direction: row; + align-items: center; font-weight: var(--font-heavy); font-size: var(--font-xl); line-height: 25px; @@ -33,6 +40,9 @@ .modalTitle :global(*) { color: var(--neutral-light-2); + display: flex; + flex-direction: row; + align-items: center; } .caret { diff --git a/packages/web/src/pages/upload-page/fields/ModalField.tsx b/packages/web/src/pages/upload-page/fields/ModalField.tsx index 22b8d17131..a8ad15e1fd 100644 --- a/packages/web/src/pages/upload-page/fields/ModalField.tsx +++ b/packages/web/src/pages/upload-page/fields/ModalField.tsx @@ -15,7 +15,7 @@ import { useFormikContext } from 'formik' import styles from './ModalField.module.css' const messages = { - done: 'Done' + save: 'Save' } type ModalFieldProps = PropsWithChildren & { @@ -37,31 +37,25 @@ export const ModalField = (props: ModalFieldProps) => { } const modal = ( -
- - -
- -
- - {children} - -
+ + +
+ +
+ + {children} + +