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

Update video editing form to improve visual appeal and usability

Browse Source 
Refine styling for the video edit modal, including background colors, text colors, and border colors for input fields and the thumbnail upload button.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/pt6Zpwx
This commit is contained in:
sebastjanartic 2025-08-08 20:10:30 +00:00
parent 943b082678
commit f503398622
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1754683767968.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

14
client/src/components/video-edit-modal.tsx
View File

@ -103,7 +103,10 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
return ( return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"> <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="video-edit-modal bg-gray-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto"> <div
className="video-edit-modal bg-gray-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto"
style={{ backgroundColor: '#1f2937' }}
>
<div className="p-6"> <div className="p-6">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
@ -133,6 +136,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
placeholder="Vnesite naslov videoposnetka" placeholder="Vnesite naslov videoposnetka"
className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300" className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
data-testid="input-video-title" data-testid="input-video-title"
/> />
</div> </div>
@ -148,6 +152,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
placeholder="Opišite vsebino videoposnetka" placeholder="Opišite vsebino videoposnetka"
rows={4} rows={4}
className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300" className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
data-testid="input-video-description" data-testid="input-video-description"
/> />
</div> </div>
@ -162,6 +167,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
onChange={(e) => setCategory(e.target.value)} onChange={(e) => setCategory(e.target.value)}
placeholder="npr. Izobraževanje, Zabava, Tehnologija" placeholder="npr. Izobraževanje, Zabava, Tehnologija"
className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300" className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
data-testid="input-video-category" data-testid="input-video-category"
/> />
</div> </div>
@ -176,6 +182,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
onChange={(e) => setTags(e.target.value)} onChange={(e) => setTags(e.target.value)}
placeholder="npr. tutorial, spletno programiranje, react" placeholder="npr. tutorial, spletno programiranje, react"
className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300" className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
data-testid="input-video-tags" data-testid="input-video-tags"
/> />
</div> </div>
@ -216,7 +223,10 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
className="hidden" className="hidden"
data-testid="input-thumbnail-upload" data-testid="input-thumbnail-upload"
/> />
<div className="flex items-center justify-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors border text-sm font-medium h-10"> <div
className="flex items-center justify-center gap-2 px-4 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors border text-sm font-medium h-10 text-white border-gray-500"
style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
>
<Upload className="w-4 h-4" /> <Upload className="w-4 h-4" />
<span>Naloži sliko</span> <span>Naloži sliko</span>
</div> </div>