ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: update skeleton mode indicators with new icon and styling for consistency across replay and settings pages

Browse Source
This commit is contained in:
Usman Baig
2026-01-19 13:54:00 +01:00
parent d1ad1c8cf6
commit 47b7b5d858
3 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/sites/[id]/replays/[replayId]/page.tsx
View File

@@ -5,6 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
import { getSite, type Site } from '@/lib/api/sites' import { getSite, type Site } from '@/lib/api/sites'
import { getReplay, getReplayData, deleteReplay, formatDuration, type SessionReplay } from '@/lib/api/replays' import { getReplay, getReplayData, deleteReplay, formatDuration, type SessionReplay } from '@/lib/api/replays'
import { toast } from 'sonner' import { toast } from 'sonner'
import { LockClosedIcon } from '@radix-ui/react-icons'
import LoadingOverlay from '@/components/LoadingOverlay' import LoadingOverlay from '@/components/LoadingOverlay'
import type { eventWithTime } from '@rrweb/types' import type { eventWithTime } from '@rrweb/types'
import 'rrweb-player/dist/style.css' import 'rrweb-player/dist/style.css'
@@ -207,7 +208,8 @@ export default function ReplayViewerPage() {
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{replay.is_skeleton_mode && ( {replay.is_skeleton_mode && (
<span className="text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-2 py-0.5 rounded"> <span className="inline-flex items-center gap-1.5 text-xs bg-brand-orange/10 text-brand-orange px-2 py-0.5 rounded">
<LockClosedIcon className="w-3 h-3 flex-shrink-0" />
Skeleton Mode Skeleton Mode
</span> </span>
)} )}
@@ -282,8 +284,9 @@ export default function ReplayViewerPage() {
<div className="pt-2 border-t border-neutral-200 dark:border-neutral-800"> <div className="pt-2 border-t border-neutral-200 dark:border-neutral-800">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{replay.is_skeleton_mode ? ( {replay.is_skeleton_mode ? (
<span className="text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-2 py-1 rounded"> <span className="inline-flex items-center gap-1.5 text-xs bg-brand-orange/10 text-brand-orange px-2 py-1 rounded">
🔒 Skeleton Mode (Anonymous) <LockClosedIcon className="w-3 h-3 flex-shrink-0" />
Skeleton Mode (Anonymous)
</span> </span>
) : replay.consent_given ? ( ) : replay.consent_given ? (
<span className="text-xs bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 px-2 py-1 rounded"> <span className="text-xs bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 px-2 py-1 rounded">

4
app/sites/[id]/replays/page.tsx
View File

@@ -5,6 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
import { getSite, type Site } from '@/lib/api/sites' import { getSite, type Site } from '@/lib/api/sites'
import { listReplays, formatDuration, type ReplayListItem, type ReplayFilters } from '@/lib/api/replays' import { listReplays, formatDuration, type ReplayListItem, type ReplayFilters } from '@/lib/api/replays'
import { toast } from 'sonner' import { toast } from 'sonner'
import { LockClosedIcon } from '@radix-ui/react-icons'
import LoadingOverlay from '@/components/LoadingOverlay' import LoadingOverlay from '@/components/LoadingOverlay'
function formatDate(dateString: string) { function formatDate(dateString: string) {
@@ -187,7 +188,8 @@ export default function ReplaysPage() {
<td className="px-4 py-4"> <td className="px-4 py-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{replay.is_skeleton_mode && ( {replay.is_skeleton_mode && (
<span className="text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-1.5 py-0.5 rounded"> <span className="inline-flex items-center gap-1 text-xs bg-brand-orange/10 text-brand-orange px-1.5 py-0.5 rounded">
<LockClosedIcon className="w-3 h-3 flex-shrink-0" />
Skeleton Skeleton
</span> </span>
)} )}

6
app/sites/[id]/settings/page.tsx
View File

@@ -19,6 +19,7 @@ import {
ExclamationTriangleIcon, ExclamationTriangleIcon,
LightningBoltIcon, LightningBoltIcon,
VideoIcon, VideoIcon,
LockClosedIcon,
} from '@radix-ui/react-icons' } from '@radix-ui/react-icons'
const TIMEZONES = [ const TIMEZONES = [
@@ -816,7 +817,10 @@ export default function SiteSettingsPage() {
<div> <div>
<div className="font-medium text-neutral-900 dark:text-white flex items-center gap-2"> <div className="font-medium text-neutral-900 dark:text-white flex items-center gap-2">
Anonymous Skeleton Anonymous Skeleton
<span className="text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-2 py-0.5 rounded">Privacy First</span> <span className="inline-flex items-center gap-1 text-xs bg-brand-orange/10 text-brand-orange px-2 py-0.5 rounded">
<LockClosedIcon className="w-3 h-3 flex-shrink-0" />
Privacy First
</span>
</div> </div>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5"> <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
All text replaced with blocks (████), all inputs hidden. Layout and clicks preserved. No consent required. All text replaced with blocks (████), all inputs hidden. Layout and clicks preserved. No consent required.