GoogleCloudPlatform / GoogleCloudPlatform/gcping

Proposal to modernize the web UI with Dark Mode support and responsive layouts

Open
#195 0 comments 0 reactions 0 assignees View on GitHub
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
Image

### Dark Mode Dashboard
Image

---

## 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.