Add dark mode support for file thumbnails and improve overall styling.

Review Request #13837 — Created May 7, 2024 and submitted

Information

Review Board
release-7.x

Reviewers

This introduces dark mode styling for the file attachment thumbnails,
helping them fit in on the review request page and addressing the
invisible text issue that would occur.

Along with that, some interaction issues have been addressed. There were
two issues in our styling:

  1. When editing a caption, the caption area and actions area didn't feel
    seamless, as they were semi-transparent and had some overlaps that
    looked strange. These are no longer semi-transparent during edit.

  2. When editing, moving the mouse over another thumbnail made the
    thumbnail being edited semi-transparent, which didn't feel right. It
    now stays at 100% opacity while in edit mode.

Tested the visuals for the file attachments in light and dark mode,
including the caption area, empty captions, actions menu, and the
unsaved caption indicator.

Tested editing the caption and then moving the mouse over another
thumbnail. Verified that the file attachment did not fade out.

Summary ID
Add dark mode support for file thumbnails and improve overall styling.
This introduces dark mode styling for the file attachment thumbnails, helping them fit in on the review request page and addressing the invisible text issue that would occur. Along with that, some interaction issues have been addressed. There were two issues in our styling: 1. When editing a caption, the caption area and actions area didn't feel seamless, as they were semi-transparent and had some overlaps that looked strange. These are no longer semi-transparent during edit. 2. When editing, moving the mouse over another thumbnail made the thumbnail being edited semi-transparent, which didn't feel right. It now stays at 100% opacity while in edit mode.
f70ef6fd6b9ccc1d7c941fb4c335386130b1706a

Description From Last Updated

While you're here, I wonder if we should change these to icon-only buttons. I'm thinking that would look better since …

maubinmaubin
maubin
  1. 
      
  2. Show all issues

    While you're here, I wonder if we should change these to icon-only buttons. I'm thinking that would look better since this is a pretty small space.

    1. IIRC, these started off as buttons alongside the caption early on, and we moved them to their own dedicated panel below in order to give the caption a 1:1 between editing and display, and ensure maximum space for the caption editing.

      We could keep them down here and make them icon-only, but I think in general, if we have room for a label, it's better to use the label in order to be explicit about the action.

      I think there's room for rethinking this design more thoroughly, but I want to keep these changes more minimal right now.

    2. I think I agree with Christian here. There's not enough space to put them on the same line, and if they're going to be on their own line, we might as well take advantage and use labels.

    3. Good points.

  3. 
      
david
  1. 
      
  2. 
      
maubin
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-7.x (99ca6f0)