Skip to content

UI overhaul#89

Open
vee1e wants to merge 2 commits intoc2siorg:mainfrom
vee1e:ui-fix
Open

UI overhaul#89
vee1e wants to merge 2 commits intoc2siorg:mainfrom
vee1e:ui-fix

Conversation

@vee1e
Copy link

@vee1e vee1e commented Feb 22, 2026 •
edited
Loading

UI overhaul

Description

Complete frontend overhaul of the GDB-UI webapp with a unified dark/light mode system, bug fixes, and polished aesthetics.

Screenshots

Screenshot 2026-02-22 at 09-52-35 GDB-UI Screenshot 2026-02-22 at 09-52-49 GDB-UI

Theme Engine

  • Implemented a ThemeContext with data-mode attribute on <html> for global dark/light state
  • Dark mode (Obsidian): near-black #0a0a0f background, cyan #7ac3c4 accents, JetBrains Mono
  • Light mode (Bone): warm ivory #f5f0e8 background, sienna #c45d3e accents, JetBrains Mono
  • Unified toggle (sun/moon SVG button in header) syncs UI panels, Monaco editor, terminal, and toast notifications simultaneously
  • Theme persists across page reloads via localStorage

Monaco Editor

  • Custom obsidian and bone editor themes that match the UI backgrounds exactly
  • Cursor styled as a thin line with theme-matching colors (cyan/sienna)
  • Reduced editor height from 60vh to 35vh so bottom panels are visible without scrolling

Terminal

  • Terminal colors now fully theme-aware (dark bg in dark mode, white bg in light mode)
  • Removed macOS-style close/maximize/minimize control buttons
  • Cursor changed to a thin blinking line matching the editor

CSS Overhaul

  • All 19 component CSS files rewritten to use var(--*) theme tokens — zero hardcoded colors remaining
  • Removed duplicate :root/body declarations across 3 files
  • Scoped global img selector to .head .img img
  • Toast notification overrides via [data-mode] CSS selectors for instant theme switching

Header

  • Replaced react-toggle-dark-mode dependency with a custom SVG sun/moon toggle button
  • Logo enlarged to 48px and inverted to black in light mode via CSS filter: invert(1)

Additional context

@vee1e
Copy link
Author

vee1e commented Feb 22, 2026

Let me know if you'd like me to create an updated Figma file for future reference too.

@Shubh942
Copy link
Contributor

Shubh942 commented Feb 28, 2026

Can you please also add video here of updated changes.

@Shubh942
Copy link
Contributor

Shubh942 commented Feb 28, 2026

Also npm checks are failed, make code compatible to it.
Also add new test case as well for new ui components

@Shubh942
Copy link
Contributor

Shubh942 commented Feb 28, 2026

Let me know if you'd like me to create an updated Figma file for future reference too.

Its very nice if you post new figma design. 😃

@vee1e vee1e mentioned this pull request Mar 1, 2026
Open
@vee1e
Copy link
Author

vee1e commented Mar 1, 2026

@Shubh942 can you please approve the workflow?

Also what should be included in the video?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug] : Replace deprecated ReactDOM.render with createRoot in main.jsx (React 18 compatibility)

2 participants

@vee1e @Shubh942