Skip to content

refactor(frontend): inline styles to Tailwind, CSS layer fix, theme switch bug#57

Merged
radicalkjax merged 2 commits intomainfrom
refactor
Feb 24, 2026
Merged

refactor(frontend): inline styles to Tailwind, CSS layer fix, theme switch bug#57
radicalkjax merged 2 commits intomainfrom
refactor

Conversation

@radicalkjax
Copy link
Member

Summary

  • Inline styles → Tailwind utilities: Converted all 78 style={{}} attributes to Tailwind classes across 72 files (UI primitives, layout, navigation, views, modals)
  • CSS layer ordering fix: Moved custom CSS reset (* { padding: 0; margin: 0 }) into @layer base — unlayered styles were overriding Tailwind utilities, causing all padding/margin to be stripped
  • Theme switch snap-back fix: Removed currentThemeId from the profile-sync useEffect dependency array in App.tsx — it was causing a snap-back loop when changing themes in Settings
  • Expanded @theme token map: Added missing color, status, ring, border, and shadow tokens (61 → full coverage)
  • Logger abstraction: New lib/logger.ts replacing raw console.* calls
  • Centralized constants: New lib/constants.ts for delay/timeout/interval values
  • Security hardening: Added targetOrigin to all postMessage calls, removed as any casts
  • Component optimization: Extracted static objects/arrays to module scope with as const

Test plan

  • Run pnpm typecheck — passes clean
  • Run pnpm build — builds successfully
  • Launch desktop app (pnpm dev:desktop) — verify dashboard layout renders correctly with proper padding, headers, sidebar spacing
  • Switch themes in Settings → verify no snap-back/flash, immediate clean transition
  • Switch between profiles with different themes → verify theme applies on profile change
  • Test on dark and light themes
  • Verify all views render correctly (Dashboard, Profiles, Stream Manager, Encoder Settings, Output Groups, Stream Targets, Logs, Settings, Integrations, Chat)

… fix CSS layer ordering

                                                            Convert all inline style={{}} attributes to Tailwind utility classes across 72 files (UI primitives, layout, navigation, views, modals). Move custom CSS reset and base styles into @layer base to prevent unlayered styles from overriding Tailwind utilities — fixes visual regression where padding/margin was stripped from all components.

  Also: expand @theme token map, add logger abstraction, centralize magic number constants, harden postMessage with targetOrigin, extract static objects to module scope.
… useThemeStore.getState() inside the effect instead. The effect now only fires when the current profile changes (e.g., switching profiles), not when the theme store updates from user action.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant