[PAY-2064] Fix misc mobile access & sale ui (#6463)

AudiusProject · Oct 25, 2023 · 2add6e8 · 2add6e8
1 parent 7c58442
commit 2add6e8
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 107 deletions.
diff --git a/packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx b/packages/mobile/src/screens/edit-track-screen/components/CollectibleGatedAvailability.tsx
@@ -52,7 +52,7 @@ const useStyles = makeStyles(({ typography, spacing, palette }) => ({
     ...flexRowCentered()
   },
   title: {
-    fontSize: 22,
+    fontSize: 18,
     marginTop: 0
   },
   selectedTitle: {
@@ -66,7 +66,8 @@ const useStyles = makeStyles(({ typography, spacing, palette }) => ({
     marginRight: spacing(2.5)
   },
   subtitleContainer: {
-    marginTop: spacing(2)
+    marginTop: spacing(4),
+    marginLeft: -1 * spacing(10)
   },
   subtitle: {
     color: palette.neutral
@@ -224,11 +225,13 @@ export const CollectibleGatedAvailability = ({
           {messages.collectibleGated}
         </Text>
       </View>
-      <View style={styles.subtitleContainer}>
-        <Text fontSize='medium' weight='medium' style={styles.subtitle}>
-          {messages.collectibleGatedSubtitle}
-        </Text>
-      </View>
+      {selected ? (
+        <View style={styles.subtitleContainer}>
+          <Text fontSize='medium' weight='medium' style={styles.subtitle}>
+            {messages.collectibleGatedSubtitle}
+          </Text>
+        </View>
+      ) : null}
       {hasNoCollectibles ? (
         <HelpCallout
           style={styles.noCollectibles}

diff --git a/packages/mobile/src/screens/edit-track-screen/components/HiddenAvailability.tsx b/packages/mobile/src/screens/edit-track-screen/components/HiddenAvailability.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     alignItems: 'center'
   },
   title: {
-    fontSize: 22,
+    fontSize: 18,
     marginTop: 0
   },
   selectedTitle: {
@@ -50,7 +50,8 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     marginRight: spacing(2.5)
   },
   subtitleContainer: {
-    marginTop: spacing(2)
+    marginTop: spacing(4),
+    marginLeft: -1 * spacing(10)
   },
   subtitle: {
     color: palette.neutral
@@ -120,40 +121,42 @@ export const HiddenAvailability = ({
           {messages.hidden}
         </Text>
       </View>
-      <View style={styles.subtitleContainer}>
-        <Text fontSize='medium' weight='medium' style={styles.subtitle}>
-          {messages.hiddenSubtitle}
-        </Text>
-      </View>
-      {selected && (
-        <View style={styles.selectionContainer}>
-          <SwitchField
-            name='field_visibility.genre'
-            label={messages.showGenre}
-            style={styles.firstSwitch}
-          />
-          <SwitchField
-            name='field_visibility.mood'
-            label={messages.showMood}
-            style={styles.switch}
-          />
-          <SwitchField
-            name='field_visibility.tags'
-            label={messages.showTags}
-            style={styles.switch}
-          />
-          <SwitchField
-            name='field_visibility.share'
-            label={messages.showShareButton}
-            style={styles.switch}
-          />
-          <SwitchField
-            name='field_visibility.play_count'
-            label={messages.showPlayCount}
-            style={styles.switch}
-          />
-        </View>
-      )}
+      {selected ? (
+        <>
+          <View style={styles.subtitleContainer}>
+            <Text fontSize='medium' weight='medium' style={styles.subtitle}>
+              {messages.hiddenSubtitle}
+            </Text>
+          </View>
+          <View style={styles.selectionContainer}>
+            <SwitchField
+              name='field_visibility.genre'
+              label={messages.showGenre}
+              style={styles.firstSwitch}
+            />
+            <SwitchField
+              name='field_visibility.mood'
+              label={messages.showMood}
+              style={styles.switch}
+            />
+            <SwitchField
+              name='field_visibility.tags'
+              label={messages.showTags}
+              style={styles.switch}
+            />
+            <SwitchField
+              name='field_visibility.share'
+              label={messages.showShareButton}
+              style={styles.switch}
+            />
+            <SwitchField
+              name='field_visibility.play_count'
+              label={messages.showPlayCount}
+              style={styles.switch}
+            />
+          </View>
+        </>
+      ) : null}
     </View>
   )
 }
diff --git a/packages/mobile/src/screens/edit-track-screen/components/SpecialAccessAvailability.tsx b/packages/mobile/src/screens/edit-track-screen/components/SpecialAccessAvailability.tsx
@@ -40,7 +40,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     alignItems: 'center'
   },
   title: {
-    fontSize: 22,
+    fontSize: 18,
     marginTop: 0
   },
   selectedTitle: {
@@ -54,7 +54,8 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     marginRight: spacing(2.5)
   },
   subtitleContainer: {
-    marginTop: spacing(2)
+    marginTop: spacing(4),
+    marginLeft: -1 * spacing(10)
   },
   subtitle: {
     color: palette.neutral
@@ -167,52 +168,54 @@ export const SpecialAccessAvailability = ({
           {messages.specialAccess}
         </Text>
       </View>
-      <View style={styles.subtitleContainer}>
-        <Text fontSize='medium' weight='medium' style={styles.subtitle}>
-          {messages.specialAccessSubtitle}
-        </Text>
-      </View>
       {selected && (
-        <View style={styles.selectionContainer}>
-          <TouchableOpacity
-            onPress={handlePressFollowers}
-            disabled={
-              isContentDisabled ||
-              isPremiumContentFollowGated(premiumConditions)
-            }
-          >
-            <View style={styles.followersOnly}>
-              <RadioButton
-                checked={isPremiumContentFollowGated(premiumConditions)}
-                disabled={isContentDisabled}
-                style={styles.radio}
-              />
-              <Text style={isContentDisabled ? styles.disabledTitle : null}>
-                {messages.followersOnly}
-              </Text>
-            </View>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={handlePressSupporters}
-            disabled={
-              isContentDisabled || isPremiumContentTipGated(premiumConditions)
-            }
-          >
-            <View style={styles.supportersOnly}>
-              <RadioButton
-                checked={isPremiumContentTipGated(premiumConditions)}
-                disabled={isContentDisabled}
-                style={styles.radio}
-              />
-              <Text style={isContentDisabled ? styles.disabledTitle : null}>
-                {messages.supportersOnly}
-              </Text>
-              <TouchableOpacity onPress={handleInfoPress}>
-                <IconInfo style={styles.infoIcon} fill={neutralLight4} />
-              </TouchableOpacity>
-            </View>
-          </TouchableOpacity>
-        </View>
+        <>
+          <View style={styles.subtitleContainer}>
+            <Text fontSize='medium' weight='medium' style={styles.subtitle}>
+              {messages.specialAccessSubtitle}
+            </Text>
+          </View>
+          <View style={styles.selectionContainer}>
+            <TouchableOpacity
+              onPress={handlePressFollowers}
+              disabled={
+                isContentDisabled ||
+                isPremiumContentFollowGated(premiumConditions)
+              }
+            >
+              <View style={styles.followersOnly}>
+                <RadioButton
+                  checked={isPremiumContentFollowGated(premiumConditions)}
+                  disabled={isContentDisabled}
+                  style={styles.radio}
+                />
+                <Text style={isContentDisabled ? styles.disabledTitle : null}>
+                  {messages.followersOnly}
+                </Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handlePressSupporters}
+              disabled={
+                isContentDisabled || isPremiumContentTipGated(premiumConditions)
+              }
+            >
+              <View style={styles.supportersOnly}>
+                <RadioButton
+                  checked={isPremiumContentTipGated(premiumConditions)}
+                  disabled={isContentDisabled}
+                  style={styles.radio}
+                />
+                <Text style={isContentDisabled ? styles.disabledTitle : null}>
+                  {messages.supportersOnly}
+                </Text>
+                <TouchableOpacity onPress={handleInfoPress}>
+                  <IconInfo style={styles.infoIcon} fill={neutralLight4} />
+                </TouchableOpacity>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </>
       )}
     </View>
   )

diff --git a/...reens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/PremiumRadioField.tsx b/...reens/edit-track-screen/fields/AccessAndSaleField/PremiumRadioField/PremiumRadioField.tsx
@@ -43,7 +43,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     alignItems: 'center'
   },
   title: {
-    fontSize: 22,
+    fontSize: 18,
     marginTop: 0
   },
   selectedTitle: {
@@ -57,7 +57,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     marginRight: spacing(2.5)
   },
   subtitleContainer: {
-    marginTop: spacing(2)
+    marginLeft: -1 * spacing(10)
   },
   subtitle: {
     color: palette.neutral
@@ -71,6 +71,9 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   },
   comingSoon: {
     alignSelf: 'flex-start'
+  },
+  fields: {
+    marginLeft: -1 * spacing(10)
   }
 }))
 
@@ -130,11 +133,13 @@ export const PremiumRadioField = (props: PremiumRadioFieldProps) => {
           {messages.title}
         </Text>
       </View>
-      <View style={styles.subtitleContainer}>
-        <Text fontSize='medium' weight='medium' style={styles.subtitle}>
-          {messages.description}
-        </Text>
-      </View>
+      {selected ? (
+        <View style={styles.subtitleContainer}>
+          <Text fontSize='medium' weight='medium' style={styles.subtitle}>
+            {messages.description}
+          </Text>
+        </View>
+      ) : null}
       {disabled ? (
         <>
           <Tag style={styles.comingSoon}>{messages.comingSoon}</Tag>
@@ -146,10 +151,10 @@ export const PremiumRadioField = (props: PremiumRadioFieldProps) => {
         </>
       ) : null}
       {selected ? (
-        <>
+        <View style={styles.fields}>
           <TrackPriceField />
           <TrackPreviewField />
-        </>
+        </View>
       ) : null}
     </View>
   )

diff --git a/.../src/screens/edit-track-screen/fields/AccessAndSaleField/PublicAvailabilityRadioField.tsx b/.../src/screens/edit-track-screen/fields/AccessAndSaleField/PublicAvailabilityRadioField.tsx
@@ -13,7 +13,7 @@ import type { TrackAvailabilitySelectionProps } from '../../components/types'
 const messages = {
   public: 'Public (Default)',
   publicSubtitle:
-    'Public tracks are visible to all users and appear throughout Audius.'
+    'Public tracks are available to all users and can be streamed for free.'
 }
 
 const screenWidth = Dimensions.get('screen').width
@@ -27,7 +27,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     alignItems: 'center'
   },
   title: {
-    fontSize: 22,
+    fontSize: 18,
     marginTop: 0
   },
   selectedTitle: {
@@ -41,7 +41,8 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     marginRight: spacing(2.5)
   },
   subtitleContainer: {
-    marginTop: spacing(2)
+    marginTop: spacing(4),
+    marginLeft: -1 * spacing(10)
   },
   subtitle: {
     color: palette.neutral
@@ -86,11 +87,13 @@ export const PublicAvailabilityRadioField = (
           {messages.public}
         </Text>
       </View>
-      <View style={styles.subtitleContainer}>
-        <Text fontSize='medium' weight='medium' style={styles.subtitle}>
-          {messages.publicSubtitle}
-        </Text>
-      </View>
+      {selected ? (
+        <View style={styles.subtitleContainer}>
+          <Text fontSize='medium' weight='medium' style={styles.subtitle}>
+            {messages.publicSubtitle}
+          </Text>
+        </View>
+      ) : null}
     </View>
   )
 }
diff --git a/packages/mobile/src/screens/edit-track-screen/screens/AccessAndSaleScreen.tsx b/packages/mobile/src/screens/edit-track-screen/screens/AccessAndSaleScreen.tsx
@@ -62,6 +62,9 @@ const useStyles = makeStyles(({ spacing }) => ({
     marginHorizontal: spacing(4),
     paddingVertical: spacing(2),
     paddingHorizontal: spacing(4)
+  },
+  listItem: {
+    paddingVertical: spacing(6)
   }
 }))
 
@@ -75,6 +78,7 @@ const MarkedAsRemix = () => {
 }
 
 export const AccessAndSaleScreen = () => {
+  const styles = useStyles()
   const navigation = useNavigation()
   const { initialValues } = useFormikContext<FormValues>()
   const [{ value: isPremium }] = useField<boolean>('is_premium')
@@ -261,6 +265,7 @@ export const AccessAndSaleScreen = () => {
       allowDeselect={false}
       hideSelectionLabel
       header={<MarkedAsRemix />}
+      itemStyles={styles.listItem}
       bottomSection={
         <Button
           variant='primary'