Skip to content

Adding border to images in design management

Nick Brandt requested to merge nb-add-border-dsn-management into master

What does this MR do and why?

This adds a border to images in the design management page overlay. When the background of the overlay was updated in !145153 (merged), it results in instances where it isn't clear where the image ends (if the image background is similar to the overlay background). This helps to resolve that issue.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

The notable changes are when viewing a Light image when not on dark mode, and a Dark image when on dark mode. Additionally, this now shows a bounding box for the image in the case it has transparency.

Before After
Light Image light-before2 light-after2
Dark Image light-before light-after
Transparent Image light-transparent-before light-transparent-after
Light Image (dark mode) dark-before2 dark-after2
Dark Image (dark mode) dark-before dark-after
Transparent Image (dark mode) dark-transparent-before dark-transparent-after

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Go to an Issue detail page
  2. Upload an image to design management
  3. Verify there is a border present on the image
Edited by Nick Brandt

Merge request reports