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

Update video editing interface to use a dark theme with white text

Browse Source 
Refactor client-side components and CSS to implement a dark theme for the video editing modal, improving readability and consistency with a dark gray background, white text, and contrasting borders.

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/ESknBgQ
This commit is contained in:
sebastjanartic 2025-08-08 19:51:52 +00:00
parent e13e2181c3
commit 00eb8eb914
3 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1754682652775.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

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

@ -103,18 +103,18 @@ 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="bg-white dark:bg-gray-900 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">
<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">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white"> <h2 className="text-2xl font-bold text-white">
Uredi video Uredi video
</h2> </h2>
<Button <Button
onClick={onClose} onClick={onClose}
variant="ghost" variant="ghost"
size="sm" size="sm"
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" className="text-gray-300 hover:text-white"
data-testid="button-close-edit" data-testid="button-close-edit"
> >
<X className="w-5 h-5" /> <X className="w-5 h-5" />
@ -125,7 +125,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
<div className="space-y-4"> <div className="space-y-4">
{/* Title */} {/* Title */}
<div> <div>
<Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> <Label className="block text-sm font-medium text-white mb-2">
Naslov Naslov
</Label> </Label>
<Input <Input
@ -139,7 +139,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Description */} {/* Description */}
<div> <div>
<Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> <Label className="block text-sm font-medium text-white mb-2">
Opis Opis
</Label> </Label>
<Textarea <Textarea
@ -154,7 +154,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Category */} {/* Category */}
<div> <div>
<Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> <Label className="block text-sm font-medium text-white mb-2">
Kategorija Kategorija
</Label> </Label>
<Input <Input
@ -168,7 +168,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Tags */} {/* Tags */}
<div> <div>
<Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> <Label className="block text-sm font-medium text-white mb-2">
Oznake (ločene z vejico) Oznake (ločene z vejico)
</Label> </Label>
<Input <Input
@ -182,7 +182,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Thumbnail Upload */} {/* Thumbnail Upload */}
<div> <div>
<Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> <Label className="block text-sm font-medium text-white mb-2">
Slika predogleda Slika predogleda
</Label> </Label>
<div className="space-y-3"> <div className="space-y-3">
@ -235,14 +235,14 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
data-testid="checkbox-public-video" data-testid="checkbox-public-video"
/> />
<Label htmlFor="public-video" className="text-sm font-medium text-gray-700 dark:text-gray-300"> <Label htmlFor="public-video" className="text-sm font-medium text-white">
Javno dostopen video Javno dostopen video
</Label> </Label>
</div> </div>
</div> </div>
{/* Footer */} {/* Footer */}
<div className="flex justify-end gap-3 mt-8 pt-6 border-t border-gray-200 dark:border-gray-700"> <div className="flex justify-end gap-3 mt-8 pt-6 border-t border-gray-600">
<Button <Button
onClick={onClose} onClick={onClose}
variant="outline" variant="outline"

28
client/src/index.css
View File

@ -143,24 +143,34 @@
} }
} }
/* Zagotovi vidnost besedila v input poljih - obrnjen kontrast */ /* Zagotovi vidnost besedila v input poljih - sivo ozadje z belim besedilom */
input[type="text"], input[type="email"], input[type="password"], textarea, select { input[type="text"], input[type="email"], input[type="password"], textarea, select {
background-color: #1f2937 !important; background-color: #374151 !important;
color: #f9fafb !important; color: #ffffff !important;
border: 1px solid #4b5563 !important; border: 1px solid #6b7280 !important;
} }
.dark input[type="text"], .dark input[type="email"], .dark input[type="password"], .dark textarea, .dark select { .dark input[type="text"], .dark input[type="email"], .dark input[type="password"], .dark textarea, .dark select {
background-color: #1f2937 !important; background-color: #374151 !important;
color: #f9fafb !important; color: #ffffff !important;
border: 1px solid #4b5563 !important; border: 1px solid #6b7280 !important;
} }
/* Zagotovi vidnost placeholder besedila */ /* Zagotovi vidnost placeholder besedila */
input::placeholder, textarea::placeholder { input::placeholder, textarea::placeholder {
color: #9ca3af !important; color: #d1d5db !important;
} }
.dark input::placeholder, .dark textarea::placeholder { .dark input::placeholder, .dark textarea::placeholder {
color: #9ca3af !important; color: #d1d5db !important;
}
/* Modal ozadje - temno sivo */
.video-edit-modal {
background-color: #1f2937 !important;
}
/* Label besedilo - belo */
.video-edit-modal label {
color: #ffffff !important;
} }