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

[PAY-1618] Update DogEar rendering and fix spacing #3775

Merged
merged 7 commits into from
Jul 21, 2023
Merged

[PAY-1618] Update DogEar rendering and fix spacing #3775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9c09234
update dog ear rendering for web
schottra Jul 19, 2023
f2b57ec
fix dog ear for mobile web
schottra Jul 19, 2023
d605ff1
remaining dog ear cleanup
schottra Jul 20, 2023
8ed1a7d
don't fill gradients on web
schottra Jul 20, 2023
a4edd56
small fixes for mobile web track details
schottra Jul 20, 2023
ff77a8c
remove elevation
schottra Jul 20, 2023
d111364
use spacing()
schottra Jul 20, 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
17 changes: 17 additions & 0 deletions packages/mobile/src/assets/images/dogEarRectangle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/mobile/src/components/card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export const Card = (props: CardProps) => {
{...TileProps}
>
{props.type === 'collection' ? (
<CollectionDogEar collectionId={props.id} />
<CollectionDogEar collectionId={props.id} borderOffset={1} />
) : null}
{renderImage({
style: [styles.cardImage, props.type === 'user' && styles.userImage]
Expand Down
5 changes: 3 additions & 2 deletions packages/mobile/src/components/card/CollectionDogEar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@ import { DogEar } from '../core'
const { getCollection } = cacheCollectionsSelectors

type CollectionDogEarProps = {
borderOffset?: number
collectionId: ID
}

export const CollectionDogEar = (props: CollectionDogEarProps) => {
const { collectionId } = props
const { borderOffset, collectionId } = props

const isPrivate = useSelector(
(state) => getCollection(state, { id: collectionId })?.is_private
Expand All @@ -20,7 +21,7 @@ export const CollectionDogEar = (props: CollectionDogEarProps) => {
const dogEarType = isPrivate ? DogEarType.HIDDEN : null

if (dogEarType) {
return <DogEar type={dogEarType} />
return <DogEar type={dogEarType} borderOffset={borderOffset} />
}

return null
Expand Down
64 changes: 40 additions & 24 deletions packages/mobile/src/components/core/DogEar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,61 @@
import { DogEarType } from '@audius/common'
import type { ViewStyle } from 'react-native'
import { View } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'

import DogEarRectangle from 'app/assets/images/dogEarRectangle.svg'
import IconCart from 'app/assets/images/iconCart.svg'
import IconCollectible from 'app/assets/images/iconCollectible.svg'
import IconHidden from 'app/assets/images/iconHidden.svg'
import IconSpecialAccess from 'app/assets/images/iconSpecialAccess.svg'
import IconStar from 'app/assets/images/iconStar.svg'
import { makeStyles } from 'app/styles'
import { spacing } from 'app/styles/spacing'
import { useThemeColors } from 'app/utils/theme'

const useStyles = makeStyles(({ spacing }) => ({
bannerIcon: {
container: {
position: 'absolute',
top: 0,
left: 0,
zIndex: 10,
width: 80,
height: 80,
width: spacing(12),
height: spacing(12),
overflow: 'hidden',
borderRadius: spacing(2),

shadowOpacity: 0.3,
shadowOffset: { width: 0, height: 1 },
shadowRadius: 3
borderRadius: spacing(2)
},

container: {
rectangle: {
position: 'absolute',
transform: [{ rotate: '45deg' }, { translateX: -68 }],
width: spacing(20),
height: spacing(20)
top: 0,
left: 0,
width: spacing(12),
height: spacing(12),
shadowColor: '#000',
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: 'black'?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I was following another pattern for setting shadow, and also this value matches what is shown in Figma. Why the preference for the named color?

shadowOffset: {
width: 0,
height: 0
},
shadowOpacity: 0.25,
shadowRadius: spacing(2)
},

icon: {
marginTop: spacing(1),
marginLeft: spacing(1)
position: 'absolute',
width: spacing(4),
height: spacing(4),
top: spacing(1),
left: spacing(1)
}
}))

type DogEarProps = {
export type DogEarProps = {
borderOffset?: number
type: DogEarType
style?: ViewStyle
}

export const DogEar = (props: DogEarProps) => {
const { type, style } = props
const { borderOffset, type, style } = props
const styles = useStyles()
const {
neutral,
Expand Down Expand Up @@ -78,15 +90,19 @@ export const DogEar = (props: DogEarProps) => {
}
}[type]

const borderOffsetStyle = borderOffset
? { left: -borderOffset, top: -borderOffset }
: undefined

return (
<View style={[styles.bannerIcon, style]}>
<LinearGradient
colors={colors}
style={[styles.container]}
start={{ x: 1, y: 1 }}
end={{ x: 0, y: 0 }}
<View style={[styles.container, borderOffsetStyle, style]}>
<DogEarRectangle fill={colors[0]} style={styles.rectangle} />
<Icon
width={spacing(4)}
height={spacing(4)}
fill={staticWhite}
style={styles.icon}
/>
<Icon fill={staticWhite} height={16} width={16} style={styles.icon} />
</View>
)
}
2 changes: 1 addition & 1 deletion packages/mobile/src/components/details-tile/DetailsTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ export const DetailsTile = ({
isOwner,
premiumConditions
})
return dogEarType ? <DogEar type={dogEarType} /> : null
return dogEarType ? <DogEar type={dogEarType} borderOffset={1} /> : null
}

const renderDetailLabels = () => {
Expand Down
4 changes: 1 addition & 3 deletions packages/mobile/src/components/lineup-tile/LineupTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,7 @@ export const LineupTile = ({
scaleTo={scale}
{...TileProps}
>
{dogEarType ? (
<DogEar type={dogEarType} style={{ shadowRadius: 1 }} />
) : null}
{dogEarType ? <DogEar type={dogEarType} borderOffset={1} /> : null}
<View>
<LineupTileTopRight
duration={duration}
Expand Down
26 changes: 26 additions & 0 deletions packages/web/src/assets/img/dogEarRectangle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 22 additions & 34 deletions packages/web/src/components/dog-ear/DogEar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,49 @@
.artistPick {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't know why this class was named artistPick (probably the dogEar was originally just for that?), but it was clearly the "container" 😄

.container {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 80px;
border-radius: var(--unit-2) 0px 0px 0px;
width: var(--unit-12);
height: var(--unit-12);
pointer-events: none;
overflow: hidden;
}

.container {
.rectangle {
position: absolute;
transform: rotate(45deg) translateX(-64px);
box-shadow: 1px 1px 7px -2px rgba(0, 0, 0, 0.5);
width: 80px;
height: 80px;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Note: dogEarRectangle has multiple `path` elements, but we only want to fill one of them.
That path uses `fill='currentColor'`, allowing us to set `color` here instead of `fill` */
Copy link
Contributor

Choose a reason for hiding this comment

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

nice.

.gated {
background: var(--accent-blue);
color: var(--accent-blue);
}

.purchase {
background: var(--special-light-green);
color: var(--special-light-green);
}

.star {
background: linear-gradient(314.61deg, #7e1bcc 0%, #a22feb 100%);
.artistPick {
color: var(--secondary);
}

.hidden {
background: linear-gradient(314.61deg, #858199 0%, #c2c0cc 100%);
color: var(--neutral);
}

.matrix .container {
background: var(--page-header-gradient);
}

.isMobile .container {
transform: rotate(45deg) translateX(-68px);
}

.artistPick svg {
.icon {
position: absolute;
left: 0;
top: 0;
margin-left: 5px;
margin-top: 2px;
top: var(--unit-1);
left: var(--unit-1);
width: var(--unit-4);
height: var(--unit-6);
}

.isMobile svg {
margin: 4px 0px 0px 4px;
width: 16px;
height: 16px;
height: var(--unit-4);
}

.artistPick svg path {
.icon path {
fill: var(--static-white);
}
49 changes: 26 additions & 23 deletions packages/web/src/components/dog-ear/DogEar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
} from '@audius/stems'
import cn from 'classnames'

import { ReactComponent as Rectangle } from 'assets/img/dogEarRectangle.svg'
import { ReactComponent as IconHidden } from 'assets/img/iconHidden.svg'
import { ReactComponent as IconStar } from 'assets/img/iconStar.svg'
import { isMobile } from 'utils/clientUtil'
Expand All @@ -17,50 +18,52 @@ import styles from './DogEar.module.css'
export type DogEarProps = {
type: DogEarType
className?: string
containerClassName?: string
}

const getIcon = (type: DogEarType) => {
switch (type) {
case DogEarType.STAR:
return IconStar
case DogEarType.HIDDEN:
return IconHidden
case DogEarType.LOCKED:
return IconLock
case DogEarType.COLLECTIBLE_GATED:
return IconCollectible
case DogEarType.USDC_PURCHASE:
return IconCart
case DogEarType.SPECIAL_ACCESS:
default:
return IconSpecialAccess
}
}

export const DogEar = (props: DogEarProps) => {
const { type, className, containerClassName } = props
const { type, className } = props
const isMatrixMode = isMatrix()
const isMobileMode = isMobile()
const renderIcon = () => {
switch (type) {
case DogEarType.STAR:
return <IconStar />
case DogEarType.HIDDEN:
return <IconHidden />
case DogEarType.LOCKED:
return <IconLock />
case DogEarType.COLLECTIBLE_GATED:
return <IconCollectible />
case DogEarType.USDC_PURCHASE:
return <IconCart />
case DogEarType.SPECIAL_ACCESS:
return <IconSpecialAccess />
}
}
const Icon = getIcon(type)

return (
<div
className={cn(styles.artistPick, className, {
className={cn(styles.container, className, {
[styles.isMobile]: isMobileMode,
[styles.matrix]: isMatrixMode
})}
>
<div
className={cn(styles.container, containerClassName, {
<Rectangle
className={cn(styles.rectangle, {
[styles.gated]: [
DogEarType.COLLECTIBLE_GATED,
DogEarType.SPECIAL_ACCESS,
DogEarType.LOCKED
].includes(type),
[styles.purchase]: type === DogEarType.USDC_PURCHASE,
[styles.star]: type === DogEarType.STAR,
[styles.artistPick]: type === DogEarType.STAR,
[styles.hidden]: type === DogEarType.HIDDEN
})}
/>
{renderIcon()}
<Icon className={styles.icon} />
</div>
)
}
10 changes: 8 additions & 2 deletions packages/web/src/components/tile/Tile.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
.root {
--border-width: 1px;
display: flex;
flex-direction: column;
position: relative;
border: 1px solid var(--neutral-light-8);
border: var(--border-width) solid var(--neutral-light-8);
border-radius: var(--unit-2);
background-color: var(--white);
transition: all var(--expressive);
overflow: hidden;
}

.borderOffset {
position: absolute;
top: calc(-1 * var(--border-width));
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Open to feedback on this pattern. My goal with this PR was to remove knowledge of the parent from DogEar. The place where we decide how far to offset a component to cover the border is the place that defines said border!

Copy link
Contributor

Choose a reason for hiding this comment

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

if someone overwrites borderWidth later in a different style, that won't get picked up here right? They'd have to set var(--border-width) instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If you set a class or inline style on any component using this class, and within that class/style set --border-width: value, this will pick up that value and use it. This is also inheriting the value from the nearest parent that has it set (in this case .root), so you can set the value on that instead.

If you were trying to do it from outside this module or the corresponding component, it might be a little trickier. But I think the idea is that this stays contained to only this module.

left: calc(-1 * var(--border-width));
}

.near {
Expand Down
Loading