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

Mobile gated content updates pt. 2 #3696

Merged
merged 2 commits into from
Jul 3, 2023
Merged

Mobile gated content updates pt. 2 #3696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57f8ea4
Mobile gated content updates pt. 2
dharit-tan Jul 3, 2023
1b068d6
remove test
dharit-tan Jul 3, 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
33 changes: 12 additions & 21 deletions packages/mobile/src/components/details-tile/DetailsTileHasAccess.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,18 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
backgroundColor: palette.neutralLight10,
borderWidth: 1,
borderColor: palette.neutralLight7,
borderRadius: spacing(2)
borderRadius: spacing(2),
gap: spacing(2)
},
titleContainer: {
...flexRowCentered(),
marginBottom: spacing(2),
justifyContent: 'space-between'
justifyContent: 'space-between',
gap: spacing(2)
},
ownerTitleContainer: {
justifyContent: 'flex-start'
},
title: {
marginLeft: spacing(2),
fontFamily: typography.fontByWeight.heavy,
fontSize: typography.fontSize.medium,
color: palette.neutral
Expand All @@ -62,18 +65,11 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
fontFamily: typography.fontByWeight.demiBold,
fontSize: typography.fontSize.medium,
color: palette.neutral,
lineHeight: spacing(6)
},
checkIcon: {
width: spacing(6),
height: spacing(6)
lineHeight: typography.fontSize.medium * 1.3
Copy link
Contributor

Choose a reason for hiding this comment

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

oof, would be nice to get the typography stuff into mobile as well? Shouldn't need to set line heights manually...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

totally agree but out of scope for now!

},
name: {
color: palette.secondary
},
bottomMargin: {
marginBottom: spacing(2)
},
iconLockContainer: {
backgroundColor: palette.accentBlue,
paddingHorizontal: spacing(2),
Expand Down Expand Up @@ -109,15 +105,14 @@ const DetailsTileUnlockedSection = ({

const DetailsTileOwnerSection = ({
renderDescription,
isCollectibleGated,
style
isCollectibleGated
}: HasAccessProps) => {
const styles = useStyles()
const neutral = useColor('neutral')

return (
<View style={[styles.root, style]}>
<View style={[styles.titleContainer, styles.bottomMargin]}>
<View style={styles.root}>
<View style={[styles.titleContainer, styles.ownerTitleContainer]}>
{isCollectibleGated ? (
<IconCollectible fill={neutral} width={16} height={16} />
) : (
Expand Down Expand Up @@ -271,15 +266,11 @@ export const DetailsTileHasAccess = ({
<DetailsTileOwnerSection
renderDescription={renderOwnerDescription}
isCollectibleGated={!!nftCollection}
style={style}
/>
)
}

return (
<DetailsTileUnlockedSection
renderDescription={renderUnlockedDescription}
style={style}
/>
<DetailsTileUnlockedSection renderDescription={renderUnlockedDescription} />
)
}
115 changes: 55 additions & 60 deletions packages/mobile/src/components/details-tile/DetailsTileNoAccess.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,20 +53,17 @@ const messages = {

const useStyles = makeStyles(({ palette, spacing, typography }) => ({
root: {
padding: spacing(4),
padding: spacing(2),
backgroundColor: palette.neutralLight10,
borderWidth: 1,
borderColor: palette.neutralLight7,
borderRadius: spacing(2)
},
headerContainer: {
...flexRowCentered(),
marginBottom: spacing(2),
justifyContent: 'space-between'
},
titleContainer: {
...flexRowCentered(),
justifyContent: 'space-between'
justifyContent: 'space-between',
marginHorizontal: spacing(2),
marginVertical: spacing(1)
},
title: {
fontFamily: typography.fontByWeight.heavy,
Expand All @@ -75,25 +72,26 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
},
descriptionContainer: {
...flexRowCentered(),
flexWrap: 'wrap'
flexWrap: 'wrap',
margin: spacing(2)
},
description: {
flexShrink: 0,
fontFamily: typography.fontByWeight.demiBold,
fontSize: typography.fontSize.medium,
color: palette.neutral,
lineHeight: spacing(6)
lineHeight: typography.fontSize.medium * 1.3
},
name: {
color: palette.secondary
},
collectionContainer: {
...flexRowCentered(),
marginTop: spacing(2)
marginTop: spacing(2),
gap: spacing(6)
},
collectionImages: {
...flexRowCentered(),
marginRight: spacing(6)
...flexRowCentered()
},
collectionImage: {
borderWidth: 1,
Expand Down Expand Up @@ -126,12 +124,9 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
color: palette.white
},
mainButton: {
marginTop: spacing(7),
marginTop: spacing(3),
backgroundColor: palette.accentBlue
},
bottomMargin: {
marginBottom: spacing(2)
},
loadingSpinner: {
width: spacing(5),
height: spacing(5)
Expand All @@ -152,27 +147,19 @@ const DetailsTileNoAccessSection = ({
const styles = useStyles()
const staticWhite = useColor('staticWhite')

if (isUnlocking) {
return (
<View style={[styles.root, style]}>
<View style={styles.headerContainer}>
<View style={styles.titleContainer}>
<Text style={styles.title}>{messages.unlocking}</Text>
</View>
<LoadingSpinner style={styles.loadingSpinner} />
</View>
{renderDescription()}
</View>
)
}

return (
<View style={[styles.root, style]}>
<View style={[styles.titleContainer, styles.bottomMargin]}>
<Text style={styles.title}>{messages.howToUnlock}</Text>
<View style={styles.iconLockContainer}>
<IconLock fill={staticWhite} width={14} height={14} />
</View>
<View style={styles.titleContainer}>
<Text style={styles.title}>
{isUnlocking ? messages.unlocking : messages.howToUnlock}
</Text>
{isUnlocking ? (
<LoadingSpinner style={styles.loadingSpinner} />
) : (
<View style={styles.iconLockContainer}>
<IconLock fill={staticWhite} width={14} height={14} />
</View>
)}
</View>
{renderDescription()}
</View>
Expand Down Expand Up @@ -251,27 +238,35 @@ export const DetailsTileNoAccess = ({
const renderLockedDescription = useCallback(() => {
if (nftCollection) {
return (
<View style={styles.descriptionContainer}>
<Text style={styles.description}>
{messages.lockedCollectibleGated}
</Text>
<View style={styles.collectionContainer}>
{nftCollection.imageUrl && (
<View style={styles.collectionImages}>
<Image
source={{ uri: nftCollection.imageUrl }}
style={styles.collectionImage}
/>
<View style={styles.collectionChainImageContainer}>
{nftCollection.chain === Chain.Eth ? (
<LogoEth style={styles.collectionChainImage} height={16} />
) : (
<LogoSol style={styles.collectionChainImage} height={16} />
)}
<>
<View style={styles.descriptionContainer}>
<Text style={styles.description}>
{messages.lockedCollectibleGated}
</Text>
<View style={styles.collectionContainer}>
{nftCollection.imageUrl && (
<View style={styles.collectionImages}>
<Image
source={{ uri: nftCollection.imageUrl }}
style={styles.collectionImage}
/>
<View style={styles.collectionChainImageContainer}>
{nftCollection.chain === Chain.Eth ? (
<LogoEth
style={styles.collectionChainImage}
height={16}
/>
) : (
<LogoSol
style={styles.collectionChainImage}
height={16}
/>
)}
</View>
</View>
</View>
)}
<Text style={styles.description}>{nftCollection.name}</Text>
)}
<Text style={styles.description}>{nftCollection.name}</Text>
</View>
</View>
<Button
style={styles.mainButton}
Expand All @@ -283,12 +278,12 @@ export const DetailsTileNoAccess = ({
onPress={handlePressCollection}
fullWidth
/>
</View>
</>
)
}
if (followee) {
return (
<View>
<>
{renderLockedSpecialAccessDescription({
entity: followee,
prefix: messages.lockedFollowGatedPrefix
Expand All @@ -303,12 +298,12 @@ export const DetailsTileNoAccess = ({
onPress={handleFollowArtist}
fullWidth
/>
</View>
</>
)
}
if (tippedUser) {
return (
<View style={styles.descriptionContainer}>
<>
{renderLockedSpecialAccessDescription({
entity: tippedUser,
prefix: messages.lockedTipGatedPrefix,
Expand All @@ -324,7 +319,7 @@ export const DetailsTileNoAccess = ({
onPress={handleSendTip}
fullWidth
/>
</View>
</>
)
}

Expand Down
1 change: 1 addition & 0 deletions packages/mobile/src/components/locked-content-drawer/LockedContentDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
fontSize: typography.fontSize.medium
},
premiumTrackSection: {
marginHorizontal: spacing(2),
marginBottom: 0,
borderWidth: 0,
backgroundColor: 'transparent'
Expand Down