Refactor: Remove bootstrap, adopt semantic tokens, and improve Mantine UI usage

[elizabetdev]

Description

This PR improves the overall design system consistency, theming capabilities, and maintainability of the project by removing Bootstrap dependencies and enhancing Mantine UI usage.

It also serves as step one in preparing the codebase for the future introduction of Click-UI, which will further streamline and unify component usage across the application.

Key Changes

• Removed all Bootstrap components and related styles.
• Replaced them with Mantine UI components for consistent styling and behavior.
• Introduced and applied semantic design tokens for colors, spacing, and typography.
• Implemented a more reliable and native light/dark theme system using Mantine’s theming capabilities.
• Refactored existing components to follow Mantine’s recommended patterns and accessibility best practices.
• Cleaned up unused CSS and simplified layout structures.

Motivation

Previously, the dark mode was achieved through a global CSS filter, such as:

html.hdx-theme-light {
  filter: invert(1) hue-rotate(180deg) brightness(1.05);
}

While this approach provided a quick inversion effect, it had several drawbacks:

• It distorted colors and images, resulting in inaccurate visual representation.
• It made fine-tuning design tokens (e.g., specific color shades or contrast) nearly impossible.
• It negatively impacted accessibility and color contrast consistency.
• It introduced side effects with third-party components and icons.

By moving to a token-based theme system powered by Mantine, we ensure predictable, maintainable, and accessible theming across all components.

Testing Notes

• Verify that all pages render correctly with Mantine components.
• Test both light and dark themes to confirm consistent color application.
• Check accessibility contrast ratios and interactive states (hover, focus, active).

[changeset-bot]

🦋 Changeset detected

Latest commit: ecab514

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@hyperdx/app	Minor
@hyperdx/api	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
hyperdx-v2-oss-app	Ready	Preview	Comment	Nov 14, 2025 5:42pm

[claude]

PR Review: Bootstrap Removal & Mantine Migration

✅ Overall Assessment

This is a well-structured refactor that successfully removes Bootstrap dependencies and migrates to Mantine UI with semantic design tokens. The approach is solid and aligns with modern React/Next.js best practices.

Critical Issues

None found - the PR appears safe to merge from a code quality perspective.

Important Observations

✅ Strengths:

• Comprehensive semantic color token system in _semantic-colors.scss with proper light/dark mode support
• Proper removal of Bootstrap dependencies from package.json
• Consistent migration to Mantine components (Popover, Textarea, ActionIcon, etc.)
• Good use of CSS custom properties for theming
• Proper TypeScript typing maintained throughout

⚠️ Minor Concerns (non-blocking):

• Large changeset: 2824 additions / 2066 deletions across 98 files - consider thorough visual QA testing
• SCSS typo in AppNav.module.scss:38: margin-bottom: 2x should be 2px (likely non-breaking but incorrect)
• Removed SSRProvider: Ensure this doesn't break SSR for Mantine components (Mantine v7+ may not need it)
• Bootstrap Icons dependency: Still using bootstrap-icons CSS despite removing Bootstrap (intentional?)

Testing Recommendations

• ✅ Visual regression testing across both light and dark themes
• ✅ Verify accessibility (contrast ratios, keyboard navigation)
• ✅ Test on mobile/responsive layouts
• ✅ Verify no hydration errors in SSR

Verdict

Approved - No blocking issues. The minor items noted above can be addressed in follow-up PRs or confirmed as intentional.

[github-actions]

E2E Test Results

✅ All tests passed • 39 passed • 3 skipped • 399s

Status	Count
✅ Passed	39
❌ Failed	0
⚠️ Flaky	1
⏭️ Skipped	3

View full report →

[elizabetdev]

@pulpdrew Yeah, I agree — I think it’s better to split it into smaller PRs. I’ll use this one as a POC and open the smaller ones next.

Just leaving a different comment since I started trying to split it into smaller PRs.
The issue with smaller PRs is that some parts still use Bootstrap, while others are being migrated to Mantine.
Because I can’t enable the Mantine theme provider yet, it will look okay overall, but not perfect.

So, the options are:

1. Merge this and accept that a few minor UI issues might appear, which we can fix later.
2. Go with smaller PRs, knowing the app might look a bit weird until everything is fully migrated.

[teeohhem]

FWIW: I like the idea of smaller PRs, but for a change this impactful, it's best to rip the bandaid off once vs. slowly.

[pulpdrew]

Whoops, I missed the edited comment, sorry @elizabetdev. Ripping the band-aid off is OK with me 👍

[elizabetdev]

@teeohhem and @pulpdrew, I’ve finished addressing Drew’s review.

[teeohhem]

My biggest thing I saw was this:
New:

Existing:

1. Did we intentionally change the font and its size for the nav?
2. Items are out of alignment in submenus

[elizabetdev]

@teeohhem I updated the AppNav component to bring it closer to the previous version. The icons on this PR are from Tabler, and a few small UI details were left intentionally (e.g., icon highlight behavior and the beta badge aligned to the right). The beta badge is also using Mantine’s default styling with no overrides, so the text defaults to white. The nav now uses only mantine colors.

[teeohhem]

Nicely done!