diff --git a/src/components/Filters/ContentFilters.css b/src/components/Filters/ContentFilters.css index 4a02547..a305815 100644 --- a/src/components/Filters/ContentFilters.css +++ b/src/components/Filters/ContentFilters.css @@ -3,17 +3,17 @@ justify-content: center; gap: 8px; padding: 10px 16px; - /* Match sociowall panel colors */ + /* Blue-tinted glassmorphism to match sociowall */ background: linear-gradient( 180deg, - rgba(22, 26, 38, 0.95) 0%, - rgba(18, 22, 32, 0.96) 100% + rgba(20, 35, 60, 0.92) 0%, + rgba(15, 28, 50, 0.94) 100% ); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 999px; - border: 1px solid rgba(100, 120, 160, 0.2); - box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(59, 130, 246, 0.25); + box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.1); margin: 0 auto 12px auto; max-width: 420px; } @@ -108,10 +108,11 @@ body[data-theme="blue"] .content-filters { background: linear-gradient( 180deg, - rgba(22, 26, 38, 0.95) 0%, - rgba(18, 22, 32, 0.96) 100% + rgba(20, 35, 60, 0.92) 0%, + rgba(15, 28, 50, 0.94) 100% ); - border-color: rgba(100, 120, 160, 0.2); + border-color: rgba(59, 130, 246, 0.25); + box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.1); } /* Dark theme */ diff --git a/src/components/Posts/PostCard.jsx b/src/components/Posts/PostCard.jsx index 1b299e9..b8eeae6 100644 --- a/src/components/Posts/PostCard.jsx +++ b/src/components/Posts/PostCard.jsx @@ -236,7 +236,9 @@ export default function PostCard({ post, selected, onSelect, onPostDeleted, onPo username && author && author.toLowerCase() === username.toLowerCase(); const [authorAvatar, setAuthorAvatar] = useState(""); const sub = (post?.sub_category || post?.subCategory || "").toString(); - const timeAgo = formatRelativeTime(post?.created_at || post?.CreatedAt || post?.createdAt); + const contentType = (post?.content_type || "").toString().toLowerCase(); + const isLiveContent = contentType === "camera" || contentType === "live" || contentType === "stream"; + const timeAgo = isLiveContent ? "LIVE" : formatRelativeTime(post?.created_at || post?.CreatedAt || post?.createdAt); const cat = categoryLabel(post); const metaLine = useMemo(() => { const parts = []; @@ -326,7 +328,7 @@ export default function PostCard({ post, selected, onSelect, onPostDeleted, onPo
{author}
-
{timeAgo}
+
{timeAgo}
{cat}
diff --git a/src/styles/posts.css b/src/styles/posts.css index 8f83d71..41c5f6c 100644 --- a/src/styles/posts.css +++ b/src/styles/posts.css @@ -42,11 +42,11 @@ flex-direction: column; gap: 0.75rem; - /* Glassmorphism dark gray */ + /* Glassmorphism with blue tint */ background: linear-gradient( 180deg, - rgba(22, 26, 38, 0.98) 0%, - rgba(18, 22, 32, 0.99) 100% + rgba(18, 30, 52, 0.97) 0%, + rgba(14, 24, 42, 0.98) 100% ); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); @@ -54,9 +54,9 @@ /* Rounded corners */ border-radius: 24px; - /* Border */ - border: 1px solid rgba(100, 120, 160, 0.2); - box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4); + /* Border with blue accent */ + border: 1px solid rgba(59, 130, 246, 0.2); + box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4), 0 0 30px rgba(59, 130, 246, 0.05); } /* ───────────────────────────────────────────────────────────────────────────── @@ -290,6 +290,26 @@ background: #475569; } +/* Live indicator styling */ +.sw-wall-time-live { + color: #ef4444; + font-weight: 700; + font-size: 0.72rem; + letter-spacing: 0.05em; +} + +.sw-wall-time-live::before { + width: 6px; + height: 6px; + background: #ef4444; + animation: live-pulse 1.5s ease-in-out infinite; +} + +@keyframes live-pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.5; transform: scale(1.3); } +} + .sw-wall-badge { font-size: 0.65rem; font-weight: 700;