Adjust UI elements and styling of search modal

Austin Regneryrequested to merge
aregnery/search-modal-ui-refinement into master

What does this MR do and why?

This change refines the UI elements and styling of search modal to be more consistent and better utilize space.

  • Fix: Add radius to skeleton loader
  • Fix: Show user avatars in a circle instead of rectangle
  • Fix: Show the same namespace path in relation to groups and projects (frecents was truncating)
  • Fix: Remove extra padding making the search results icon smaller
  • Fix: Set the avatar to the same size (users was using 16 instead of 32)
  • Fix: Set icon colors to all use subtle
  • Change the group/project/user item to a single line to make the element more compact and align visually with the rest of the results

References

N/A

Screenshots or screen recordings

Before After
Before - Skeleton loader.png After - Skeleton loader.png
Before - Frecents.png After - Frecents.png
Before - autocomplete.png After - autocomplete.png
Before - projects scope.png After - projects scope.png
Before - users scope.png After - users scope.png

How to set up and validate locally

  1. Open the search modal with /
  2. Try various searches and command characters

MR acceptance checklist

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

Edited by Austin Regnery

Merge request reports