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 +++--- src/components/interstitials/TrendingVideos.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src') 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({ {({pressed}) => ( -- cgit 1.4.1 From ce02e4aa3d7ba9ad12c0b3d6861ea4c436e93aef Mon Sep 17 00:00:00 2001 From: Caidan Williams Date: Tue, 22 Jul 2025 13:32:56 -0700 Subject: feat(atoms): add overflow_visible utility Added the `overflow_visible` atom to the atoms utility object for setting CSS overflow to 'visible'. This complements the existing `overflow_hidden` atom and improves flexibility for layout styling. --- src/alf/atoms.ts | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src') 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', }, -- cgit 1.4.1 From 12e67f53dd6ca0d807eab84813543b663e4b260d Mon Sep 17 00:00:00 2001 From: Caidan Williams Date: Tue, 22 Jul 2025 13:34:06 -0700 Subject: fix(ui): overflow for TrendingVideos scroll container Added overflow_hidden to the main container and set overflow_visible on the FlatList to ensure proper display of horizontally scrolling cards. This resolves clipping issues and improves the visual layout of trending videos. --- src/components/interstitials/TrendingVideos.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx index 3ed3eadd8..b76066330 100644 --- a/src/components/interstitials/TrendingVideos.tsx +++ b/src/components/interstitials/TrendingVideos.tsx @@ -71,6 +71,7 @@ export function TrendingVideos() { a.pt_lg, a.pb_lg, a.border_t, + a.overflow_hidden, t.atoms.border_contrast_low, t.atoms.bg_contrast_25, ]}> @@ -104,7 +105,8 @@ export function TrendingVideos() { horizontal showsHorizontalScrollIndicator={false} decelerationRate="fast" - snapToInterval={CARD_WIDTH + a.gap_sm.gap}> + snapToInterval={CARD_WIDTH + a.gap_sm.gap} + style={[a.overflow_visible]}> 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') 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') 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 From 229f275246f12b563ea89faab1cbe3f27b98e404 Mon Sep 17 00:00:00 2001 From: Caidan Williams Date: Tue, 22 Jul 2025 15:32:44 -0700 Subject: fix(ui): adjust TrendingVideos padding and gap sizes Reduced top padding from large to small and updated horizontal padding handling for the TrendingVideos component. Increased card gap and snap interval from small to medium. --- src/components/interstitials/TrendingVideos.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx index c64da3b5d..439803dfa 100644 --- a/src/components/interstitials/TrendingVideos.tsx +++ b/src/components/interstitials/TrendingVideos.tsx @@ -68,7 +68,7 @@ export function TrendingVideos() { return ( Date: Tue, 22 Jul 2025 15:50:51 -0700 Subject: feat(ui): remove the header icon Replace the header's flex row with a single bold text element for "Trending Videos", removing the Graph icon and extra container. --- src/components/interstitials/TrendingVideos.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx index 439803dfa..3ad5625c3 100644 --- a/src/components/interstitials/TrendingVideos.tsx +++ b/src/components/interstitials/TrendingVideos.tsx @@ -83,12 +83,9 @@ export function TrendingVideos() { a.align_center, a.justify_between, ]}> - - - - Trending Videos - - + + Trending Videos + -- cgit 1.4.1 From 269d70e66c7f3616664990a053350fd873a12472 Mon Sep 17 00:00:00 2001 From: Caidan Williams Date: Tue, 22 Jul 2025 16:32:15 -0700 Subject: feat(ui): increase the trending videos card size --- src/components/interstitials/TrendingVideos.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx index c95311d0e..f5d972f4a 100644 --- a/src/components/interstitials/TrendingVideos.tsx +++ b/src/components/interstitials/TrendingVideos.tsx @@ -25,7 +25,7 @@ import { CompactVideoPostCardPlaceholder, } from '#/components/VideoPostCard' -const CARD_WIDTH = 100 +const CARD_WIDTH = 108 const FEED_DESC = `feedgen|${VIDEO_FEED_URI}` const FEED_PARAMS: { -- cgit 1.4.1 From 742397bb1a0d13c163dd92a8271f8468159bcc4f Mon Sep 17 00:00:00 2001 From: Caidan Williams Date: Thu, 24 Jul 2025 12:31:34 -0700 Subject: fix(lint): remove unused import --- src/components/interstitials/TrendingVideos.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/components/interstitials/TrendingVideos.tsx b/src/components/interstitials/TrendingVideos.tsx index f5d972f4a..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' -- cgit 1.4.1