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

Improve visibility and appearance of video category navigation arrows

Browse Source 
Update styling for left and right scroll buttons in the Netflix grid component to improve visibility and aesthetic appeal.

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:51:41 +00:00
parent 7d7125f7a1
commit ca51a8b40d
2 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756457459894.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

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

@ -161,7 +161,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{/* Left scroll button */}
<Button
onClick={() => scroll('left')}
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"
className="absolute -left-6 top-1/2 -translate-y-1/2 z-20 bg-black/80 hover:bg-black/95 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-xl"
size="sm"
>
<ChevronLeft className="w-5 h-5" />
@ -170,7 +170,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
{/* Right scroll button */}
<Button
onClick={() => scroll('right')}
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"
className="absolute -right-6 top-1/2 -translate-y-1/2 z-20 bg-black/80 hover:bg-black/95 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-xl"
size="sm"
>
<ChevronRight className="w-5 h-5" />