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

Improve video editing form appearance for better usability

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-08 19:53:34 +00:00
parent 00eb8eb914
commit 08418ec877
2 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,7 +132,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
value={title} value={title}
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
placeholder="Vnesite naslov videoposnetka" 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" data-testid="input-video-title"
/> />
</div> </div>
@ -147,7 +147,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder="Opišite vsebino videoposnetka" placeholder="Opišite vsebino videoposnetka"
rows={4} 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" data-testid="input-video-description"
/> />
</div> </div>
@ -161,7 +161,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
value={category} value={category}
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-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" data-testid="input-video-category"
/> />
</div> </div>
@ -175,7 +175,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
value={tags} value={tags}
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-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" data-testid="input-video-tags"
/> />
</div> </div>

30
client/src/index.css
View File

@ -143,26 +143,24 @@
} }
} }
/* Zagotovi vidnost besedila v input poljih - sivo ozadje z belim besedilom */ /* Zagotovi vidnost besedila v input poljih - super visoka prioriteta */
input[type="text"], input[type="email"], input[type="password"], textarea, select { .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; background-color: #374151 !important;
color: #ffffff !important; color: #ffffff !important;
border: 1px solid #6b7280 !important; border-color: #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;
} }
/* Zagotovi vidnost placeholder besedila */ /* Zagotovi vidnost placeholder besedila */
input::placeholder, textarea::placeholder { .video-edit-modal input::placeholder,
color: #d1d5db !important; .video-edit-modal textarea::placeholder,
} input[data-testid*="input-video"]::placeholder,
textarea[data-testid*="input-video"]::placeholder {
.dark input::placeholder, .dark textarea::placeholder {
color: #d1d5db !important; color: #d1d5db !important;
opacity: 1 !important;
} }
/* Modal ozadje - temno sivo */ /* Modal ozadje - temno sivo */
@ -171,6 +169,8 @@ input::placeholder, textarea::placeholder {
} }
/* Label besedilo - belo */ /* 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; color: #ffffff !important;
} }