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

Update the website's accent color to a vibrant red hue

Browse Source 
Replace all instances of the previous blue accent color with a new red color across various components and pages, including buttons, navigation links, progress bars, and decorative elements.

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/ZMEU6bO
This commit is contained in:
sebastjanartic
2025-09-04 14:32:14 +00:00
parent 3714cb7367
commit 395dba2daa
20 changed files with 134 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/CookieConsent.tsx
+4 -4
View File
@@ -134,7 +134,7 @@ export default function CookieConsent() {
<Button
onClick={() => setShowDetails(true)}
variant="ghost"
className="text-bunny-blue hover:text-purple-400 hover:bg-transparent"
className="text-[#da234d] hover:text-purple-400 hover:bg-transparent"
>
<span translate="no">Einstellungen verwalten</span>
</Button>
@@ -158,7 +158,7 @@ export default function CookieConsent() {
<div className="bg-bunny-gray/20 p-4 rounded-lg">
<div className="flex items-center justify-between mb-2">
<h4 className="text-white font-medium">Notwendige Cookies</h4>
<div className="bg-bunny-blue/20 text-bunny-blue px-2 py-1 rounded text-xs">
<div className="bg-[#da234d]/20 text-[#da234d] px-2 py-1 rounded text-xs">
Immer aktiv
</div>
</div>
@@ -179,7 +179,7 @@ export default function CookieConsent() {
onChange={(e) => handleConsentChange('analytics', e.target.checked)}
className="sr-only peer"
/>
<div className="w-11 h-6 bg-bunny-gray peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-bunny-blue"></div>
<div className="w-11 h-6 bg-bunny-gray peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#da234d]"></div>
</label>
</div>
<p className="text-bunny-light text-sm">
@@ -199,7 +199,7 @@ export default function CookieConsent() {
onChange={(e) => handleConsentChange('advertising', e.target.checked)}
className="sr-only peer"
/>
<div className="w-11 h-6 bg-bunny-gray peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-bunny-blue"></div>
<div className="w-11 h-6 bg-bunny-gray peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#da234d]"></div>
</label>
</div>
<p className="text-bunny-light text-sm">
client/src/components/ad-explanation.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ export default function AdExplanation({ isOpen, onClose }: AdExplanationProps) {
</div>
<div className="flex justify-end">
<Button onClick={onClose} className="bg-bunny-blue hover:bg-blue-600">
<Button onClick={onClose} className="bg-[#da234d] hover:bg-blue-600">
Razumem
</Button>
</div>
client/src/components/ad-settings.tsx
+4 -4
View File
@@ -121,7 +121,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
<div className="sticky top-0 bg-white dark:bg-gray-900 p-6 border-b border-gray-200 dark:border-gray-700">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<DollarSign className="w-6 h-6 text-bunny-blue" />
<DollarSign className="w-6 h-6 text-[#da234d]" />
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
Ad Settings
</h2>
@@ -158,7 +158,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-bunny-blue">
<div className="text-2xl font-bold text-[#da234d]">
{totalImpressions.toLocaleString()}
</div>
<div className="text-xs text-gray-500">
@@ -279,7 +279,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
<CardContent>
<div className="space-y-3">
<div className="flex items-start space-x-3">
<div className="w-2 h-2 bg-bunny-blue rounded-full mt-2 flex-shrink-0" />
<div className="w-2 h-2 bg-[#da234d] rounded-full mt-2 flex-shrink-0" />
<div>
<h4 className="font-medium">Publift integracija</h4>
<p className="text-sm text-gray-600 dark:text-gray-400">
@@ -313,7 +313,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
<Button variant="outline" onClick={onClose}>
Cancel
</Button>
<Button className="bg-bunny-blue hover:bg-bunny-blue/90">
<Button className="bg-[#da234d] hover:bg-[#da234d]/90">
Save Settings
</Button>
</div>
client/src/components/hls-preview-thumbnail.tsx
+2 -2
View File
@@ -241,7 +241,7 @@ export default function HLSPreviewThumbnail({ video, onClick, className = "" }:
{/* Scrub bar */}
<div className="absolute bottom-0 left-0 right-0 h-1 bg-white/20">
<div
className="h-full bg-bunny-blue transition-all duration-150"
className="h-full bg-[#da234d] transition-all duration-150"
style={{ width: `${(previewTime / video.duration) * 100}%` }}
/>
</div>
@@ -258,7 +258,7 @@ export default function HLSPreviewThumbnail({ video, onClick, className = "" }:
</div>
{/* Preview indicator */}
<div className="absolute top-2 right-2 bg-bunny-blue/80 text-white text-xs px-2 py-1 rounded">
<div className="absolute top-2 right-2 bg-[#da234d]/80 text-white text-xs px-2 py-1 rounded">
Preview
</div>
</>
client/src/components/netflix-grid.tsx
+1 -1
View File
@@ -472,7 +472,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
}}
className={`rounded-full transition-colors duration-300 ease-in-out ${
index === currentIndex
? 'bg-gradient-to-r from-[#da234d] to-[#da234d]'
? 'bg-[#da234d]'
: 'bg-white/25 hover:bg-white/40'
}`}
style={{
client/src/components/search-header.tsx
+8 -8
View File
@@ -50,8 +50,8 @@ export default function SearchHeader({
{/* Static triangle decorations - fixed positioning */}
<div className="absolute top-2 right-[25%] w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-blue-400/8 transform rotate-12 z-0 pointer-events-none"></div>
<div className="absolute top-3 left-[40%] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/6 transform -rotate-6 z-0 pointer-events-none"></div>
<div className="absolute top-2 right-[25%] w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-[#da234d]/8 transform rotate-12 z-0 pointer-events-none"></div>
<div className="absolute top-3 left-[40%] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-[#da234d]/6 transform -rotate-6 z-0 pointer-events-none"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="flex items-center justify-between py-4">
@@ -66,10 +66,10 @@ export default function SearchHeader({
<div className="hidden md:flex items-center space-x-6">
<nav className="flex space-x-6">
<Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
<Link href="/" className="text-bunny-light hover:text-[#da234d] transition-colors" data-testid="link-home">
Home
</Link>
<Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-folx-stadl">
<Link href="/folx-stadl" className="text-bunny-light hover:text-[#da234d] transition-colors" data-testid="link-folx-stadl">
FOLX STADL
</Link>
</nav>
@@ -80,7 +80,7 @@ export default function SearchHeader({
placeholder="Videos suchen..."
value={searchQuery}
onChange={(e) => handleSearchChange(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-[#da234d] transition-colors w-64"
data-testid="input-search"
/>
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
@@ -106,7 +106,7 @@ export default function SearchHeader({
<nav className="flex flex-col space-y-3">
<Link
href="/"
className="text-bunny-light hover:text-bunny-blue transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5"
className="text-bunny-light hover:text-[#da234d] transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5"
data-testid="link-mobile-home"
onClick={() => setIsMobileMenuOpen(false)}
>
@@ -114,7 +114,7 @@ export default function SearchHeader({
</Link>
<Link
href="/folx-stadl"
className="text-bunny-light hover:text-bunny-blue transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5"
className="text-bunny-light hover:text-[#da234d] transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5"
data-testid="link-mobile-folx-stadl"
onClick={() => setIsMobileMenuOpen(false)}
>
@@ -129,7 +129,7 @@ export default function SearchHeader({
placeholder="Videos suchen..."
value={searchQuery}
onChange={(e) => handleSearchChange(e.target.value)}
className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-[#da234d] transition-colors w-full"
data-testid="input-mobile-search"
autoFocus
/>
client/src/components/thumbnail-generator.tsx
+1 -1
View File
@@ -387,7 +387,7 @@ export default function ThumbnailGenerator({
className={`relative rounded-lg overflow-hidden border-2 transition-all hover:scale-105 ${
selectedThumbnail === suggestion
? 'border-purple-500 ring-2 ring-purple-300'
: 'border-gray-300 dark:border-gray-600 hover:border-purple-400'
: 'border-gray-300 dark:border-gray-600 hover:border-[#da234d]'
}`}
data-testid={`ai-suggestion-${index}`}
>
client/src/components/video-card.tsx
+2 -2
View File
@@ -309,11 +309,11 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{duration > 0 && (
<div className="absolute bottom-1 left-2 right-2 h-2 bg-black/40 rounded-full overflow-hidden backdrop-blur-sm border border-white/20">
<div
className="h-full bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-200 ease-out shadow-lg relative"
className="h-full bg-[#da234d] transition-all duration-200 ease-out shadow-lg relative"
style={{ width: `${(currentTime / duration) * 100}%` }}
>
{/* Glow effect */}
<div className="absolute inset-0 bg-gradient-to-r from-[#f57496] to-[#f06292] opacity-60 blur-sm"></div>
<div className="absolute inset-0 bg-gradient-to-r from-[#da234d] to-[#da234d] opacity-60 blur-sm"></div>
{/* Progress dot at the end */}
<div className="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-lg border-2 border-[#da234d]"></div>
</div>
client/src/components/video-grid.tsx
+1 -1
View File
@@ -83,7 +83,7 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
<Button
onClick={onLoadMore}
disabled={isLoading}
className="bg-bunny-blue hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-medium transition-colors inline-flex items-center space-x-2"
className="bg-[#da234d] hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-medium transition-colors inline-flex items-center space-x-2"
data-testid="button-load-more"
>
{isLoading ? (
client/src/components/video-modal.tsx
+6 -6
View File
@@ -449,7 +449,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
variant="ghost"
size="icon"
onClick={onClose}
className="absolute -top-12 right-0 text-white hover:text-bunny-blue transition-colors z-60"
className="absolute -top-12 right-0 text-white hover:text-[#da234d] transition-colors z-60"
data-testid="button-close-modal"
>
<X className="text-2xl" />
@@ -505,7 +505,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
data-testid="progress-bar"
>
<div
className="h-full bg-gradient-to-r from-[#da234d] to-[#da234d] rounded-full transition-all duration-200"
className="h-full bg-[#da234d] rounded-full transition-all duration-200"
style={{ width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%` }}
/>
@@ -527,7 +527,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
onClick={togglePlay}
variant="ghost"
size="icon"
className="text-white hover:text-bunny-blue transition-colors"
className="text-white hover:text-[#da234d] transition-colors"
data-testid="button-play-pause"
>
{isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
@@ -539,7 +539,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
onClick={toggleMute}
variant="ghost"
size="icon"
className="text-white hover:text-bunny-blue transition-colors"
className="text-white hover:text-[#da234d] transition-colors"
data-testid="button-volume"
>
{isMuted ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
@@ -567,7 +567,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
onClick={() => setShowShareMenu(!showShareMenu)}
variant="ghost"
size="icon"
className="text-white hover:text-bunny-blue transition-colors"
className="text-white hover:text-[#da234d] transition-colors"
data-testid="button-share"
>
<Share2 className="w-5 h-5" />
@@ -633,7 +633,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
onClick={toggleFullscreen}
variant="ghost"
size="icon"
className="text-white hover:text-bunny-blue transition-colors ml-auto"
className="text-white hover:text-[#da234d] transition-colors ml-auto"
data-testid="button-fullscreen"
>
<Maximize className="w-5 h-5" />
client/src/components/video-preview-thumbnail.tsx
+2 -2
View File
@@ -175,7 +175,7 @@ export default function VideoPreviewThumbnail({ video, onClick, className = "" }
{/* Progress bar */}
<div className="absolute bottom-0 left-0 right-0 h-1 bg-white/20">
<div
className="h-full bg-bunny-blue transition-all duration-150"
className="h-full bg-[#da234d] transition-all duration-150"
style={{ width: `${(previewTime / video.duration) * 100}%` }}
/>
</div>
@@ -196,7 +196,7 @@ export default function VideoPreviewThumbnail({ video, onClick, className = "" }
{/* Loading indicator for video metadata */}
{!isVideoLoaded && (video.videoUrlMp4 || video.videoUrl.includes('.mp4')) && (
<div className="absolute top-2 left-2">
<div className="w-2 h-2 bg-bunny-blue rounded-full animate-pulse"></div>
<div className="w-2 h-2 bg-[#da234d] rounded-full animate-pulse"></div>
</div>
)}
</div>