Update overlay color and text color handling
This commit is contained in:
@@ -3,7 +3,7 @@ import {msg} from '@lingui/macro'
|
|||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
|
||||||
import {useTrendingSettings} from '#/state/preferences/trending'
|
import {useTrendingSettings} from '#/state/preferences/trending'
|
||||||
import {atoms as a, useLayoutBreakpoints, useTheme} from '#/alf'
|
import {atoms as a, useLayoutBreakpoints} from '#/alf'
|
||||||
import {Button} from '#/components/Button'
|
import {Button} from '#/components/Button'
|
||||||
import {DotGrid_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid'
|
import {DotGrid_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid'
|
||||||
import {TrendingInterstitial} from '#/components/interstitials/Trending'
|
import {TrendingInterstitial} from '#/components/interstitials/Trending'
|
||||||
@@ -37,7 +37,6 @@ export function DiscoverFeedLiveEventFeedsAndTrendingBanner() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function Inner({feed}: {feed: LiveEventFeed}) {
|
function Inner({feed}: {feed: LiveEventFeed}) {
|
||||||
const t = useTheme()
|
|
||||||
const {_} = useLingui()
|
const {_} = useLingui()
|
||||||
const optionsMenuControl = useDialogControl()
|
const optionsMenuControl = useDialogControl()
|
||||||
|
|
||||||
@@ -70,11 +69,7 @@ function Inner({feed}: {feed: LiveEventFeed}) {
|
|||||||
/>
|
/>
|
||||||
<EllipsisIcon
|
<EllipsisIcon
|
||||||
size="sm"
|
size="sm"
|
||||||
fill={
|
fill={feed.images.wide.textColor}
|
||||||
feed.images.wide.textColor === 'light'
|
|
||||||
? t.palette.white
|
|
||||||
: t.palette.black
|
|
||||||
}
|
|
||||||
style={[a.z_20]}
|
style={[a.z_20]}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -28,7 +28,8 @@ export function LiveEventFeedCardWide({
|
|||||||
const {gtPhone} = useBreakpoints()
|
const {gtPhone} = useBreakpoints()
|
||||||
|
|
||||||
const image = feed.images.wide
|
const image = feed.images.wide
|
||||||
const textColor = feed.images.wide.textColor === 'light' ? 'white' : 'black'
|
const overlayColor = image.overlayColor
|
||||||
|
const textColor = image.textColor
|
||||||
const url = useMemo(() => {
|
const url = useMemo(() => {
|
||||||
// Validated in multiple places on the backend
|
// Validated in multiple places on the backend
|
||||||
if (isBskyCustomFeedUrl(feed.url)) {
|
if (isBskyCustomFeedUrl(feed.url)) {
|
||||||
@@ -70,7 +71,7 @@ export function LiveEventFeedCardWide({
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={[image.overlayColor, utils.alpha(image.overlayColor, 0)]}
|
colors={[overlayColor, utils.alpha(overlayColor, 0)]}
|
||||||
locations={[0, 1]}
|
locations={[0, 1]}
|
||||||
start={{x: 0, y: 0}}
|
start={{x: 0, y: 0}}
|
||||||
end={{x: 1, y: 0}}
|
end={{x: 1, y: 0}}
|
||||||
@@ -87,10 +88,7 @@ export function LiveEventFeedCardWide({
|
|||||||
|
|
||||||
<View style={[a.flex_1, a.justify_end]}>
|
<View style={[a.flex_1, a.justify_end]}>
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={[
|
colors={[overlayColor, utils.alpha(overlayColor, 0)]}
|
||||||
image.overlayColor,
|
|
||||||
utils.alpha(image.overlayColor, 0),
|
|
||||||
]}
|
|
||||||
locations={[0, 1]}
|
locations={[0, 1]}
|
||||||
start={{x: 0, y: 0}}
|
start={{x: 0, y: 0}}
|
||||||
end={{x: 1, y: 0}}
|
end={{x: 1, y: 0}}
|
||||||
|
|||||||
Reference in New Issue
Block a user