Modernize OpenCost UI and make it fully responsive

[Kush172005]

Summary

This PR refreshes the OpenCost UI while preserving the existing functionality and behavior.

The goal of this update is to improve the overall user experience by modernizing the interface, improving visual consistency, enhancing responsiveness, and adding complete theme support, while keeping all existing APIs, business logic, routing, and workflows unchanged.

What's changed

• Introduced a unified styling system using Carbon Design System tokens across the application.
• Added complete support for both White and g100 (Dark) themes with local storage persistence.
• Prevented theme flashing during page load by initializing the active theme before application hydration.
• Updated native browser controls to follow the active application theme.
• Replaced hardcoded colors with theme-aware design tokens to improve consistency across the UI.
• Refined the sidebar layout with improved sticky behavior, collapsed navigation, and better spacing.
• Modernized dashboard cards and widgets with a more consistent layout and improved visual hierarchy.
• Improved Cost Summary cards with clearer styling and better emphasis on key metrics.
• Promoted commonly used dashboard actions for quicker access.
• Redesigned filter badges and active states to improve readability in both light and dark themes.
• Improved responsive layouts across dashboards, filters, tables, and navigation for desktop, tablet, and mobile devices.
• Updated the onboarding/tutorial modal to match the active theme.
• Improved logo visibility in dark mode.
• Refined spacing, typography, component styling, and overall UI consistency across the application.

What hasn't changed

• No backend changes.
• No API changes.
• No business logic changes.
• No changes to calculations or data processing.
• No routing changes.
• No changes to existing workflows or user interactions.

The objective of this PR is to modernize the UI while preserving the existing OpenCost experience and maintaining complete feature parity.

Demo

A short demo video is attached to this PR to provide a quick walkthrough of the updated interface, theme switching, responsive layouts, and overall user experience.

Testing

• Verified existing functionality after the UI update.
• Tested both White and g100 (Dark) themes across the application.
• Verified responsive layouts across desktop, tablet, and mobile screen sizes.
• Tested sidebar behavior, navigation, filters, tables, charts, dialogs, and dashboard interactions.
• Confirmed theme persistence and correct initialization on page load.
• Verified production build (npm run build) completes successfully.
• Confirmed that existing functionality, workflows, and user interactions continue to work as expected.

Screen.Recording.2026-07-08.at.10.45.32.PM.mp4

[netlify]

✅ Deploy Preview for opencost-ui ready!

Name	Link
🔨 Latest commit	7ffd757
🔍 Latest deploy log	https://app.netlify.com/projects/opencost-ui/deploys/6a4ff6017a659f00082ceaf0
😎 Deploy Preview	https://deploy-preview-281--opencost-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Kush172005]

Hi @ameijer ,

I've added all the UI revamp changes to the PR. I'd really appreciate it if you could take a look whenever you have some time.

Also, the new Lighthouse comment workflow which we have added is also working as expected, you can see the Lighthouse report on this PR as well.

Looking forward to your feedback. Thanks!

[Kush172005]

the Lighthouse score has also been significantly improved

from this

to this

[ameijer]

neat, thanks Kush! we will review in community meeting

[github-actions]

Lighthouse Report

Category	Score
Performance	96
Accessibility	96
Best Practices	100
SEO	83

Full Report

[ameijer]

LGTM, thanks @Kush172005