Skip to content

Commit f1ad6ae

Browse files
dylanjeffersdylanjeffers
authored
Fix new theme gradient and lottie (#13780)
1 parent 0e9ea8c commit f1ad6ae

38 files changed

Lines changed: 605 additions & 328 deletions

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/harmony/src/foundations/color/primitive.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -266,9 +266,9 @@ html[data-theme='default-light'] {
266266
--harmony-dark-red: #c44357;
267267
--harmony-green: #0f9e48;
268268
--harmony-light-green: #a74cff;
269-
--harmony-gradient-color-1: #6f55d8;
270-
--harmony-gradient-color-2: #d767e1;
271-
--harmony-gradient: linear-gradient(315deg, #6f55d8 0%, #d767e1 100%);
269+
--harmony-gradient-color-1: #7f6ad6;
270+
--harmony-gradient-color-2: #5b44b8;
271+
--harmony-gradient: linear-gradient(315deg, #7f6ad6 0%, #5b44b8 100%);
272272
--harmony-coin-gradient: linear-gradient(
273273
85deg,
274274
#7f6ad6 -4.82%,
@@ -319,9 +319,9 @@ html[data-theme='default-dark'] {
319319
--harmony-dark-red: #c44357;
320320
--harmony-green: #84df64;
321321
--harmony-light-green: #c67cff;
322-
--harmony-gradient-color-1: #6f55d8;
323-
--harmony-gradient-color-2: #d767e1;
324-
--harmony-gradient: linear-gradient(315deg, #6f55d8 0%, #d767e1 100%);
322+
--harmony-gradient-color-1: #806ad8;
323+
--harmony-gradient-color-2: #9e8ee8;
324+
--harmony-gradient: linear-gradient(315deg, #806ad8 0%, #9e8ee8 100%);
325325
--harmony-coin-gradient: linear-gradient(
326326
85deg,
327327
#806ad8 -4.82%,

‎packages/harmony/src/foundations/color/primitive.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ const defaultLightPrimitives = {
5050
blue: '#7F6AD6',
5151
darkRed: '#C44357',
5252
glassOverlay: '#00000014',
53-
gradientStop1: '#6F55D8',
54-
gradientStop2: '#D767E1',
55-
gradient: 'linear-gradient(315deg, #6F55D8 0%, #D767E1 100%)',
53+
gradientStop1: '#7F6AD6',
54+
gradientStop2: '#5B44B8',
55+
gradient: 'linear-gradient(315deg, #7F6AD6 0%, #5B44B8 100%)',
5656
coinGradient:
5757
'linear-gradient(85deg, #7F6AD6 -4.82%, #A74CFF 49.8%, #7F6AD6 104.43%)',
5858
coinGradientColor1: '#7F6AD6',
@@ -121,9 +121,9 @@ const defaultDarkPrimitives = {
121121
blue: '#806AD8',
122122
darkRed: '#C44357',
123123
glassOverlay: '#0F0F0F99',
124-
gradientStop1: '#6F55D8',
125-
gradientStop2: '#D767E1',
126-
gradient: 'linear-gradient(315deg, #6F55D8 0%, #D767E1 100%)',
124+
gradientStop1: '#806AD8',
125+
gradientStop2: '#9E8EE8',
126+
gradient: 'linear-gradient(315deg, #806AD8 0%, #9E8EE8 100%)',
127127
coinGradient:
128128
'linear-gradient(85deg, #806AD8 -4.82%, #C67CFF 49.8%, #806AD8 104.43%)',
129129
coinGradientColor1: '#806AD8',

‎packages/mobile/ios/Podfile.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1329,7 +1329,7 @@ PODS:
13291329
- React
13301330
- react-native-google-cast/NoBluetoothArm (= 4.6.2)
13311331
- react-native-google-cast/NoBluetoothArm (4.6.2):
1332-
- google-cast-sdk-dynamic-xcframework-no-bluetooth
1332+
- google-cast-sdk-dynamic-xcframework-no-bluetooth (= 4.7.1)
13331333
- React
13341334
- react-native-google-cast/RNGoogleCast
13351335
- react-native-google-cast/RNGoogleCast (4.6.2):
@@ -2532,7 +2532,7 @@ SPEC CHECKSUMS:
25322532
react-native-document-picker: 4f90a074d1eb269e32d5563c53b70d469180cece
25332533
react-native-fast-crypto: b30594570dab23aca7e74e206b2c03e28a006216
25342534
react-native-get-random-values: 384787fd76976f5aec9465aff6fa9e9129af1e74
2535-
react-native-google-cast: 18b9b2fc518caabfa65d309409e160b3fc6d1733
2535+
react-native-google-cast: 0a82cf63114470403e41e04ffa2b13d6448b6112
25362536
react-native-image-picker: f104798044ef2c9211c42a48025d0693b5f34981
25372537
react-native-in-app-review: db8bb167a5f238e7ceca5c242d6b36ce8c4404a4
25382538
react-native-keyboard-controller: 7c1271a9fe703b7ee588b75d6c486eda79e5081b

‎packages/mobile/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@audius/mobile",
3-
"version": "1.5.165",
3+
"version": "1.5.166",
44
"private": true,
55
"scripts": {
66
"android:dev": "ENVFILE=.env.dev turbo run android -- --mode=prodDebug",

‎packages/web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"productName": "Audius",
44
"description": "The Audius web client reference implementation",
55
"author": "Audius",
6-
"version": "1.5.165",
6+
"version": "1.5.166",
77
"private": true,
88
"scripts": {
99
"DEV & BUILD========================================": "",

‎packages/web/src/components/animated-button/AnimatedButtonProvider.tsx‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import cn from 'classnames'
1212
import Lottie, { LottieRefCurrentProps } from 'lottie-react'
1313

1414
import { SeoLink } from 'components/link'
15+
import { applyThemeToLottie } from 'utils/lottieTheme'
16+
import { useLottieThemeColors } from 'utils/theme/theme'
1517

1618
import styles from './AnimatedButtonProvider.module.css'
1719

@@ -129,45 +131,54 @@ const AnimatedButton = ({
129131
{buttonElement}
130132
</SeoLink>
131133
) : (
132-
<button {...rootProps}>{buttonElement}</button>
134+
<button {...rootProps} {...buttonProps}>
135+
{buttonElement}
136+
</button>
133137
)
134138
}
135139

140+
export type LottieThemeVariant = 'accent' | 'neutral'
141+
136142
export type AnimatedButtonProviderProps = {
137-
darkMode: boolean
143+
/** @deprecated No longer used - theme applied via useLottieThemeColors */
144+
darkMode?: boolean
138145
isMatrix: boolean
139-
iconDarkJSON: () => Promise<any>
140-
iconLightJSON: () => Promise<any>
146+
/** Base Lottie JSON loader - theme colors applied at runtime */
147+
iconJSON: () => Promise<IconJSON>
148+
/** 'accent' = active state, 'neutral' = inactive state. Defaults from isActive. */
149+
variant?: LottieThemeVariant
141150
} & BaseAnimatedButtonProps
142151

143152
const AnimatedButtonProvider = ({
144-
darkMode,
145-
iconDarkJSON,
146-
iconLightJSON,
153+
iconJSON: iconJSONLoader,
154+
isActive,
155+
variant: variantProp,
147156
...buttonProps
148157
}: AnimatedButtonProviderProps) => {
149158
const [iconJSON, setIconJSON] = useState<IconJSON | null>(null)
150-
const defaultAnimations = useRef<IconJSON | null>(null)
151-
const darkAnimations = useRef<IconJSON | null>(null)
159+
const baseAnimation = useRef<IconJSON | null>(null)
160+
const themeColors = useLottieThemeColors()
161+
const variant = variantProp ?? (isActive ? 'accent' : 'neutral')
152162

153163
useEffect(() => {
154-
const loadAnimations = async () => {
155-
if (darkMode) {
156-
if (!darkAnimations.current) {
157-
darkAnimations.current = await iconDarkJSON()
158-
}
159-
setIconJSON({ ...darkAnimations.current })
160-
} else {
161-
if (!defaultAnimations.current) {
162-
defaultAnimations.current = await iconLightJSON()
163-
}
164-
setIconJSON({ ...defaultAnimations.current })
164+
const loadAndTheme = async () => {
165+
if (!baseAnimation.current) {
166+
baseAnimation.current = await iconJSONLoader()
165167
}
168+
setIconJSON(
169+
applyThemeToLottie(
170+
baseAnimation.current,
171+
themeColors,
172+
variant
173+
) as IconJSON
174+
)
166175
}
167-
loadAnimations()
168-
}, [darkMode, setIconJSON, iconDarkJSON, iconLightJSON])
176+
loadAndTheme()
177+
}, [iconJSONLoader, themeColors, variant])
169178

170-
return iconJSON && <AnimatedButton iconJSON={iconJSON} {...buttonProps} />
179+
return iconJSON ? (
180+
<AnimatedButton iconJSON={iconJSON} isActive={isActive} {...buttonProps} />
181+
) : null
171182
}
172183

173184
export default memo(AnimatedButtonProvider)

‎packages/web/src/components/animated-button/AnimatedIconButton.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,12 @@ export enum AnimatedIconType {
1111
REPOST_LIGHT = 'REPOST_LIGHT'
1212
}
1313

14-
const animationMap = {
15-
[AnimatedIconType.FAVORITE]: {
16-
dark: 'iconFavoriteDark',
17-
light: 'iconFavoriteLight'
18-
},
19-
[AnimatedIconType.REPOST]: {
20-
dark: 'iconRepostDark',
21-
light: 'iconRepostLight'
22-
},
23-
[AnimatedIconType.FAVORITE_LIGHT]: {
24-
dark: 'iconFavoriteLighterDark',
25-
light: 'iconFavoriteLighterLight'
26-
},
27-
[AnimatedIconType.REPOST_LIGHT]: {
28-
dark: 'iconRepostLighterDark',
29-
light: 'iconRepostLighterLight'
30-
}
14+
/** Base asset path per icon - theme applied at runtime via useLottieThemeColors */
15+
const animationMap: Record<AnimatedIconType, string> = {
16+
[AnimatedIconType.FAVORITE]: 'iconFavoriteLight',
17+
[AnimatedIconType.REPOST]: 'iconRepostLight',
18+
[AnimatedIconType.FAVORITE_LIGHT]: 'iconFavoriteLighterLight',
19+
[AnimatedIconType.REPOST_LIGHT]: 'iconRepostLighterLight'
3120
}
3221

3322
type AnimatedIconButtonProps = {
@@ -36,44 +25,54 @@ type AnimatedIconButtonProps = {
3625
isDisabled?: boolean
3726
isActive?: boolean
3827
className?: string
28+
wrapperClassName?: string
3929
stopPropagation?: boolean
4030
activeClassName?: string
4131
disabledClassName?: string
4232
icon: AnimatedIconType
43-
darkMode: boolean
33+
/** @deprecated Theme applied at runtime - no longer used */
34+
darkMode?: boolean
4435
isMatrix?: boolean
36+
'aria-label'?: string
4537
}
4638

4739
const AnimatedIconButton = ({
4840
onClick,
4941
href,
5042
className,
43+
wrapperClassName,
5144
activeClassName,
5245
disabledClassName,
5346
icon,
54-
darkMode,
5547
isMatrix = false,
5648
isDisabled = false,
5749
isActive = false,
58-
stopPropagation = false
50+
stopPropagation = false,
51+
'aria-label': ariaLabel,
52+
...rest
5953
}: AnimatedIconButtonProps) => {
60-
const { dark, light } = animationMap[icon]
54+
const assetPath = animationMap[icon]
6155
const [uniqueKey] = useState(`${uuid()}-${icon}`)
6256
return (
6357
<AnimatedButtonProvider
6458
uniqueKey={uniqueKey}
6559
isActive={isActive}
6660
isDisabled={isDisabled}
67-
darkMode={darkMode}
6861
isMatrix={isMatrix}
69-
onClick={onClick || ((e: MouseEvent) => {})}
62+
onClick={onClick ?? (() => {})}
7063
href={href}
71-
iconLightJSON={() => import(`../../assets/animations/${light}.json`)}
72-
iconDarkJSON={() => import(`../../assets/animations/${dark}.json`)}
64+
iconJSON={() =>
65+
import(`../../assets/animations/${assetPath}.json`).then(
66+
(m) => m.default
67+
)
68+
}
7369
activeClassName={activeClassName}
7470
disabledClassName={disabledClassName}
7571
className={className}
72+
wrapperClassName={wrapperClassName}
7673
stopPropagation={stopPropagation}
74+
aria-label={ariaLabel}
75+
{...rest}
7776
/>
7877
)
7978
}

‎packages/web/src/components/bottom-bar/buttons/ExploreButton.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,13 @@ const ExploreButton = ({
1515
<AnimatedBottomButton
1616
uniqueKey='explore-button'
1717
isActive={isActive}
18-
darkMode={darkMode}
1918
isMatrix={isMatrixMode}
2019
onClick={onClick}
2120
href={href}
22-
iconLightJSON={() =>
23-
import('../../../assets/animations/iconSearchExplore.json')
24-
}
25-
iconDarkJSON={() =>
26-
import('../../../assets/animations/iconSearchExplore.json')
21+
iconJSON={() =>
22+
import('../../../assets/animations/iconSearchExplore.json').then(
23+
(m) => m.default
24+
)
2725
}
2826
{...buttonProps}
2927
/>

‎packages/web/src/components/bottom-bar/buttons/FeedButton.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,12 @@ const FeedButton = ({
1616
uniqueKey='feed-button'
1717
isMatrix={isMatrixMode}
1818
isActive={isActive}
19-
darkMode={darkMode}
2019
onClick={onClick}
2120
href={href}
22-
iconLightJSON={() =>
23-
import('../../../assets/animations/iconFeedLight.json')
24-
}
25-
iconDarkJSON={() =>
26-
import('../../../assets/animations/iconFeedDark.json')
21+
iconJSON={() =>
22+
import('../../../assets/animations/iconFeedLight.json').then(
23+
(m) => m.default
24+
)
2725
}
2826
{...buttonProps}
2927
/>

0 commit comments

Comments
 (0)