Redesign dashboard UI on the current Stellar brand

[miguelnietoa]

Frontend-only redesign of dashboard.stellar.org on the official Stellar brand guidelines. No backend changes.

• https://stellar-dashboard-redesign.vercel.app/
• https://x.com/miguelnietoa_/status/2075243868216324472

Before	After

• Brand design tokens: self-hosted fonts, gold/black palette, dark + light themes with a toggle
• Live network status hero (last ledger, avg close, ops/min, protocol) with a "Copy image" shareable status card
• Fullscreen live view at /live and /testnet/live for big screens; the protocol stat flashes when the version changes
• Fixed a transient wrong "network very slow" status on first paint
• Charts restyled: colorblind-safe palette, hover tooltips, legends, date labels on the 30-day chart
• New: supply distribution bar, fee stats summary with expandable table, known-account names in the ops stream
• / = Mainnet, /testnet = Testnet — no new dependencies, only the active network streams
• Removed muicss and all CDN requests; vendor code-splitting (main chunk 1.4 MB → 273 KB)
• Fixed dead stellarbeat.io link → radar.withobsrvr.com

Verification: 33 tests passing, eslint clean, git diff master -- backend common test empty, production (Docker-style) serving smoke-tested.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​fontsource/​press-start-2p@​5.2.7
	@​fontsource/​lora@​5.2.8
	@​fontsource/​inter@​5.2.8

View full report

[socket-security]

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		License policy violation: npm @fontsource/inter under OFL-1.1 License: OFL-1.1 - The applicable license policy does not permit this license (5) (npm metadata) License: OFL-1.1 - The applicable license policy does not permit this license (5) (package/package.json) License: OFL-1.1 - The applicable license policy does not permit this license (5) (package/LICENSE) From: package-lock.json → npm/@fontsource/inter@5.2.8 ℹ Read more on: This package | This alert | What is a license policy violation? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@fontsource/inter@5.2.8. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		License policy violation: npm @fontsource/lora under OFL-1.1 License: OFL-1.1 - The applicable license policy does not permit this license (5) (npm metadata) License: OFL-1.1 - The applicable license policy does not permit this license (5) (package/package.json) License: OFL-1.1 - The applicable license policy does not permit this license (5) (package/LICENSE) From: package-lock.json → npm/@fontsource/lora@5.2.8 ℹ Read more on: This package | This alert | What is a license policy violation? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@fontsource/lora@5.2.8. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		License policy violation: npm @fontsource/press-start-2p under OFL-1.1 License: OFL-1.1 - The applicable license policy does not permit this license (5) (npm metadata) License: OFL-1.1 - The applicable license policy does not permit this license (5) (package/package.json) License: OFL-1.1 - The applicable license policy does not permit this license (5) (package/LICENSE) From: package-lock.json → npm/@fontsource/press-start-2p@5.2.7 ℹ Read more on: This package | This alert | What is a license policy violation? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@fontsource/press-start-2p@5.2.7. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[Copilot]

Pull request overview

Frontend-only redesign aligning the dashboard UI with Stellar brand guidelines, introducing token-based theming (dark/light) and modernized, card-based layouts while removing muicss and external UI/CDN dependencies.

Changes:

• Introduces design-token driven SCSS architecture (tokens/base/components/charts) and a theme toggle with pre-paint theme initialization.
• Replaces muicss Panels/Tables with new Card UI + refreshed charts/tooltips, and adds new UI features (status share card, live fullscreen mode, supply distribution, fee stats summary).
• Optimizes frontend bundling (Rollup manual chunks) and updates metadata/assets (OG image, favicon).

Reviewed changes

Copilot reviewed 36 out of 40 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
vite.config.js	Adds Rollup manual chunking and makes API proxy target configurable via env var.
package.json	Adds self-hosted font packages and removes muicss dependency.
package-lock.json	Locks new font packages and removes muicss; also changes Prettier’s lock metadata.
index.html	Updates OG/Twitter metadata, favicon links, and adds pre-paint theme script.
frontend/main.jsx	Imports self-hosted brand fonts and updated SCSS entry.
frontend/scss/index.scss	Switches SCSS entrypoint to token/base/component/chart layers.
frontend/scss/_tokens.scss	Adds CSS custom properties for brand colors, typography, and chart palette (dark/light).
frontend/scss/_base.scss	Adds reset + layout primitives (container/grid/sections) and base typography.
frontend/scss/_components.scss	Adds new component styling for header, cards, tables, banners, status hero, skeletons, etc.
frontend/scss/_charts.scss	Adds D3/SVG chart styling and tooltip styling driven by tokens.
frontend/scss/_force.scss	Updates “Force theme” styling but still imports a Google Font.
frontend/scss/_main.scss	Removes legacy muicss-based styling.
frontend/components/ui/Card.jsx	New Card component replacing muicss Panel and standardizing headers/API links.
frontend/components/ui/chartUtils.js	Adds helpers for resolving token palette in D3 + shared tooltip helpers.
frontend/components/ui/statusCard.js	Adds canvas-rendered “shareable status card” + clipboard/download flow.
frontend/components/D3BarChart.jsx	Restyles single-series bar chart with token palette + tooltip + themechange re-render.
frontend/components/D3BarChartNoXLabels.jsx	Restyles stacked bar chart with token palette + tooltip + optional x labels + a11y label.
frontend/components/AppBar.jsx	Rebuilds header/nav, adds network switcher + theme toggle.
frontend/components/App.jsx	Adds route-based network selection, live fullscreen mode, new sections/layout, and new widgets.
frontend/components/NetworkStatus.jsx	Rebuilds hero/status UI, adds ops/min, protocol flash, live view, and share-card.
frontend/components/FeeStats.jsx	Replaces table with summary + capacity meter + expandable full table.
frontend/components/RecentOperations.jsx	Replaces table with scrollable list, adds “fresh” row animation, uses Card.
frontend/components/Incidents.jsx	Replaces muicss panel/list with Card + new incident list layout.
frontend/components/ScheduledMaintenance.jsx	Replaces muicss styling with new banner style.
frontend/components/SupplyDistribution.jsx	Adds new supply distribution bar + tooltip UI.
frontend/components/Chart.jsx	Replaces muicss Panels with Cards, adds skeleton loading + tooltip support.
frontend/components/AmountWidget.jsx	Refactors amount widgets to Card-based rendering with skeleton states.
frontend/components/Lumens.jsx	Updates amount widgets to new name()/apiUrl() pattern.
frontend/components/ListAccounts.jsx	Replaces muicss table with token-styled table and improves loading states.
frontend/components/AccountBadge.jsx	Updates known-account display to show entity name link with title tooltip.
frontend/assets/stellar-logo-white.svg	Adds self-hosted Stellar logo SVG for header/live/share card.
frontend/assets/favicon.svg	Adds self-hosted SVG favicon used by index.html.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.