Caption file list has inappropriate hover background

[bjester]

Observed behavior

When you start adding a caption file to a video resource, the file item has a very strong grey background when hovered.

Expected behavior

The background should be a lot more subtle, similar to when hovering over uploaded files in the same edit modal

Steps to Reproduce

1. Open a channel
2. Upload a video file
3. Scroll down to the bottom
4. Hover over the captions area

[Arunima22]

Hello! @bjester I would like to take on this issue. I have worked through the first one assigned and submitted the PR. Thank you :)

[akolson]

HI @Arunima22! Sure, I have assigned you the issue. Thank you for your interest!

[Arunima22]

@akolson thank you! Any guidance as to which code file I can start with would be of great help!

[akolson]

I think you could start by checking out our developer documentation and getting your server up and running locally (if you haven't already done so). Once set up, you can follow the "Steps to Reproduce" and then use the Vue devtools to do some inspection. This will help you find the component and eventually the file to make the changes to. Be sure to let me know incase you have any questions in the process. :)

[Arunima22]

https://github.com/user-attachments/assets/aaa4ce61-b433-41b7-8a3e-06e4ce91f6dd
@bjester @akolson I need some clarification. I uploaded a dummy video to try adding captions but did not get any grey background. Please check the screen recording. Is this what you were talking about?

How I recreated the issue?

-Logged in to [email protected]
-Went to a dummy channel
-Clicked on Upload Files
-Added the video and scrolled down to captions

I would also like to propose something here for better designing, related to this issue. Would that be alright?

[bjester]

@Arunima22 Is your video of the latest unstable branch? I seem to be able to replicate it on our unstable environment server. It's possible it may not replicate running the devserver, but also perhaps the browser comes into play: I'm using Google Chrome. Could you check these things and let us know?

[Arunima22]

Hello @bjester after some more inspection, I can see that you are right. Whenever I log in using https://unstable.studio.learningequality.org/en/accounts/#/ and sign in, I see the weird grey color over there. I am using google chrome, yes.

It might be possible that I am doing something different trying to reproduce the issue locally. Here are the things I did:

• Switched to unstable branch
• Did a git pull (my fork is completely in sync with kolibri-studio-unstable)
• Used yarn run devserver:hot
• Used make run-services in another terminal for docker (the name of docker contained is studio_unstable)
• Logged in using [email protected], password: a
• Uploaded the video file and then went to the captions area.

I am curious as to why this might not replicate on the devserver. Let me know.

[bjester]

@Arunima22 I'm able to reproduce it locally. Perhaps it's best to find another issue if you're unable to replicate it. I see you commented on one involving context menus. I will assign you that instead. Thanks for looking at this.

[Arunima22]

@bjester let me give it one more try and if it doesn't work, maybe you can unassign me then? Thank you!

[shruti862]

@bjester I am interested to solve this issue , can you please assign this issue to me ??
I have reproduced it locally ,attaching screenshot

[bjester]

Thank you for your interest @shruti862. I've assigned you

[shruti862]

@bjester Thank you for assigning the issue. I am raised PR , please look into it whenever you get time.

[MisRob]

Hi @shruti862, I wanted to mention that Learning Equality will be closed from December 23 to January 5.