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"> <div className="flex items-center gap-3">
<button <button
onClick={() => setShowDeleteModal(true)} 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 Delete
</button> </button>
@@ -312,13 +312,13 @@ export default function ReplayViewerPage() {
<div className="flex gap-3 justify-end"> <div className="flex gap-3 justify-end">
<button <button
onClick={() => setShowDeleteModal(false)} 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 Cancel
</button> </button>
<button <button
onClick={handleDelete} 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 Delete
</button> </button>
@@ -361,12 +361,12 @@ export default function ReplayViewerPage() {
border-radius: 3px !important; border-radius: 3px !important;
} }
.rr-progress__step { .rr-progress__step {
background: #f97316 !important; background: #FD5E0F !important;
height: 6px !important; height: 6px !important;
border-radius: 3px !important; border-radius: 3px !important;
} }
.rr-progress__handler { .rr-progress__handler {
background: #f97316 !important; background: #FD5E0F !important;
border: 2px solid #fff !important; border: 2px solid #fff !important;
width: 14px !important; width: 14px !important;
height: 14px !important; height: 14px !important;
@@ -393,7 +393,7 @@ export default function ReplayViewerPage() {
/* Play button */ /* Play button */
.rr-controller__btns button[class*="play"], .rr-controller__btns button[class*="play"],
.rr-controller__btns button:first-child { .rr-controller__btns button:first-child {
background: #f97316 !important; background: #FD5E0F !important;
color: #fff !important; color: #fff !important;
border: none !important; border: none !important;
border-radius: 6px !important; border-radius: 6px !important;
@@ -404,7 +404,7 @@ export default function ReplayViewerPage() {
} }
.rr-controller__btns button[class*="play"]:hover, .rr-controller__btns button[class*="play"]:hover,
.rr-controller__btns button:first-child:hover { .rr-controller__btns button:first-child:hover {
background: #ea580c !important; background: #E54E00 !important;
} }
/* Speed buttons */ /* Speed buttons */
@@ -424,7 +424,7 @@ export default function ReplayViewerPage() {
} }
.rr-controller__btns button.active, .rr-controller__btns button.active,
.rr-controller__btns button[class*="active"] { .rr-controller__btns button[class*="active"] {
background: #f97316 !important; background: #FD5E0F !important;
color: #fff !important; color: #fff !important;
} }
@@ -455,7 +455,7 @@ export default function ReplayViewerPage() {
transition: transform 0.2s !important; transition: transform 0.2s !important;
} }
.switch input:checked + label { .switch input:checked + label {
background: #f97316 !important; background: #FD5E0F !important;
} }
.switch input:checked + label::after { .switch input:checked + label::after {
transform: translateX(16px) !important; transform: translateX(16px) !important;

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

@@ -111,7 +111,7 @@ export default function ReplaysPage() {
</span> </span>
</h1> </h1>
{site.replay_mode === 'disabled' && ( {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>⚠️</span>
<span>Session replay is disabled</span> <span>Session replay is disabled</span>
<button <button
@@ -128,7 +128,7 @@ export default function ReplaysPage() {
{/* Filters */} {/* Filters */}
<div className="mb-6 flex gap-4 flex-wrap"> <div className="mb-6 flex gap-4 flex-wrap">
<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.device_type || ''} value={filters.device_type || ''}
onChange={(e) => setFilters(prev => ({ ...prev, device_type: e.target.value || undefined, offset: 0 }))} onChange={(e) => setFilters(prev => ({ ...prev, device_type: e.target.value || undefined, offset: 0 }))}
> >
@@ -139,7 +139,7 @@ export default function ReplaysPage() {
</select> </select>
<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 || ''} value={filters.min_duration || ''}
onChange={(e) => setFilters(prev => ({ ...prev, min_duration: e.target.value ? parseInt(e.target.value) : undefined, offset: 0 }))} 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 <button
onClick={() => handlePageChange((filters.offset || 0) - (filters.limit || 20))} onClick={() => handlePageChange((filters.offset || 0) - (filters.limit || 20))}
disabled={currentPage === 1} 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 Previous
</button> </button>
@@ -260,7 +260,7 @@ export default function ReplaysPage() {
<button <button
onClick={() => handlePageChange((filters.offset || 0) + (filters.limit || 20))} onClick={() => handlePageChange((filters.offset || 0) + (filters.limit || 20))}
disabled={currentPage === totalPages} 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 Next
</button> </button>