Fleet UI: Updates to dropdown selected states

[RachelElysia]

Issue

For #25257

Description

• Selected options are bold
• Focused options only are highlighted (so selected option starts highlighted since it's focused, and then isn't highlighted when another option is in focus)
• Add rounded border to dropdown options

Other code cleanup

• fix typo APP_CONTEX_NO_TEAM_SUMMARY
• update several type any with the proper type
• replace one helptext scss with help-text mixin
• replace a lot of border-radius: 4px with the border-radius mixin
• convert a few low hanging fruit <Dropdown/> using react-select 1.3.0 to <DropdownWrapper/> using react-select 5.4.0 (in an ideal world I'd have time to convert all of them)
• Fix 1 awkwardly wide tooltip (on a label of a dropdown I updated)

Screenrecording of example fixes

Screen.Recording.2025-01-21.at.2.20.57.PM.mov

Checklist for submitter

If some of the following don't apply, delete the relevant line.

• Changes file added for user-visible changes in changes/, orbit/changes/ or ee/fleetd-chrome/changes.
• A detailed QA plan exists on the associated ticket (if it isn't there, work with the product group's QA engineer to add it)
• Manual QA for all new/changed functionality

[codecov]

Codecov Report

Attention: Patch coverage is 61.90476% with 8 lines in your changes missing coverage. Please review.

Project coverage is 63.58%. Comparing base (d87f41b) to head (16b2700).
Report is 15 commits behind head on main.

Files with missing lines	Patch %	Lines
...rontend/components/TeamsDropdown/TeamsDropdown.tsx	33.33%	4 Missing ⚠️
...onents/AddIntegrationModal/AddIntegrationModal.tsx	0.00%	3 Missing ⚠️
frontend/context/app.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #25635   +/-   ##
=======================================
  Coverage   63.58%   63.58%           
=======================================
  Files        1622     1622           
  Lines      155049   155052    +3     
  Branches     4055     4054    -1     
=======================================
+ Hits        98590    98592    +2     
- Misses      48690    48691    +1     
  Partials     7769     7769           

Flag	Coverage Δ
frontend	53.08% <61.90%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

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

[iansltx]

Thanks in advance for bearing with me on explaining which colors go where. I was kinda able to follow the thread but...

[iansltx]

Just so I'm clear, ui-vibrant-blue-10 is for focused and ui-vibrant-blue-25 is for active (and no special treatment for selected)? And we want on-hover here in particular to be core-fleet-blue (I'm guessing we already have that hover set elsewhere?), and foreground old-style dropdown elements to be $core-vibrant-blue-down when activated? And I'm guessing none of these four colors are equivalent?

Sorry for basically requesting a quick rehash of the thread on this that I read earlier (don't have access to the associated Figma)...I'm pretty sure this is okay here, but want to understand what I'm looking at, and an answer here may be useful for QA.

[iansltx]

Okay, got access to Figma. Guessing the color I'm seeing in Figma is ui-vibrant-blue-10, with ui-vibrant-blue-25 showing up for the split second a menu item is clocked?

[iansltx]

Okay, yeah, I think I'm understanding things. An explanation of core-fleet-blue and $core-vibrant-blue-down would be helpful, but from what I can tell we're good to go here (after removing the unused import).

[iansltx]

Confirmed that colors are as expected for now, with an eng initiated issue filed to clean up color names.