From 20ccad65c1a522a158c36d8675ca4736bfe9d340 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 4 Sep 2025 13:29:26 +0000
Subject: [PATCH] Make the header transparent across the entire platform

Update CSS to make the header transparent, removing background and backdrop filter. Modify button colors in various components from a gradient to a solid rose color. Change placeholder text in the loading spinner.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/jh6R7y2
---
 client/src/components/bunny-video-modal.tsx | 4 ++--
 client/src/components/loading-spinner.tsx   | 2 +-
 client/src/components/netflix-grid.tsx      | 4 ++--
 client/src/index.css                        | 4 ++--
 client/src/pages/VideoPage.tsx              | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 796b248..a723936 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -232,7 +232,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 <>
                   <Button
                     onClick={() => navigateToVideo('prev')}
-                    className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20"
+                    className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-rose-600 hover:bg-rose-700 text-white border-none p-2 rounded-full z-20"
                     size="sm"
                     data-testid="button-prev-video"
                   >
@@ -240,7 +240,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                   </Button>
                   <Button
                     onClick={() => navigateToVideo('next')}
-                    className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20"
+                    className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-rose-600 hover:bg-rose-700 text-white border-none p-2 rounded-full z-20"
                     size="sm"
                     data-testid="button-next-video"
                   >
diff --git a/client/src/components/loading-spinner.tsx b/client/src/components/loading-spinner.tsx
index d0a5138..ddc199c 100644
--- a/client/src/components/loading-spinner.tsx
+++ b/client/src/components/loading-spinner.tsx
@@ -4,7 +4,7 @@ interface LoadingSpinnerProps {
   className?: string;
 }
 
-export function LoadingSpinner({ size = 'md', text = 'Loading...', className = '' }: LoadingSpinnerProps) {
+export function LoadingSpinner({ size = 'md', text = 'Amazing Content', className = '' }: LoadingSpinnerProps) {
   const sizeClasses = {
     sm: 'w-6 h-6',
     md: 'w-10 h-10', 
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index f1243de..3378658 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -387,7 +387,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
             onClick={() => scroll('left')}
             onMouseEnter={() => startAutoScroll('left')}
             onMouseLeave={stopAutoScroll}
-            className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl opacity-75"
+            className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] bg-rose-600 hover:bg-rose-700 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl opacity-75"
             size="sm"
           >
             <ChevronLeft className="w-4 h-4" />
@@ -400,7 +400,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
             onClick={() => scroll('right')}
             onMouseEnter={() => startAutoScroll('right')}
             onMouseLeave={stopAutoScroll}
-            className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl opacity-75"
+            className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] bg-rose-600 hover:bg-rose-700 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl opacity-75"
             size="sm"
           >
             <ChevronRight className="w-4 h-4" />
diff --git a/client/src/index.css b/client/src/index.css
index 00f9cfa..bc4473e 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -363,8 +363,8 @@ input[data-testid*="search"]::placeholder {
 /* Mobile specific adjustments for header */
 @media (max-width: 768px) {
   .header-sticky {
-    background: rgba(30, 20, 40, 0.95) !important;
-    backdrop-filter: blur(10px);
+    background: transparent !important;
+    backdrop-filter: none;
   }
   
   .has-fixed-header {
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 3712409..14e4cf2 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -553,7 +553,7 @@ export default function VideoPage() {
                       e.stopPropagation();
                       navigateToVideo('prev');
                     }}
-                    className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-75"
+                    className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-rose-600 hover:bg-rose-700 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-75"
                     size="sm"
                     data-testid="button-prev-video"
                   >
@@ -565,7 +565,7 @@ export default function VideoPage() {
                       e.stopPropagation();
                       navigateToVideo('next');
                     }}
-                    className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-75"
+                    className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-rose-600 hover:bg-rose-700 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-75"
                     size="sm"
                     data-testid="button-next-video"
                   >