From 08418ec877df032010fb2a615ae69d9ca29d6d72 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 8 Aug 2025 19:53:34 +0000
Subject: [PATCH] Improve video editing form appearance for better usability

Update CSS classes in `video-edit-modal.tsx` to specifically style input fields, textareas, and select elements within the video editing modal, ensuring better visibility and consistency with dark mode. Additionally, modify global styles in `index.css` to target these elements more effectively, including placeholder text and labels.

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
---
 client/src/components/video-edit-modal.tsx |  8 +++---
 client/src/index.css                       | 30 +++++++++++-----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/client/src/components/video-edit-modal.tsx b/client/src/components/video-edit-modal.tsx
index 40be725..c1463e3 100644
--- a/client/src/components/video-edit-modal.tsx
+++ b/client/src/components/video-edit-modal.tsx
@@ -132,7 +132,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 placeholder="Vnesite naslov videoposnetka"
-                className="w-full bg-white dark:bg-gray-800 text-black dark:text-white border-gray-300 dark:border-gray-600"
+                className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
                 data-testid="input-video-title"
               />
             </div>
@@ -147,7 +147,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder="Opišite vsebino videoposnetka"
                 rows={4}
-                className="w-full bg-white dark:bg-gray-800 text-black dark:text-white border-gray-300 dark:border-gray-600"
+                className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
                 data-testid="input-video-description"
               />
             </div>
@@ -161,7 +161,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
                 value={category}
                 onChange={(e) => setCategory(e.target.value)}
                 placeholder="npr. Izobraževanje, Zabava, Tehnologija"
-                className="w-full bg-white dark:bg-gray-800 text-black dark:text-white border-gray-300 dark:border-gray-600"
+                className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
                 data-testid="input-video-category"
               />
             </div>
@@ -175,7 +175,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
                 value={tags}
                 onChange={(e) => setTags(e.target.value)}
                 placeholder="npr. tutorial, spletno programiranje, react"
-                className="w-full bg-white dark:bg-gray-800 text-black dark:text-white border-gray-300 dark:border-gray-600"
+                className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
                 data-testid="input-video-tags"
               />
             </div>
diff --git a/client/src/index.css b/client/src/index.css
index 90f3cf2..9dcde32 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -143,26 +143,24 @@
   }
 }
 
-/* Zagotovi vidnost besedila v input poljih - sivo ozadje z belim besedilom */
-input[type="text"], input[type="email"], input[type="password"], textarea, select {
+/* Zagotovi vidnost besedila v input poljih - super visoka prioriteta */
+.video-edit-modal input,
+.video-edit-modal textarea,
+.video-edit-modal select,
+input[data-testid*="input-video"],
+textarea[data-testid*="input-video"] {
   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: #374151 !important;
-  color: #ffffff !important;
-  border: 1px solid #6b7280 !important;
+  border-color: #6b7280 !important;
 }
 
 /* Zagotovi vidnost placeholder besedila */
-input::placeholder, textarea::placeholder {
-  color: #d1d5db !important;
-}
-
-.dark input::placeholder, .dark textarea::placeholder {
+.video-edit-modal input::placeholder,
+.video-edit-modal textarea::placeholder,
+input[data-testid*="input-video"]::placeholder,
+textarea[data-testid*="input-video"]::placeholder {
   color: #d1d5db !important;
+  opacity: 1 !important;
 }
 
 /* Modal ozadje - temno sivo */
@@ -171,6 +169,8 @@ input::placeholder, textarea::placeholder {
 }
 
 /* Label besedilo - belo */
-.video-edit-modal label {
+.video-edit-modal label,
+.video-edit-modal .text-gray-700,
+.video-edit-modal .dark\:text-gray-300 {
   color: #ffffff !important;
 }