From 66950a08cb0551fe600bf8c8d14f5e58632c11d5 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 22 Jul 2025 15:18:07 -0700
Subject: [PATCH] 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(+)

diff --git a/src/components/VideoPostCard.tsx b/src/components/VideoPostCard.tsx
index 4cb4c4a75c..a1bdd29b4b 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 8eaa13be00..c64da3b5da 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,
           ]}>