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

fix: update button styles and colors for consistency across replay pages

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

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

@@ -165,7 +165,7 @@ export default function ReplayViewerPage() {
<div className="flex items-center gap-3">
<button
onClick={() => setShowDeleteModal(true)}
className="px-3 py-1.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
className="px-3 py-1.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors"
>
Delete
</button>
@@ -312,13 +312,13 @@ export default function ReplayViewerPage() {
<div className="flex gap-3 justify-end">
<button
onClick={() => setShowDeleteModal(false)}
className="px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
className="px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-xl transition-colors"
>
Cancel
</button>
<button
onClick={handleDelete}
className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
className="px-4 py-2 text-sm bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors"
>
Delete
</button>
@@ -361,12 +361,12 @@ export default function ReplayViewerPage() {
border-radius: 3px !important;
}
.rr-progress__step {
background: #f97316 !important;
background: #FD5E0F !important;
height: 6px !important;
border-radius: 3px !important;
}
.rr-progress__handler {
background: #f97316 !important;
background: #FD5E0F !important;
border: 2px solid #fff !important;
width: 14px !important;
height: 14px !important;
@@ -393,7 +393,7 @@ export default function ReplayViewerPage() {
/* Play button */
.rr-controller__btns button[class*="play"],
.rr-controller__btns button:first-child {
background: #f97316 !important;
background: #FD5E0F !important;
color: #fff !important;
border: none !important;
border-radius: 6px !important;
@@ -404,7 +404,7 @@ export default function ReplayViewerPage() {
}
.rr-controller__btns button[class*="play"]:hover,
.rr-controller__btns button:first-child:hover {
background: #ea580c !important;
background: #E54E00 !important;
}
/* Speed buttons */
@@ -424,7 +424,7 @@ export default function ReplayViewerPage() {
}
.rr-controller__btns button.active,
.rr-controller__btns button[class*="active"] {
background: #f97316 !important;
background: #FD5E0F !important;
color: #fff !important;
}
@@ -455,7 +455,7 @@ export default function ReplayViewerPage() {
transition: transform 0.2s !important;
}
.switch input:checked + label {
background: #f97316 !important;
background: #FD5E0F !important;
}
.switch input:checked + label::after {
transform: translateX(16px) !important;

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

@@ -111,7 +111,7 @@ export default function ReplaysPage() {
</span>
</h1>
{site.replay_mode === 'disabled' && (
<div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-3 py-1.5 rounded-lg text-sm">
<div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-3 py-1.5 rounded-xl text-sm">
<span>⚠️</span>
<span>Session replay is disabled</span>
<button
@@ -128,7 +128,7 @@ export default function ReplaysPage() {
{/* Filters */}
<div className="mb-6 flex gap-4 flex-wrap">
<select
className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-sm"
className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-800 text-sm"
value={filters.device_type || ''}
onChange={(e) => setFilters(prev => ({ ...prev, device_type: e.target.value || undefined, offset: 0 }))}
>
@@ -139,7 +139,7 @@ export default function ReplaysPage() {
</select>
<select
className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-sm"
className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-800 text-sm"
value={filters.min_duration || ''}
onChange={(e) => setFilters(prev => ({ ...prev, min_duration: e.target.value ? parseInt(e.target.value) : undefined, offset: 0 }))}
>
@@ -250,7 +250,7 @@ export default function ReplaysPage() {
<button
onClick={() => handlePageChange((filters.offset || 0) - (filters.limit || 20))}
disabled={currentPage === 1}
className="px-3 py-1 text-sm border border-neutral-200 dark:border-neutral-700 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-neutral-50 dark:hover:bg-neutral-800"
className="px-3 py-1 text-sm border border-neutral-200 dark:border-neutral-700 rounded-xl disabled:opacity-50 disabled:cursor-not-allowed hover:bg-neutral-50 dark:hover:bg-neutral-800"
>
Previous
</button>
@@ -260,7 +260,7 @@ export default function ReplaysPage() {
<button
onClick={() => handlePageChange((filters.offset || 0) + (filters.limit || 20))}
disabled={currentPage === totalPages}
className="px-3 py-1 text-sm border border-neutral-200 dark:border-neutral-700 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-neutral-50 dark:hover:bg-neutral-800"
className="px-3 py-1 text-sm border border-neutral-200 dark:border-neutral-700 rounded-xl disabled:opacity-50 disabled:cursor-not-allowed hover:bg-neutral-50 dark:hover:bg-neutral-800"
>
Next
</button>