Improve styles: tabs, dropdown, input field, info banner, select targets, and checkboxes

[noahtalerman]

Goal

User story
As a Fleet contributor,
I want the styles in the Fleet user interface to reflect the styles specified in Fleet's design system in Figma
so that my team can create a consistent UI quickly when adding new features.

Key result

Every sprint, ship small UX improvements based on dogfooding or customer feedback

Original requests

None.

Context

• Product designer: @noahtalerman

Changes

Product

• [ ] UI changes:
  • Update hover states for tabs. See the design system in Figma here for expected behavior.
  • Update hover and active states for dropdown and input fields. See the design system in Figma here for expected behavior.
  • Update styles for info banner:
    • Grey variant should use Fleet Black 25 outline color
    • Simplify to single Fleet blue 25 outline color (currently two options)
    • When the close icon is added, the padding of the banner breaks
    • See the design system in Figma here for expected behavior.
  • Update hover state for select targets. See the design system in Figma here for expected behavior.
• [x] CLI (fleetctl) usage changes: None
• [x] YAML changes: None
• [x] REST API changes: None
• [x] Activity changes: None
• [x] Permissions changes: None
• [x] Changes to paid features or tiers: None
• [ ] Once shipped, requester has been notified
• [ ] Once shipped, dogfooding issue has been filed

Engineering

• [x] Feature guide changes: No need
• [x] Database schema migrations: No need
• [x] Load testing: No need
• [ ] Implement changes according the guidelines in the Figma docs above.

ℹ️  Please read this issue carefully and understand it. Pay special attention to UI wireframes, especially "dev notes".

QA

Risk assessment

• Requires load testing: TODO
• Risk level: Low / High TODO
• Risk description: TODO

Manual testing steps

1. Step 1
2. Step 2
3. Step 3

Testing notes

Confirmation

1. [ ] Engineer (@____): Added comment to user story confirming successful completion of QA.
2. [ ] QA (@____): Added comment to user story confirming successful completion of QA.

[noahtalerman]

FYI @sharon-fdm I filed this user story to replace these small frontend bugs:

I assigned you and moved this story to ready to spec on the drafting board.

[sharon-fdm]

Hey team! Please add your planning poker estimate with Zenhub @jacobshandling @RachelElysia