From 605c50d6c7e848a2581dbf9fe02c21da28225b25 Mon Sep 17 00:00:00 2001 From: Caidan Williams Date: Tue, 22 Jul 2025 12:39:20 -0700 Subject: style(ui): use larger border radius on video post card Updated CompactVideoPostCard to use a larger border radius by replacing rounded_md with rounded_lg. --- src/components/VideoPostCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/components/VideoPostCard.tsx') diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx index 191c7b82a..99ac53eaf 100644 --- a/src/components/VideoPostCard.tsx +++ b/src/components/VideoPostCard.tsx @@ -421,7 +421,7 @@ export function CompactVideoPostCard({ Date: Tue, 22 Jul 2025 13:54:22 -0700 Subject: feat(ui): add shadow to video post trending cards Added a small shadow (shadow_sm) to the CompactVideoPostCard and the "View more" card in TrendingVideos for improved visual depth and consistency. This enhances the card appearance and aligns with the design system. --- src/components/VideoPostCard.tsx | 3 ++- src/components/interstitials/TrendingVideos.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'src/components/VideoPostCard.tsx') diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx index 99ac53eaf..4cb4c4a75 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, @@ -534,7 +535,7 @@ export function CompactVideoPostCardPlaceholder() { const black = getBlackColor(t) return ( - + {({pressed}) => ( Date: Tue, 22 Jul 2025 15:18:07 -0700 Subject: feat(ui): add border to video post and trending cards Added a border and low contrast border color to CompactVideoPostCard, CompactVideoPostCardPlaceholder, and TrendingVideos card components for improved visual separation. --- src/components/VideoPostCard.tsx | 8 ++++++++ src/components/interstitials/TrendingVideos.tsx | 2 ++ 2 files changed, 10 insertions(+) (limited to 'src/components/VideoPostCard.tsx') diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx index 4cb4c4a75..a1bdd29b4 100644 --- a/src/components/VideoPostCard.tsx +++ b/src/components/VideoPostCard.tsx @@ -424,6 +424,8 @@ export function CompactVideoPostCard({ a.justify_center, a.rounded_lg, a.overflow_hidden, + a.border, + t.atoms.border_contrast_low, { backgroundColor: black, aspectRatio: 9 / 16, @@ -444,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, @@ -465,6 +469,8 @@ export function CompactVideoPostCard({ a.justify_center, a.rounded_lg, a.overflow_hidden, + a.border, + t.atoms.border_contrast_low, { backgroundColor: black, aspectRatio: 9 / 16, @@ -540,6 +546,8 @@ export function CompactVideoPostCardPlaceholder() { style={[ 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 8eaa13be0..c64da3b5d 100644 --- a/src/components/interstitials/TrendingVideos.tsx +++ b/src/components/interstitials/TrendingVideos.tsx @@ -196,6 +196,8 @@ function VideoCards({ a.align_center, a.flex_1, a.rounded_lg, + a.border, + t.atoms.border_contrast_low, t.atoms.bg, t.atoms.shadow_sm, ]}> -- cgit 1.4.1