[C-2680] Attribution Modal (#3778)

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'

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',

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 }) => ({

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;
+}

packages/stems/src/components/SegmentedControl/SegmentedControl.tsx

@@ -65,7 +65,8 @@ export const SegmentedControl = <T extends string>(
     <div
       className={cn(styles.tabs, props.className, {
         [styles.containerFullWidth]: !!props.fullWidth,
-        [styles.isMobile]: props.isMobile
+        [styles.isMobile]: props.isMobile,
+        [styles.disabled]: props.disabled
       })}
     >
       <animated.div
@@ -94,6 +95,7 @@ export const SegmentedControl = <T extends string>(
                 onChange={() => {
                   onSetSelected(option.key)
                 }}
+                disabled={props.disabled}
               />
               {option.text}
             </label>

packages/stems/src/components/SegmentedControl/types.ts

@@ -15,6 +15,8 @@ export type SegmentedControlProps<T extends string> = {
 
   fullWidth?: boolean
 
+  disabled?: boolean
+
   isMobile?: boolean
 
   /**

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);
+}

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 = () => {
       <RemixModalForm />
       <SourceFilesModalForm />
       <TrackAvailabilityModalForm />
+      <AttributionModalForm />
     </div>
   )
 }

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 {

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 = (
-    <div className={styles.modal}>
-      <Modal onClose={cancel} isOpen={isModalOpen}>
-        <ModalHeader>
-          <div className={styles.modalHeader}>
-            <ModalTitle
-              className={styles.modalTitle}
-              title={title}
-              icon={icon}
-            />
-          </div>
-        </ModalHeader>
-        <ModalContent>{children}</ModalContent>
-        <ModalFooter>
-          <Button
-            type={ButtonType.PRIMARY}
-            text={messages.done}
-            onClick={() => {
-              submitForm()
-              close()
-            }}
-            buttonType='submit'
-          />
-        </ModalFooter>
-      </Modal>
-    </div>
+    <Modal onClose={cancel} isOpen={isModalOpen} bodyClassName={styles.root}>
+      <ModalHeader>
+        <div className={styles.modalHeader}>
+          <ModalTitle className={styles.modalTitle} title={title} icon={icon} />
+        </div>
+      </ModalHeader>
+      <ModalContent>{children}</ModalContent>
+      <ModalFooter>
+        <Button
+          type={ButtonType.PRIMARY}
+          text={messages.save}
+          onClick={() => {
+            submitForm()
+            close()
+          }}
+          buttonType='submit'
+        />
+      </ModalFooter>
+    </Modal>
   )
 
   return (

packages/web/src/pages/upload-page/forms/AttributionModalForm.module.css

@@ -0,0 +1,33 @@
+.attributionCommercialRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--unit-3);
+}
+
+.attributionRowItem {
+  flex-grow: 1;
+}
+
+.verticalDivider {
+  height: auto;
+}
+
+.disabled {
+  opacity: 0.5;
+}
+
+.license {
+  display: flex;
+  flex-direction: column;
+  gap: var(--unit-2);
+  padding: var(--unit-4);
+  border-radius: 8px;
+  border: 1px solid var(--neutral-light-8);
+  background: var(--neutral-light-10);
+  text-transform: capitalize;
+}
+
+.licenseIcons {
+  gap: 6px;
+}