Update video editing form to improve visual appeal and usability
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:
parent
943b082678
commit
f503398622
BIN
attached_assets/image_1754683767968.png
Normal file
BIN
attached_assets/image_1754683767968.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
@ -103,7 +103,10 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
|
||||
|
||||
return (
|
||||
<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">
|
||||
{/* Header */}
|
||||
<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)}
|
||||
placeholder="Vnesite naslov videoposnetka"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
@ -148,6 +152,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
|
||||
placeholder="Opišite vsebino videoposnetka"
|
||||
rows={4}
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
@ -162,6 +167,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
placeholder="npr. Izobraževanje, Zabava, Tehnologija"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
@ -176,6 +182,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
|
||||
onChange={(e) => setTags(e.target.value)}
|
||||
placeholder="npr. tutorial, spletno programiranje, react"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
@ -216,7 +223,10 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
|
||||
className="hidden"
|
||||
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" />
|
||||
<span>Naloži sliko</span>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user