fix: video gallery design fixes

[ArturGaspar]

Description

Fix video gallery:

• Ugly shadow when loading
• Sorting menu design
• Layout of alert messages

Before:

1. Loading:
   
2. Sorting menu:
   
3. Alert message:
   

After:

1. Loading:
   
2. Sorting menu:
   
3. Alert message:
   

Testing instructions

1. (Optional) Create a mock videos response with a noticeable delay and multiple videos
   1. Enable mock video uploads (create waffle flag contentstore.mock_video_uploads enabled for everyone)
   2. Modify videos_index_json() as follows:

      def videos_index_json(course):
          """
          ...
          """
          # index_videos, __ = _get_index_videos(course)
          import time
          time.sleep(20)
          index_videos = [
              {
                  'edx_video_id': 'aaaaaaaa-aaaa-4aaa-aaaa-aaaaaaaaaaaa',
                  'client_video_id': 'video.mp4',
                  'created': '1970-01-01T00:00:00Z',
                  'duration': 42.5,
                  'status': 'upload',
                  'course_video_image_url': 'https://video/images/1234.jpg'
              },
              {
                  'edx_video_id': 'aaaaaaaa-aaaa-4aaa-aaaa-aaaaaaaaaaaa',
                  'client_video_id': 'video.mp4',
                  'created': '1970-01-01T00:00:00Z',
                  'duration': 42.5,
                  'status': 'upload',
                  'course_video_image_url': 'https://video/images/1234.jpg'
              }
          ]
          return JsonResponse({"videos": index_videos}, status=200)
      

2. Open video gallery
   1. Enable the new video editor (create waffle flags new_core_editors.use_new_video_editor and new_core_editors.use_video_gallery_flow enabled for everyone)
   2. Create a course unit with a video
   3. Edit the video (should open in new editor)
   4. Click "< Replace video" to go to the gallery
3. Observe that the shadow does not appear when loading
4. Wait for the videos to load
5. Open sorting menu and see that new design is in effect
6. Click the "Select video" button without selecting a video in order to trigger an alert
7. See that alert has (note that distances may appear to be slightly different due to the alert having a shadow):
   • similar distance from the top as the video item when there is no alert
   • similar distance to the first video item as there is between video items
   • the icon is aligned to the first line of text

[openedx-webhooks]

Thanks for the pull request, @ArturGaspar! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[farhaanbukhsh]

Instead of using this can we create a space using padding?

[ArturGaspar]

Using padding makes the underline on hover disconnected:

However I was able to use an additional span with white-space: pre-wrap instead of nbsp to achieve the correct appearance, as per the latest commit.

[farhaanbukhsh]

Suggested change

	className: '',
	className: undefined,

[farhaanbukhsh]

This will help you to not update the snapshots that you aren't touching.

[farhaanbukhsh]

👍

• ✅ I tested this on the devstack and the changes looks good to me.
• ✅ I read through the code
• ❌ I checked for accessibility issues
• ❌ Includes documentation
• ❌ I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (ed051c3) 90.51% compared to head (13018b4) 90.51%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #407   +/-   ##
=======================================
  Coverage   90.51%   90.51%           
=======================================
  Files         227      227           
  Lines        4110     4111    +1     
  Branches      825      826    +1     
=======================================
+ Hits         3720     3721    +1     
  Misses        369      369           
  Partials       21       21           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mphilbrick211]

Hi @openedx/teaching-and-learning! This is ready for review :)

[tecoholic]

@navinkarkera Can you kindly add the label "jira:2u" for this PR.

cc: @cablaa77

[openedx-webhooks]

I've created issue TNL-11197 in the private 2U Jira.

[KristinAoki]

@ArturGaspar can use resolve the branch conflicts so I can merge the PR?

[ArturGaspar]

@KristinAoki Done.

[openedx-webhooks]

@ArturGaspar 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.