Fix unreleased dark mode bugs in 4.85.0

[lukeheath]

Summary

Four unreleased dark mode bugs from the #g-first-impressions board.

• My Device > Welcome card: laptop illustration has non-transparent background in dark mode #45077 — Make laptop-mac.png transparent so the dashboard "Welcome to Fleet" card doesn't show a white rectangle behind the laptop in dark mode. Two-pass cleanup: flood-fill from the edges removes the solid white background; edge pixels adjacent to transparent regions get alpha proportional to their distance from white so anti-aliased edges fade instead of leaving a halo.
• UI: "Grant users access to this fleet" dropdown turns purple or blue on hover in Add users modal depending on the mode *Light or Dark Mode* #45094 — AutocompleteDropdown (Add users modal) now uses $ui-fleet-black-50 for hover/focus border, matching Fleet's standard Dropdown component. Previously rendered as $core-vibrant-blue, which reads as blue in light mode and violet in dark mode.
• Dark mode: low-contrast font in Table schema dropdown across Reports, policies, and labels #45116 / Dark mode: Transfer host dropdown has low-contrast/unreadable font in searchable input #45119 — DropdownWrapper's searchable input was relying on react-select's default text color (hsl(0, 0%, 20%)), unreadable on the dark menu background. Setting color: COLORS["core-fleet-black"] lets the CSS custom property resolve to light text in dark mode. Fixes both the schema Table dropdown (Reports / Policies / Labels) and the Transfer host modal.

Note: #45117 ("Various" role label) turned out to be intentional; not included.

Test plan

• My Device > Welcome card: laptop illustration has non-transparent background in dark mode #45077: Dashboard with a single online host that has a passing policy — laptop image renders against the dark card with no white rectangle and no edge halo. Verified in dark and light mode.
• UI: "Grant users access to this fleet" dropdown turns purple or blue on hover in Add users modal depending on the mode *Light or Dark Mode* #45094: Settings > Fleets > pick a fleet > Users > Add user — hover the "Search users by name" input; border is neutral gray in both modes.
• Dark mode: low-contrast font in Table schema dropdown across Reports, policies, and labels #45116: Reports / Policies / Labels — open the right-hand Tables dropdown, type a query; typed text is readable in dark mode.
• Dark mode: Transfer host dropdown has low-contrast/unreadable font in searchable input #45119: Hosts > select host(s) > Transfer — open the team dropdown, type to search; typed text is readable in dark mode.
• Light-mode regression spot-check on each surface.

Summary by CodeRabbit

• Style
  • Updated dropdown and input field text color styling throughout the application interface to maintain consistent appearance across all form components and user interactions.
  • Adjusted the border color styling for autocomplete dropdown selections in focused and hover interaction states, changing from the previously used blue tone to a darker neutral shade.

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

[Copilot]

Pull request overview

This PR addresses several UI dark-mode styling issues in the Fleet frontend by aligning dropdown hover/focus and react-select input text styling with the app’s themed color system.

Changes:

• Updated AutocompleteDropdown hover/focus border color to use the neutral themed gray ($ui-fleet-black-50) instead of the accent blue.
• Updated DropdownWrapper react-select custom styles so typed input text uses a themed color (COLORS["core-fleet-black"]), improving contrast in dark mode.

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated no comments.

File	Description
frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/components/AutocompleteDropdown/_styles.scss	Aligns hover/focus border color with standard dropdown styling for consistent appearance across themes.
frontend/components/forms/fields/DropdownWrapper/DropdownWrapper.tsx	Ensures searchable dropdown input text uses themed color tokens so it remains readable in dark mode.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Walkthrough

This PR applies styling updates to dropdown components. The DropdownWrapper's generateCustomDropdownStyles function now explicitly sets the react-select input element color to COLORS["core-fleet-black"]. Additionally, the AutocompleteDropdown component's SCSS is updated to change the focused/hover state border color of the .Select control from $core-vibrant-blue to $ui-fleet-black-50. No component logic, props, or exported APIs were modified.

Possibly related PRs

• fleetdm/fleet#44978: Adds themed color to react-select inputs, directly related to the input color change in DropdownWrapper.
• fleetdm/fleet#44771: Updates dropdown and input text styling, related to the UI theming changes in this PR.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title references fixing dark mode bugs but the raw_summary shows changes to only 2 files addressing specific dropdown styling issues, not a complete fix of all four bugs mentioned in objectives.	The title is vague and doesn't clearly specify which dark mode bugs or components are being fixed. Consider a more specific title like 'Fix dark mode styling in DropdownWrapper and AutocompleteDropdown' to match the actual changeset.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The pull request description is comprehensive and well-structured, detailing four distinct dark mode fixes with related issue numbers, implementation details, and a thorough test plan.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ui-dark-mode-fixes

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.81%. Comparing base (c9690ca) to head (2125764).
⚠️ Report is 18 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #45200      +/-   ##
==========================================
- Coverage   66.81%   66.81%   -0.01%     
==========================================
  Files        2721     2721              
  Lines      218947   218947              
  Branches    10627    10627              
==========================================
- Hits       146282   146281       -1     
- Misses      59514    59515       +1     
  Partials    13151    13151              

Flag	Coverage Δ
frontend	55.31% <ø> (-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.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.