GoogleCloudPlatform / GoogleCloudPlatform/gcping
Proposal to modernize the web UI with Dark Mode support and responsive layouts
- Dominant language
- Go
- Stars
- 475
- Forks
- 69
- PR merge metrics
- No merged PRs in 30d
Description
## Summary
I would like to propose a complete user interface modernization for the `gcping` web dashboard. The goal is to bring the tool's frontend up to date with modern design systems—improving scannability, polishing the typography, and introducing highly-requested quality-of-life features like native Dark Mode toggling.
I have already built and fully tested a working prototype of this interface and would love to collaborate with the maintainers to contribute it to the upstream repository.
---
## Key Enhancements
* **Native Light & Dark Theme Support:** Added a seamless theme toggle in the top navigation bar with persistent preference handling.
* **Modern Material-Insured Aesthetics:** Introduced clean, containerized data tables with polished typography hierarchies, improved micro-interactions, and a subtle modern background gradient.
* **Enhanced Visual Anchors:** Highlighting the `FASTEST` region with a distinct badge and contextual coloring to ensure key latency data is scannable at a single glance.
* **Clean Operational State Controls:** Cleaned up the header layout, moving the action buttons (e.g., `Stop` / `Start`) into prominent, intuitive locations.
* **Fully Responsive Grid:** Re-architected the layout components to ensure fluid adaptability down to mobile viewport sizes.
---
## Preview
### Light Mode Dashboard
### Dark Mode Dashboard
---
## Technical Considerations & Compatibility
* **Tech Stack:** Implemented as a presentation-layer frontend update using semantic HTML, SCSS, modern CSS layout, and lightweight vanilla JavaScript, while continuing to use the project’s existing Parcel and Material component setup.
* **Zero Backend Friction:** This does not require changes to the Go backend architecture, endpoint structures, or ping measurement logic.
* **Next Steps:** I am ready to sign the Google Individual CLA and open a structured Pull Request for code review.
I would highly appreciate your feedback on this design direction.
Contributor guide
Assessment
This issue has not been assessed yet.