Fix styling in Analytics data explorer

Chad Lavimoniererequested to merge
20241206-clavimoniere-analytics-data-explorer-style-fix into master

What does this MR do and why?

Fix styling in Analytics data explorer

  • Use tailwind util classes instead of fixed colors
  • Fix search bar clear button positioning
  • Adjust spacing of placeholder h3

Screenshots or screen recordings

Before After
gdk.test_3000_vsmg-1711992318_vsmp-1711992318_-analytics_dashboards_data-explorer__3 gdk.test_3000_vsmg-1711992318_vsmp-1711992318_-analytics_dashboards_data-explorer__4
gdk.test_3000_vsmg-1711992318_vsmp-1711992318_-analytics_dashboards_data-explorer__2 gdk.test_3000_vsmg-1711992318_vsmp-1711992318_-analytics_dashboards_data-explorer__5

How to set up and validate locally

  1. Check out this branch
  2. in the GDK, visit the analytics data explorer for a project (/-/analytics/dashboards/data-explorer)
  3. you will see that there is even spacing above and below the Start by choosing a measure placeholder text
  4. Use the search bar
  5. You will see that the clear button is correctly positioned
Edited by Chad Lavimoniere

Merge request reports