diff options
| -rw-r--r-- | src/alf/atoms.ts | 3 | ||||
| -rw-r--r-- | src/components/VideoPostCard.tsx | 17 | ||||
| -rw-r--r-- | src/components/interstitials/TrendingVideos.tsx | 31 |
3 files changed, 32 insertions, 19 deletions
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 440ac16ac..572560217 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -67,6 +67,9 @@ export const atoms = { zIndex: 50, }, + overflow_visible: { + overflow: 'visible', + }, overflow_hidden: { overflow: 'hidden', }, diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx index 191c7b82a..a1bdd29b4 100644 --- a/src/components/VideoPostCard.tsx +++ b/src/components/VideoPostCard.tsx @@ -411,6 +411,7 @@ export function CompactVideoPostCard({ onPressOut={onPressOut} style={[ a.flex_col, + t.atoms.shadow_sm, { alignItems: undefined, justifyContent: undefined, @@ -421,8 +422,10 @@ export function CompactVideoPostCard({ <View style={[ a.justify_center, - a.rounded_md, + a.rounded_lg, a.overflow_hidden, + a.border, + t.atoms.border_contrast_low, { backgroundColor: black, aspectRatio: 9 / 16, @@ -443,6 +446,8 @@ export function CompactVideoPostCard({ a.inset_0, a.justify_center, a.align_center, + a.border, + t.atoms.border_contrast_low, { backgroundColor: 'black', opacity: 0.2, @@ -462,8 +467,10 @@ export function CompactVideoPostCard({ <View style={[ a.justify_center, - a.rounded_md, + a.rounded_lg, a.overflow_hidden, + a.border, + t.atoms.border_contrast_low, { backgroundColor: black, aspectRatio: 9 / 16, @@ -534,11 +541,13 @@ export function CompactVideoPostCardPlaceholder() { const black = getBlackColor(t) return ( - <View style={[a.flex_1]}> + <View style={[a.flex_1, t.atoms.shadow_sm]}> <View style={[ - a.rounded_md, + a.rounded_lg, a.overflow_hidden, + a.border, + t.atoms.border_contrast_low, { backgroundColor: black, aspectRatio: 9 / 16, diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx index fab738b9c..4d59e2fb5 100644 --- a/src/components/interstitials/TrendingVideos.tsx +++ b/src/components/interstitials/TrendingVideos.tsx @@ -16,7 +16,6 @@ import {atoms as a, useGutters, useTheme} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' -import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending' import {Link} from '#/components/Link' import * as Prompt from '#/components/Prompt' import {Text} from '#/components/Typography' @@ -25,7 +24,7 @@ import { CompactVideoPostCardPlaceholder, } from '#/components/VideoPostCard' -const CARD_WIDTH = 100 +const CARD_WIDTH = 108 const FEED_DESC = `feedgen|${VIDEO_FEED_URI}` const FEED_PARAMS: { @@ -68,9 +67,10 @@ export function TrendingVideos() { return ( <View style={[ - a.pt_lg, + a.pt_sm, a.pb_lg, a.border_t, + a.overflow_hidden, t.atoms.border_contrast_low, t.atoms.bg_contrast_25, ]}> @@ -82,20 +82,17 @@ export function TrendingVideos() { a.align_center, a.justify_between, ]}> - <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_xs]}> - <Graph /> - <Text style={[a.text_md, a.font_bold, a.leading_snug]}> - <Trans>Trending Videos</Trans> - </Text> - </View> + <Text style={[a.text_sm, a.font_bold, a.leading_snug]}> + <Trans>Trending Videos</Trans> + </Text> <Button label={_(msg`Dismiss this section`)} size="tiny" - variant="ghost" + variant="solid" color="secondary" - shape="round" + shape="square" onPress={() => trendingPrompt.open()}> - <ButtonIcon icon={X} /> + <ButtonIcon icon={X} size="sm" /> </Button> </View> @@ -104,11 +101,12 @@ export function TrendingVideos() { horizontal showsHorizontalScrollIndicator={false} decelerationRate="fast" - snapToInterval={CARD_WIDTH + a.gap_sm.gap}> + snapToInterval={CARD_WIDTH + a.gap_md.gap} + style={[a.overflow_visible]}> <View style={[ a.flex_row, - a.gap_sm, + a.gap_md, { paddingLeft: gutters.paddingLeft, paddingRight: gutters.paddingRight, @@ -193,8 +191,11 @@ function VideoCards({ a.justify_center, a.align_center, a.flex_1, - a.rounded_md, + a.rounded_lg, + a.border, + t.atoms.border_contrast_low, t.atoms.bg, + t.atoms.shadow_sm, ]}> {({pressed}) => ( <View |