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 (
<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">
{/* Header */}
<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
</h2>
<Button
onClick={onClose}
variant="ghost"
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"
>
<X className="w-5 h-5" />
@ -125,7 +125,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
<div className="space-y-4">
{/* Title */}
<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
</Label>
<Input
@ -139,7 +139,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Description */}
<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
</Label>
<Textarea
@ -154,7 +154,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Category */}
<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
</Label>
<Input
@ -168,7 +168,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Tags */}
<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)
</Label>
<Input
@ -182,7 +182,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Thumbnail Upload */}
<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
</Label>
<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"
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
</Label>
</div>
</div>
{/* 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
onClick={onClose}
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 {
background-color: #1f2937 !important;
color: #f9fafb !important;
border: 1px solid #4b5563 !important;
background-color: #374151 !important;
color: #ffffff !important;
border: 1px solid #6b7280 !important;
}
.dark input[type="text"], .dark input[type="email"], .dark input[type="password"], .dark textarea, .dark select {
background-color: #1f2937 !important;
color: #f9fafb !important;
border: 1px solid #4b5563 !important;
background-color: #374151 !important;
color: #ffffff !important;
border: 1px solid #6b7280 !important;
}
/* Zagotovi vidnost placeholder besedila */
input::placeholder, textarea::placeholder {
color: #9ca3af !important;
color: #d1d5db !important;
}
.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;
}