sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve visibility and appearance of category navigation buttons

Browse Source 
Update styling for left and right scroll buttons in the Netflix grid component, increasing hover opacity and adjusting chevron icon size.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/xF0EUqR
This commit is contained in:
sebastjanartic 2025-08-29 08:47:28 +00:00
parent e2bb137f56
commit 583f2025dc
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/netflix-grid.tsx
View File

@ -161,19 +161,19 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{/* Left scroll button */}
<Button
onClick={() => scroll('left')}
className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-black/70 hover:bg-black/90 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-lg"
size="sm"
>
<ChevronLeft className="w-6 h-6" />
<ChevronLeft className="w-5 h-5" />
</Button>
{/* Right scroll button */}
<Button
onClick={() => scroll('right')}
className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-black/70 hover:bg-black/90 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-lg"
size="sm"
>
<ChevronRight className="w-6 h-6" />
<ChevronRight className="w-5 h-5" />
</Button>
{/* Scrollable video row */}